github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-07-02 04:15:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Migrate v1 text-editor to modern component syntax (#9446)

Browse Source 
* ♻️ Migrate v1 text-editor to modern component syntax

* 📎 Add minor changes

Signed-off-by: Andrey Antukh <niwi@niwi.nz>

---------

Signed-off-by: Andrey Antukh <niwi@niwi.nz>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>
This commit is contained in:
Dexterity 2026-06-22 12:40:01 -04:00 committed by GitHub
parent 0dbc2c54d6
commit ea20291d2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
View File

@ -30,24 +30,18 @@
;; --- Text Editor Rendering
(mf/defc block-component
{::mf/wrap-props false}
[props]
(let [bprops (obj/get props "blockProps")
data (obj/get bprops "data")
style (sts/generate-paragraph-styles (obj/get bprops "shape")
(obj/get bprops "data"))
dir (:text-direction data "auto")]
(mf/defc block-component*
[{:keys [block-props] :as props}]
(let [data (.-data ^js block-props)
style (sts/generate-paragraph-styles (.-shape ^js block-props) data)
dir (:text-direction data "auto")]
[:div {:style style :dir dir}
[:> draft/EditorBlock props]]))
(mf/defc selection-component
{::mf/wrap-props false}
[props]
(let [children (obj/get props "children")]
[:span {:style {:background "#ccc" :display "inline-block"}} children]))
(mf/defc selection-component*
[{:keys [children]}]
[:span {:style {:background "#ccc" :display "inline-block"}} children])
(defn- render-block
[block shape]
@ -55,7 +49,7 @@
(case type
"unstyled"
#js {:editable true
:component block-component
:component block-component*
:props #js {:data (ted/get-editor-block-data block)
:shape shape}}
nil)))
@ -69,7 +63,7 @@
(sts/generate-text-styles shape data {:show-text? false})))
(def default-decorator
(ted/create-decorator "PENPOT_SELECTION" selection-component))
(ted/create-decorator "PENPOT_SELECTION" selection-component*))
(def empty-editor-state
(ted/create-editor-state nil default-decorator))
@ -95,12 +89,11 @@
"bottom" "flex-end"
nil))
(mf/defc text-shape-edit-html
(mf/defc text-shape-edit-html*
{::mf/wrap [mf/memo]
::mf/wrap-props false
::mf/forward-ref true}
[props _]
(let [{:keys [id content] :as shape} (obj/get props "shape")
[{:keys [shape]} _]
(let [{:keys [id content]} shape
state-map (mf/deref refs/workspace-editor-state)
state (get state-map id empty-editor-state)
@ -269,8 +262,7 @@
(-> (gpt/subtract pt box)
(gpt/multiply zoom)))))
(mf/defc text-editor-svg
{::mf/wrap-props false}
(mf/defc text-editor-svg*
[{:keys [shape modifiers]}]
(let [shape-id (dm/get-prop shape :id)
modifiers (dm/get-in modifiers [shape-id :modifiers])
@ -343,6 +335,6 @@
[:foreignObject {:x x :y y :width width :height height}
[:div {:style style}
[:& text-shape-edit-html
[:> text-shape-edit-html*
{:shape shape
:key (dm/str shape-id)}]]]]))

4
frontend/src/app/main/ui/workspace/viewport.cljs
View File

@ -454,8 +454,8 @@
[:& editor-v2/text-editor {:shape editing-shape
:canvas-ref canvas-ref
:modifiers modifiers}]
[:& editor-v1/text-editor-svg {:shape editing-shape
:modifiers modifiers}]))
[:> editor-v1/text-editor-svg* {:shape editing-shape
:modifiers modifiers}]))
(when show-frame-outline?
(let [outlined-frame-id

4
frontend/src/app/main/ui/workspace/viewport_wasm.cljs
View File

@ -728,8 +728,8 @@
:canvas-ref canvas-ref
:ref text-editor-ref}]
:else [:& editor-v1/text-editor-svg {:shape editing-shape
:ref text-editor-ref}]))
:else [:> editor-v1/text-editor-svg* {:shape editing-shape
:ref text-editor-ref}]))
(when show-frame-outline?
(let [outlined-frame-id (->> @hover-ids