feat: add page path to block search result

resources/css/common.css

@@ -14,7 +14,7 @@
     background-color: #002b36;
   }
 
-  html[data-theme=light] {
+  html[data-theme='light'] {
     background-color: transparent;
   }
 }
@@ -26,7 +26,7 @@
 }
 
 .dark-theme,
-html[data-theme=dark] {
+html[data-theme='dark'] {
   --ls-primary-background-color: #002b36;
   --ls-secondary-background-color: #023643;
   --ls-tertiary-background-color: #08404f;
@@ -36,7 +36,12 @@ html[data-theme=dark] {
   --ls-active-secondary-color: #d0e8e8;
   --ls-block-properties-background-color: #02222a;
   --ls-block-ref-link-text-color: #1a6376;
-  --ls-search-background-color: linear-gradient(to right,#021c23 0,#021b21 200px,#002b36 100%);
+  --ls-search-background-color: linear-gradient(
+    to right,
+    #021c23 0,
+    #021b21 200px,
+    #002b36 100%
+  );
   --ls-border-color: #0e5263;
   --ls-secondary-border-color: #126277;
   --ls-guideline-color: #0b4a5a;
@@ -79,7 +84,7 @@ html[data-theme=dark] {
 }
 
 .white-theme,
-html[data-theme=light] {
+html[data-theme='light'] {
   --ls-primary-background-color: white;
   --ls-secondary-background-color: #f7f6f4;
   --ls-tertiary-background-color: #f1eee8;
@@ -88,18 +93,18 @@ html[data-theme=light] {
   --ls-active-primary-color: rgb(4, 85, 145);
   --ls-active-secondary-color: #003761;
   --ls-block-properties-background-color: #f7f6f4;
-  --ls-block-ref-link-text-color: #D8E1E8;
+  --ls-block-ref-link-text-color: #d8e1e8;
   --ls-search-background-color: var(--ls-primary-background-color);
   --ls-border-color: #ccc;
   --ls-secondary-border-color: #e2e2e2;
   --ls-guideline-color: rgba(46, 27, 5, 0.08);
   --ls-menu-hover-color: var(--ls-a-chosen-bg);
-  --ls-primary-text-color: #433F38;
+  --ls-primary-text-color: #433f38;
   --ls-secondary-text-color: #161e2e;
   --ls-title-text-color: var(--ls-primary-text-color);
-  --ls-link-text-color: #106BA3;
+  --ls-link-text-color: #106ba3;
   --ls-link-text-hover-color: #1a537c;
-  --ls-link-ref-text-color: #106BA3;
+  --ls-link-ref-text-color: #106ba3;
   --ls-link-ref-text-hover-color: #1a537c;
   --ls-tag-text-color: var(--ls-link-ref-text-color);
   --ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color);
@@ -132,7 +137,10 @@ html[data-theme=light] {
 
 /* region Reset top elements */
 html {
-  font-family: var(--ls-font-family), Inter, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
+  font-family: var(--ls-font-family), Inter, sans-serif, system-ui,
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, 'Noto Sans', serif, Apple Color Emoji, Segoe UI Emoji,
+    Segoe UI Symbol !important;
 
   /* FIXME: rewrite revealjs.css ? */
   height: unset !important;
@@ -183,7 +191,7 @@ ol {
 p {
   line-height: 1.5;
   margin: 0.5rem 0;
-  color: var(--ls-primary-text-color)
+  color: var(--ls-primary-text-color);
 }
 
 li {
@@ -222,7 +230,6 @@ pre.code {
 }
 
 :not(pre) > code {
-
 }
 
 dl {
@@ -286,7 +293,7 @@ video {
   color: var(--ls-page-inline-code-color);
   background-color: var(--ls-page-inline-code-bg-color, #eee);
   line-height: 1.45;
-  text-rendering: optimizeSpeed
+  text-rendering: optimizeSpeed;
 }
 
 /* endregion */
@@ -332,7 +339,6 @@ video {
   max-width: 100%;
 }
 
-
 /* TODO: add all tailwind supported bg colors */
 .bg-pink-100 {
   background-color: #fff5f7;
@@ -426,7 +432,7 @@ li p:last-child,
 
 .noscroll {
   position: fixed;
-  overflow-y: scroll
+  overflow-y: scroll;
 }
 
 .loader {
@@ -440,7 +446,7 @@ li p:last-child,
 }
 
 .opacity-30 {
-    opacity: 0.3;
+  opacity: 0.3;
 }
 
 .opacity-70 {
@@ -531,7 +537,7 @@ li p:last-child,
 }
 
 .abstract p:last-of-type::before {
-  content: "    ";
+  content: '    ';
   white-space: pre;
 }
 
@@ -651,13 +657,13 @@ img.small {
 }
 
 a.tag {
-    font-size: 13px;
-    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);
+  font-size: 13px;
+  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);
 }
 
 a.tag:hover {
@@ -687,15 +693,14 @@ svg.tip {
 
 /* endregion */
 
-
 hr {
   margin: 2rem 0;
   border-color: var(--ls-border-color, #ccc);
 }
 
 .resize {
-    resize: both;
-    overflow: hidden;
+  resize: both;
+  overflow: hidden;
 }
 
 /* ideas from https://github.com/PiotrSss/logseq-bujo-theme/blob/main/main.css */
@@ -704,108 +709,104 @@ hr {
 ***************************** TOP ******************************
 ***************************************************************/
 
-.cp__header-logo, .fade-link {
-    opacity: .3;
-    transition: .3s;
+.cp__header-logo,
+.fade-link {
+  opacity: 0.3;
+  transition: 0.3s;
 }
 
 a.fade-link:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 /* import (arrows) icon */
 
 #head .refresh svg {
-    height: 20px;
+  height: 20px;
 }
 
 /* < > buttons */
 
 a.navigation {
-    border-radius: 3px;
-    transition: .3s;
+  border-radius: 3px;
+  transition: 0.3s;
 }
 
 /* text mark/highlight */
 
 mark {
-    background: #fef3ac;
-    color: #262626;
-    padding: 2px 4px;
-    border-radius: 3px;
-}
-
-/* search results */
-.search-results mark {
-    padding: 0;
-    border-radius: 0;
+  background: #fef3ac;
+  color: #262626;
+  padding: 2px 4px;
+  border-radius: 3px;
 }
 
 /* page reference */
 
 .page-reference {
-    border-radius: 3px;
-    padding: 2px 0px;
-    transition: .3s;
+  border-radius: 3px;
+  padding: 2px 0px;
+  transition: 0.3s;
 }
 
 .page-reference .bracket {
-    opacity: .3;
+  opacity: 0.3;
 }
 
 /* block references */
 
 .block-ref {
-    padding: 2px 5px;
+  padding: 2px 5px;
 }
 
 .block-ref .block-ref {
-    padding: 6px 5px;
-    border: none;
+  padding: 6px 5px;
+  border: none;
 }
 
 /* inline code */
-:not(pre)>code {
-    border-radius: 3px;
-    font-size: .9em;
-    font-family: MonoLisa, "Fira Code", Monaco, Menlo, Consolas, "COURIER NEW", monospace;
-    padding: 3px 5px !important;
+:not(pre) > code {
+  border-radius: 3px;
+  font-size: 0.9em;
+  font-family: MonoLisa, 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW',
+    monospace;
+  padding: 3px 5px !important;
 }
 
 a {
-    transition: .3s;
+  transition: 0.3s;
 }
 
 a.tooltip-priority {
-    transition: none;
+  transition: none;
 }
 
 .page-reference:hover {
-    background: var(--ls-secondary-background-color);
+  background: var(--ls-secondary-background-color);
 }
 
 .references-blocks .page-reference:hover {
-    background: var(--ls-tertiary-background-color);
+  background: var(--ls-tertiary-background-color);
 }
 
 #head .fade-link {
-    font-weight: 600;
-    font-size: 13px;
+  font-weight: 600;
+  font-size: 13px;
 }
 
 /* excalidraw */
 .Island > div > div > div {
-    width: 44px;
+  width: 44px;
 }
 
 .excalidraw hr {
-    margin: 0;
+  margin: 0;
 }
 
 .text-link {
-    color: var(--ls-primary-text-color);
+  color: var(--ls-primary-text-color);
 }
 
 .katex * {
-    border-color: var(--ls-primary-text-color);
+  border-color: var(--ls-primary-text-color);
 }

src/main/frontend/components/editor.cljs

@@ -6,6 +6,8 @@
             [frontend.handler.editor.lifecycle :as lifecycle]
             [frontend.util :as util :refer-macros [profile]]
             [frontend.handler.block :as block-handler]
+            [frontend.components.block :as block]
+            [frontend.components.search :as search]
             [frontend.handler.page :as page-handler]
             [frontend.components.datetime :as datetime-comp]
             [frontend.state :as state]
@@ -110,8 +112,13 @@
        {:on-chosen   chosen-handler
         :on-enter    non-exist-block-handler
         :empty-div   [:div.text-gray-500.pl-4.pr-4 "Search for a block"]
-        :item-render (fn [{:block/keys [content]}]
-                       content)
+        :item-render (fn [{:block/keys [content page uuid] :as item}]
+                       (let [page (or (:page/original-name page)
+                                      (:page/name page))
+                             repo (state/sub :git/current-repo)
+                             format (db/get-page-format page)]
+
+                         (search/block-search-result-item repo uuid format content q)))
         :class       "black"}))))
 
 (rum/defcs block-search < rum/reactive

src/main/frontend/components/search.cljs

@@ -1,6 +1,7 @@
 (ns frontend.components.search
   (:require [rum.core :as rum]
             [frontend.util :as util]
+            [frontend.components.block :as block]
             [frontend.handler.route :as route]
             [frontend.handler.page :as page-handler]
             [frontend.handler.file :as file-handler]
@@ -31,40 +32,50 @@
   (let [switch (reductions not= true (map pred? coll (rest coll)))]
     (map (partial map first) (partition-by second (map list coll switch)))))
 
+
+
 (defn highlight-exact-query
   [content q]
-  (let [q-words (string/split q #" ")
-        lc-content (string/lower-case content)
-        lc-q (string/lower-case q)]
-    (if (or (string/includes? lc-content lc-q)
-            (not (re-find #" " q)))
-      (let [i (string/index-of lc-content lc-q)
-            [before after] [(subs content 0 i) (subs content (+ i (count q)))]]
-        [:p
-         (when-not (string/blank? before)
-           [:span before])
-         [:mark (subs content i (+ i (count q)))]
-         (when-not (string/blank? after)
-           [:span after])])
-      (let [elements (loop [words q-words
-                            content content
-                            result []]
-                       (if (and (seq words) content)
-                         (let [word (first words)
-                               lc-word (string/lower-case word)
-                               lc-content (string/lower-case content)]
-                           (if-let [i (string/index-of lc-content lc-word)]
-                             (recur (rest words)
-                                    (subs content (+ i (count word)))
-                                    (vec
-                                     (concat result
-                                             [[:span (subs content 0 i)]
-                                              [:mark (subs content i (+ i (count word)))]])))
-                             (recur nil
-                                    content
-                                    result)))
-                         (conj result [:span content])))]
-        [:p elements]))))
+  (if (or (string/blank? content) (string/blank? q))
+    content
+    (let [q-words (string/split q #" ")
+          lc-content (string/lower-case content)
+          lc-q (string/lower-case q)]
+      (if (or (string/includes? lc-content lc-q)
+              (not (re-find #" " q)))
+        (let [i (string/index-of lc-content lc-q)
+              [before after] [(subs content 0 i) (subs content (+ i (count q)))]]
+          [:p
+           {:class "m-0"}
+           (when-not (string/blank? before)
+             [:span before])
+           [:mark {:class "p-0 rounded-none"} (subs content i (+ i (count q)))]
+           (when-not (string/blank? after)
+             [:span after])])
+        (let [elements (loop [words q-words
+                              content content
+                              result []]
+                         (if (and (seq words) content)
+                           (let [word (first words)
+                                 lc-word (string/lower-case word)
+                                 lc-content (string/lower-case content)]
+                             (if-let [i (string/index-of lc-content lc-word)]
+                               (recur (rest words)
+                                      (subs content (+ i (count word)))
+                                      (vec
+                                       (concat result
+                                               [[:span (subs content 0 i)]
+                                                [:mark (subs content i (+ i (count word)))]])))
+                               (recur nil
+                                      content
+                                      result)))
+                           (conj result [:span content])))]
+          [:p {:class "m-0"} elements])))))
+
+(rum/defc block-search-result-item
+  [repo uuid format content q]
+  [:div [(block/block-parents {:id "block-search-block-parent" :block? true} repo (clojure.core/uuid uuid) format)
+         [:div {:class "font-medium"} (highlight-exact-query content q)]]])
 
 (rum/defc highlight-fuzzy
   [content indexes]
@@ -221,12 +232,15 @@
                            data]
 
                           :block
-                          (let [{:block/keys [page content indexes]} data
+                          (let [{:block/keys [page content uuid]} data
                                 page (or (:page/original-name page)
-                                         (:page/name page))]
-                            [:div.flex-1
-                             [:div.text-sm.font-medium (str "-> " page)]
-                             (highlight-exact-query content search-q)])
+                                         (:page/name page))
+                                repo (state/sub :git/current-repo)
+                                format (db/get-page-format page)]
+                            [:div.flex-1.flex.items-center
+                             [[:span.text-xs.rounded.border.mr-2.px-1 {:title "Block"}
+                               "B"]
+                              (block-search-result-item repo uuid format content search-q)]])
 
                           nil))})])))