🎉 Add text-direction option on for text shape.

frontend/resources/images/icons/text-direction-ltr.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.29 132.29">
+  <path d="M0 92.6V39.7l26.45 26.45zm111.13 39.7V14.1h21.16V0H75.86C44.94 0 26.5 15.82 26.5 42.32c0 24.4 15.69 39.73 42.32 42v47.97h14.1V14.11h14.11v118.18zM40.59 42.31c0-19.97 14.07-26.4 28.22-27.85v55.7c-14.15-1.44-28.22-7.88-28.22-27.85z" fill="#000"/>
+</svg>

frontend/resources/images/icons/text-direction-rtl.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.29 132.29">
+  <path d="M132.3 39.69V92.6l-26.46-26.45zm-47.65 92.6V14.11h21.16V0H49.38C18.46 0 0 15.82 0 42.32c0 24.4 15.7 39.73 42.32 42v47.97h14.11V14.11h14.1v118.18zM14.1 42.32c0-19.97 14.06-26.4 28.21-27.85v55.7c-14.15-1.44-28.21-7.88-28.21-27.85z" fill="#000"/>
+</svg>

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",

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;

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

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)]
+        style    (sts/generate-paragraph-styles shape node)
-    [:p.paragraph {:style style :dir "auto"} children]))
+        dir      (:text-direction node "auto")]
+    [:p.paragraph {:style style :dir dir} children]))
 
 ;; -- Text nodes
 (mf/defc render-node

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

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