adds RTL text direction support to DraftWrapper

Datawheel · Mar 8, 2023 · a4ced4d · a4ced4d
1 parent 26019b6
commit a4ced4d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/cms/src/components/editors/DraftWrapper.jsx b/packages/cms/src/components/editors/DraftWrapper.jsx
@@ -158,9 +158,9 @@ class DraftWrapper extends Component {
     const MentionSuggestionsFormatter = this.mentionPluginFormatter.MentionSuggestions;
     const MentionSuggestionsSelector = this.mentionPluginSelector.MentionSuggestions;
     const plugins = [
-      this.mentionPlugin, 
-      this.mentionPluginFormatter, 
-      this.mentionPluginSelector, 
+      this.mentionPlugin,
+      this.mentionPluginFormatter,
+      this.mentionPluginSelector,
       this.staticToolbarPlugin,
       this.customLinkifyPlugin
     ];
@@ -169,7 +169,7 @@ class DraftWrapper extends Component {
     const {showToolbar} = this.props;
 
     return (
-      <div className="cms-draft-wrapper" onClick={this.focus}>
+      <div className="cms-draft-wrapper" onClick={this.focus} dir={this.props.dir || "ltr"}>
         {/* main editor */}
         {showToolbar && <Toolbar>
           {
@@ -194,7 +194,7 @@ class DraftWrapper extends Component {
           ref={c => this.editor = c}
           key="draft-editor"
         />
-        
+
 
         {/* variables dropdown (generators, materializers) */}
         <span className="cms-draft-entry cms-variable-draft-entry">

diff --git a/packages/cms/src/components/editors/RichTextEditor.jsx b/packages/cms/src/components/editors/RichTextEditor.jsx
@@ -76,6 +76,7 @@ class RichTextEditor extends Component {
             </label>
             <DraftWrapper
               id={f}
+              dir={["ar", "he"].includes(locale) ? "rtl" : "ltr"}
               key="dw"
               selectors={selectors}
               formatters={formatters}