clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-03 18:36:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance(UX): polish details for the plugin fenced code block (#9590)

Browse Source 
Add the ability for real-time rendering of fenced code block.
This commit is contained in:
Charlie
2023-06-14 21:49:00 +08:00
committed by GitHub
parent 3e7bdda4bf
commit 1696081bed
3 changed files with 103 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/main/frontend/components/plugins.cljs
View File

@@ -5,6 +5,7 @@
[frontend.context.i18n :refer [t]]
[frontend.ui :as ui]
[frontend.handler.ui :as ui-handler]
[frontend.handler.editor :as editor-handler]
[frontend.handler.plugin-config :as plugin-config-handler]
[frontend.handler.common.plugin :as plugin-common-handler]
[frontend.search :as search]
@@ -1113,14 +1114,61 @@
(let [updates-coming (state/sub :plugin/updates-coming)]
(toolbar-plugins-manager-list updates-coming items)))]]))))
(rum/defcs hook-ui-fenced-code < rum/reactive
[_state content {:keys [render edit] :as _opts}]
(rum/defc hook-ui-fenced-code
[block content {:keys [render edit] :as _opts}]
[:div
{:on-mouse-down (fn [e] (when (false? edit) (util/stop e)))
:class (util/classnames [{:not-edit (false? edit)}])}
(when (fn? render)
(js/React.createElement render #js {:content content}))])
(let [[content1 set-content1!] (rum/use-state content)
[editor-active? set-editor-active!] (rum/use-state (string/blank? content))
*cm (rum/use-ref nil)
*el (rum/use-ref nil)]
(rum/use-effect!
#(set-content1! content)
[content])
(rum/use-effect!
(fn []
(some-> (rum/deref *el)
(.closest ".ui-fenced-code-wrap")
(.-classList)
(#(if editor-active?
(.add % "is-active")
(.remove % "is-active"))))
(when-let [cm (rum/deref *cm)]
(.refresh cm)
(.focus cm)
(.setCursor cm (.lineCount cm) (count (.getLine cm (.lastLine cm))))))
[editor-active?])
(rum/use-effect!
(fn []
(let [t (js/setTimeout
#(when-let [^js cm (some-> (rum/deref *el)
(.closest ".ui-fenced-code-wrap")
(.querySelector ".CodeMirror")
(.-CodeMirror))]
(rum/set-ref! *cm cm)
(doto cm
(.on "change" (fn []
(some-> cm (.getDoc) (.getValue) (set-content1!))))))
;; wait for the cm loaded
1000)]
#(js/clearTimeout t)))
[])
[:div.ui-fenced-code-result
{:on-mouse-down (fn [e] (when (false? edit) (util/stop e)))
:class (util/classnames [{:not-edit (false? edit)}])
:ref *el}
[:<>
[:span.actions
{:on-mouse-down #(util/stop %)}
(ui/button (ui/icon "square-toggle-horizontal" {:size 14})
:on-click #(set-editor-active! (not editor-active?)))
(ui/button (ui/icon "source-code" {:size 14})
:on-click #(editor-handler/edit-block! block (count content1) (:block/uuid block)))]
(when (fn? render)
(js/React.createElement render #js {:content content1}))]]))
(rum/defc plugins-page
[]