Add block highlight

web/src/main/frontend/components/editor.cljs

@@ -716,9 +716,7 @@
                                          (:heading/level heading))]
                          (let [cache [(:heading/uuid heading) value]]
                            (when (not= @*last-edit-heading cache)
-                             (when (not= (string/trim new-value)
-                                         (string/trim (:heading/content heading)))
-                               (handler/save-heading-if-changed! heading new-value))
+                             (handler/save-heading-if-changed! heading new-value)
                              (reset! *last-edit-heading cache)))))
                      (clear-when-saved!))
                    state)}

web/src/main/frontend/components/hiccup.cljs

@@ -479,9 +479,10 @@
     (when-not lock?
       [:div.ls-heading-parent.flex-1
        {:id heading-id
+        :class (str uuid
+                    (if dummy? " dummy"))
         :headingid (str uuid)
-        :level level
-        :class (if dummy? "dummy")}
+        :level level}
        ;; control
        [:div.flex.flex-row
         {:style {:cursor "pointer"}
@@ -502,7 +503,9 @@
                        :heading-id uuid
                        :heading-parent-id heading-id
                        :format format
-                       :dummy? dummy?}
+                       :dummy? dummy?
+                       :on-hide (fn [value]
+                                  (handler/highlight-heading! uuid))}
                       edit-input-id)
           [:div.flex-1.heading-body
            {:on-click (fn [e]
@@ -511,6 +514,7 @@
                                         (util/input? target)
                                         (and (util/sup? target)
                                              (d/has-class? target "fn")))
+                            (handler/unhighlight-heading!)
                             (util/stop e)
                             (handler/reset-cursor-range! (gdom/getElement heading-id))
                             (state/set-editing!
@@ -532,7 +536,7 @@
   (case (:heading/marker heading)
     (list "DOING" "IN-PROGRESS" "TODO" "WAIT" "WAITING")
     (ui/checkbox {:class class
-                  :style {:margin-top -2}
+                  :style {:margin-top -5}
                   :on-change (fn [_e]
                                ;; FIXME: Log timestamp
                                (handler/check heading))})
@@ -540,7 +544,7 @@
     "DONE"
     (ui/checkbox {:checked true
                   :class (str class " checked")
-                  :style {:margin-top -2}
+                  :style {:margin-top -5}
                   :on-change (fn [_e]
                                ;; FIXME: Log timestamp
                                (handler/uncheck heading))})

web/src/main/frontend/components/sidebar.cljs

@@ -246,7 +246,9 @@
         pulling? (= :pulling status)
         theme (state/sub :ui/theme)
         white? (= "white" (state/sub :ui/theme))]
-    [:div {:class (if white? "white-theme" "dark-theme")}
+    [:div {:class (if white? "white-theme" "dark-theme")
+           :on-click (fn []
+                       (handler/unhighlight-heading!))}
      [:div.h-screen.flex.overflow-hidden.bg-base-3
       [:div.md:hidden
        [:div.fixed.inset-0.z-30.bg-gray-600.opacity-0.pointer-events-none.transition-opacity.ease-linear.duration-300

web/src/main/frontend/handler.cljs

@@ -18,6 +18,7 @@
             [goog.crypt.base64 :as b64]
             [goog.object :as gobj]
             [goog.dom :as gdom]
+            [goog.dom.classes :as gdom-classes]
             [rum.core :as rum]
             [datascript.core :as d]
             [dommy.core :as dom]
@@ -793,6 +794,20 @@
     (assoc heading :heading/meta
            (:heading/meta (db/entity [:heading/uuid (:heading/uuid heading)])))))
 
+(defn highlight-heading!
+  [heading-uuid]
+  (let [headings (array-seq (js/document.getElementsByClassName (str heading-uuid)))]
+    (doseq [heading headings]
+      (dom/add-class! heading "block-highlight"))))
+
+(defn unhighlight-heading!
+  []
+  (let [headings (some->> (array-seq (js/document.getElementsByClassName "block-highlight"))
+                          (repeat 2)
+                          (apply concat))]
+    (doseq [heading headings]
+      (gdom-classes/remove heading "block-highlight"))))
+
 (defn save-heading-if-changed!
   [{:heading/keys [uuid content meta file page dummy? format] :as heading} value]
   (let [repo (state/get-current-repo)