feat(ui): add RTL support in feed editor (#14052)

* feat(ui): add RTL support in feed editor * apply rtl on content only
open-metadata · Nov 22, 2023 · 5e6e1d4 · 5e6e1d4
1 parent 9c990fe
commit 5e6e1d4
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx
@@ -34,7 +34,11 @@ import {
 } from '../../constants/Feeds.constants';
 import { HTMLToMarkdown, matcher } from '../../utils/FeedUtils';
 import { LinkBlot } from '../../utils/QuillLink/QuillLink';
-import { insertMention, insertRef } from '../../utils/QuillUtils';
+import {
+  directionHandler,
+  insertMention,
+  insertRef,
+} from '../../utils/QuillUtils';
 import { getEntityIcon } from '../../utils/TableUtils';
 import { editorRef } from '../common/RichTextEditor/RichTextEditor.interface';
 import './feed-editor.less';
@@ -77,6 +81,7 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
           handlers: {
             insertMention: insertMention,
             insertRef: insertRef,
+            direction: directionHandler,
           },
         },
         'emoji-toolbar': true,
@@ -226,7 +231,10 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
     }, [focused, editorRef]);
 
     return (
-      <div className={className} data-testid="editor-wrapper">
+      <div
+        className={className}
+        data-testid="editor-wrapper"
+        id="om-quill-editor">
         <ReactQuill
           className={classNames('editor-container', editorClass)}
           modules={modules}

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/feed-editor.less b/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/feed-editor.less
@@ -1036,12 +1036,19 @@
   text-decoration: none;
 }
 
+.ql-snow.ql-toolbar .ql-formats:nth-child(5) {
+  vertical-align: baseline;
+}
+
+.ql-snow.ql-toolbar .ql-formats button.ql-insertMention {
+  padding: 0px;
+}
+
 .ql-insertMention::after {
   content: '@';
   font-weight: bold;
   font-size: 18px;
   display: block;
-  margin-top: -4px;
 }
 .ql-insertRef::after {
   content: '#';
@@ -1095,3 +1102,9 @@ button.ql-emoji {
   height: 24px;
   width: 24px;
 }
+
+#om-quill-editor[data-dir='rtl'] {
+  .ql-editor.ql-blank::before {
+    text-align: right;
+  }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/Feeds.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/Feeds.constants.ts
@@ -45,6 +45,7 @@ export const TOOLBAR_ITEMS = [
   [{ list: 'ordered' }, { list: 'bullet' }],
   ['link'],
   ['insertMention', 'insertRef', 'emoji'],
+  [{ direction: 'rtl' }],
 ];
 
 export enum TaskOperation {

diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/QuillUtils.js b/openmetadata-ui/src/main/resources/ui/src/utils/QuillUtils.js
@@ -21,3 +21,19 @@ export function insertRef() {
   const ref = this.quill.getModule('mention');
   ref.openMenu('#');
 }
+
+export function directionHandler(value) {
+  const { align } = this.quill.getFormat();
+
+  // get the editor container
+  const container = document.getElementById('om-quill-editor');
+
+  if (value === 'rtl' && align == null) {
+    container.setAttribute('data-dir', value);
+    this.quill.format('align', 'right', 'user');
+  } else if (!value && align === 'right') {
+    this.quill.format('align', false, 'user');
+    container.setAttribute('data-dir', 'ltr');
+  }
+  this.quill.format('direction', value, 'user');
+}