Lexical: Fixed a range of issues in RTL mode

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index ebc142e2abc414184f58fff607eb0554d176bf10..eed1c61555f79f11f0c3528786a96c1284e33412 100644 (file)
--- a/resources/js/components/wysiwyg-editor.js
+++ b/resources/js/components/wysiwyg-editor.js
@@ -15,6 +15,8 @@ export class WysiwygEditor extends Component {
             this.editor = wysiwyg.createPageEditorInstance(this.editContainer, editorContent, {
                 drawioUrl: this.getDrawIoUrl(),
                 pageId: Number(this.$opts.pageId),
+                darkMode: document.documentElement.classList.contains('dark-mode'),
+                textDirection: this.$opts.textDirection,
                 translations: {
                     imageUploadErrorText: this.$opts.imageUploadErrorText,
                     serverUploadLimitText: this.$opts.serverUploadLimitText,

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index c5dd151af6789789b39625361cadb2c303b527ad..c4403773bf2a93f6dfb3551da78bc10493643766 100644 (file)
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -42,8 +42,13 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
     const editWrap = el('div', {
         class: 'editor-content-wrap',
     }, [editArea]);
+
     container.append(editWrap);
     container.classList.add('editor-container');
+    container.setAttribute('dir', options.textDirection);
+    if (options.darkMode) {
+        container.classList.add('editor-dark');
+    }
 
     const editor = createEditor(config);
     editor.setRootElement(editArea);

diff --git a/resources/js/wysiwyg/todo.md b/resources/js/wysiwyg/todo.md
index 2662350afe11e677af9d7e66f10e84331b1d6054..874ac537fe30018054622d7048be49760979b310 100644 (file)
--- a/resources/js/wysiwyg/todo.md
+++ b/resources/js/wysiwyg/todo.md
@@ -2,12 +2,12 @@
 
 ## In progress
 
-//
+- RTL/LTR support
 
 ## Main Todo
 
 - Mac: Shortcut support via command.
-- RTL/LTR support
+- Translations
 
 ## Secondary Todo
 

diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index 61a9f2de01fa579b6975d67d272dd369bf9159a0..dd1e1a2c368aa2556ffe5e6bf7a7ae3e271e4dac 100644 (file)
--- a/resources/sass/_editor.scss
+++ b/resources/sass/_editor.scss
@@ -96,6 +96,9 @@ body.editor-is-fullscreen {
     fill: #888;
   }
 }
+.editor-container[dir="rtl"] .editor-menu-button-icon {
+  rotate: 180deg;
+}
 .editor-button-with-menu-container {
   display: flex;
   flex-direction: row;
@@ -171,6 +174,9 @@ body.editor-is-fullscreen {
   background-position: 98% 50%;
   background-size: 28px;
 }
+.editor-container[dir="rtl"] .editor-format-menu-toggle {
+  background-position: 2% 50%;
+}
 .editor-format-menu .editor-dropdown-menu {
   min-width: 300px;
   .editor-dropdown-menu {
@@ -324,9 +330,10 @@ body.editor-is-fullscreen {
 .editor-node-resizer {
   position: absolute;
   left: 0;
-  right: 0;
+  right: auto;
   display: inline-block;
   outline: 2px dashed var(--editor-color-primary);
+  direction: ltr;
 }
 .editor-node-resizer-handle {
   position: absolute;

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index ca59c85ca1a91ff5a243167b579144c22ae16eb5..6e6f7bb7e21bf9607f55375fee2eadcd264fe375 100755 (executable)
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -2,13 +2,11 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  overflow: hidden;
 
   .edit-area {
     flex: 1;
     flex-direction: column;
     z-index: 10;
-    overflow: hidden;
     border-radius: 0 0 8px 8px;
   }