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

   1 import {EditorButtonDefinition} from "../framework/buttons";
   2 import {
   3     $createNodeSelection,
   4     $createParagraphNode, $getSelection,
   5     $isParagraphNode, $setSelection,
   6     BaseSelection, 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, $toggleLink, LinkNode} from "@lexical/link";
  27 import {EditorUiContext} from "../framework/core";
  28
  29 export const undo: EditorButtonDefinition = {
  30     label: 'Undo',
  31     action(context: EditorUiContext) {
  32         context.editor.dispatchCommand(UNDO_COMMAND, undefined);
  33     },
  34     isActive(selection: BaseSelection|null): boolean {
  35         return false;
  36     }
  37 }
  38
  39 export const redo: EditorButtonDefinition = {
  40     label: 'Redo',
  41     action(context: EditorUiContext) {
  42         context.editor.dispatchCommand(REDO_COMMAND, undefined);
  43     },
  44     isActive(selection: BaseSelection|null): boolean {
  45         return false;
  46     }
  47 }
  48
  49 function buildCalloutButton(category: CalloutCategory, name: string): EditorButtonDefinition {
  50     return {
  51         label: `${name} Callout`,
  52         action(context: EditorUiContext) {
  53             toggleSelectionBlockNodeType(
  54                 context.editor,
  55                 (node) => $isCalloutNodeOfCategory(node, category),
  56                 () => $createCalloutNode(category),
  57             )
  58         },
  59         isActive(selection: BaseSelection|null): boolean {
  60             return selectionContainsNodeType(selection, (node) => $isCalloutNodeOfCategory(node, category));
  61         }
  62     };
  63 }
  64
  65 export const infoCallout: EditorButtonDefinition = buildCalloutButton('info', 'Info');
  66 export const dangerCallout: EditorButtonDefinition = buildCalloutButton('danger', 'Danger');
  67 export const warningCallout: EditorButtonDefinition = buildCalloutButton('warning', 'Warning');
  68 export const successCallout: EditorButtonDefinition = buildCalloutButton('success', 'Success');
  69
  70 const isHeaderNodeOfTag = (node: LexicalNode | null | undefined, tag: HeadingTagType) => {
  71       return $isHeadingNode(node) && (node as HeadingNode).getTag() === tag;
  72 };
  73
  74 function buildHeaderButton(tag: HeadingTagType, name: string): EditorButtonDefinition {
  75     return {
  76         label: name,
  77         action(context: EditorUiContext) {
  78             toggleSelectionBlockNodeType(
  79                 context.editor,
  80                 (node) => isHeaderNodeOfTag(node, tag),
  81                 () => $createHeadingNode(tag),
  82             )
  83         },
  84         isActive(selection: BaseSelection|null): boolean {
  85             return selectionContainsNodeType(selection, (node) => isHeaderNodeOfTag(node, tag));
  86         }
  87     };
  88 }
  89
  90 export const h2: EditorButtonDefinition = buildHeaderButton('h2', 'Large Header');
  91 export const h3: EditorButtonDefinition = buildHeaderButton('h3', 'Medium Header');
  92 export const h4: EditorButtonDefinition = buildHeaderButton('h4', 'Small Header');
  93 export const h5: EditorButtonDefinition = buildHeaderButton('h5', 'Tiny Header');
  94
  95 export const blockquote: EditorButtonDefinition = {
  96     label: 'Blockquote',
  97     action(context: EditorUiContext) {
  98         toggleSelectionBlockNodeType(context.editor, $isQuoteNode, $createQuoteNode);
  99     },
 100     isActive(selection: BaseSelection|null): boolean {
 101         return selectionContainsNodeType(selection, $isQuoteNode);
 102     }
 103 };
 104
 105 export const paragraph: EditorButtonDefinition = {
 106     label: 'Paragraph',
 107     action(context: EditorUiContext) {
 108         toggleSelectionBlockNodeType(context.editor, $isParagraphNode, $createParagraphNode);
 109     },
 110     isActive(selection: BaseSelection|null): boolean {
 111         return selectionContainsNodeType(selection, $isParagraphNode);
 112     }
 113 }
 114
 115 function buildFormatButton(label: string, format: TextFormatType): EditorButtonDefinition {
 116     return {
 117         label: label,
 118         action(context: EditorUiContext) {
 119             context.editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
 120         },
 121         isActive(selection: BaseSelection|null): boolean {
 122             return selectionContainsTextFormat(selection, format);
 123         }
 124     };
 125 }
 126
 127 export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold');
 128 export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic');
 129 export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline');
 130 // Todo - Text color
 131 // Todo - Highlight color
 132 export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough');
 133 export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript');
 134 export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript');
 135 export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code');
 136 // Todo - Clear formatting
 137
 138
 139 export const link: EditorButtonDefinition = {
 140     label: 'Insert/edit link',
 141     action(context: EditorUiContext) {
 142         const linkModal = context.manager.createModal('link');
 143         context.editor.getEditorState().read(() => {
 144             const selection = $getSelection();
 145             const selectedLink = getNodeFromSelection(selection, $isLinkNode) as LinkNode|null;
 146
 147             let formDefaults = {};
 148             if (selectedLink) {
 149                 formDefaults = {
 150                     url: selectedLink.getURL(),
 151                     text: selectedLink.getTextContent(),
 152                     title: selectedLink.getTitle(),
 153                     target: selectedLink.getTarget(),
 154                 }
 155
 156                 context.editor.update(() => {
 157                     const selection = $createNodeSelection();
 158                     selection.add(selectedLink.getKey());
 159                     $setSelection(selection);
 160                 });
 161             }
 162
 163             linkModal.show(formDefaults);
 164         });
 165     },
 166     isActive(selection: BaseSelection|null): boolean {
 167         return selectionContainsNodeType(selection, $isLinkNode);
 168     }
 169 };
 170