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         // History state
  25         new EditorButton(undo),
  26         new EditorButton(redo),
  27
  28         // Block formats
  29         new EditorFormatMenu([
  30             new FormatPreviewButton(el('h2'), h2),
  31             new FormatPreviewButton(el('h3'), h3),
  32             new FormatPreviewButton(el('h4'), h4),
  33             new FormatPreviewButton(el('h5'), h5),
  34             new FormatPreviewButton(el('blockquote'), blockquote),
  35             new FormatPreviewButton(el('p'), paragraph),
  36             new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
  37             new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
  38             new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
  39             new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout),
  40         ]),
  41
  42         // Inline formats
  43         new EditorButton(bold),
  44         new EditorButton(italic),
  45         new EditorButton(underline),
  46         new EditorDropdownButton(new EditorColorButton(textColor, 'color'), [
  47             new EditorColorPicker('color'),
  48         ]),
  49         new EditorDropdownButton(new EditorColorButton(highlightColor, 'background-color'), [
  50             new EditorColorPicker('background-color'),
  51         ]),
  52         new EditorButton(strikethrough),
  53         new EditorButton(superscript),
  54         new EditorButton(subscript),
  55         new EditorButton(code),
  56         new EditorButton(clearFormating),
  57
  58         // Lists
  59         new EditorButton(bulletList),
  60         new EditorButton(numberList),
  61         new EditorButton(taskList),
  62
  63         // Insert types
  64         new EditorOverflowContainer(6, [
  65             new EditorButton(link),
  66             new EditorDropdownButton(table, [
  67                 new EditorTableCreator(),
  68             ]),
  69             new EditorButton(image),
  70             new EditorButton(horizontalRule),
  71             new EditorButton(codeBlock),
  72             new EditorButton(details),
  73         ]),
  74
  75         // Meta elements
  76         new EditorButton(source),
  77         new EditorButton(fullscreen),
  78
  79         // Test
  80         new EditorButton({
  81             label: 'Test button',
  82             action(context: EditorUiContext) {
  83                 context.editor.update(() => {
  84                     // Do stuff
  85                 });
  86             },
  87             isActive() {
  88                 return false;
  89             }
  90         })
  91     ]);
  92 }
  93
  94 export function getImageToolbarContent(): EditorUiElement[] {
  95     return [new EditorButton(image)];
  96 }
  97
  98 export function getLinkToolbarContent(): EditorUiElement[] {
  99     return [
 100         new EditorButton(link),
 101         new EditorButton(unlink),
 102     ];
 103 }