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, media,
  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(8, [
 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(media),
 123             new EditorButton(details),
 124         ]),
 125
 126         // Meta elements
 127         new EditorOverflowContainer(3, [
 128             new EditorButton(source),
 129             new EditorButton(fullscreen),
 130
 131             // Test
 132             // new EditorButton({
 133             //     label: 'Test button',
 134             //     action(context: EditorUiContext) {
 135             //         context.editor.update(() => {
 136             //             // Do stuff
 137             //         });
 138             //     },
 139             //     isActive() {
 140             //         return false;
 141             //     }
 142             // })
 143         ]),
 144     ]);
 145 }
 146
 147 export function getImageToolbarContent(): EditorUiElement[] {
 148     return [new EditorButton(image)];
 149 }
 150
 151 export function getLinkToolbarContent(): EditorUiElement[] {
 152     return [
 153         new EditorButton(link),
 154         new EditorButton(unlink),
 155     ];
 156 }
 157
 158 export function getCodeToolbarContent(): EditorUiElement[] {
 159     return [
 160         new EditorButton(editCodeBlock),
 161     ];
 162 }
 163
 164 export function getTableToolbarContent(): EditorUiElement[] {
 165     return [
 166         new EditorOverflowContainer(2, [
 167             // Todo - Table properties
 168             new EditorButton(deleteTable),
 169         ]),
 170         new EditorOverflowContainer(3, [
 171             new EditorButton(insertRowAbove),
 172             new EditorButton(insertRowBelow),
 173             new EditorButton(deleteRow),
 174         ]),
 175         new EditorOverflowContainer(3, [
 176             new EditorButton(insertColumnBefore),
 177             new EditorButton(insertColumnAfter),
 178             new EditorButton(deleteColumn),
 179         ]),
 180     ];
 181 }