feat: add directionality plugin to the tinyMCE (#879)

openedx · May 19, 2023 · 9e59252 · 9e59252
1 parent 120fdff
commit 9e59252
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git 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
@@ -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,