Add highlight-words to several viewers

- Only highlight words when visible

Author: djblue

src/portal/ui/html.cljs

@@ -0,0 +1,55 @@
+(ns portal.ui.html
+  (:require [clojure.string :as str]
+            [portal.ui.inspector :as ins]))
+
+(defn- ->style [string]
+  (persistent!
+   (reduce
+    (fn [style rule]
+      (let [[k v] (str/split rule #":")]
+        (assoc! style (keyword (str/trim k)) (str/trim v))))
+    (transient {})
+    (str/split string #";"))))
+
+(defn- dom->hiccup [opts ^js el]
+  (let [{:keys [text-handler]} opts]
+    (case (.-nodeType el)
+      3 (cond-> (.-wholeText el)
+          text-handler
+          text-handler)
+      1 (let [attrs (.-attributes el)]
+          (into
+           [(keyword (str/lower-case (.-tagName el)))
+            (persistent!
+             (reduce
+              (fn [attrs ^js attr]
+                (let [k (keyword (.-name attr))]
+                  (assoc! attrs k
+                          (case k
+                            :style (->style (.-value attr))
+                            (.-value attr)))))
+              (transient {})
+              attrs))]
+           (map (partial dom->hiccup opts))
+           (.-childNodes el))))))
+
+(defn- parse-dom [string]
+  (-> (js/DOMParser.)
+      (.parseFromString string "text/html")
+      (.getElementsByTagName "body")
+      (aget 0)
+      (.-childNodes)))
+
+(defn parse-html
+  ([html]
+   (parse-html html nil))
+  ([html opts]
+   (into [:<>]
+         (map (partial dom->hiccup opts))
+         (parse-dom html))))
+
+(def ^:private opts
+  {:text-handler
+   (fn [text] [ins/highlight-words text])})
+
+(defn html+ [html] (parse-html html opts))

src/portal/ui/inspector.cljs

@@ -311,7 +311,7 @@
 (defn get-background2 []
   (get-background (update (use-context) :alt-bg not)))
 
-(defn highlight-words [string]
+(defn- highlight-words* [string]
   (let [theme        (theme/use-theme)
         state        (state/use-state)
         search-words (use-search-words)
@@ -336,6 +336,16 @@
        {:default-take 5}]
       string)))
 
+(defn highlight-words [string]
+  (let [[sensor visible?] (l/use-visible)]
+    (if visible?
+      [highlight-words* string]
+      [s/span
+       {:style {:position :relative}}
+       string
+       [s/div {:style {:position :absolute :top 0 :left 0}}
+        sensor]])))
+
 (defn- ->id [value]
   (str (hash value) (pr-str (type value))))
 

src/portal/ui/lazy.cljs

@@ -57,11 +57,17 @@
          #(.removeEventListener ^js container "scroll" on-scroll))))
     [:div {:ref ref :style {:height "1em" :width "1em"}}]))
 
-(defn visible-sensor [f]
+(defn- visible-sensor [f]
   (if (exists? js/IntersectionObserver)
     [observer-visible-sensor f]
     [fallback-visible-sensor f]))
 
+(defn use-visible []
+  (let [[visible? set-visible!] (react/useState false)]
+    [(when-not visible?
+       [visible-sensor #(set-visible! true)])
+     visible?]))
+
 (defn lazy-seq [_coll opts]
   (let [{:keys [default-take step]
          :or   {default-take 0 step 10}} opts

src/portal/ui/viewer/code.cljs

@@ -2,6 +2,7 @@
   (:require ["highlight.js" :as hljs]
             [clojure.string :as str]
             [portal.colors :as c]
+            [portal.ui.html :as h]
             [portal.ui.inspector :as ins]
             [portal.ui.styled :as s]
             [portal.ui.theme :as theme]))
@@ -108,11 +109,11 @@
               :line-height "1rem"
               :color       (::c/text theme)
               :font-size   (:font-size theme)
-              :font-family (:font-family theme)}
-      :dangerouslySetInnerHTML
-      {:__html (-> string-value
-                   (hljs/highlight  #js {:language "clojure"})
-                   .-value)}}]))
+              :font-family (:font-family theme)}}
+     [h/html+
+      (-> string-value
+          (hljs/highlight  #js {:language "clojure"})
+          .-value)]]))
 
 (defn inspect-pr-str [value] [highlight-clj (pr-str value)])
 
@@ -164,8 +165,8 @@
                                   :width       :fit-content
                                   :color       (::c/text theme)
                                   :font-family (:font-family theme)
-                                  :font-size   (:font-size theme)}
-        :dangerouslySetInnerHTML {:__html html}}]])))
+                                  :font-size   (:font-size theme)}}
+       [h/html+ html]]])))
 
 (def viewer
   {:predicate string?

src/portal/ui/viewer/markdown.cljs

@@ -2,6 +2,7 @@
   (:require ["marked" :refer [marked]]
             [clojure.string :as str]
             [portal.colors :as c]
+            [portal.ui.html :as h]
             [portal.ui.icons :as icons]
             [portal.ui.inspector :as ins]
             [portal.ui.lazy :as l]
@@ -26,44 +27,6 @@
 (defn- ->text [^js token]
   (unescape (.-text token)))
 
-(defn- ->style [string]
-  (persistent!
-   (reduce
-    (fn [style rule]
-      (let [[k v] (str/split rule #":")]
-        (assoc! style (keyword (str/trim k)) (str/trim v))))
-    (transient {})
-    (str/split string #";"))))
-
-(defn- dom->hiccup [^js el]
-  (case (.-nodeType el)
-    3 (.-wholeText el)
-    1 (let [attrs (.-attributes el)]
-        (into
-         [(keyword (str/lower-case (.-tagName el)))
-          (persistent!
-           (reduce
-            (fn [attrs ^js attr]
-              (let [k (keyword (.-name attr))]
-                (assoc! attrs k
-                        (case k
-                          :style (->style (.-value attr))
-                          (.-value attr)))))
-            (transient {})
-            attrs))]
-         (map dom->hiccup)
-         (.-childNodes el)))))
-
-(defn- parse-dom [string]
-  (-> (js/DOMParser.)
-      (.parseFromString string "text/html")
-      (.getElementsByTagName "body")
-      (aget 0)
-      (.-childNodes)))
-
-(defn- parse-html [html]
-  (into [:<>] (map dom->hiccup) (parse-dom html)))
-
 (defn- absolute-link? [href]
   (or (str/starts-with? href "http")
       (str/starts-with? href "https")))
@@ -182,7 +145,7 @@
    (fn [out ^js token]
      (case (.-type token)
        "escape"   (conj out (->text token))
-       "html"     (conj out (parse-html (.-text token)))
+       "html"     (conj out (h/parse-html (.-text token)))
        "link"     (conj out (->link token))
        "image"    (conj out (->image token))
        "strong"   (conj out (->strong token))
@@ -208,7 +171,7 @@
         "table"      (conj out (->table token))
         "blockquote" (conj out (->blockquote token))
         "list"       (conj out (->list token))
-        "html"       (conj out (parse-html (->text token)))
+        "html"       (conj out (h/parse-html (->text token)))
         "paragraph"  (conj out (->paragraph token))
         "text"       (if-let [tokens (.-tokens token)]
                        (->inline out tokens)

src/portal/ui/viewer/prepl.cljs

@@ -4,6 +4,7 @@
             [portal.colors :as c]
             [portal.runtime.edn :as edn]
             [portal.ui.filter :as f]
+            [portal.ui.html :as h]
             [portal.ui.icons :as icons]
             [portal.ui.inspector :as ins]
             [portal.ui.select :as select]
@@ -210,9 +211,10 @@
                     {:color
                      (if (= (:tag value) :err)
                        (::c/exception theme)
-                       (::c/text theme))}
-                    :dangerouslySetInnerHTML
-                    {:__html (anser/ansiToHtml (:val value) #js {:use_classes true})}}])
+                       (::c/text theme))}}
+                   [h/html+ (anser/ansiToHtml
+                             (:val value)
+                             #js {:use_classes true})]])
                 {:key index})))
           value))]]]]))