BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/defaults/button-definitions.ts

   1 import {EditorBasicButtonDefinition, EditorButton, EditorButtonDefinition} from "../framework/buttons";
   2 import {
   3     $createNodeSelection,
   4     $createParagraphNode, $getRoot, $getSelection,
   5     $isParagraphNode, $isTextNode, $setSelection,
   6     BaseSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, ElementNode, FORMAT_TEXT_COMMAND,
   7     LexicalNode,
   8     REDO_COMMAND, TextFormatType,
   9     UNDO_COMMAND
  10 } from "lexical";
  11 import {
  12     getNodeFromSelection,
  13     selectionContainsNodeType,
  14     selectionContainsTextFormat,
  15     toggleSelectionBlockNodeType
  16 } from "../../helpers";
  17 import {$createCalloutNode, $isCalloutNodeOfCategory, CalloutCategory} from "../../nodes/callout";
  18 import {
  19     $createHeadingNode,
  20     $createQuoteNode,
  21     $isHeadingNode,
  22     $isQuoteNode,
  23     HeadingNode,
  24     HeadingTagType
  25 } from "@lexical/rich-text";
  26 import {$isLinkNode, LinkNode} from "@lexical/link";
  27 import {EditorUiContext} from "../framework/core";
  28 import {$isImageNode, ImageNode} from "../../nodes/image";
  29 import {$createDetailsNode, $isDetailsNode} from "../../nodes/details";
  30 import {getEditorContentAsHtml} from "../../actions";
  31 import {$isListNode, insertList, ListNode, ListType, removeList} from "@lexical/list";
  32 import undoIcon from "@icons/editor/undo.svg"
  33 import redoIcon from "@icons/editor/redo.svg"
  34 import boldIcon from "@icons/editor/bold.svg"
  35 import italicIcon from "@icons/editor/italic.svg"
  36 import underlinedIcon from "@icons/editor/underlined.svg"
  37 import textColorIcon from "@icons/editor/text-color.svg";
  38 import highlightIcon from "@icons/editor/highlighter.svg";
  39 import strikethroughIcon from "@icons/editor/strikethrough.svg"
  40 import superscriptIcon from "@icons/editor/superscript.svg"
  41 import subscriptIcon from "@icons/editor/subscript.svg"
  42 import codeIcon from "@icons/editor/code.svg"
  43 import formatClearIcon from "@icons/editor/format-clear.svg"
  44 import listBulletIcon from "@icons/editor/list-bullet.svg"
  45 import listNumberedIcon from "@icons/editor/list-numbered.svg"
  46 import listCheckIcon from "@icons/editor/list-check.svg"
  47 import linkIcon from "@icons/editor/link.svg"
  48 import tableIcon from "@icons/editor/table.svg"
  49 import imageIcon from "@icons/editor/image.svg"
  50 import detailsIcon from "@icons/editor/details.svg"
  51 import sourceIcon from "@icons/editor/source-view.svg"
  52
  53 export const undo: EditorButtonDefinition = {
  54     label: 'Undo',
  55     icon: undoIcon,
  56     action(context: EditorUiContext) {
  57         context.editor.dispatchCommand(UNDO_COMMAND, undefined);
  58     },
  59     isActive(selection: BaseSelection|null): boolean {
  60         return false;
  61     },
  62     setup(context: EditorUiContext, button: EditorButton) {
  63         button.toggleDisabled(true);
  64
  65         context.editor.registerCommand(CAN_UNDO_COMMAND, (payload: boolean): boolean => {
  66             button.toggleDisabled(!payload)
  67             return false;
  68         }, COMMAND_PRIORITY_LOW);
  69     }
  70 }
  71
  72 export const redo: EditorButtonDefinition = {
  73     label: 'Redo',
  74     icon: redoIcon,
  75     action(context: EditorUiContext) {
  76         context.editor.dispatchCommand(REDO_COMMAND, undefined);
  77     },
  78     isActive(selection: BaseSelection|null): boolean {
  79         return false;
  80     },
  81     setup(context: EditorUiContext, button: EditorButton) {
  82         button.toggleDisabled(true);
  83
  84         context.editor.registerCommand(CAN_REDO_COMMAND, (payload: boolean): boolean => {
  85             button.toggleDisabled(!payload)
  86             return false;
  87         }, COMMAND_PRIORITY_LOW);
  88     }
  89 }
  90
  91 function buildCalloutButton(category: CalloutCategory, name: string): EditorButtonDefinition {
  92     return {
  93         label: `${name} Callout`,
  94         action(context: EditorUiContext) {
  95             toggleSelectionBlockNodeType(
  96                 context.editor,
  97                 (node) => $isCalloutNodeOfCategory(node, category),
  98                 () => $createCalloutNode(category),
  99             )
 100         },
 101         isActive(selection: BaseSelection|null): boolean {
 102             return selectionContainsNodeType(selection, (node) => $isCalloutNodeOfCategory(node, category));
 103         }
 104     };
 105 }
 106
 107 export const infoCallout: EditorButtonDefinition = buildCalloutButton('info', 'Info');
 108 export const dangerCallout: EditorButtonDefinition = buildCalloutButton('danger', 'Danger');
 109 export const warningCallout: EditorButtonDefinition = buildCalloutButton('warning', 'Warning');
 110 export const successCallout: EditorButtonDefinition = buildCalloutButton('success', 'Success');
 111
 112 const isHeaderNodeOfTag = (node: LexicalNode | null | undefined, tag: HeadingTagType) => {
 113       return $isHeadingNode(node) && (node as HeadingNode).getTag() === tag;
 114 };
 115
 116 function buildHeaderButton(tag: HeadingTagType, name: string): EditorButtonDefinition {
 117     return {
 118         label: name,
 119         action(context: EditorUiContext) {
 120             toggleSelectionBlockNodeType(
 121                 context.editor,
 122                 (node) => isHeaderNodeOfTag(node, tag),
 123                 () => $createHeadingNode(tag),
 124             )
 125         },
 126         isActive(selection: BaseSelection|null): boolean {
 127             return selectionContainsNodeType(selection, (node) => isHeaderNodeOfTag(node, tag));
 128         }
 129     };
 130 }
 131
 132 export const h2: EditorButtonDefinition = buildHeaderButton('h2', 'Large Header');
 133 export const h3: EditorButtonDefinition = buildHeaderButton('h3', 'Medium Header');
 134 export const h4: EditorButtonDefinition = buildHeaderButton('h4', 'Small Header');
 135 export const h5: EditorButtonDefinition = buildHeaderButton('h5', 'Tiny Header');
 136
 137 export const blockquote: EditorButtonDefinition = {
 138     label: 'Blockquote',
 139     action(context: EditorUiContext) {
 140         toggleSelectionBlockNodeType(context.editor, $isQuoteNode, $createQuoteNode);
 141     },
 142     isActive(selection: BaseSelection|null): boolean {
 143         return selectionContainsNodeType(selection, $isQuoteNode);
 144     }
 145 };
 146
 147 export const paragraph: EditorButtonDefinition = {
 148     label: 'Paragraph',
 149     action(context: EditorUiContext) {
 150         toggleSelectionBlockNodeType(context.editor, $isParagraphNode, $createParagraphNode);
 151     },
 152     isActive(selection: BaseSelection|null): boolean {
 153         return selectionContainsNodeType(selection, $isParagraphNode);
 154     }
 155 }
 156
 157 function buildFormatButton(label: string, format: TextFormatType, icon: string): EditorButtonDefinition {
 158     return {
 159         label: label,
 160         icon,
 161         action(context: EditorUiContext) {
 162             context.editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
 163         },
 164         isActive(selection: BaseSelection|null): boolean {
 165             return selectionContainsTextFormat(selection, format);
 166         }
 167     };
 168 }
 169
 170 export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold', boldIcon);
 171 export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic', italicIcon);
 172 export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline', underlinedIcon);
 173 export const textColor: EditorBasicButtonDefinition = {label: 'Text color', icon: textColorIcon};
 174 export const highlightColor: EditorBasicButtonDefinition = {label: 'Highlight color', icon: highlightIcon};
 175
 176 export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough', strikethroughIcon);
 177 export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript', superscriptIcon);
 178 export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript', subscriptIcon);
 179 export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code', codeIcon);
 180 export const clearFormating: EditorButtonDefinition = {
 181     label: 'Clear formatting',
 182     icon: formatClearIcon,
 183     action(context: EditorUiContext) {
 184         context.editor.update(() => {
 185             const selection = $getSelection();
 186             for (const node of selection?.getNodes() || []) {
 187                 if ($isTextNode(node)) {
 188                     node.setFormat(0);
 189                     node.setStyle('');
 190                 }
 191             }
 192         });
 193     },
 194     isActive() {
 195         return false;
 196     }
 197 };
 198
 199 function buildListButton(label: string, type: ListType, icon: string): EditorButtonDefinition {
 200     return {
 201         label,
 202         icon,
 203         action(context: EditorUiContext) {
 204             context.editor.getEditorState().read(() => {
 205                 const selection = $getSelection();
 206                 if (this.isActive(selection)) {
 207                     removeList(context.editor);
 208                 } else {
 209                     insertList(context.editor, type);
 210                 }
 211             });
 212         },
 213         isActive(selection: BaseSelection|null): boolean {
 214             return selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {
 215                 return $isListNode(node) && (node as ListNode).getListType() === type;
 216             });
 217         }
 218     };
 219 }
 220
 221 export const bulletList: EditorButtonDefinition = buildListButton('Bullet list', 'bullet', listBulletIcon);
 222 export const numberList: EditorButtonDefinition = buildListButton('Numbered list', 'number', listNumberedIcon);
 223 export const taskList: EditorButtonDefinition = buildListButton('Task list', 'check', listCheckIcon);
 224
 225
 226 export const link: EditorButtonDefinition = {
 227     label: 'Insert/edit link',
 228     icon: linkIcon,
 229     action(context: EditorUiContext) {
 230         const linkModal = context.manager.createModal('link');
 231         context.editor.getEditorState().read(() => {
 232             const selection = $getSelection();
 233             const selectedLink = getNodeFromSelection(selection, $isLinkNode) as LinkNode|null;
 234
 235             let formDefaults = {};
 236             if (selectedLink) {
 237                 formDefaults = {
 238                     url: selectedLink.getURL(),
 239                     text: selectedLink.getTextContent(),
 240                     title: selectedLink.getTitle(),
 241                     target: selectedLink.getTarget(),
 242                 }
 243
 244                 context.editor.update(() => {
 245                     const selection = $createNodeSelection();
 246                     selection.add(selectedLink.getKey());
 247                     $setSelection(selection);
 248                 });
 249             }
 250
 251             linkModal.show(formDefaults);
 252         });
 253     },
 254     isActive(selection: BaseSelection|null): boolean {
 255         return selectionContainsNodeType(selection, $isLinkNode);
 256     }
 257 };
 258
 259 export const table: EditorBasicButtonDefinition = {
 260     label: 'Table',
 261     icon: tableIcon,
 262 };
 263
 264 export const image: EditorButtonDefinition = {
 265     label: 'Insert/Edit Image',
 266     icon: imageIcon,
 267     action(context: EditorUiContext) {
 268         const imageModal = context.manager.createModal('image');
 269         const selection = context.lastSelection;
 270         const selectedImage = getNodeFromSelection(selection, $isImageNode) as ImageNode|null;
 271
 272         context.editor.getEditorState().read(() => {
 273             let formDefaults = {};
 274             if (selectedImage) {
 275                 formDefaults = {
 276                     src: selectedImage.getSrc(),
 277                     alt: selectedImage.getAltText(),
 278                     height: selectedImage.getHeight(),
 279                     width: selectedImage.getWidth(),
 280                 }
 281
 282                 context.editor.update(() => {
 283                     const selection = $createNodeSelection();
 284                     selection.add(selectedImage.getKey());
 285                     $setSelection(selection);
 286                 });
 287             }
 288
 289             imageModal.show(formDefaults);
 290         });
 291     },
 292     isActive(selection: BaseSelection|null): boolean {
 293         return selectionContainsNodeType(selection, $isImageNode);
 294     }
 295 };
 296
 297 export const details: EditorButtonDefinition = {
 298     label: 'Insert collapsible block',
 299     icon: detailsIcon,
 300     action(context: EditorUiContext) {
 301         context.editor.update(() => {
 302             const selection = $getSelection();
 303             const detailsNode = $createDetailsNode();
 304             const selectionNodes = selection?.getNodes() || [];
 305             const topLevels = selectionNodes.map(n => n.getTopLevelElement())
 306                 .filter(n => n !== null) as ElementNode[];
 307             const uniqueTopLevels = [...new Set(topLevels)];
 308
 309             if (uniqueTopLevels.length > 0) {
 310                 uniqueTopLevels[0].insertAfter(detailsNode);
 311             } else {
 312                 $getRoot().append(detailsNode);
 313             }
 314
 315             for (const node of uniqueTopLevels) {
 316                 detailsNode.append(node);
 317             }
 318         });
 319     },
 320     isActive(selection: BaseSelection|null): boolean {
 321         return selectionContainsNodeType(selection, $isDetailsNode);
 322     }
 323 }
 324
 325 export const source: EditorButtonDefinition = {
 326     label: 'Source code',
 327     icon: sourceIcon,
 328     async action(context: EditorUiContext) {
 329         const modal = context.manager.createModal('source');
 330         const source = await getEditorContentAsHtml(context.editor);
 331         modal.show({source});
 332     },
 333     isActive() {
 334         return false;
 335     }
 336 };