diff --git a/frontend/resources/images/icons/text-direction-ltr.svg b/frontend/resources/images/icons/text-direction-ltr.svg new file mode 100644 index 000000000..ec3a3c282 --- /dev/null +++ b/frontend/resources/images/icons/text-direction-ltr.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/text-direction-rtl.svg b/frontend/resources/images/icons/text-direction-rtl.svg new file mode 100644 index 000000000..db287b350 --- /dev/null +++ b/frontend/resources/images/icons/text-direction-rtl.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index f18cab16f..ef09144c6 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -5201,6 +5201,21 @@ }, "used-in" : [ "src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs" ] }, + + "workspace.options.text-options.direction-rtl" : { + "translations" : { + "en" : "RTL", + "es" : "RTL" + } + }, + + "workspace.options.text-options.direction-ltr" : { + "translations" : { + "en" : "LTR", + "es" : "LTR" + } + }, + "workspace.options.text-options.align-bottom" : { "translations" : { "de" : "Unten ausrichten", diff --git a/frontend/resources/styles/main/partials/texts.scss b/frontend/resources/styles/main/partials/texts.scss index 8f26f6d53..a67fa3ea6 100644 --- a/frontend/resources/styles/main/partials/texts.scss +++ b/frontend/resources/styles/main/partials/texts.scss @@ -16,13 +16,6 @@ foreignObject { } .text-editor { - .public-DraftStyleDefault-rtl { - direction: rtl; - } - .public-DraftStyleDefault-ltr { - direction: ltr; - } - .DraftEditor-root { height: 100%; display: flex; diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 1bf023376..f16912ed2 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -113,6 +113,8 @@ (def text-align-justify (icon-xref :text-align-justify)) (def text-align-left (icon-xref :text-align-left)) (def text-align-right (icon-xref :text-align-right)) +(def text-direction-ltr (icon-xref :text-direction-ltr)) +(def text-direction-rtl (icon-xref :text-direction-rtl)) (def titlecase (icon-xref :titlecase)) (def toggle (icon-xref :toggle)) (def trash (icon-xref :trash)) diff --git a/frontend/src/app/main/ui/shapes/text.cljs b/frontend/src/app/main/ui/shapes/text.cljs index 81f2e0d95..e0287cfec 100644 --- a/frontend/src/app/main/ui/shapes/text.cljs +++ b/frontend/src/app/main/ui/shapes/text.cljs @@ -58,8 +58,9 @@ (let [node (obj/get props "node") shape (obj/get props "shape") children (obj/get props "children") - style (sts/generate-paragraph-styles shape node)] - [:p.paragraph {:style style :dir "auto"} children])) + style (sts/generate-paragraph-styles shape node) + dir (:text-direction node "auto")] + [:p.paragraph {:style style :dir dir} children])) ;; -- Text nodes (mf/defc render-node diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index e10a1ced5..8e98c981e 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs @@ -49,10 +49,13 @@ [props] (let [children (obj/get props "children") bprops (obj/get props "blockProps") + data (obj/get bprops "data") style (sts/generate-paragraph-styles (obj/get bprops "shape") - (obj/get bprops "data"))] + (obj/get bprops "data")) + dir (:text-direction data "auto")] - [:div {:style style :dir "auto"} + + [:div {:style style :dir dir} [:> draft/EditorBlock props]])) (mf/defc selection-component diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 4c8a78bf1..25d77fd2a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -48,6 +48,9 @@ (def text-align-attrs [:text-align]) +(def text-direction-attrs + [:text-direction]) + (def text-spacing-attrs [:line-height :letter-spacing]) @@ -68,7 +71,8 @@ (d/concat text-valign-attrs text-align-attrs)) (def paragraph-attrs - text-align-attrs) + (d/concat text-align-attrs + text-direction-attrs)) (def text-attrs (d/concat text-typography-attrs @@ -109,6 +113,24 @@ :on-click #(handle-change % "justify")} i/text-align-justify]])) +(mf/defc text-direction-options + [{:keys [ids values on-change] :as props}] + (let [direction (:text-direction values) + handle-change (fn [event val] + (on-change {:text-direction val}))] + ;; --- Align + [:div.align-icons + [:span.tooltip.tooltip-bottom + {:alt (tr "workspace.options.text-options.direction-ltr") + :class (dom/classnames :current (= "ltr" direction)) + :on-click #(handle-change % "ltr")} + i/text-direction-ltr] + [:span.tooltip.tooltip-bottom + {:alt (tr "workspace.options.text-options.direction-rtl") + :class (dom/classnames :current (= "rtl" direction)) + :on-click #(handle-change % "rtl")} + i/text-direction-rtl]])) + (mf/defc vertical-align [{:keys [shapes ids values on-change] :as props}] @@ -293,6 +315,11 @@ [:> vertical-align opts]] [:div.row-flex - [:> grow-options opts] - [:> text-decoration-options opts]]]])) + [:> text-decoration-options opts] + [:> text-direction-options opts]] + + [:div.row-flex + [:> grow-options opts] + [:div.align-icons]]]])) +