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