BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/toolbars.ts

   1 import {EditorButton} from "./framework/buttons";
   2 import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiElement} from "./framework/core";
   3 import {EditorFormatMenu} from "./framework/blocks/format-menu";
   4 import {FormatPreviewButton} from "./framework/blocks/format-preview-button";
   5 import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
   6 import {EditorColorPicker} from "./framework/blocks/color-picker";
   7 import {EditorTableCreator} from "./framework/blocks/table-creator";
   8 import {EditorColorButton} from "./framework/blocks/color-button";
   9 import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
  10 import {
  11     cellProperties, clearTableFormatting,
  12     copyColumn,
  13     copyRow,
  14     cutColumn,
  15     cutRow,
  16     deleteColumn,
  17     deleteRow,
  18     deleteTable,
  19     deleteTableMenuAction,
  20     insertColumnAfter,
  21     insertColumnBefore,
  22     insertRowAbove,
  23     insertRowBelow,
  24     mergeCells,
  25     pasteColumnAfter,
  26     pasteColumnBefore,
  27     pasteRowAfter,
  28     pasteRowBefore, resizeTableToContents,
  29     rowProperties,
  30     splitCell,
  31     table, tableProperties
  32 } from "./defaults/buttons/tables";
  33 import {fullscreen, redo, source, undo} from "./defaults/buttons/controls";
  34 import {
  35     blockquote, dangerCallout,
  36     h2,
  37     h3,
  38     h4,
  39     h5,
  40     infoCallout,
  41     paragraph,
  42     successCallout,
  43     warningCallout
  44 } from "./defaults/buttons/block-formats";
  45 import {
  46     bold, clearFormating, code,
  47     highlightColor,
  48     italic,
  49     strikethrough, subscript,
  50     superscript,
  51     textColor,
  52     underline
  53 } from "./defaults/buttons/inline-formats";
  54 import {alignCenter, alignJustify, alignLeft, alignRight} from "./defaults/buttons/alignments";
  55 import {
  56     bulletList,
  57     indentDecrease,
  58     indentIncrease,
  59     numberList,
  60     taskList
  61 } from "./defaults/buttons/lists";
  62 import {
  63     codeBlock,
  64     details,
  65     diagram, diagramManager,
  66     editCodeBlock,
  67     horizontalRule,
  68     image,
  69     link, media,
  70     unlink
  71 } from "./defaults/buttons/objects";
  72 import {el} from "../utils/dom";
  73 import {EditorButtonWithMenu} from "./framework/blocks/button-with-menu";
  74 import {EditorSeparator} from "./framework/blocks/separator";
  75
  76 export function getMainEditorFullToolbar(): EditorContainerUiElement {
  77     return new EditorSimpleClassContainer('editor-toolbar-main', [
  78
  79         // History state
  80         new EditorOverflowContainer(2, [
  81             new EditorButton(undo),
  82             new EditorButton(redo),
  83         ]),
  84
  85         // Block formats
  86         new EditorFormatMenu([
  87             new FormatPreviewButton(el('h2'), h2),
  88             new FormatPreviewButton(el('h3'), h3),
  89             new FormatPreviewButton(el('h4'), h4),
  90             new FormatPreviewButton(el('h5'), h5),
  91             new FormatPreviewButton(el('blockquote'), blockquote),
  92             new FormatPreviewButton(el('p'), paragraph),
  93             new EditorDropdownButton({button: {label: 'Callouts', format: 'long'}, showOnHover: true, direction: 'vertical'}, [
  94                 new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
  95                 new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
  96                 new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
  97                 new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout),
  98             ]),
  99         ]),
 100
 101         // Inline formats
 102         new EditorOverflowContainer(6, [
 103             new EditorButton(bold),
 104             new EditorButton(italic),
 105             new EditorButton(underline),
 106             new EditorDropdownButton({ button: new EditorColorButton(textColor, 'color') }, [
 107                 new EditorColorPicker('color'),
 108             ]),
 109             new EditorDropdownButton({button: new EditorColorButton(highlightColor, 'background-color')}, [
 110                 new EditorColorPicker('background-color'),
 111             ]),
 112             new EditorButton(strikethrough),
 113             new EditorButton(superscript),
 114             new EditorButton(subscript),
 115             new EditorButton(code),
 116             new EditorButton(clearFormating),
 117         ]),
 118
 119         // Alignment
 120         new EditorOverflowContainer(4, [
 121             new EditorButton(alignLeft),
 122             new EditorButton(alignCenter),
 123             new EditorButton(alignRight),
 124             new EditorButton(alignJustify),
 125         ]),
 126
 127         // Lists
 128         new EditorOverflowContainer(5, [
 129             new EditorButton(bulletList),
 130             new EditorButton(numberList),
 131             new EditorButton(taskList),
 132             new EditorButton(indentDecrease),
 133             new EditorButton(indentIncrease),
 134         ]),
 135
 136         // Insert types
 137         new EditorOverflowContainer(4, [
 138             new EditorButton(link),
 139
 140             new EditorDropdownButton({button: table, direction: 'vertical'}, [
 141                 new EditorDropdownButton({button: {label: 'Insert', format: 'long'}, showOnHover: true}, [
 142                     new EditorTableCreator(),
 143                 ]),
 144                 new EditorSeparator(),
 145                 new EditorDropdownButton({button: {label: 'Cell', format: 'long'}, direction: 'vertical', showOnHover: true}, [
 146                     new EditorButton(cellProperties),
 147                     new EditorButton(mergeCells),
 148                     new EditorButton(splitCell),
 149                 ]),
 150                 new EditorDropdownButton({button: {label: 'Row', format: 'long'}, direction: 'vertical', showOnHover: true}, [
 151                     new EditorButton({...insertRowAbove, format: 'long'}),
 152                     new EditorButton({...insertRowBelow, format: 'long'}),
 153                     new EditorButton({...deleteRow, format: 'long'}),
 154                     new EditorButton(rowProperties),
 155                     new EditorSeparator(),
 156                     new EditorButton(cutRow),
 157                     new EditorButton(copyRow),
 158                     new EditorButton(pasteRowBefore),
 159                     new EditorButton(pasteRowAfter),
 160                 ]),
 161                 new EditorDropdownButton({button: {label: 'Column', format: 'long'}, direction: 'vertical', showOnHover: true}, [
 162                     new EditorButton({...insertColumnBefore, format: 'long'}),
 163                     new EditorButton({...insertColumnAfter, format: 'long'}),
 164                     new EditorButton({...deleteColumn, format: 'long'}),
 165                     new EditorSeparator(),
 166                     new EditorButton(cutColumn),
 167                     new EditorButton(copyColumn),
 168                     new EditorButton(pasteColumnBefore),
 169                     new EditorButton(pasteColumnAfter),
 170                 ]),
 171                 new EditorSeparator(),
 172                 new EditorButton({...tableProperties, format: 'long'}),
 173                 new EditorButton(clearTableFormatting),
 174                 new EditorButton(resizeTableToContents),
 175                 new EditorButton(deleteTableMenuAction),
 176             ]),
 177
 178             new EditorButton(image),
 179             new EditorButton(horizontalRule),
 180             new EditorButton(codeBlock),
 181             new EditorButtonWithMenu(
 182                 new EditorButton(diagram),
 183                 [new EditorButton(diagramManager)],
 184             ),
 185             new EditorButton(media),
 186             new EditorButton(details),
 187         ]),
 188
 189         // Meta elements
 190         new EditorOverflowContainer(3, [
 191             new EditorButton(source),
 192             new EditorButton(fullscreen),
 193
 194             // Test
 195             // new EditorButton({
 196             //     label: 'Test button',
 197             //     action(context: EditorUiContext) {
 198             //         context.editor.update(() => {
 199             //             // Do stuff
 200             //         });
 201             //     },
 202             //     isActive() {
 203             //         return false;
 204             //     }
 205             // })
 206         ]),
 207     ]);
 208 }
 209
 210 export function getImageToolbarContent(): EditorUiElement[] {
 211     return [new EditorButton(image)];
 212 }
 213
 214 export function getLinkToolbarContent(): EditorUiElement[] {
 215     return [
 216         new EditorButton(link),
 217         new EditorButton(unlink),
 218     ];
 219 }
 220
 221 export function getCodeToolbarContent(): EditorUiElement[] {
 222     return [
 223         new EditorButton(editCodeBlock),
 224     ];
 225 }
 226
 227 export function getTableToolbarContent(): EditorUiElement[] {
 228     return [
 229         new EditorOverflowContainer(2, [
 230             new EditorButton(tableProperties),
 231             new EditorButton(deleteTable),
 232         ]),
 233         new EditorOverflowContainer(3, [
 234             new EditorButton(insertRowAbove),
 235             new EditorButton(insertRowBelow),
 236             new EditorButton(deleteRow),
 237         ]),
 238         new EditorOverflowContainer(3, [
 239             new EditorButton(insertColumnBefore),
 240             new EditorButton(insertColumnAfter),
 241             new EditorButton(deleteColumn),
 242         ]),
 243     ];
 244 }