diff --git a/frontend/src/app/main/ui/components/code_block.cljs b/frontend/src/app/main/ui/components/code_block.cljs index 8079cc006..d6d81f849 100644 --- a/frontend/src/app/main/ui/components/code_block.cljs +++ b/frontend/src/app/main/ui/components/code_block.cljs @@ -7,12 +7,15 @@ (ns app.main.ui.components.code-block (:require-macros [app.main.style :as stl]) (:require - ["highlight.js" :as hljs] [app.common.data.macros :as dm] [app.main.ui.context :as ctx] - [app.util.dom :as dom] [cuerdas.core :as str] - [rumext.v2 :as mf])) + [promesa.core :as p] + [rumext.v2 :as mf] + [shadow.lazy :as lazy])) + +(def highlight-fn + (lazy/loadable app.util.code-highlight/highlight!)) (mf/defc code-block {::mf/wrap-props false} @@ -20,11 +23,11 @@ (let [new-css-system (mf/use-ctx ctx/new-css-system) block-ref (mf/use-ref) code (str/trim code)] - (mf/with-effect - [code type] + + (mf/with-effect [code type] (when-let [node (mf/ref-val block-ref)] - (dom/set-data! node "highlighted" nil) - (hljs/highlightElement node))) + (p/let [highlight-fn (lazy/load highlight-fn)] + (highlight-fn node)))) (if new-css-system [:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code] diff --git a/frontend/src/app/util/code_highlight.cljs b/frontend/src/app/util/code_highlight.cljs new file mode 100644 index 000000000..62c761720 --- /dev/null +++ b/frontend/src/app/util/code_highlight.cljs @@ -0,0 +1,15 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC + +(ns app.util.code-highlight + (:require + ["highlight.js" :as hljs] + [app.util.dom :as dom])) + +(defn highlight! + [node] + (dom/set-data! node "highlighted" nil) + (hljs/highlightElement node))