refactor: remove duplicated class-name

enhance: remove change of style for multiline headings in editing

enhance: to make heading css more responsive, bind editor's heading class to editor content

adapt textarea to changable font-size

src/main/frontend/components/block.css

@@ -274,48 +274,49 @@
 }
 
 .ls-block h1,
-.editor-inner .h1 {
+.editor-inner .h1.uniline-block {
   font-size: 2em;
   min-height: 1.5em;
 }
 
 .ls-block h2,
-.editor-inner .h2 {
+.editor-inner .h2.uniline-block {
   font-size: 1.5em;
   min-height: 1.5em;
 }
 
 .ls-block h3,
-.editor-inner .h3 {
+.editor-inner .h3.uniline-block {
   font-size: 1.17em;
   min-height: 1.17em;
 }
 
 .ls-block h4,
-.editor-inner .h4 {
+.editor-inner .h4.uniline-block {
   font-size: 1.12em;
   min-height: 1.12em;
 }
 
 .ls-block h5,
-.editor-inner .h5 {
+.editor-inner .h5.uniline-block {
   font-size: 0.83em;
   min-height: 0.83em;
 }
 
 .ls-block h6,
-.editor-inner .h6 {
+.editor-inner .h6.uniline-block {
   font-size: 0.75em;
   min-height: 0.75em;
 }
 
 .ls-block :is(h1, h2, h3, h4, h5, h6),
-.editor-inner :is(.h1, .h2, .h3, .h4, .h5, .h6) {
+.editor-inner .uniline-block:is(.h1, .h2, .h3, .h4, .h5, .h6),
+.editor-inner .multiline-block:is(.h1, .h2, .h3, .h4, .h5, .h6)::first-line {
   font-weight: 600;
 }
 
 .ls-block :is(h1, h2),
-.editor-inner :is(.h1, .h2) {
+.editor-inner .uniline-block:is(.h1, .h2) {
   border-bottom: 1px solid var(--ls-quaternary-background-color);
   margin: 0.4em 0 0;
 }

src/main/frontend/components/editor.cljs

@@ -448,19 +448,23 @@
 
 (defn get-editor-heading-class [content]
   (let [content (if content (str content) "")]
+    ;; as the function is binding to the editor content, optimization is welcome
     (str
-     (if (string/includes? content "\n") "multiline-block" "uniline-block")
+     (if (or (> (.-length content) 1000)
+             (string/includes? content "\n"))
+       "multiline-block"
+       "uniline-block")
      " "
-     (cond
+     (cond ;; TODO: unfold to hierarcal if conditions
        (starts-with? content "# ") "h1"
        (starts-with? content "## ") "h2"
        (starts-with? content "### ") "h3"
        (starts-with? content "#### ") "h4"
        (starts-with? content "##### ") "h5"
        (starts-with? content "###### ") "h6"
-       (starts-with? content "TODO ") "todo-block"
-       (starts-with? content "DOING ") "doing-block"
-       (starts-with? content "DONE ") "done-block"
+      ;;  (starts-with? content "TODO ") "todo-block"
+      ;;  (starts-with? content "DOING ") "doing-block"
+      ;;  (starts-with? content "DONE ") "done-block"
        (and (starts-with? content "---\n") (.endsWith content "\n---")) "page-properties"
        :else "normal-block"))))
 
@@ -565,16 +569,12 @@
   lifecycle/lifecycle
   [state {:keys [on-hide node format block block-parent-id heading-level]
           :as   option} id config]
-  (let [content (state/get-edit-content)
-        heading-level (get state ::heading-level)]
-    [:div.editor-inner {:class (str
-                                (if block "block-editor" "non-block-editor")
-                                " "
-                                (get-editor-heading-class content))}
+  (let [content (state/sub-edit-content)]
+    [:div.editor-inner {:class (if block "block-editor" "non-block-editor")}
      (when config/mobile? (mobile-bar state id))
      (ui/ls-textarea
       {:id                id
-       :cacheMeasurements true
+       :cacheMeasurements false
        :default-value     (or content "")
        :minRows           (if (state/enable-grammarly?) 2 1)
        :on-click          (editor-handler/editor-on-click! id)

src/main/frontend/state.cljs

@@ -536,6 +536,10 @@
   []
   (get (:editor/content @state) (get-edit-input-id)))
 
+(defn sub-edit-content
+  []
+  (get (sub :editor/content) (get-edit-input-id)))
+
 (defn append-current-edit-content!
   [append-text]
   (when-not (string/blank? append-text)