fix: block marker/priority is not displayed in references

Close #1377
Close #1601
Close #1871

resources/css/common.css

@@ -4,7 +4,7 @@
   --ls-page-text-size: 1em;
   --ls-page-title-size: 36px;
   --ls-font-family: 'Inter';
-  --ls-main-content-max-width: 700px;
+  --ls-main-content-max-width: 740px;
   --ls-border-radius-low: 4px;
   --ls-border-radius-medium: 8px;
 }
@@ -727,6 +727,11 @@ a.fade-link:hover {
   height: 20px;
 }
 
+.svg-small svg {
+    transform: scale(0.6);
+    display: inline;
+}
+
 /* < > buttons */
 
 a.navigation {
@@ -759,6 +764,7 @@ mark {
 
 .block-ref {
   padding: 2px 5px;
+  display: inline;
 }
 
 .block-ref .block-ref {

src/main/frontend/components/block.cljs

@@ -532,25 +532,21 @@
                {:block block})
               (route-handler/redirect! {:to          :page
                                         :path-params {:name id}})))}
-
          (let [title (let [title (:block/title block)]
-                       (if (empty? title)
-                         ;; display the content
-                         [:div.block-ref
-                          (block-content config block nil (:block/uuid block) (:slide? config))]
-                         (->elem
-                          :span.block-ref
-                          (map-inline config title))))]
+                       [:span.block-ref
+                        (block-content (assoc config :block-ref? true)
+                                       block nil (:block/uuid block)
+                                       (:slide? config))])]
            (ui/tippy {:html [:div.tippy-wrapper
-                             {:style {:width 780
+                             {:style {:width 735
                                       :text-align "left"}}
                              (block-container config block)]
                       :interactive true}
-            (if label
-              (->elem
-               :span.block-ref
-               (map-inline config label))
-              title)))]
+                     (if label
+                       (->elem
+                        :span.block-ref
+                        (map-inline config label))
+                       title)))]
         [:span.warning.mr-1 {:title "Block ref invalid"}
          (util/format "((%s))" id)]))))
 
@@ -1278,7 +1274,7 @@
                                2))
         elem (if heading-level
                (keyword (str "h" heading-level))
-               :div)]
+               :div.inline)]
     (->elem
      elem
      (merge
@@ -1472,6 +1468,7 @@
 (rum/defc block-content < rum/reactive
   [config {:block/keys [uuid title body meta content marker dummy? page format repo children pre-block? properties idx container block-refs-count scheduled deadline repeated?] :as block} edit-input-id block-id slide?]
   (let [collapsed? (get properties :collapsed)
+        block-ref-with-title? (and (:block-ref? config) (seq title))
         dragging? (rum/react *dragging?)
         content (if (string? content) (string/trim content) "")
         mouse-down-key (if (util/ios?)
@@ -1483,12 +1480,17 @@
                                 (block-content-on-mouse-down e block block-id properties content format edit-input-id))
                :on-drag-over  (fn [event] (block-content-on-drag-over event uuid))
                :on-drag-leave (fn [_event] (block-content-on-drag-leave uuid))
-               :on-drop       (fn [event] (block-content-on-drop event block uuid))}]
-    [:div.flex.relative {:style {:width "100%"}}
-     [:div.flex-1.flex-col.relative.block-content
-      (cond-> {:id (str "block-content-" uuid)}
-        (not slide?)
-        (merge attrs))
+               :on-drop       (fn [event] (block-content-on-drop event block uuid))
+               :style {:width "100%"}}]
+    [:div.block-content.inline
+     (cond-> {:id (str "block-content-" uuid)}
+       (not slide?)
+       (merge attrs))
+
+     [:span
+     ;; .flex.relative {:style {:width "100%"}}
+     [:span
+      ;; .flex-1.flex-col.relative.block-content
 
       (cond
         (seq title)
@@ -1514,47 +1516,17 @@
                  (not (:slide? config)))
         (properties-cp config block))
 
-      (when (seq body)
-        (do
-          [:div.block-body {:style {:display (if (and collapsed? (seq title)) "none" "")}}
-          ;; TODO: consistent id instead of the idx (since it could be changed later)
-           (let [body (block/trim-break-lines! (:block/body block))]
-             (for [[idx child] (medley/indexed body)]
-               (when-let [block (markup-element-cp config child)]
-                 (rum/with-key (block-child block)
-                   (str uuid "-" idx)))))]))]
-     (when (and block-refs-count (> block-refs-count 0))
-       [:div
-        [:a.open-block-ref-link.bg-base-2
-         {:title "Open block references"
-          :style {:margin-top -1}
-          :on-click (fn []
-                      (state/sidebar-add-block!
-                       (state/get-current-repo)
-                       (:db/id block)
-                       :block-ref
-                       {:block block}))}
-         block-refs-count]])
-
-     (when (and (= marker "DONE")
-                (state/enable-timetracking?))
-       (let [start-time (or
-                         (get properties :now)
-                         (get properties :doing)
-                         (get properties :in-progress)
-                         (get properties :later)
-                         (get properties :todo))
-             finish-time (get properties :done)]
-         (when (and start-time finish-time (> finish-time start-time))
-           [:div.text-sm.absolute.time-spent {:style {:top 0
-                                                      :right 0
-                                                      :padding-left 2}
-                                              :title (str (date/int->local-time start-time) " ~ " (date/int->local-time finish-time))}
-            [:span.opacity-70
-             (utils/timeConversion (- finish-time start-time))]])))]))
+      (when (and (not block-ref-with-title?) (seq body))
+        [:div.block-body {:style {:display (if (and collapsed? (seq title)) "none" "")}}
+         ;; TODO: consistent id instead of the idx (since it could be changed later)
+         (let [body (block/trim-break-lines! (:block/body block))]
+           (for [[idx child] (medley/indexed body)]
+             (when-let [block (markup-element-cp config child)]
+               (rum/with-key (block-child block)
+                 (str uuid "-" idx)))))])]]]))
 
 (rum/defc block-content-or-editor < rum/reactive
-  [config {:block/keys [uuid title body meta content dummy? page format repo children pre-block? idx] :as block} edit-input-id block-id slide? heading-level]
+  [config {:block/keys [uuid title body meta content dummy? page format repo children marker properties block-refs-count pre-block? idx] :as block} edit-input-id block-id slide? heading-level]
   (let [editor-box (get config :editor-box)
         edit? (state/sub [:editor/editing? edit-input-id])]
     (if (and edit? editor-box)
@@ -1570,7 +1542,46 @@
                                  (editor-handler/select-block! uuid)))}
                    edit-input-id
                    config)]
-      (block-content config block edit-input-id block-id slide?))))
+      [:div.flex.flex-row.block-content-wrapper
+       [:div.flex.flex-1
+        (block-content config block edit-input-id block-id slide?)]
+       [:div.flex.flex-row
+        (when (:embed? config)
+          [:a.opacity-30.hover:opacity-100.svg-small.inline
+           {:on-mouse-down (fn [e]
+                             (prn "stop e")
+                             (util/stop e)
+                             (when-let [block (:block config)]
+                               (editor-handler/edit-block! block :max (:block/format block) (:block/uuid block))))}
+           svg/edit])
+
+        (when (and (= (:block/marker block) "DONE")
+                   (state/enable-timetracking?))
+          (let [start-time (or
+                            (get properties :now)
+                            (get properties :doing)
+                            (get properties :in-progress)
+                            (get properties :later)
+                            (get properties :todo))
+                finish-time (get properties :done)]
+            (when (and start-time finish-time (> finish-time start-time))
+              [:div.text-sm.time-spent.ml-1 {:title (str (date/int->local-time start-time) " ~ " (date/int->local-time finish-time))
+                                              :style {:padding-top 3}}
+               [:a.opacity-30.hover:opacity-100
+                (utils/timeConversion (- finish-time start-time))]])))
+
+        (when (and block-refs-count (> block-refs-count 0))
+          [:div
+           [:a.open-block-ref-link.bg-base-2.text-sm.ml-2
+            {:title "Open block references"
+             :style {:margin-top -1}
+             :on-click (fn []
+                         (state/sidebar-add-block!
+                          (state/get-current-repo)
+                          (:db/id block)
+                          :block-ref
+                          {:block block}))}
+            block-refs-count]])]])))
 
 (rum/defc dnd-separator-wrapper < rum/reactive
   [block slide? top?]

src/main/frontend/components/block.css

@@ -1,6 +1,10 @@
 .blocks-container {
 }
 
+.block-content-wrapper {
+    width: 100%;
+}
+
 .block-content {
   min-height: 24px;
   max-width: 100%;
@@ -86,11 +90,10 @@
 }
 
 .open-block-ref-link {
-  @apply py-0 px-1 rounded opacity-50 hover:opacity-100;
-  font-size: 12px;
-  line-height: 1em;
-  position: relative;
-  right: -4px;
+  @apply opacity-30 hover:opacity-100;
+  background-color: var(--ls-page-properties-background-color);
+  padding: 1px 4px;
+  border-radius: 2px;
 }
 
 .block-body {

src/main/frontend/components/svg.cljs

@@ -291,7 +291,6 @@
      {:d
       "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"}]]))
 
-
 (rum/defc pinned
   []
   [:svg.h-8.w-8.pinned
@@ -529,3 +528,13 @@
      "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
      :clip-rule "evenodd"
      :fill-rule "evenodd"}]])
+
+(def edit
+  [:svg.h-6.w-6
+   {:stroke "currentColor", :viewbox "0 0 24 24", :fill "none"}
+   [:path
+    {:d
+     "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z",
+     :stroke-width "2",
+     :stroke-linejoin "round",
+     :stroke-linecap "round"}]])

src/main/frontend/util.cljc

@@ -292,29 +292,29 @@
 ;; Caret
 #?(:cljs
    (defn caret-range [node]
-     (let [doc (or (gobj/get node "ownerDocument")
-                   (gobj/get node "document"))
-           win (or (gobj/get doc "defaultView")
-                   (gobj/get doc "parentWindow"))
-           selection (.getSelection win)]
-       (if selection
-         (let [range-count (gobj/get selection "rangeCount")]
-           (when (> range-count 0)
-             (let [range (-> (.getSelection win)
-                             (.getRangeAt 0))
-                   pre-caret-range (.cloneRange range)]
-               (.selectNodeContents pre-caret-range node)
-               (.setEnd pre-caret-range
-                        (gobj/get range "endContainer")
-                        (gobj/get range "endOffset"))
-               (.toString pre-caret-range))))
-         (when-let [selection (gobj/get doc "selection")]
-           (when (not= "Control" (gobj/get selection "type"))
-             (let [text-range (.createRange selection)
-                   pre-caret-text-range (.createTextRange (gobj/get doc "body"))]
-               (.moveToElementText pre-caret-text-range node)
-               (.setEndPoint pre-caret-text-range "EndToEnd" text-range)
-               (gobj/get pre-caret-text-range "text"))))))))
+     (when-let [doc (or (gobj/get node "ownerDocument")
+                        (gobj/get node "document"))]
+       (let [win (or (gobj/get doc "defaultView")
+                     (gobj/get doc "parentWindow"))
+             selection (.getSelection win)]
+         (if selection
+           (let [range-count (gobj/get selection "rangeCount")]
+             (when (> range-count 0)
+               (let [range (-> (.getSelection win)
+                               (.getRangeAt 0))
+                     pre-caret-range (.cloneRange range)]
+                 (.selectNodeContents pre-caret-range node)
+                 (.setEnd pre-caret-range
+                          (gobj/get range "endContainer")
+                          (gobj/get range "endOffset"))
+                 (.toString pre-caret-range))))
+           (when-let [selection (gobj/get doc "selection")]
+             (when (not= "Control" (gobj/get selection "type"))
+               (let [text-range (.createRange selection)
+                     pre-caret-text-range (.createTextRange (gobj/get doc "body"))]
+                 (.moveToElementText pre-caret-text-range node)
+                 (.setEndPoint pre-caret-text-range "EndToEnd" text-range)
+                 (gobj/get pre-caret-text-range "text")))))))))
 
 #?(:cljs
    (defn set-caret-pos!