3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-21 15:27:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix problem with text editor alignment

Browse source
This commit is contained in:
alonso.torres 2024-01-31 13:09:43 +01:00
parent 1f2f70fcd4
commit a853314e3f
1 changed files with 28 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.shapes.text.editor (ns app.main.ui.workspace.shapes.text.editor
(:require (:require
["draft-js" :as draft] ["draft-js" :as draft]
[app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
@ -48,7 +49,7 @@
(let [children (obj/get props "children")] (let [children (obj/get props "children")]
[:span {:style {:background "#ccc" :display "inline-block"}} children])) [:span {:style {:background "#ccc" :display "inline-block"}} children]))
(defn render-block (defn- render-block
[block shape] [block shape]
(let [type (ted/get-editor-block-type block)] (let [type (ted/get-editor-block-type block)]
(case type (case type
@ -59,7 +60,7 @@
:shape shape}} :shape shape}}
nil))) nil)))
(defn styles-fn [shape styles content] (defn- styles-fn [shape styles content]
(let [data (if (= (.getText content) "") (let [data (if (= (.getText content) "")
(-> (.getData content) (-> (.getData content)
(.toJS) (.toJS)
@ -73,19 +74,27 @@
(def empty-editor-state (def empty-editor-state
(ted/create-editor-state nil default-decorator)) (ted/create-editor-state nil default-decorator))
(defn get-blocks-to-setup [block-changes] (defn- get-blocks-to-setup [block-changes]
(->> block-changes (->> block-changes
(filter (fn [[_ v]] (filter (fn [[_ v]]
(nil? (:old v)))) (nil? (:old v))))
(mapv first))) (mapv first)))
(defn get-blocks-to-add-styles (defn- get-blocks-to-add-styles
[block-changes] [block-changes]
(->> block-changes (->> block-changes
(filter (fn [[_ v]] (filter (fn [[_ v]]
(and (not= (:old v) (:new v)) (= (:old v) "")))) (and (not= (:old v) (:new v)) (= (:old v) ""))))
(mapv first))) (mapv first)))
(defn- shape->justify
[{:keys [content]}]
(case (d/nilv (:vertical-align content) "top")
"center" "center"
"top" "flex-start"
"bottom" "flex-end"
nil))
(mf/defc text-shape-edit-html (mf/defc text-shape-edit-html
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]
::mf/wrap-props false ::mf/wrap-props false
@ -247,7 +256,8 @@
:custom-style-fn (partial styles-fn shape) :custom-style-fn (partial styles-fn shape)
:block-renderer-fn #(render-block % shape) :block-renderer-fn #(render-block % shape)
:ref on-editor :ref on-editor
:editor-state state}]])) :editor-state state
:style #js {:border "1px solid red"}}]]))
(defn translate-point-from-viewport (defn translate-point-from-viewport
"Translate a point in the viewport into client coordinates" "Translate a point in the viewport into client coordinates"
@ -303,7 +313,19 @@
(dm/get-prop shape :height)) (dm/get-prop shape :height))
style style
(cond-> #js {:pointer-events "all"} (cond-> #js {:pointerEvents "all"}
(not (cf/check-browser? :safari))
(obj/merge!
#js {:transform (dm/fmt "translate(%px, %px)" (- (dm/get-prop shape :x) x) (- (dm/get-prop shape :y) y))})
(cf/check-browser? :safari-17)
(obj/merge!
#js {:height "100%"
:display "flex"
:flexDirection "column"
:justifyContent (shape->justify shape)})
(cf/check-browser? :safari-16) (cf/check-browser? :safari-16)
(obj/merge! (obj/merge!
#js {:position "fixed" #js {:position "fixed"