X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/e2409a5fab3e38e1753adb51ff432b6104c7572b..refs/pull/5280/head:/resources/js/wysiwyg/ui/toolbars.ts diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts index fe19b94ed..35146e5a4 100644 --- a/resources/js/wysiwyg/ui/toolbars.ts +++ b/resources/js/wysiwyg/ui/toolbars.ts @@ -1,27 +1,96 @@ import {EditorButton} from "./framework/buttons"; -import { - blockquote, bold, bulletList, clearFormating, code, - dangerCallout, details, - h2, h3, h4, h5, highlightColor, image, - infoCallout, italic, link, numberList, paragraph, - redo, source, strikethrough, subscript, - successCallout, superscript, taskList, textColor, underline, - undo, - warningCallout -} from "./defaults/button-definitions"; -import {EditorContainerUiElement, EditorSimpleClassContainer} 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"; 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 - new EditorButton(undo), - new EditorButton(redo), + new EditorOverflowContainer(2, [ + new EditorButton(undo), + new EditorButton(redo), + ]), // Block formats new EditorFormatMenu([ @@ -31,39 +100,157 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement { new FormatPreviewButton(el('h5'), h5), new FormatPreviewButton(el('blockquote'), blockquote), new FormatPreviewButton(el('p'), paragraph), - new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout), - new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout), - new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout), - new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout), + 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), + new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout), + ]), ]), // Inline formats - new EditorButton(bold), - new EditorButton(italic), - new EditorButton(underline), - new EditorDropdownButton(textColor, [ - new EditorColorPicker('color'), + new EditorOverflowContainer(6, [ + new EditorButton(bold), + new EditorButton(italic), + new EditorButton(underline), + new EditorDropdownButton({ button: new EditorColorButton(textColor, 'color') }, [ + new EditorColorPicker('color'), + ]), + new EditorDropdownButton({button: new EditorColorButton(highlightColor, 'background-color')}, [ + new EditorColorPicker('background-color'), + ]), + new EditorButton(strikethrough), + new EditorButton(superscript), + new EditorButton(subscript), + new EditorButton(code), + new EditorButton(clearFormating), ]), - new EditorDropdownButton(highlightColor, [ - new EditorColorPicker('background-color'), - ]), - new EditorButton(strikethrough), - new EditorButton(superscript), - new EditorButton(subscript), - new EditorButton(code), - new EditorButton(clearFormating), + + // Alignment + 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 EditorButton(bulletList), - new EditorButton(numberList), - new EditorButton(taskList), + new EditorOverflowContainer(3, [ + new EditorButton(bulletList), + new EditorButton(numberList), + new EditorButton(taskList), + new EditorButton(indentDecrease), + new EditorButton(indentIncrease), + ]), // Insert types - new EditorButton(link), - new EditorButton(image), - new EditorButton(details), + new EditorOverflowContainer(4, [ + new EditorButton(link), + + 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), + ]), // Meta elements - new EditorButton(source), + new EditorOverflowContainer(3, [ + new EditorButton(source), + new EditorButton(fullscreen), + + // Test + // new EditorButton({ + // label: 'Test button', + // action(context: EditorUiContext) { + // context.editor.update(() => { + // // Do stuff + // }); + // }, + // isActive() { + // return false; + // } + // }) + ]), ]); +} + +export function getImageToolbarContent(): EditorUiElement[] { + return [new EditorButton(image)]; +} + +export function getLinkToolbarContent(): EditorUiElement[] { + return [ + new EditorButton(link), + new EditorButton(unlink), + ]; +} + +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