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

   1 import {EditorButtonDefinition} from "../framework/buttons";
   2 import {
   3     $createParagraphNode,
   4     $isParagraphNode,
   5     BaseSelection, FORMAT_TEXT_COMMAND,
   6     LexicalEditor,
   7     LexicalNode,
   8     REDO_COMMAND, TextFormatType,
   9     UNDO_COMMAND
  10 } from "lexical";
  11 import {selectionContainsNodeType, selectionContainsTextFormat, toggleSelectionBlockNodeType} from "../../helpers";
  12 import {$createCalloutNode, $isCalloutNodeOfCategory, CalloutCategory} from "../../nodes/callout";
  13 import {
  14     $createHeadingNode,
  15     $createQuoteNode,
  16     $isHeadingNode,
  17     $isQuoteNode,
  18     HeadingNode,
  19     HeadingTagType
  20 } from "@lexical/rich-text";
  21 import {$isLinkNode, $toggleLink} from "@lexical/link";
  22
  23 export const undo: EditorButtonDefinition = {
  24     label: 'Undo',
  25     action(editor: LexicalEditor) {
  26         editor.dispatchCommand(UNDO_COMMAND, undefined);
  27     },
  28     isActive(selection: BaseSelection|null): boolean {
  29         return false;
  30     }
  31 }
  32
  33 export const redo: EditorButtonDefinition = {
  34     label: 'Redo',
  35     action(editor: LexicalEditor) {
  36         editor.dispatchCommand(REDO_COMMAND, undefined);
  37     },
  38     isActive(selection: BaseSelection|null): boolean {
  39         return false;
  40     }
  41 }
  42
  43 function buildCalloutButton(category: CalloutCategory, name: string): EditorButtonDefinition {
  44     return {
  45         label: `${name} Callout`,
  46         action(editor: LexicalEditor) {
  47             toggleSelectionBlockNodeType(
  48                 editor,
  49                 (node) => $isCalloutNodeOfCategory(node, category),
  50                 () => $createCalloutNode(category),
  51             )
  52         },
  53         isActive(selection: BaseSelection|null): boolean {
  54             return selectionContainsNodeType(selection, (node) => $isCalloutNodeOfCategory(node, category));
  55         }
  56     };
  57 }
  58
  59 export const infoCallout: EditorButtonDefinition = buildCalloutButton('info', 'Info');
  60 export const dangerCallout: EditorButtonDefinition = buildCalloutButton('danger', 'Danger');
  61 export const warningCallout: EditorButtonDefinition = buildCalloutButton('warning', 'Warning');
  62 export const successCallout: EditorButtonDefinition = buildCalloutButton('success', 'Success');
  63
  64 const isHeaderNodeOfTag = (node: LexicalNode | null | undefined, tag: HeadingTagType) => {
  65       return $isHeadingNode(node) && (node as HeadingNode).getTag() === tag;
  66 };
  67
  68 function buildHeaderButton(tag: HeadingTagType, name: string): EditorButtonDefinition {
  69     return {
  70         label: name,
  71         action(editor: LexicalEditor) {
  72             toggleSelectionBlockNodeType(
  73                 editor,
  74                 (node) => isHeaderNodeOfTag(node, tag),
  75                 () => $createHeadingNode(tag),
  76             )
  77         },
  78         isActive(selection: BaseSelection|null): boolean {
  79             return selectionContainsNodeType(selection, (node) => isHeaderNodeOfTag(node, tag));
  80         }
  81     };
  82 }
  83
  84 export const h2: EditorButtonDefinition = buildHeaderButton('h2', 'Large Header');
  85 export const h3: EditorButtonDefinition = buildHeaderButton('h3', 'Medium Header');
  86 export const h4: EditorButtonDefinition = buildHeaderButton('h4', 'Small Header');
  87 export const h5: EditorButtonDefinition = buildHeaderButton('h5', 'Tiny Header');
  88
  89 export const blockquote: EditorButtonDefinition = {
  90     label: 'Blockquote',
  91     action(editor: LexicalEditor) {
  92         toggleSelectionBlockNodeType(editor, $isQuoteNode, $createQuoteNode);
  93     },
  94     isActive(selection: BaseSelection|null): boolean {
  95         return selectionContainsNodeType(selection, $isQuoteNode);
  96     }
  97 };
  98
  99 export const paragraph: EditorButtonDefinition = {
 100     label: 'Paragraph',
 101     action(editor: LexicalEditor) {
 102         toggleSelectionBlockNodeType(editor, $isParagraphNode, $createParagraphNode);
 103     },
 104     isActive(selection: BaseSelection|null): boolean {
 105         return selectionContainsNodeType(selection, $isParagraphNode);
 106     }
 107 }
 108
 109 function buildFormatButton(label: string, format: TextFormatType): EditorButtonDefinition {
 110     return {
 111         label: label,
 112         action(editor: LexicalEditor) {
 113             editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
 114         },
 115         isActive(selection: BaseSelection|null): boolean {
 116             return selectionContainsTextFormat(selection, format);
 117         }
 118     };
 119 }
 120
 121 export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold');
 122 export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic');
 123 export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline');
 124 // Todo - Text color
 125 // Todo - Highlight color
 126 export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough');
 127 export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript');
 128 export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript');
 129 export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code');
 130 // Todo - Clear formatting
 131
 132
 133 export const link: EditorButtonDefinition = {
 134     label: 'Insert/edit link',
 135     action(editor: LexicalEditor) {
 136         editor.update(() => {
 137             $toggleLink('http://example.com');
 138         })
 139     },
 140     isActive(selection: BaseSelection|null): boolean {
 141         return selectionContainsNodeType(selection, $isLinkNode);
 142     }
 143 };
 144