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]]]]))
+