enhance: show tags when editing a block

src/main/frontend/common.css

@@ -61,7 +61,7 @@ html[data-theme='dark'] {
   --ls-link-text-hover-color: var(--ls-active-secondary-color);
   --ls-link-ref-text-color: var(--ls-link-text-color);
   --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
-  --ls-tag-text-color: var(--ls-link-text-color);
+  --ls-tag-text-color: var(--ls-secondary-text-color);
   --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
   --ls-slide-background-color: var(--ls-primary-background-color);
   --ls-block-bullet-border-color: #0f4958;
@@ -139,7 +139,7 @@ html[data-theme='light'] {
   --ls-link-text-hover-color: #1a537c;
   --ls-link-ref-text-color: var(--ls-link-text-color);
   --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
-  --ls-tag-text-color: var(--ls-link-ref-text-color);
+  --ls-tag-text-color: var(--ls-secondary-text-color);
   --ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color);
   --ls-slide-background-color: #fff;
   --ls-block-bullet-border-color: #dedede;
@@ -675,14 +675,14 @@ img.small {
 }
 
 a.tag {
-  font-size: 0.9em;
+  @apply text-sm;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   color: var(--ls-tag-text-color, #045591);
   opacity: var(--ls-tag-text-opacity, 0.8);
-  padding-right: 1.125rem;
+  padding-left: 1.125rem;
 }
 
 a.tag:hover {

src/main/frontend/components/block.cljs

@@ -599,7 +599,7 @@
                        (util/trim-safe page-name))
                _ (when-not page-entity (js/console.warn "page-inner's page-entity is nil, given page-name: " page-name
                                                         " page-name-in-block: " page-name-in-block))]
-           (if tag? (str "#" s) s))))
+           s)))
 
      (let [repo (state/get-current-repo)
            block-id (:block/uuid config)
@@ -607,16 +607,16 @@
            tags-id (:block/uuid (db/entity [:block/name "tags"]))]
        (when (and block tag? @*hover? (config/db-based-graph? repo))
          [:a.close.fade-in
-          {:class "absolute top-0 right-0"
+          {:class "absolute left-0"
+           :style {:top "0.15rem"}
            :title "Remove this tag"
            :on-mouse-down
            (fn [e]
              (util/stop e)
              (property-handler/delete-property-value! repo block
                                                       tags-id
-                                                      (:block/uuid page-entity))
-             (prn "remove this tag"))}
-          (ui/icon "x")]))]))
+                                                      (:block/uuid page-entity)))}
+          (ui/icon "x" {:size 15})]))]))
 
 (rum/defc page-preview-trigger
   [{:keys [children sidebar? tippy-position tippy-distance fixed-position? open? manual?] :as config} page-name]
@@ -2280,16 +2280,13 @@
                (rum/with-key (block-child block)
                  (str uuid "-" idx)))))]))))
 
-(rum/defc named-block
+(rum/defc tags
   [config block]
-  [:div.flex.flex-1.flex-row.flex-wrap.items-center
-   (page-cp config block)
-   (when (:block/tags block)
-     [:div.flex.flex-1.flex-row.flex-wrap.items-center.ml-4
-      (for [tag (:block/tags block)]
-        (page-cp (assoc config
-                        :tag? true
-                        :disable-preview? true) tag))])])
+  [:div.flex.flex-row.flex-wrap.items-center.ml-4.gap-1
+   (for [tag (:block/tags block)]
+     (page-cp (assoc config
+                     :tag? true
+                     :disable-preview? true) tag))])
 
 (rum/defc block-content < rum/reactive
   [config {:block/keys [uuid content properties scheduled deadline format pre-block?] :as block} edit-input-id block-id slide? selected?]
@@ -2345,8 +2342,11 @@
        (when-not plugin-slotted?
          [:div.flex-1.w-full
           (cond
-            (:block/original-name block)
-            (named-block config block)
+            (:block/name block)
+            [:div.flex.flex-1.flex-row.flex-wrap.justify-between.items-center
+             (page-cp config block)
+             (when (seq (:block/tags block))
+               (tags config block))]
 
             (or (seq title) (:block/marker block))
             (build-block-title config block)
@@ -2437,23 +2437,31 @@
         block-reference-only? (some->
                                (:block/content block)
                                string/trim
-                               block-ref/block-ref?)]
+                               block-ref/block-ref?)
+        named? (some? (:block/name block))
+        repo (state/get-current-repo)
+        db-based? (config/db-based-graph? repo)]
     (if (and edit? editor-box)
       [:div.editor-wrapper
        {:id editor-id}
-       (ui/catch-error
-        (ui/block-error "Something wrong in the editor" {})
-        (editor-box {:block block
-                     :block-id uuid
-                     :block-parent-id block-id
-                     :format format
-                     :on-hide (fn [value event]
-                                (when (= event :esc)
-                                  (editor-handler/save-block! (editor-handler/get-state) value)
-                                  (let [select? (not (string/includes? value "```"))]
-                                    (editor-handler/escape-editing select?))))}
-                    edit-input-id
-                    config))]
+       (let [editor-cp (ui/catch-error
+                        (ui/block-error "Something wrong in the editor" {})
+                        (editor-box {:block block
+                                     :block-id uuid
+                                     :block-parent-id block-id
+                                     :format format
+                                     :on-hide (fn [value event]
+                                                (when (= event :esc)
+                                                  (editor-handler/save-block! (editor-handler/get-state) value)
+                                                  (let [select? (not (string/includes? value "```"))]
+                                                    (editor-handler/escape-editing select?))))}
+                                    edit-input-id
+                                    config))]
+         (if (and named? (seq (:block/tags block)) db-based?)
+           [:div.flex.flex-1.flex-row.justify-between
+            editor-cp
+            (tags config block)]
+           editor-cp))]
       (let [refs-count (count (:block/_refs block))]
         [:div.flex.flex-col.block-content-wrapper
          [:div.flex.flex-row
@@ -2468,7 +2476,8 @@
                                            (state/set-editing! edit-input-id (:block/content block) block ""))}})
             (block-content config block edit-input-id block-id slide? selected?))]
 
-          (when-not hide-block-refs-count?
+          (when (and (not hide-block-refs-count?)
+                     (not named?))
             [:div.flex.flex-row.items-center
              (when (and (:embed? config)
                         (:embed-parent config))

src/main/frontend/components/block.css

@@ -1,9 +1,6 @@
 .block-content-wrapper {
-  /* 38px is the width of block-control */
-  width: calc(100% - 22px);
   user-select: text;
   @screen sm {
-    width: calc(100% - 33px);
     overflow-x: visible;
   }
 }