feat: auto heading

resources/css/common.css

@@ -510,7 +510,7 @@ i.ti {
 }
 
 .to-heading-button {
-  @apply px-1 !important;
+  @apply px-1 text-lg !important;
 }
 
 /** endregion **/

resources/css/tabler-extension.css

@@ -29,73 +29,81 @@
 }
 
 .tie-app-feature::before {
-  content: '\ea01';
+  content: "\ea01";
 }
 
 .tie-block::before {
-  content: '\ea02';
+  content: "\ea02";
 }
 
 .tie-block-search::before {
-  content: '\ea03';
+  content: "\ea03";
 }
 
 .tie-connector::before {
-  content: '\ea04';
+  content: "\ea04";
+}
+
+.tie-h-auto::before {
+  content: "\ea05";
+}
+
+.tie-heading-off::before {
+  content: "\ea06";
 }
 
 .tie-new-block::before {
-  content: '\ea05';
+  content: "\ea07";
 }
 
 .tie-new-page::before {
-  content: '\ea06';
+  content: "\ea08";
 }
 
 .tie-new-whiteboard::before {
-  content: '\ea07';
+  content: "\ea09";
 }
 
 .tie-new-whiteboard-element::before {
-  content: '\ea08';
+  content: "\ea0a";
 }
 
 .tie-object-compact::before {
-  content: '\ea09';
+  content: "\ea0b";
 }
 
 .tie-object-expanded::before {
-  content: '\ea0a';
+  content: "\ea0c";
 }
 
 .tie-page::before {
-  content: '\ea0b';
+  content: "\ea0d";
 }
 
 .tie-page-search::before {
-  content: '\ea0c';
+  content: "\ea0e";
 }
 
 .tie-references-hide::before {
-  content: '\ea0d';
+  content: "\ea0f";
 }
 
 .tie-references-show::before {
-  content: '\ea0e';
+  content: "\ea10";
 }
 
 .tie-select-cursor::before {
-  content: '\ea0f';
+  content: "\ea11";
 }
 
 .tie-text::before {
-  content: '\ea10';
+  content: "\ea12";
 }
 
 .tie-whiteboard::before {
-  content: '\ea11';
+  content: "\ea13";
 }
 
 .tie-whiteboard-element::before {
-  content: '\ea12';
+  content: "\ea14";
 }

src/main/frontend/components/content.cljs

@@ -175,14 +175,27 @@
           [:div.flex.flex-row.justify-between.flex-1.px-1
            (for [i (range 1 7)]
              (ui/button
-              (str "H" i)
+              ""
+              :icon (str "h-" i)
               :class "to-heading-button"
               :on-click (fn [_e]
                           (editor-handler/set-heading! block-id format i))
               :intent "link"
               :small? true))
            (ui/button
-            "H-"
+            ""
+            :icon "h-auto"
+            :icon-props {:extension? true}
+            :class "to-heading-button"
+            :title (t :auto-heading)
+            :on-click (fn [_e]
+                        (editor-handler/set-heading! block-id :org true))
+            :intent "link"
+            :small? true)
+           (ui/button
+            ""
+            :icon "heading-off"
+            :icon-props {:extension? true}
             :class "to-heading-button"
             :title (t :remove-heading)
             :on-click (fn [_e]

src/main/frontend/dicts.cljc

@@ -338,6 +338,7 @@
         :dark "Dark"
         :remove-background "Remove background"
         :remove-heading "Remove heading"
+        :auto-heading "Auto heading"
         :open "Open"
         :open-a-directory "Open a local directory"
         :user/delete-account "Delete account"

src/main/frontend/ui.cljs

@@ -59,7 +59,8 @@
    "yellow"
    "green"
    "blue"
-   "purple"])
+   "purple"
+   "pink"])
 
 (rum/defc ls-textarea
   < rum/reactive
@@ -949,7 +950,7 @@
               (f (merge {:size 18} (r/map-keys->camel-case opts)))])))))))
 
 (defn button
-  [text & {:keys [background href class intent on-click small? large? title icon]
+  [text & {:keys [background href class intent on-click small? large? title icon icon-props]
            :or   {small? false large? false}
            :as   option}]
   (let [klass (when-not intent ".bg-indigo-600.hover:bg-indigo-700.focus:border-indigo-700.active:bg-indigo-700.text-center")
@@ -966,7 +967,7 @@
         {:on-click (fn []
                      (util/open-url href)
                      (when (fn? on-click) (on-click)))}))
-     (when icon (frontend.ui/icon icon {:class "mr-1"}))
+     (when icon (frontend.ui/icon icon (merge icon-props {:class (when-not (empty? text) "mr-1")})))
      text]))
 
 (rum/defc type-icon