enhance: headings can be customized using css

src/main/frontend/components/block.css

@@ -232,44 +232,40 @@
   margin-left: auto;
 }
 
-.ls-block h1 {
-  font-size: 2em;
-  margin: 0.67em 0
+.ls-block h1, .editor-inner .h1 {
+    font-size: 2em;
 }
 
-.ls-block h2 {
-  font-size: 1.5em;
-  margin: 0.75em 0
+.ls-block h2, .editor-inner .h2 {
+    font-size: 1.5em;
 }
 
-.ls-block h3 {
-  font-size: 1.17em;
-  margin: 0.83em 0
+.ls-block h3, .editor-inner .h3 {
+    font-size: 1.17em;
 }
 
-.ls-block h4 {
-  margin: 1.12em 0
+.ls-block h4, .editor-inner .h4 {
+    font-size: 1.12em;
 }
 
-.ls-block h5 {
+.ls-block h5, .editor-inner .h5 {
   font-size: 0.83em;
-  margin: 1.5em 0
 }
 
-.ls-block h6 {
+.ls-block h6, .editor-inner .h6 {
   font-size: 0.75em;
-  margin: 1.67em 0
 }
 
-.ls-block h1,
-.ls-block h2,
-.ls-block h3,
-.ls-block h4,
-.ls-block h5,
-.ls-block h6 {
+.ls-block :is(h1,h2,h3,h4,h5,h6), .editor-inner .h1, .editor-inner .h2, .editor-inner .h3,
+.editor-inner .h4, .editor-inner .h5, .editor-inner .h6 {
   font-weight: 600
 }
 
+.ls-block :is(h1, h2), .editor-inner .h1, .editor-inner .h2 {
+    border-bottom: 1px solid var(--ls-quaternary-background-color);
+    margin: 0.4em 0 0;
+}
+
 .color-level {
   background-color: var(--color-level-1);
 }

src/main/frontend/components/editor.cljs

@@ -369,18 +369,11 @@
     (set-up-key-down! repo state format)
     (set-up-key-up! state input input-id search-timeout)))
 
-(defn- get-editor-style
+(defn- get-editor-heading-class
   [content heading-level]
   (if (string/includes? content "\n")
     nil
-    (case heading-level
-      1 {:font-size "2em" :font-weight "bold" :margin "0.67em 0"}
-      2 {:font-size "1.5em" :font-weight "bold" :margin "0.75em 0"}
-      3 {:font-size "1.17em" :font-weight "bold" :margin "0.83em 0"}
-      4 {:font-weight "bold" :margin "1.12em 0"}
-      5 {:font-size "0.83em" :font-weight "bold" :margin "1.5em 0"}
-      6 {:font-size "0.75em" :font-weight "bold" :margin "1.67em 0"}
-      nil)))
+    (if heading-level (str "h" heading-level))))
 
 
 (rum/defc mock-textarea
@@ -436,7 +429,7 @@
        :on-change         (editor-handler/editor-on-change! block id search-timeout)
        :on-paste          (editor-handler/editor-on-paste! id)
        :auto-focus        false
-       :style             (get-editor-style content heading-level)})
+       :class             (get-editor-heading-class content heading-level)})
 
      (mock-textarea)