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

   1 import {EditorButton} from "./framework/buttons";
   2 import {
   3     alignCenter, alignJustify,
   4     alignLeft,
   5     alignRight,
   6     blockquote, bold, bulletList, clearFormating, code, codeBlock,
   7     dangerCallout, details, editCodeBlock, fullscreen,
   8     h2, h3, h4, h5, highlightColor, horizontalRule, image,
   9     infoCallout, italic, link, numberList, paragraph,
  10     redo, source, strikethrough, subscript,
  11     successCallout, superscript, table, taskList, textColor, underline,
  12     undo, unlink,
  13     warningCallout
  14 } from "./defaults/button-definitions";
  15 import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiElement} from "./framework/core";
  16 import {el} from "../helpers";
  17 import {EditorFormatMenu} from "./framework/blocks/format-menu";
  18 import {FormatPreviewButton} from "./framework/blocks/format-preview-button";
  19 import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
  20 import {EditorColorPicker} from "./framework/blocks/color-picker";
  21 import {EditorTableCreator} from "./framework/blocks/table-creator";
  22 import {EditorColorButton} from "./framework/blocks/color-button";
  23 import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
  24
  25 export function getMainEditorFullToolbar(): EditorContainerUiElement {
  26     return new EditorSimpleClassContainer('editor-toolbar-main', [
  27
  28         // History state
  29         new EditorOverflowContainer(2, [
  30             new EditorButton(undo),
  31             new EditorButton(redo),
  32         ]),
  33
  34         // Block formats
  35         new EditorFormatMenu([
  36             new FormatPreviewButton(el('h2'), h2),
  37             new FormatPreviewButton(el('h3'), h3),
  38             new FormatPreviewButton(el('h4'), h4),
  39             new FormatPreviewButton(el('h5'), h5),
  40             new FormatPreviewButton(el('blockquote'), blockquote),
  41             new FormatPreviewButton(el('p'), paragraph),
  42             new EditorDropdownButton({label: 'Callouts'}, true, [
  43                 new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
  44                 new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
  45                 new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
  46                 new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout),
  47             ]),
  48         ]),
  49
  50         // Inline formats
  51         new EditorOverflowContainer(6, [
  52             new EditorButton(bold),
  53             new EditorButton(italic),
  54             new EditorButton(underline),
  55             new EditorDropdownButton(new EditorColorButton(textColor, 'color'), false, [
  56                 new EditorColorPicker('color'),
  57             ]),
  58             new EditorDropdownButton(new EditorColorButton(highlightColor, 'background-color'), false, [
  59                 new EditorColorPicker('background-color'),
  60             ]),
  61             new EditorButton(strikethrough),
  62             new EditorButton(superscript),
  63             new EditorButton(subscript),
  64             new EditorButton(code),
  65             new EditorButton(clearFormating),
  66         ]),
  67
  68         // Alignment
  69         new EditorOverflowContainer(4, [
  70             new EditorButton(alignLeft),
  71             new EditorButton(alignCenter),
  72             new EditorButton(alignRight),
  73             new EditorButton(alignJustify),
  74         ]),
  75
  76         // Lists
  77         new EditorOverflowContainer(3, [
  78             new EditorButton(bulletList),
  79             new EditorButton(numberList),
  80             new EditorButton(taskList),
  81         ]),
  82
  83         // Insert types
  84         new EditorOverflowContainer(6, [
  85             new EditorButton(link),
  86             new EditorDropdownButton(table, false, [
  87                 new EditorTableCreator(),
  88             ]),
  89             new EditorButton(image),
  90             new EditorButton(horizontalRule),
  91             new EditorButton(codeBlock),
  92             new EditorButton(details),
  93         ]),
  94
  95         // Meta elements
  96         new EditorOverflowContainer(3, [
  97             new EditorButton(source),
  98             new EditorButton(fullscreen),
  99
 100             // Test
 101             // new EditorButton({
 102             //     label: 'Test button',
 103             //     action(context: EditorUiContext) {
 104             //         context.editor.update(() => {
 105             //             // Do stuff
 106             //         });
 107             //     },
 108             //     isActive() {
 109             //         return false;
 110             //     }
 111             // })
 112         ]),
 113     ]);
 114 }
 115
 116 export function getImageToolbarContent(): EditorUiElement[] {
 117     return [new EditorButton(image)];
 118 }
 119
 120 export function getLinkToolbarContent(): EditorUiElement[] {
 121     return [
 122         new EditorButton(link),
 123         new EditorButton(unlink),
 124     ];
 125 }
 126
 127 export function getCodeToolbarContent(): EditorUiElement[] {
 128     return [
 129         new EditorButton(editCodeBlock),
 130     ];
 131 }