ux: property key auto-complete

src/main/frontend/components/editor.cljs

@@ -5,6 +5,7 @@
             [frontend.components.datetime :as datetime-comp]
             [frontend.components.search :as search]
             [frontend.components.svg :as svg]
+            [frontend.components.search.highlight :as highlight]
             [frontend.context.i18n :refer [t]]
             [frontend.db :as db]
             [frontend.db.model :as db-model]
@@ -151,7 +152,7 @@
               :item-render (fn [page-name chosen?]
                              [:div.flex
                               (when (db-model/whiteboard-page? page-name) [:span.mr-1 (ui/icon "whiteboard" {:extension? true})])
-                              (search/highlight-exact-query page-name q)])
+                              (highlight/highlight-exact-query page-name q)])
               :empty-placeholder [:div.text-gray-500.text-sm.px-4.py-2 "Search for a page"]
               :class       "black"})))))))
 

src/main/frontend/components/property.cljs

@@ -4,10 +4,13 @@
             [clojure.string :as string]
             [frontend.handler.property :as property-handler]
             [frontend.db :as db]
+            [frontend.db.model :as db-model]
             [frontend.mixins :as mixins]
             [rum.core :as rum]
             [frontend.state :as state]
-            [goog.dom :as gdom]))
+            [goog.dom :as gdom]
+            [frontend.search :as search]
+            [frontend.components.search.highlight :as highlight]))
 
 (defn- add-property
   [entity k *new-property?]
@@ -15,23 +18,39 @@
     (property-handler/add-property! (:db/id entity) k)
     (reset! *new-property? false)))
 
-(rum/defc property-input
-  [entity *new-property?]
-  [:div.ls-property-add.grid.grid-cols-4.gap-4
-   [:input#add-property.form-input.block.col-span-1.focus:outline-none
-    {:placeholder "Property key"
-     :auto-focus true
-     :on-blur (fn [e]
-                (add-property entity (util/evalue e) *new-property?))
-     :on-key-down (fn [e]
-                    (case (util/ekey e)
-                      "Enter"
-                      (add-property entity (util/evalue e) *new-property?)
+(rum/defc search-item-render
+  [search-q content]
+  [:div.font-medium
+   (highlight/highlight-exact-query content search-q)])
 
-                      "Escape"
-                      (reset! *new-property? false)
+(rum/defcs property-input < (rum/local nil ::q)
+  [state entity *new-property?]
+  (let [*q (::q state)
+        result (when-not (string/blank? @*q)
+                 (search/property-search @*q))]
+    [:div
+     [:div.ls-property-add.grid.grid-cols-4.gap-4
+      [:input#add-property.form-input.block.col-span-1.focus:outline-none
+       {:placeholder "Property key"
+        :auto-focus true
+        :on-change (fn [e]
+                     (reset! *q (util/evalue e)))
+        :on-blur (fn [e]
+                   (add-property entity (util/evalue e) *new-property?))
+        :on-key-down (fn [e]
+                       (case (util/ekey e)
+                         "Enter"
+                         (add-property entity (util/evalue e) *new-property?)
 
-                      nil))}]])
+                         "Escape"
+                         (reset! *new-property? false)
+
+                         nil))}]]
+     (ui/auto-complete
+      result
+      {:class "search-results"
+       :on-chosen #(add-property entity % *new-property?)
+       :item-render #(search-item-render @*q %)})]))
 
 (rum/defcs properties-area <
   (rum/local false ::new-property?)

src/main/frontend/components/search.cljs

@@ -22,45 +22,8 @@
             [frontend.context.i18n :refer [t]]
             [frontend.date :as date]
             [reitit.frontend.easy :as rfe]
-            [frontend.modules.shortcut.core :as shortcut]))
-
-(defn highlight-exact-query
-  [content q]
-  (if (or (string/blank? content) (string/blank? q))
-    content
-    (when (and content q)
-      (let [q-words (string/split q #" ")
-            lc-content (util/search-normalize content (state/enable-search-remove-accents?))
-            lc-q (util/search-normalize q (state/enable-search-remove-accents?))]
-        (if (and (string/includes? lc-content lc-q)
-                 (not (util/safe-re-find #" " q)))
-          (let [i (string/index-of lc-content lc-q)
-                [before after] [(subs content 0 i) (subs content (+ i (count q)))]]
-            [:div
-             (when-not (string/blank? before)
-               [:span before])
-             [:mark.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 (util/search-normalize word (state/enable-search-remove-accents?))
-                                   lc-content (util/search-normalize content (state/enable-search-remove-accents?))]
-                               (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.p-0.rounded-none (subs content i (+ i (count word)))]])))
-                                 (recur nil
-                                        content
-                                        result)))
-                             (conj result [:span content])))]
-            [:p {:class "m-0"} elements]))))))
+            [frontend.modules.shortcut.core :as shortcut]
+            [frontend.components.search.highlight :as highlight]))
 
 (rum/defc search-result-item
   [icon content]
@@ -81,7 +44,7 @@
                           (clojure.core/uuid uuid)
                           {:indent? false})])
      [:div {:class "font-medium" :key "content"}
-      (highlight-exact-query content q)]]))
+      (highlight/highlight-exact-query content q)]]))
 
 (defonce search-timeout (atom nil))
 
@@ -223,12 +186,12 @@
         (search-result-item {:name (if (model/whiteboard-page? data) "whiteboard" "page")
                              :extension? true
                              :title (t (if (model/whiteboard-page? data) :search-item/whiteboard :search-item/page))}
-                            (highlight-exact-query data search-q))]
+                            (highlight/highlight-exact-query data search-q))]
 
        :file
        (search-result-item {:name "file"
                             :title (t :search-item/file)}
-                           (highlight-exact-query data search-q))
+                           (highlight/highlight-exact-query data search-q))
 
        :block
        (let [{:block/keys [page uuid]} data  ;; content here is normalized

src/main/frontend/components/search/highlight.cljs

@@ -0,0 +1,42 @@
+(ns frontend.components.search.highlight
+  (:require [frontend.util :as util]
+            [frontend.state :as state]
+            [clojure.string :as string]))
+
+(defn highlight-exact-query
+  [content q]
+  (if (or (string/blank? content) (string/blank? q))
+    content
+    (when (and content q)
+      (let [q-words (string/split q #" ")
+            lc-content (util/search-normalize content (state/enable-search-remove-accents?))
+            lc-q (util/search-normalize q (state/enable-search-remove-accents?))]
+        (if (and (string/includes? lc-content lc-q)
+                 (not (util/safe-re-find #" " q)))
+          (let [i (string/index-of lc-content lc-q)
+                [before after] [(subs content 0 i) (subs content (+ i (count q)))]]
+            [:div
+             (when-not (string/blank? before)
+               [:span before])
+             [:mark.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 (util/search-normalize word (state/enable-search-remove-accents?))
+                                   lc-content (util/search-normalize content (state/enable-search-remove-accents?))]
+                               (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.p-0.rounded-none (subs content i (+ i (count word)))]])))
+                                 (recur nil
+                                        content
+                                        result)))
+                             (conj result [:span content])))]
+            [:p {:class "m-0"} elements]))))))

src/main/frontend/db/model.cljs

@@ -1371,11 +1371,14 @@
                       :where
                       [_ :block/properties ?p]]
                     (conn/get-db))
-        properties (remove (fn [m] (empty? m)) properties)]
-    (->> (map keys properties)
-         (apply concat)
-         distinct
-         sort)))
+        properties (remove (fn [m] (empty? m)) properties)
+        ids (->> (map keys properties)
+                 (apply concat)
+                 distinct
+                 (filter uuid?))]
+    (->> (db-utils/pull-many '[:block/original-name] (map (fn [id] [:block/uuid id]) ids))
+         (map :block/original-name)
+         (remove nil?))))
 
 (defn get-property-values
   [property]