X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/b367490edc84b4aa5cd51e9481037faf0da4558b..refs/pull/5313/head:/resources/js/wysiwyg/ui/toolbars.ts

diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts
index 9145b8761..35146e5a4 100644
--- a/resources/js/wysiwyg/ui/toolbars.ts
+++ b/resources/js/wysiwyg/ui/toolbars.ts
@@ -1,19 +1,5 @@
 import {EditorButton} from "./framework/buttons";
-import {
-    alignCenter, alignJustify,
-    alignLeft,
-    alignRight,
-    blockquote, bold, bulletList, clearFormating, code, codeBlock,
-    dangerCallout, details, editCodeBlock, fullscreen,
-    h2, h3, h4, h5, highlightColor, horizontalRule, image,
-    infoCallout, italic, link, numberList, paragraph,
-    redo, source, strikethrough, subscript,
-    successCallout, superscript, table, taskList, textColor, underline,
-    undo, unlink,
-    warningCallout
-} from "./defaults/button-definitions";
-import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiElement} from "./framework/core";
-import {el} from "../helpers";
+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";
@@ -21,8 +7,83 @@ import {EditorColorPicker} from "./framework/blocks/color-picker";
 import {EditorTableCreator} from "./framework/blocks/table-creator";
 import {EditorColorButton} from "./framework/blocks/color-button";
 import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
+import {
+    cellProperties, clearTableFormatting,
+    copyColumn,
+    copyRow,
+    cutColumn,
+    cutRow,
+    deleteColumn,
+    deleteRow,
+    deleteTable,
+    deleteTableMenuAction,
+    insertColumnAfter,
+    insertColumnBefore,
+    insertRowAbove,
+    insertRowBelow,
+    mergeCells,
+    pasteColumnAfter,
+    pasteColumnBefore,
+    pasteRowAfter,
+    pasteRowBefore, resizeTableToContents,
+    rowProperties,
+    splitCell,
+    table, tableProperties
+} from "./defaults/buttons/tables";
+import {fullscreen, redo, source, undo} from "./defaults/buttons/controls";
+import {
+    blockquote, dangerCallout,
+    h2,
+    h3,
+    h4,
+    h5,
+    infoCallout,
+    paragraph,
+    successCallout,
+    warningCallout
+} from "./defaults/buttons/block-formats";
+import {
+    bold, clearFormating, code,
+    highlightColor,
+    italic,
+    strikethrough, subscript,
+    superscript,
+    textColor,
+    underline
+} from "./defaults/buttons/inline-formats";
+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, diagramManager,
+    editCodeBlock,
+    horizontalRule,
+    image,
+    link, media,
+    unlink
+} from "./defaults/buttons/objects";
+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
@@ -39,7 +100,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
             new FormatPreviewButton(el('h5'), h5),
             new FormatPreviewButton(el('blockquote'), blockquote),
             new FormatPreviewButton(el('p'), paragraph),
-            new EditorDropdownButton({label: 'Callouts'}, true, [
+            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),
@@ -52,10 +113,10 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
             new EditorButton(bold),
             new EditorButton(italic),
             new EditorButton(underline),
-            new EditorDropdownButton(new EditorColorButton(textColor, 'color'), false, [
+            new EditorDropdownButton({ button: new EditorColorButton(textColor, 'color') }, [
                 new EditorColorPicker('color'),
             ]),
-            new EditorDropdownButton(new EditorColorButton(highlightColor, 'background-color'), false, [
+            new EditorDropdownButton({button: new EditorColorButton(highlightColor, 'background-color')}, [
                 new EditorColorPicker('background-color'),
             ]),
             new EditorButton(strikethrough),
@@ -66,29 +127,74 @@ 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(6, [
+        new EditorOverflowContainer(4, [
             new EditorButton(link),
-            new EditorDropdownButton(table, false, [
-                new EditorTableCreator(),
+
+            new EditorDropdownButton({button: table, direction: 'vertical'}, [
+                new EditorDropdownButton({button: {label: 'Insert', format: 'long'}, showOnHover: true}, [
+                    new EditorTableCreator(),
+                ]),
+                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', 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', 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),
+                new EditorButton(deleteTableMenuAction),
             ]),
+
             new EditorButton(image),
             new EditorButton(horizontalRule),
             new EditorButton(codeBlock),
+            new EditorButtonWithMenu(
+                new EditorButton(diagram),
+                [new EditorButton(diagramManager)],
+            ),
+            new EditorButton(media),
             new EditorButton(details),
         ]),
 
@@ -128,4 +234,23 @@ export function getCodeToolbarContent(): EditorUiElement[] {
     return [
         new EditorButton(editCodeBlock),
     ];
+}
+
+export function getTableToolbarContent(): EditorUiElement[] {
+    return [
+        new EditorOverflowContainer(2, [
+            new EditorButton(tableProperties),
+            new EditorButton(deleteTable),
+        ]),
+        new EditorOverflowContainer(3, [
+            new EditorButton(insertRowAbove),
+            new EditorButton(insertRowBelow),
+            new EditorButton(deleteRow),
+        ]),
+        new EditorOverflowContainer(3, [
+            new EditorButton(insertColumnBefore),
+            new EditorButton(insertColumnAfter),
+            new EditorButton(deleteColumn),
+        ]),
+    ];
 }
\ No newline at end of file