Lexical: Added mobile toolbar support

[bookstack] / resources / js / wysiwyg / ui / toolbars.ts

diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts
index b064a2a9f1b0f67a19a0d7fb8bad86da810ab585..886e1394b20c447b9bfa0b4432004d45e6442bc4 100644 (file)
--- a/resources/js/wysiwyg/ui/toolbars.ts
+++ b/resources/js/wysiwyg/ui/toolbars.ts
@@ -1,5 +1,5 @@
 import {EditorButton} from "./framework/buttons";
-import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiElement} from "./framework/core";
+import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiContext, EditorUiElement} from "./framework/core";
 import {EditorFormatMenu} from "./framework/blocks/format-menu";
 import {FormatPreviewButton} from "./framework/blocks/format-preview-button";
 import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
@@ -80,7 +80,10 @@ import {el} from "../utils/dom";
 import {EditorButtonWithMenu} from "./framework/blocks/button-with-menu";
 import {EditorSeparator} from "./framework/blocks/separator";
 
-export function getMainEditorFullToolbar(): EditorContainerUiElement {
+export function getMainEditorFullToolbar(context: EditorUiContext): EditorContainerUiElement {
+
+    const inRtlMode = context.manager.getDefaultDirection() === 'rtl';
+
     return new EditorSimpleClassContainer('editor-toolbar-main', [
 
         // History state
@@ -124,17 +127,17 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
         ]),
 
         // Alignment
-        new EditorOverflowContainer(6, [ // TODO - Dynamic
+        new EditorOverflowContainer(6, [
             new EditorButton(alignLeft),
             new EditorButton(alignCenter),
             new EditorButton(alignRight),
             new EditorButton(alignJustify),
-            new EditorButton(directionLTR), // TODO - Dynamic
-            new EditorButton(directionRTL), // TODO - Dynamic
-        ]),
+            inRtlMode ? new EditorButton(directionLTR) : null,
+            inRtlMode ? new EditorButton(directionRTL) : null,
+        ].filter(x => x !== null)),
 
         // Lists
-        new EditorOverflowContainer(5, [
+        new EditorOverflowContainer(3, [
             new EditorButton(bulletList),
             new EditorButton(numberList),
             new EditorButton(taskList),
@@ -146,8 +149,8 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
         new EditorOverflowContainer(4, [
             new EditorButton(link),
 
-            new EditorDropdownButton({button: table, direction: 'vertical'}, [
-                new EditorDropdownButton({button: {label: 'Insert', format: 'long'}, showOnHover: true}, [
+            new EditorDropdownButton({button: table, direction: 'vertical', showAside: false}, [
+                new EditorDropdownButton({button: {label: 'Insert', format: 'long'}, showOnHover: true, showAside: true}, [
                     new EditorTableCreator(),
                 ]),
                 new EditorSeparator(),