fix: add rtl support to editor (#424)

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -4,6 +4,7 @@ import {
   useCallback,
   useEffect,
 } from 'react';
+import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
 import { a11ycheckerCss } from 'frontend-components-tinymce-advanced-plugins';
 import { isEmpty } from 'lodash-es';
 import tinyMCEStyles from '../../data/constants/tinyMCEStyles';
@@ -248,6 +249,7 @@ export const editorConfig = ({
     quickbarsInsertToolbar,
     quickbarsSelectionToolbar,
   } = pluginConfig({ isLibrary, placeholder, editorType });
+  const isLocaleRtl = isRtl(getLocale());
 
   return {
     onInit: (evt, editor) => {
@@ -264,6 +266,7 @@ export const editorConfig = ({
       content_style: tinyMCEStyles + a11ycheckerCss,
       min_height: minHeight,
       contextmenu: 'link table',
+      directionality: isLocaleRtl ? 'rtl' : 'ltr',
       document_base_url: lmsEndpointUrl,
       imagetools_cors_hosts: [removeProtocolFromUrl(lmsEndpointUrl), removeProtocolFromUrl(studioEndpointUrl)],
       imagetools_toolbar: imageToolbar,

src/setupTest.js

@@ -49,6 +49,7 @@ jest.mock('@edx/frontend-platform/i18n', () => {
       formatMessage: PropTypes.func,
     }),
     defineMessages: m => m,
+    getLocale: () => 'getLocale',
     FormattedDate: () => 'FormattedDate',
     FormattedMessage: () => 'FormattedMessage',
     FormattedTime: () => 'FormattedTime',