From 9e59252663197a3a31a7b23714b065a42576da5c Mon Sep 17 00:00:00 2001
From: Muhammad Afaq Shuaib <78806673+AfaqShuaib09@users.noreply.github.com>
Date: Fri, 19 May 2023 12:50:59 +0500
Subject: [PATCH] feat: add directionality plugin to the tinyMCE (#879)

---
 .../__snapshots__/RichEditor.test.jsx.snap    | 20 +++++++++++--------
 src/components/RichEditor/index.jsx           |  6 ++++--
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/RichEditor/__snapshots__/RichEditor.test.jsx.snap b/src/components/RichEditor/__snapshots__/RichEditor.test.jsx.snap
index 0cbe02184..2a0a89c3b 100644
--- a/src/components/RichEditor/__snapshots__/RichEditor.test.jsx.snap
+++ b/src/components/RichEditor/__snapshots__/RichEditor.test.jsx.snap
@@ -27,9 +27,10 @@ exports[`RichEditor shows a rich text editor and an error 1`] = `
           "entity_encoding": "raw",
           "extended_valid_elements": "span[lang|id] -span",
           "menubar": false,
-          "plugins": "legacyoutput link lists language",
+          "plugins": "legacyoutput link lists language directionality",
+          "selector": "#rich-text-editor-test",
           "statusbar": false,
-          "toolbar": "undo redo | bold italic underline | bullist numlist | link | language",
+          "toolbar": "undo redo | bold italic underline | bullist numlist | link | language | ltr rtl",
         }
       }
       initialValue={null}
@@ -74,9 +75,10 @@ exports[`RichEditor shows a rich text editor with default text value 1`] = `
           "entity_encoding": "raw",
           "extended_valid_elements": "span[lang|id] -span",
           "menubar": false,
-          "plugins": "legacyoutput link lists language",
+          "plugins": "legacyoutput link lists language directionality",
+          "selector": "#rich-text-editor-test",
           "statusbar": false,
-          "toolbar": "undo redo | bold italic underline | bullist numlist | link | language",
+          "toolbar": "undo redo | bold italic underline | bullist numlist | link | language | ltr rtl",
         }
       }
       initialValue="<p>Prior text<p>"
@@ -119,9 +121,10 @@ exports[`RichEditor shows a rich text editor with no default text value 1`] = `
           "entity_encoding": "raw",
           "extended_valid_elements": "span[lang|id] -span",
           "menubar": false,
-          "plugins": "legacyoutput link lists language",
+          "plugins": "legacyoutput link lists language directionality",
+          "selector": "#rich-text-editor-test",
           "statusbar": false,
-          "toolbar": "undo redo | bold italic underline | bullist numlist | link | language",
+          "toolbar": "undo redo | bold italic underline | bullist numlist | link | language | ltr rtl",
         }
       }
       initialValue={null}
@@ -166,9 +169,10 @@ exports[`RichEditor shows a rich text editor with no maxChars 1`] = `
           "entity_encoding": "raw",
           "extended_valid_elements": "span[lang|id] -span",
           "menubar": false,
-          "plugins": "legacyoutput link lists language",
+          "plugins": "legacyoutput link lists language directionality",
+          "selector": "#rich-text-editor-test",
           "statusbar": false,
-          "toolbar": "undo redo | bold italic underline | bullist numlist | link | language",
+          "toolbar": "undo redo | bold italic underline | bullist numlist | link | language | ltr rtl",
         }
       }
       initialValue="<p>Prior text<p>"
diff --git a/src/components/RichEditor/index.jsx b/src/components/RichEditor/index.jsx
index a45ab6d36..9a45964c7 100644
--- a/src/components/RichEditor/index.jsx
+++ b/src/components/RichEditor/index.jsx
@@ -8,6 +8,7 @@ import 'tinymce/icons/default';
 import 'tinymce/plugins/legacyoutput';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
+import 'tinymce/plugins/directionality';
 import 'tinymce/themes/silver/theme';
 import '@edx/tinymce-language-selector';
 import 'tinymce/skins/ui/oxide/skin.css';
@@ -88,9 +89,10 @@ class RichEditor extends React.Component {
             init={{
               branding: false,
               menubar: false,
-              plugins: 'legacyoutput link lists language',
+              plugins: 'legacyoutput link lists language directionality',
               statusbar: false,
-              toolbar: 'undo redo | bold italic underline | bullist numlist | link | language',
+              selector: `#${id}`,
+              toolbar: 'undo redo | bold italic underline | bullist numlist | link | language | ltr rtl',
               entity_encoding: 'raw',
               extended_valid_elements: 'span[lang|id] -span',
               content_css: false,