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 {EditorFormatMenu} from "./framework/blocks/format-menu";
   4 import {FormatPreviewButton} from "./framework/blocks/format-preview-button";
   5 import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
   6 import {EditorColorPicker} from "./framework/blocks/color-picker";
   7 import {EditorTableCreator} from "./framework/blocks/table-creator";
   8 import {EditorColorButton} from "./framework/blocks/color-button";
   9 import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
  10 import {
  11     cellProperties, clearTableFormatting,
  12     copyColumn,
  13     copyRow,
  14     cutColumn,
  15     cutRow,
  16     deleteColumn,
  17     deleteRow,
  18     deleteTable,
  19     deleteTableMenuAction,
  20     insertColumnAfter,
  21     insertColumnBefore,
  22     insertRowAbove,
  23     insertRowBelow,
  24     mergeCells,
  25     pasteColumnAfter,
  26     pasteColumnBefore,
  27     pasteRowAfter,
  28     pasteRowBefore, resizeTableToContents,
  29     rowProperties,
  30     splitCell,
  31     table, tableProperties
  32 } from "./defaults/buttons/tables";
  33 import {fullscreen, redo, source, undo} from "./defaults/buttons/controls";
  34 import {
  35     blockquote, dangerCallout,
  36     h2,
  37     h3,
  38     h4,
  39     h5,
  40     infoCallout,
  41     paragraph,
  42     successCallout,
  43     warningCallout
  44 } from "./defaults/buttons/block-formats";
  45 import {
  46     bold, clearFormating, code,
  47     highlightColor,
  48     italic,
  49     strikethrough, subscript,
  50     superscript,
  51     textColor,
  52     underline
  53 } from "./defaults/buttons/inline-formats";
  54 import {alignCenter, alignJustify, alignLeft, alignRight} from "./defaults/buttons/alignments";
  55 import {bulletList, numberList, taskList} from "./defaults/buttons/lists";
  56 import {
  57     codeBlock,
  58     details,
  59     diagram,
  60     editCodeBlock,
  61     horizontalRule,
  62     image,
  63     link, media,
  64     unlink
  65 } from "./defaults/buttons/objects";
  66 import {$isTableNode} from "@lexical/table";
  67 import {$selectionContainsNodeType} from "../utils/selection";
  68 import {el} from "../utils/dom";
  69
  70 export function getMainEditorFullToolbar(): EditorContainerUiElement {
  71     return new EditorSimpleClassContainer('editor-toolbar-main', [
  72
  73         // History state
  74         new EditorOverflowContainer(2, [
  75             new EditorButton(undo),
  76             new EditorButton(redo),
  77         ]),
  78
  79         // Block formats
  80         new EditorFormatMenu([
  81             new FormatPreviewButton(el('h2'), h2),
  82             new FormatPreviewButton(el('h3'), h3),
  83             new FormatPreviewButton(el('h4'), h4),
  84             new FormatPreviewButton(el('h5'), h5),
  85             new FormatPreviewButton(el('blockquote'), blockquote),
  86             new FormatPreviewButton(el('p'), paragraph),
  87             new EditorDropdownButton({button: {label: 'Callouts'}, showOnHover: true, direction: 'vertical'}, [
  88                 new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
  89                 new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
  90                 new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
  91                 new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout),
  92             ]),
  93         ]),
  94
  95         // Inline formats
  96         new EditorOverflowContainer(6, [
  97             new EditorButton(bold),
  98             new EditorButton(italic),
  99             new EditorButton(underline),
 100             new EditorDropdownButton({ button: new EditorColorButton(textColor, 'color') }, [
 101                 new EditorColorPicker('color'),
 102             ]),
 103             new EditorDropdownButton({button: new EditorColorButton(highlightColor, 'background-color')}, [
 104                 new EditorColorPicker('background-color'),
 105             ]),
 106             new EditorButton(strikethrough),
 107             new EditorButton(superscript),
 108             new EditorButton(subscript),
 109             new EditorButton(code),
 110             new EditorButton(clearFormating),
 111         ]),
 112
 113         // Alignment
 114         new EditorOverflowContainer(4, [
 115             new EditorButton(alignLeft),
 116             new EditorButton(alignCenter),
 117             new EditorButton(alignRight),
 118             new EditorButton(alignJustify),
 119         ]),
 120
 121         // Lists
 122         new EditorOverflowContainer(3, [
 123             new EditorButton(bulletList),
 124             new EditorButton(numberList),
 125             new EditorButton(taskList),
 126         ]),
 127
 128         // Insert types
 129         new EditorOverflowContainer(8, [
 130             new EditorButton(link),
 131
 132             new EditorDropdownButton({button: table, direction: 'vertical'}, [
 133                 new EditorDropdownButton({button: {...table, format: 'long'}, showOnHover: true}, [
 134                     new EditorTableCreator(),
 135                 ]),
 136                 new EditorDropdownButton({button: {label: 'Cell'}, direction: 'vertical', showOnHover: true}, [
 137                     new EditorButton(cellProperties),
 138                     new EditorButton(mergeCells),
 139                     new EditorButton(splitCell),
 140                 ]),
 141                 new EditorDropdownButton({button: {label: 'Row'}, direction: 'vertical', showOnHover: true}, [
 142                     new EditorButton({...insertRowAbove, format: 'long'}),
 143                     new EditorButton({...insertRowBelow, format: 'long'}),
 144                     new EditorButton({...deleteRow, format: 'long'}),
 145                     new EditorButton(rowProperties),
 146                     new EditorButton(cutRow),
 147                     new EditorButton(copyRow),
 148                     new EditorButton(pasteRowBefore),
 149                     new EditorButton(pasteRowAfter),
 150                 ]),
 151                 new EditorDropdownButton({button: {label: 'Column'}, direction: 'vertical', showOnHover: true}, [
 152                     new EditorButton({...insertColumnBefore, format: 'long'}),
 153                     new EditorButton({...insertColumnAfter, format: 'long'}),
 154                     new EditorButton({...deleteColumn, format: 'long'}),
 155                     new EditorButton(cutColumn),
 156                     new EditorButton(copyColumn),
 157                     new EditorButton(pasteColumnBefore),
 158                     new EditorButton(pasteColumnAfter),
 159                 ]),
 160                 new EditorButton({...tableProperties, format: 'long'}),
 161                 new EditorButton(clearTableFormatting),
 162                 new EditorButton(resizeTableToContents),
 163                 new EditorButton(deleteTableMenuAction),
 164             ]),
 165
 166             new EditorButton(image),
 167             new EditorButton(horizontalRule),
 168             new EditorButton(codeBlock),
 169             new EditorButton(diagram),
 170             new EditorButton(media),
 171             new EditorButton(details),
 172         ]),
 173
 174         // Meta elements
 175         new EditorOverflowContainer(3, [
 176             new EditorButton(source),
 177             new EditorButton(fullscreen),
 178
 179             // Test
 180             // new EditorButton({
 181             //     label: 'Test button',
 182             //     action(context: EditorUiContext) {
 183             //         context.editor.update(() => {
 184             //             // Do stuff
 185             //         });
 186             //     },
 187             //     isActive() {
 188             //         return false;
 189             //     }
 190             // })
 191         ]),
 192     ]);
 193 }
 194
 195 export function getImageToolbarContent(): EditorUiElement[] {
 196     return [new EditorButton(image)];
 197 }
 198
 199 export function getLinkToolbarContent(): EditorUiElement[] {
 200     return [
 201         new EditorButton(link),
 202         new EditorButton(unlink),
 203     ];
 204 }
 205
 206 export function getCodeToolbarContent(): EditorUiElement[] {
 207     return [
 208         new EditorButton(editCodeBlock),
 209     ];
 210 }
 211
 212 export function getTableToolbarContent(): EditorUiElement[] {
 213     return [
 214         new EditorOverflowContainer(2, [
 215             new EditorButton(tableProperties),
 216             new EditorButton(deleteTable),
 217         ]),
 218         new EditorOverflowContainer(3, [
 219             new EditorButton(insertRowAbove),
 220             new EditorButton(insertRowBelow),
 221             new EditorButton(deleteRow),
 222         ]),
 223         new EditorOverflowContainer(3, [
 224             new EditorButton(insertColumnBefore),
 225             new EditorButton(insertColumnAfter),
 226             new EditorButton(deleteColumn),
 227         ]),
 228     ];
 229 }