feat(ui): add RTL support in description editor (#14057)

openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-ltr.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#555555" viewBox="0 0 18 18"> <polygon points="15 12 13 10 15 8 15 12"></polygon> <line x1="9" x2="5" y1="4" y2="4"></line> <path d="M5,3A3,3,0,0,0,5,9H6V3H5Z"></path> <rect height="11" width="1" x="5" y="4"></rect> <rect height="11" width="1" x="7" y="4"></rect> </svg>

openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#555555" viewBox="0 0 18 18"> <polygon points="3 11 5 9 3 7 3 11"></polygon> <line x1="15" x2="11" y1="4" y2="4"></line> <path d="M11,3a3,3,0,0,0,0,6h1V3H11Z"></path> <rect height="11" width="1" x="11" y="4"></rect> <rect height="11" width="1" x="13" y="4"></rect> </svg>

openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/EditorToolBar.ts

@@ -11,6 +11,8 @@
  *  limitations under the License.
  */
 
+import LTRIcon from '../../../assets/svg/ic-ltr.svg';
+import RTLIcon from '../../../assets/svg/ic-rtl.svg';
 import MarkdownIcon from '../../../assets/svg/markdown.svg';
 import i18n from '../../../utils/i18next/LocalUtil';
 
@@ -41,6 +43,55 @@ const markdownButton = (): HTMLButtonElement => {
   return button;
 };
 
+const getRTLButtonIcon = (mode: 'rtl' | 'ltr') => `
+  <img
+    alt="rtl-icon"
+    class="svg-icon"
+    height="24px"
+    width="24px"
+    src="${mode === 'rtl' ? RTLIcon : LTRIcon}" />`;
+
+const toggleEditorDirection = (button: HTMLButtonElement) => {
+  const editorElement = document.querySelector(
+    '.toastui-editor.md-mode.active'
+  );
+
+  if (editorElement) {
+    const editorElementDir = editorElement.getAttribute('dir');
+    const newDir = editorElementDir === 'rtl' ? 'ltr' : 'rtl';
+    const textAlign = newDir === 'rtl' ? 'right' : 'left';
+
+    editorElement.setAttribute('dir', newDir);
+    editorElement.setAttribute('style', `text-align: ${textAlign};`);
+    button.innerHTML = getRTLButtonIcon(newDir === 'rtl' ? 'ltr' : 'rtl');
+  }
+};
+
+const rtlButton = (): HTMLButtonElement => {
+  const button = document.createElement('button');
+
+  button.onclick = () => toggleEditorDirection(button);
+
+  button.className = 'toastui-editor-toolbar-icons rtl-icon';
+  button.id = 'rtl-button';
+  button.style.cssText = 'background-image: none; margin: 0; margin-top: 4px;';
+  button.type = 'button';
+  button.innerHTML = getRTLButtonIcon('rtl');
+
+  return button;
+};
+
+const rtlButtonUpdateHandler = (toolbarState: {
+  active: boolean;
+  disabled?: boolean;
+}) => {
+  const rtlButtonElement = document.getElementById('rtl-button');
+  if (rtlButtonElement) {
+    (rtlButtonElement as HTMLButtonElement).disabled =
+      toolbarState.disabled || false;
+  }
+};
+
 export const EDITOR_TOOLBAR_ITEMS = [
   'heading',
   'bold',
@@ -53,6 +104,12 @@ export const EDITOR_TOOLBAR_ITEMS = [
   'quote',
   'code',
   'codeblock',
+  {
+    name: i18n.t('label.rtl-ltr-direction'),
+    el: rtlButton(),
+    tooltip: i18n.t('label.rtl-ltr-direction'),
+    onUpdated: rtlButtonUpdateHandler,
+  },
   {
     name: i18n.t('label.markdown-guide'),
     el: markdownButton(),

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -855,6 +855,7 @@
     "row": "Zeile",
     "row-count-lowercase": "Anzahl der Zeilen",
     "row-plural": "Zeilen",
+    "rtl-ltr-direction": "RTL/LTR direction",
     "rule": "Regel",
     "rule-effect": "Regelwirkung",
     "rule-lowercase": "regel",

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -855,6 +855,7 @@
     "row": "Row",
     "row-count-lowercase": "row count",
     "row-plural": "Rows",
+    "rtl-ltr-direction": "RTL/LTR direction",
     "rule": "Rule",
     "rule-effect": "Rule Effect",
     "rule-lowercase": "rule",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -855,6 +855,7 @@
     "row": "Fila",
     "row-count-lowercase": "número de filas",
     "row-plural": "Filas",
+    "rtl-ltr-direction": "RTL/LTR direction",
     "rule": "Regla",
     "rule-effect": "Efecto de la Regla",
     "rule-lowercase": "rule",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -855,6 +855,7 @@
     "row": "Ligne",
     "row-count-lowercase": "Nombre de Ligne",
     "row-plural": "Lignes",
+    "rtl-ltr-direction": "RTL/LTR direction",
     "rule": "Règle",
     "rule-effect": "Effet de la Règle",
     "rule-lowercase": "règle",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -855,6 +855,7 @@
     "row": "行",
     "row-count-lowercase": "行数",
     "row-plural": "行",
+    "rtl-ltr-direction": "RTL/LTR direction",
     "rule": "ルール",
     "rule-effect": "ルールの効果",
     "rule-lowercase": "rule",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -855,6 +855,7 @@
     "row": "Linha",
     "row-count-lowercase": "contagem de linhas",
     "row-plural": "Linhas",
+    "rtl-ltr-direction": "RTL/LTR direction",
     "rule": "Regra",
     "rule-effect": "Efeito da regra",
     "rule-lowercase": "rule",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json

@@ -855,6 +855,7 @@
     "row": "Строка",
     "row-count-lowercase": "количество строк",
     "row-plural": "Строки",
+    "rtl-ltr-direction": "RTL/LTR direction",
     "rule": "Правило",
     "rule-effect": "Действие правила",
     "rule-lowercase": "правило",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -855,6 +855,7 @@
     "row": "行",
     "row-count-lowercase": "行计数",
     "row-plural": "行",
+    "rtl-ltr-direction": "RTL/LTR direction",
     "rule": "规则",
     "rule-effect": "规则生效",
     "rule-lowercase": "规则",