fix: add rtl support to editor

raccoongang · Nov 24, 2023 · 4524df1 · 4524df1
1 parent c0bc54a
commit 4524df1
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.js b/src/editors/sharedComponents/TinyMceWidget/hooks.js
@@ -4,6 +4,7 @@ import {
   useCallback,
   useEffect,
 } from 'react';
+import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
 import tinyMCEStyles from '../../data/constants/tinyMCEStyles';
 import { StrictDict } from '../../utils';
 import pluginConfig from './pluginConfig';
@@ -237,6 +238,7 @@ export const editorConfig = ({
     quickbarsInsertToolbar,
     quickbarsSelectionToolbar,
   } = pluginConfig({ isLibrary, placeholder, editorType });
+  const isLocaleRtl = isRtl(getLocale());
 
   return {
     onInit: (evt, editor) => {
@@ -253,6 +255,7 @@ export const editorConfig = ({
       content_style: tinyMCEStyles,
       min_height: minHeight,
       contextmenu: 'link table',
+      directionality: isLocaleRtl ? 'rtl' : 'ltr',
       document_base_url: lmsEndpointUrl,
       imagetools_cors_hosts: [removeProtocolFromUrl(lmsEndpointUrl), removeProtocolFromUrl(studioEndpointUrl)],
       imagetools_toolbar: imageToolbar,

diff --git a/src/setupTest.js b/src/setupTest.js
@@ -54,6 +54,7 @@ jest.mock('@edx/frontend-platform/i18n', () => {
       formatMessage: PropTypes.func,
     }),
     defineMessages: m => m,
+    getLocale: () => 'getLocale',
     FormattedDate: () => 'FormattedDate',
     FormattedMessage: () => 'FormattedMessage',
     FormattedTime: () => 'FormattedTime',