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

   1 import {EditorBasicButtonDefinition, EditorButtonDefinition} from "../framework/buttons";
   2 import {
   3     $createNodeSelection,
   4     $createParagraphNode, $getRoot, $getSelection,
   5     $isParagraphNode, $isTextNode, $setSelection,
   6     BaseSelection, 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
  33 export const undo: EditorButtonDefinition = {
  34     label: 'Undo',
  35     action(context: EditorUiContext) {
  36         context.editor.dispatchCommand(UNDO_COMMAND, undefined);
  37     },
  38     isActive(selection: BaseSelection|null): boolean {
  39         return false;
  40     }
  41 }
  42
  43 export const redo: EditorButtonDefinition = {
  44     label: 'Redo',
  45     action(context: EditorUiContext) {
  46         context.editor.dispatchCommand(REDO_COMMAND, undefined);
  47     },
  48     isActive(selection: BaseSelection|null): boolean {
  49         return false;
  50     }
  51 }
  52
  53 function buildCalloutButton(category: CalloutCategory, name: string): EditorButtonDefinition {
  54     return {
  55         label: `${name} Callout`,
  56         action(context: EditorUiContext) {
  57             toggleSelectionBlockNodeType(
  58                 context.editor,
  59                 (node) => $isCalloutNodeOfCategory(node, category),
  60                 () => $createCalloutNode(category),
  61             )
  62         },
  63         isActive(selection: BaseSelection|null): boolean {
  64             return selectionContainsNodeType(selection, (node) => $isCalloutNodeOfCategory(node, category));
  65         }
  66     };
  67 }
  68
  69 export const infoCallout: EditorButtonDefinition = buildCalloutButton('info', 'Info');
  70 export const dangerCallout: EditorButtonDefinition = buildCalloutButton('danger', 'Danger');
  71 export const warningCallout: EditorButtonDefinition = buildCalloutButton('warning', 'Warning');
  72 export const successCallout: EditorButtonDefinition = buildCalloutButton('success', 'Success');
  73
  74 const isHeaderNodeOfTag = (node: LexicalNode | null | undefined, tag: HeadingTagType) => {
  75       return $isHeadingNode(node) && (node as HeadingNode).getTag() === tag;
  76 };
  77
  78 function buildHeaderButton(tag: HeadingTagType, name: string): EditorButtonDefinition {
  79     return {
  80         label: name,
  81         action(context: EditorUiContext) {
  82             toggleSelectionBlockNodeType(
  83                 context.editor,
  84                 (node) => isHeaderNodeOfTag(node, tag),
  85                 () => $createHeadingNode(tag),
  86             )
  87         },
  88         isActive(selection: BaseSelection|null): boolean {
  89             return selectionContainsNodeType(selection, (node) => isHeaderNodeOfTag(node, tag));
  90         }
  91     };
  92 }
  93
  94 export const h2: EditorButtonDefinition = buildHeaderButton('h2', 'Large Header');
  95 export const h3: EditorButtonDefinition = buildHeaderButton('h3', 'Medium Header');
  96 export const h4: EditorButtonDefinition = buildHeaderButton('h4', 'Small Header');
  97 export const h5: EditorButtonDefinition = buildHeaderButton('h5', 'Tiny Header');
  98
  99 export const blockquote: EditorButtonDefinition = {
 100     label: 'Blockquote',
 101     action(context: EditorUiContext) {
 102         toggleSelectionBlockNodeType(context.editor, $isQuoteNode, $createQuoteNode);
 103     },
 104     isActive(selection: BaseSelection|null): boolean {
 105         return selectionContainsNodeType(selection, $isQuoteNode);
 106     }
 107 };
 108
 109 export const paragraph: EditorButtonDefinition = {
 110     label: 'Paragraph',
 111     action(context: EditorUiContext) {
 112         toggleSelectionBlockNodeType(context.editor, $isParagraphNode, $createParagraphNode);
 113     },
 114     isActive(selection: BaseSelection|null): boolean {
 115         return selectionContainsNodeType(selection, $isParagraphNode);
 116     }
 117 }
 118
 119 function buildFormatButton(label: string, format: TextFormatType): EditorButtonDefinition {
 120     return {
 121         label: label,
 122         action(context: EditorUiContext) {
 123             context.editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
 124         },
 125         isActive(selection: BaseSelection|null): boolean {
 126             return selectionContainsTextFormat(selection, format);
 127         }
 128     };
 129 }
 130
 131 export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold');
 132 export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic');
 133 export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline');
 134 export const textColor: EditorBasicButtonDefinition = {label: 'Text color'};
 135 export const highlightColor: EditorBasicButtonDefinition = {label: 'Highlight color'};
 136
 137 export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough');
 138 export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript');
 139 export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript');
 140 export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code');
 141 export const clearFormating: EditorButtonDefinition = {
 142     label: 'Clear formatting',
 143     action(context: EditorUiContext) {
 144         context.editor.update(() => {
 145             const selection = $getSelection();
 146             for (const node of selection?.getNodes() || []) {
 147                 if ($isTextNode(node)) {
 148                     node.setFormat(0);
 149                 }
 150             }
 151         });
 152     },
 153     isActive() {
 154         return false;
 155     }
 156 };
 157
 158 function buildListButton(label: string, type: ListType): EditorButtonDefinition {
 159     return {
 160         label,
 161         action(context: EditorUiContext) {
 162             context.editor.getEditorState().read(() => {
 163                 const selection = $getSelection();
 164                 if (this.isActive(selection)) {
 165                     removeList(context.editor);
 166                 } else {
 167                     insertList(context.editor, type);
 168                 }
 169             });
 170         },
 171         isActive(selection: BaseSelection|null): boolean {
 172             return selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {
 173                 return $isListNode(node) && (node as ListNode).getListType() === type;
 174             });
 175         }
 176     };
 177 }
 178
 179 export const bulletList: EditorButtonDefinition = buildListButton('Bullet list', 'bullet');
 180 export const numberList: EditorButtonDefinition = buildListButton('Numbered list', 'number');
 181 export const taskList: EditorButtonDefinition = buildListButton('Task list', 'check');
 182
 183
 184 export const link: EditorButtonDefinition = {
 185     label: 'Insert/edit link',
 186     action(context: EditorUiContext) {
 187         const linkModal = context.manager.createModal('link');
 188         context.editor.getEditorState().read(() => {
 189             const selection = $getSelection();
 190             const selectedLink = getNodeFromSelection(selection, $isLinkNode) as LinkNode|null;
 191
 192             let formDefaults = {};
 193             if (selectedLink) {
 194                 formDefaults = {
 195                     url: selectedLink.getURL(),
 196                     text: selectedLink.getTextContent(),
 197                     title: selectedLink.getTitle(),
 198                     target: selectedLink.getTarget(),
 199                 }
 200
 201                 context.editor.update(() => {
 202                     const selection = $createNodeSelection();
 203                     selection.add(selectedLink.getKey());
 204                     $setSelection(selection);
 205                 });
 206             }
 207
 208             linkModal.show(formDefaults);
 209         });
 210     },
 211     isActive(selection: BaseSelection|null): boolean {
 212         return selectionContainsNodeType(selection, $isLinkNode);
 213     }
 214 };
 215
 216 export const image: EditorButtonDefinition = {
 217     label: 'Insert/Edit Image',
 218     action(context: EditorUiContext) {
 219         const imageModal = context.manager.createModal('image');
 220         const selection = context.lastSelection;
 221         const selectedImage = getNodeFromSelection(selection, $isImageNode) as ImageNode|null;
 222
 223         context.editor.getEditorState().read(() => {
 224             let formDefaults = {};
 225             if (selectedImage) {
 226                 formDefaults = {
 227                     src: selectedImage.getSrc(),
 228                     alt: selectedImage.getAltText(),
 229                     height: selectedImage.getHeight(),
 230                     width: selectedImage.getWidth(),
 231                 }
 232
 233                 context.editor.update(() => {
 234                     const selection = $createNodeSelection();
 235                     selection.add(selectedImage.getKey());
 236                     $setSelection(selection);
 237                 });
 238             }
 239
 240             imageModal.show(formDefaults);
 241         });
 242     },
 243     isActive(selection: BaseSelection|null): boolean {
 244         return selectionContainsNodeType(selection, $isImageNode);
 245     }
 246 };
 247
 248 export const details: EditorButtonDefinition = {
 249     label: 'Insert collapsible block',
 250     action(context: EditorUiContext) {
 251         context.editor.update(() => {
 252             const selection = $getSelection();
 253             const detailsNode = $createDetailsNode();
 254             const selectionNodes = selection?.getNodes() || [];
 255             const topLevels = selectionNodes.map(n => n.getTopLevelElement())
 256                 .filter(n => n !== null) as ElementNode[];
 257             const uniqueTopLevels = [...new Set(topLevels)];
 258
 259             if (uniqueTopLevels.length > 0) {
 260                 uniqueTopLevels[0].insertAfter(detailsNode);
 261             } else {
 262                 $getRoot().append(detailsNode);
 263             }
 264
 265             for (const node of uniqueTopLevels) {
 266                 detailsNode.append(node);
 267             }
 268         });
 269     },
 270     isActive(selection: BaseSelection|null): boolean {
 271         return selectionContainsNodeType(selection, $isDetailsNode);
 272     }
 273 }
 274
 275 export const source: EditorButtonDefinition = {
 276     label: 'Source code',
 277     async action(context: EditorUiContext) {
 278         const modal = context.manager.createModal('source');
 279         const source = await getEditorContentAsHtml(context.editor);
 280         modal.show({source});
 281     },
 282     isActive() {
 283         return false;
 284     }
 285 };