From e97559b8a2bea3d39087d320c9ea34d144e73269 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Wed, 22 Nov 2023 14:51:04 +0530 Subject: [PATCH] feat(ui): add RTL support in description editor (#14057) --- .../resources/ui/src/assets/svg/ic-ltr.svg | 1 + .../resources/ui/src/assets/svg/ic-rtl.svg | 1 + .../common/RichTextEditor/EditorToolBar.ts | 57 +++++++++++++++++++ .../ui/src/locale/languages/de-de.json | 1 + .../ui/src/locale/languages/en-us.json | 1 + .../ui/src/locale/languages/es-es.json | 1 + .../ui/src/locale/languages/fr-fr.json | 1 + .../ui/src/locale/languages/ja-jp.json | 1 + .../ui/src/locale/languages/pt-br.json | 1 + .../ui/src/locale/languages/ru-ru.json | 1 + .../ui/src/locale/languages/zh-cn.json | 1 + 11 files changed, 67 insertions(+) create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-ltr.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-rtl.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-ltr.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-ltr.svg new file mode 100644 index 000000000000..4e2fbb3c2be2 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-ltr.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-rtl.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-rtl.svg new file mode 100644 index 000000000000..57cac45816ad --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-rtl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/EditorToolBar.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/EditorToolBar.ts index 9dff3a59718e..a658d1235241 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/EditorToolBar.ts +++ b/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') => ` + rtl-icon`; + +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(), diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json index da8c50e8d355..86a5b01fe465 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json +++ b/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", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json index 636ddb086057..d4b866e4206d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json +++ b/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", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json index a2ea8eccb123..601d177620f1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json +++ b/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", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json index 7937912f0d3c..54c414ef1b91 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json +++ b/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", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json index c814c8cafbda..3d6b3b74e5b7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json +++ b/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", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json index c8a0fb335ac6..3c68e50c1908 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json +++ b/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", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json index efb09140b476..3e9c9846df5e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json +++ b/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": "правило", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json index d82c2a54e5c5..8d6daed00199 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json +++ b/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": "规则",