From d68cbce311e301a9f62d65e71e881fbec28c3a7b Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Wed, 20 May 2026 03:09:53 +0800 Subject: [PATCH] enhance(ux): able to edit #Comments title --- src/main/frontend/components/block.css | 46 ++++++++++++++++++- .../frontend/components/block/comments.cljs | 42 ++++++++++++++++- .../components/block/comments_model.cljs | 7 +++ src/main/frontend/handler/comments.cljs | 5 ++ src/test/frontend/handler/comments_test.cljs | 17 +++++++ 5 files changed, 115 insertions(+), 2 deletions(-) diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css index 0e07f541f3..3f061269ae 100644 --- a/src/main/frontend/components/block.css +++ b/src/main/frontend/components/block.css @@ -263,6 +263,8 @@ min-height: 30px; padding: 5px 10px; font-size: 12px; + --ls-comments-title-font-size: 12px; + --ls-comments-title-font-weight: 600; color: var(--ls-secondary-text-color); } @@ -279,8 +281,50 @@ } .ls-comments-label { - font-weight: 600; + padding: 0; + border: 0; + background: transparent; + font-weight: var(--ls-comments-title-font-weight); color: var(--ls-primary-text-color); + cursor: text; + font-size: var(--ls-comments-title-font-size); + line-height: inherit; +} + +.ls-comments-label:hover { + text-decoration: underline; + text-underline-offset: 2px; +} + +.ls-comments-title-editor { + flex: 1; + min-width: 0; + color: var(--ls-primary-text-color); + font-size: var(--ls-comments-title-font-size); + font-weight: var(--ls-comments-title-font-weight); + line-height: inherit; +} + +.ls-comments-title-editor .block-content-or-editor-wrap, +.ls-comments-title-editor .block-content-or-editor-inner { + min-height: 0; + padding: 0; +} + +.ls-comments-title-editor .block-row { + min-height: 0; +} + +.ls-comments-title-editor .editor-wrapper, +.ls-comments-title-editor .editor-inner, +.ls-comments-title-editor .block-editor, +.ls-comments-title-editor textarea, +.ls-comments-title-editor .editor-inner .uniline-block { + min-height: 0; + color: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; } .ls-comments-count, diff --git a/src/main/frontend/components/block/comments.cljs b/src/main/frontend/components/block/comments.cljs index b5e2c6a1e6..524d571271 100644 --- a/src/main/frontend/components/block/comments.cljs +++ b/src/main/frontend/components/block/comments.cljs @@ -417,10 +417,50 @@ (reference {} uuid) (string/trim (or (:block/title target) "")))]))]))) +(defn- comments-area-title-editing? + [config block] + (let [block-uuid (:block/uuid block) + container-id (:container-id config) + editing-in-container? (state/sub-editing? [container-id block-uuid]) + editing-in-unknown-container? (state/sub-editing? [:unknown-container block-uuid])] + (boolean + (and block-uuid + (or editing-in-container? + editing-in-unknown-container?))))) + +(defn- comments-area-title-view + [config block editing? *hide-block-refs? *show-query? {:keys [block-content-or-editor]}] + (let [block-uuid (:block/uuid block) + edit-input-id (str "edit-block-" block-uuid)] + (if (and editing? block-content-or-editor) + [:div.ls-comments-title-editor + (block-content-or-editor + (assoc config :table-block-title? true) + (merge block (block/parse-title-and-body block-uuid + (get block :block/format :markdown) + (:block/title block))) + {:edit-input-id edit-input-id + :block-id block-uuid + :edit? true + :refs-count nil + :*hide-block-refs? *hide-block-refs? + :hide-block-refs-count? true + :*show-query? *show-query?})] + [:button.ls-comments-label + {:type "button" + :title (t :editor/click-to-edit) + :aria-label (t :editor/click-to-edit) + :on-pointer-down util/stop + :on-click (fn [e] + (util/stop e) + (comments-handler/edit-comments-area-title! block (:container-id config)))} + (comments-model/comments-area-title block)]))) + (rum/defc comments-area-view [config block children collapsed? *hide-block-refs? *show-query? renderers {:keys [focus-editor? inline?]}] (let [*comments-list-ref (hooks/use-ref nil) [targets-open? set-targets-open!] (hooks/use-state false) + title-editing? (comments-area-title-editing? config block) render-token (comments-model/comments-render-token children) summary (comments-model/comments-summary children) count (count children)] @@ -451,7 +491,7 @@ (comments-model/collapsed-comments-label summary)] [:<> [:div.ls-comments-header - [:span.ls-comments-label (t :block.comments/label)] + (comments-area-title-view config block title-editing? *hide-block-refs? *show-query? renderers) [:span.ls-comments-count count] (when (comments-model/comment-thread-targets-toggle-visible? block) [:button.ls-comments-targets-toggle diff --git a/src/main/frontend/components/block/comments_model.cljs b/src/main/frontend/components/block/comments_model.cljs index a5deaa353d..76f69f524a 100644 --- a/src/main/frontend/components/block/comments_model.cljs +++ b/src/main/frontend/components/block/comments_model.cljs @@ -200,6 +200,13 @@ (:latest-author summary)) (t :block.comments/label))) +(defn comments-area-title + [comments-area] + (or (some-> (:block/title comments-area) + string/trim + not-empty) + (t :block.comments/label))) + (defn- same-local-day? [^js a ^js b] (and (= (.getFullYear a) (.getFullYear b)) diff --git a/src/main/frontend/handler/comments.cljs b/src/main/frontend/handler/comments.cljs index c829d6fe2d..9bfb520155 100644 --- a/src/main/frontend/handler/comments.cljs +++ b/src/main/frontend/handler/comments.cljs @@ -239,6 +239,11 @@ (when-let [uuid (:block/uuid (comments-area-entity comments-area))] (editor-handler/expand-block! uuid))) +(defn edit-comments-area-title! + [comments-area container-id] + (when-let [block (comments-area-entity comments-area)] + (editor-handler/edit-block! block :max {:container-id (or container-id :unknown-container)}))) + (defn- selected-block-entities [] (keep #(db/entity [:block/uuid %]) (state/get-selection-block-ids))) diff --git a/src/test/frontend/handler/comments_test.cljs b/src/test/frontend/handler/comments_test.cljs index 79a7f65e99..dc2f33d211 100644 --- a/src/test/frontend/handler/comments_test.cljs +++ b/src/test/frontend/handler/comments_test.cljs @@ -96,3 +96,20 @@ (comments-handler/reveal-comments-area! {:block/uuid #uuid "22222222-2222-2222-2222-222222222222"}) (is (empty? @expanded)))))) + +(deftest edit-comments-area-title-edits-comments-block + (let [comments-uuid #uuid "22222222-2222-2222-2222-222222222222" + comments-area {:db/id 2 + :block/uuid comments-uuid + :block/title "Comments" + :block/tags [{:db/ident comments-model/comments-tag-ident}]} + edited (atom nil)] + (with-redefs [db/entity (fn [lookup] + (case lookup + [:block/uuid comments-uuid] comments-area + nil)) + editor-handler/edit-block! (fn [block pos opts] + (reset! edited [block pos opts]))] + (comments-handler/edit-comments-area-title! comments-area :main) + (is (= [comments-area :max {:container-id :main}] + @edited)))))