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 {el} from "../helpers";
   4 import {EditorFormatMenu} from "./framework/blocks/format-menu";
   5 import {FormatPreviewButton} from "./framework/blocks/format-preview-button";
   6 import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
   7 import {EditorColorPicker} from "./framework/blocks/color-picker";
   8 import {EditorTableCreator} from "./framework/blocks/table-creator";
   9 import {EditorColorButton} from "./framework/blocks/color-button";
  10 import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
  11 import {
  12     deleteColumn,
  13     deleteRow,
  14     deleteTable, insertColumnAfter,
  15     insertColumnBefore,
  16     insertRowAbove,
  17     insertRowBelow,
  18     table
  19 } from "./defaults/buttons/tables";
  20 import {fullscreen, redo, source, undo} from "./defaults/buttons/controls";
  21 import {
  22     blockquote, dangerCallout,
  23     h2,
  24     h3,
  25     h4,
  26     h5,
  27     infoCallout,
  28     paragraph,
  29     successCallout,
  30     warningCallout
  31 } from "./defaults/buttons/block-formats";
  32 import {
  33     bold, clearFormating, code,
  34     highlightColor,
  35     italic,
  36     strikethrough, subscript,
  37     superscript,
  38     textColor,
  39     underline
  40 } from "./defaults/buttons/inline-formats";
  41 import {alignCenter, alignJustify, alignLeft, alignRight} from "./defaults/buttons/alignments";
  42 import {bulletList, numberList, taskList} from "./defaults/buttons/lists";
  43 import {
  44     codeBlock,
  45     details,
  46     diagram,
  47     editCodeBlock,
  48     horizontalRule,
  49     image,
  50     link,
  51     unlink
  52 } from "./defaults/buttons/objects";
  53
  54 export function getMainEditorFullToolbar(): EditorContainerUiElement {
  55     return new EditorSimpleClassContainer('editor-toolbar-main', [
  56
  57         // History state
  58         new EditorOverflowContainer(2, [
  59             new EditorButton(undo),
  60             new EditorButton(redo),
  61         ]),
  62
  63         // Block formats
  64         new EditorFormatMenu([
  65             new FormatPreviewButton(el('h2'), h2),
  66             new FormatPreviewButton(el('h3'), h3),
  67             new FormatPreviewButton(el('h4'), h4),
  68             new FormatPreviewButton(el('h5'), h5),
  69             new FormatPreviewButton(el('blockquote'), blockquote),
  70             new FormatPreviewButton(el('p'), paragraph),
  71             new EditorDropdownButton({label: 'Callouts'}, true, [
  72                 new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
  73                 new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
  74                 new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
  75                 new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout),
  76             ]),
  77         ]),
  78
  79         // Inline formats
  80         new EditorOverflowContainer(6, [
  81             new EditorButton(bold),
  82             new EditorButton(italic),
  83             new EditorButton(underline),
  84             new EditorDropdownButton(new EditorColorButton(textColor, 'color'), false, [
  85                 new EditorColorPicker('color'),
  86             ]),
  87             new EditorDropdownButton(new EditorColorButton(highlightColor, 'background-color'), false, [
  88                 new EditorColorPicker('background-color'),
  89             ]),
  90             new EditorButton(strikethrough),
  91             new EditorButton(superscript),
  92             new EditorButton(subscript),
  93             new EditorButton(code),
  94             new EditorButton(clearFormating),
  95         ]),
  96
  97         // Alignment
  98         new EditorOverflowContainer(4, [
  99             new EditorButton(alignLeft),
 100             new EditorButton(alignCenter),
 101             new EditorButton(alignRight),
 102             new EditorButton(alignJustify),
 103         ]),
 104
 105         // Lists
 106         new EditorOverflowContainer(3, [
 107             new EditorButton(bulletList),
 108             new EditorButton(numberList),
 109             new EditorButton(taskList),
 110         ]),
 111
 112         // Insert types
 113         new EditorOverflowContainer(6, [
 114             new EditorButton(link),
 115             new EditorDropdownButton(table, false, [
 116                 new EditorTableCreator(),
 117             ]),
 118             new EditorButton(image),
 119             new EditorButton(horizontalRule),
 120             new EditorButton(codeBlock),
 121             new EditorButton(diagram),
 122             new EditorButton(details),
 123         ]),
 124
 125         // Meta elements
 126         new EditorOverflowContainer(3, [
 127             new EditorButton(source),
 128             new EditorButton(fullscreen),
 129
 130             // Test
 131             // new EditorButton({
 132             //     label: 'Test button',
 133             //     action(context: EditorUiContext) {
 134             //         context.editor.update(() => {
 135             //             // Do stuff
 136             //         });
 137             //     },
 138             //     isActive() {
 139             //         return false;
 140             //     }
 141             // })
 142         ]),
 143     ]);
 144 }
 145
 146 export function getImageToolbarContent(): EditorUiElement[] {
 147     return [new EditorButton(image)];
 148 }
 149
 150 export function getLinkToolbarContent(): EditorUiElement[] {
 151     return [
 152         new EditorButton(link),
 153         new EditorButton(unlink),
 154     ];
 155 }
 156
 157 export function getCodeToolbarContent(): EditorUiElement[] {
 158     return [
 159         new EditorButton(editCodeBlock),
 160     ];
 161 }
 162
 163 export function getTableToolbarContent(): EditorUiElement[] {
 164     return [
 165         new EditorOverflowContainer(2, [
 166             // Todo - Table properties
 167             new EditorButton(deleteTable),
 168         ]),
 169         new EditorOverflowContainer(3, [
 170             new EditorButton(insertRowAbove),
 171             new EditorButton(insertRowBelow),
 172             new EditorButton(deleteRow),
 173         ]),
 174         new EditorOverflowContainer(3, [
 175             new EditorButton(insertColumnBefore),
 176             new EditorButton(insertColumnAfter),
 177             new EditorButton(deleteColumn),
 178         ]),
 179     ];
 180 }