respective book and chapter structure added.

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

diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts
index 48e11837c953445894deb1d9da08be6e0015d0db..35146e5a440aecca04097a3477c01f57e19f3ea4 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";
@@ -51,23 +51,39 @@ import {
     textColor,
     underline
 } from "./defaults/buttons/inline-formats";
-import {alignCenter, alignJustify, alignLeft, alignRight} from "./defaults/buttons/alignments";
-import {bulletList, numberList, taskList} from "./defaults/buttons/lists";
+import {
+    alignCenter,
+    alignJustify,
+    alignLeft,
+    alignRight,
+    directionLTR,
+    directionRTL
+} from "./defaults/buttons/alignments";
+import {
+    bulletList,
+    indentDecrease,
+    indentIncrease,
+    numberList,
+    taskList
+} from "./defaults/buttons/lists";
 import {
     codeBlock,
     details,
-    diagram,
+    diagram, diagramManager,
     editCodeBlock,
     horizontalRule,
     image,
     link, media,
     unlink
 } from "./defaults/buttons/objects";
-import {$isTableNode} from "@lexical/table";
-import {$selectionContainsNodeType} from "../utils/selection";
 import {el} from "../utils/dom";
+import {EditorButtonWithMenu} from "./framework/blocks/button-with-menu";
+import {EditorSeparator} from "./framework/blocks/separator";
+
+export function getMainEditorFullToolbar(context: EditorUiContext): EditorContainerUiElement {
+
+    const inRtlMode = context.manager.getDefaultDirection() === 'rtl';
 
-export function getMainEditorFullToolbar(): EditorContainerUiElement {
     return new EditorSimpleClassContainer('editor-toolbar-main', [
 
         // History state
@@ -84,7 +100,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
             new FormatPreviewButton(el('h5'), h5),
             new FormatPreviewButton(el('blockquote'), blockquote),
             new FormatPreviewButton(el('p'), paragraph),
-            new EditorDropdownButton({button: {label: 'Callouts'}, showOnHover: true, direction: 'vertical'}, [
+            new EditorDropdownButton({button: {label: 'Callouts', format: 'long'}, showOnHover: true, direction: 'vertical'}, [
                 new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
                 new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
                 new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
@@ -111,52 +127,60 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
         ]),
 
         // Alignment
-        new EditorOverflowContainer(4, [
+        new EditorOverflowContainer(6, [
             new EditorButton(alignLeft),
             new EditorButton(alignCenter),
             new EditorButton(alignRight),
             new EditorButton(alignJustify),
-        ]),
+            inRtlMode ? new EditorButton(directionLTR) : null,
+            inRtlMode ? new EditorButton(directionRTL) : null,
+        ].filter(x => x !== null)),
 
         // Lists
         new EditorOverflowContainer(3, [
             new EditorButton(bulletList),
             new EditorButton(numberList),
             new EditorButton(taskList),
+            new EditorButton(indentDecrease),
+            new EditorButton(indentIncrease),
         ]),
 
         // Insert types
-        new EditorOverflowContainer(8, [
+        new EditorOverflowContainer(4, [
             new EditorButton(link),
 
             new EditorDropdownButton({button: table, direction: 'vertical'}, [
-                new EditorDropdownButton({button: {...table, format: 'long'}, showOnHover: true}, [
+                new EditorDropdownButton({button: {label: 'Insert', format: 'long'}, showOnHover: true}, [
                     new EditorTableCreator(),
                 ]),
-                new EditorDropdownButton({button: {label: 'Cell'}, direction: 'vertical', showOnHover: true}, [
+                new EditorSeparator(),
+                new EditorDropdownButton({button: {label: 'Cell', format: 'long'}, direction: 'vertical', showOnHover: true}, [
                     new EditorButton(cellProperties),
                     new EditorButton(mergeCells),
                     new EditorButton(splitCell),
                 ]),
-                new EditorDropdownButton({button: {label: 'Row'}, direction: 'vertical', showOnHover: true}, [
+                new EditorDropdownButton({button: {label: 'Row', format: 'long'}, direction: 'vertical', showOnHover: true}, [
                     new EditorButton({...insertRowAbove, format: 'long'}),
                     new EditorButton({...insertRowBelow, format: 'long'}),
                     new EditorButton({...deleteRow, format: 'long'}),
                     new EditorButton(rowProperties),
+                    new EditorSeparator(),
                     new EditorButton(cutRow),
                     new EditorButton(copyRow),
                     new EditorButton(pasteRowBefore),
                     new EditorButton(pasteRowAfter),
                 ]),
-                new EditorDropdownButton({button: {label: 'Column'}, direction: 'vertical', showOnHover: true}, [
+                new EditorDropdownButton({button: {label: 'Column', format: 'long'}, direction: 'vertical', showOnHover: true}, [
                     new EditorButton({...insertColumnBefore, format: 'long'}),
                     new EditorButton({...insertColumnAfter, format: 'long'}),
                     new EditorButton({...deleteColumn, format: 'long'}),
+                    new EditorSeparator(),
                     new EditorButton(cutColumn),
                     new EditorButton(copyColumn),
                     new EditorButton(pasteColumnBefore),
                     new EditorButton(pasteColumnAfter),
                 ]),
+                new EditorSeparator(),
                 new EditorButton({...tableProperties, format: 'long'}),
                 new EditorButton(clearTableFormatting),
                 new EditorButton(resizeTableToContents),
@@ -166,7 +190,10 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
             new EditorButton(image),
             new EditorButton(horizontalRule),
             new EditorButton(codeBlock),
-            new EditorButton(diagram),
+            new EditorButtonWithMenu(
+                new EditorButton(diagram),
+                [new EditorButton(diagramManager)],
+            ),
             new EditorButton(media),
             new EditorButton(details),
         ]),