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

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