Lexical: Fixed a range of issues in RTL mode

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,

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);

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
 

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;

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;
   }