From 5e6e1d4f3e97ab3f7bffae85e4897231f5794b37 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Wed, 22 Nov 2023 14:47:46 +0530
Subject: [PATCH] feat(ui): add RTL support in feed editor (#14052)

* feat(ui): add RTL support in feed editor

* apply rtl on content only
---
 .../ui/src/components/FeedEditor/FeedEditor.tsx  | 12 ++++++++++--
 .../src/components/FeedEditor/feed-editor.less   | 15 ++++++++++++++-
 .../ui/src/constants/Feeds.constants.ts          |  1 +
 .../main/resources/ui/src/utils/QuillUtils.js    | 16 ++++++++++++++++
 4 files changed, 41 insertions(+), 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
index 200acb18d482..484829fcd8c7 100644
--- 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
index 5d7b08f74588..b7702780b549 100644
--- 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
index 2da402c54ccb..36825df1f1f7 100644
--- 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
index 420c6d71fa9f..c801246ceaad 100644
--- 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');
+}