BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/defaults/buttons/objects.ts

   1 import {EditorButtonDefinition} from "../../framework/buttons";
   2 import linkIcon from "@icons/editor/link.svg";
   3 import {EditorUiContext} from "../../framework/core";
   4 import {
   5     $createNodeSelection,
   6     $createTextNode,
   7     $getRoot,
   8     $getSelection,
   9     $setSelection,
  10     BaseSelection,
  11     ElementNode
  12 } from "lexical";
  13 import {$isLinkNode, LinkNode} from "@lexical/link";
  14 import unlinkIcon from "@icons/editor/unlink.svg";
  15 import imageIcon from "@icons/editor/image.svg";
  16 import {$isImageNode, ImageNode} from "../../../nodes/image";
  17 import horizontalRuleIcon from "@icons/editor/horizontal-rule.svg";
  18 import {$createHorizontalRuleNode, $isHorizontalRuleNode} from "../../../nodes/horizontal-rule";
  19 import codeBlockIcon from "@icons/editor/code-block.svg";
  20 import {$createCodeBlockNode, $isCodeBlockNode, $openCodeEditorForNode, CodeBlockNode} from "../../../nodes/code-block";
  21 import editIcon from "@icons/edit.svg";
  22 import diagramIcon from "@icons/editor/diagram.svg";
  23 import {$createDiagramNode, $isDiagramNode, $openDrawingEditorForNode, DiagramNode} from "../../../nodes/diagram";
  24 import detailsIcon from "@icons/editor/details.svg";
  25 import mediaIcon from "@icons/editor/media.svg";
  26 import {$createDetailsNode, $isDetailsNode} from "../../../nodes/details";
  27 import {$isMediaNode, MediaNode} from "../../../nodes/media";
  28 import {
  29     $getNodeFromSelection,
  30     $insertNewBlockNodeAtSelection,
  31     $selectionContainsNodeType
  32 } from "../../../utils/selection";
  33
  34 export const link: EditorButtonDefinition = {
  35     label: 'Insert/edit link',
  36     icon: linkIcon,
  37     action(context: EditorUiContext) {
  38         const linkModal = context.manager.createModal('link');
  39         context.editor.getEditorState().read(() => {
  40             const selection = $getSelection();
  41             const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode | null;
  42
  43             let formDefaults = {};
  44             if (selectedLink) {
  45                 formDefaults = {
  46                     url: selectedLink.getURL(),
  47                     text: selectedLink.getTextContent(),
  48                     title: selectedLink.getTitle(),
  49                     target: selectedLink.getTarget(),
  50                 }
  51
  52                 context.editor.update(() => {
  53                     const selection = $createNodeSelection();
  54                     selection.add(selectedLink.getKey());
  55                     $setSelection(selection);
  56                 });
  57             }
  58
  59             linkModal.show(formDefaults);
  60         });
  61     },
  62     isActive(selection: BaseSelection | null): boolean {
  63         return $selectionContainsNodeType(selection, $isLinkNode);
  64     }
  65 };
  66
  67 export const unlink: EditorButtonDefinition = {
  68     label: 'Remove link',
  69     icon: unlinkIcon,
  70     action(context: EditorUiContext) {
  71         context.editor.update(() => {
  72             const selection = context.lastSelection;
  73             const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode | null;
  74             const selectionPoints = selection?.getStartEndPoints();
  75
  76             if (selectedLink) {
  77                 const newNode = $createTextNode(selectedLink.getTextContent());
  78                 selectedLink.replace(newNode);
  79                 if (selectionPoints?.length === 2) {
  80                     newNode.select(selectionPoints[0].offset, selectionPoints[1].offset);
  81                 } else {
  82                     newNode.select();
  83                 }
  84             }
  85         });
  86     },
  87     isActive(selection: BaseSelection | null): boolean {
  88         return false;
  89     }
  90 };
  91
  92
  93 export const image: EditorButtonDefinition = {
  94     label: 'Insert/Edit Image',
  95     icon: imageIcon,
  96     action(context: EditorUiContext) {
  97         const imageModal = context.manager.createModal('image');
  98         const selection = context.lastSelection;
  99         const selectedImage = $getNodeFromSelection(selection, $isImageNode) as ImageNode | null;
 100
 101         context.editor.getEditorState().read(() => {
 102             let formDefaults = {};
 103             if (selectedImage) {
 104                 formDefaults = {
 105                     src: selectedImage.getSrc(),
 106                     alt: selectedImage.getAltText(),
 107                     height: selectedImage.getHeight(),
 108                     width: selectedImage.getWidth(),
 109                 }
 110
 111                 context.editor.update(() => {
 112                     const selection = $createNodeSelection();
 113                     selection.add(selectedImage.getKey());
 114                     $setSelection(selection);
 115                 });
 116             }
 117
 118             imageModal.show(formDefaults);
 119         });
 120     },
 121     isActive(selection: BaseSelection | null): boolean {
 122         return $selectionContainsNodeType(selection, $isImageNode);
 123     }
 124 };
 125
 126 export const horizontalRule: EditorButtonDefinition = {
 127     label: 'Insert horizontal line',
 128     icon: horizontalRuleIcon,
 129     action(context: EditorUiContext) {
 130         context.editor.update(() => {
 131             $insertNewBlockNodeAtSelection($createHorizontalRuleNode(), false);
 132         });
 133     },
 134     isActive(selection: BaseSelection | null): boolean {
 135         return $selectionContainsNodeType(selection, $isHorizontalRuleNode);
 136     }
 137 };
 138
 139 export const codeBlock: EditorButtonDefinition = {
 140     label: 'Insert code block',
 141     icon: codeBlockIcon,
 142     action(context: EditorUiContext) {
 143         context.editor.getEditorState().read(() => {
 144             const selection = $getSelection();
 145             const codeBlock = $getNodeFromSelection(context.lastSelection, $isCodeBlockNode) as (CodeBlockNode | null);
 146             if (codeBlock === null) {
 147                 context.editor.update(() => {
 148                     const codeBlock = $createCodeBlockNode();
 149                     codeBlock.setCode(selection?.getTextContent() || '');
 150                     $insertNewBlockNodeAtSelection(codeBlock, true);
 151                     $openCodeEditorForNode(context.editor, codeBlock);
 152                     codeBlock.selectStart();
 153                 });
 154             } else {
 155                 $openCodeEditorForNode(context.editor, codeBlock);
 156             }
 157         });
 158     },
 159     isActive(selection: BaseSelection | null): boolean {
 160         return $selectionContainsNodeType(selection, $isCodeBlockNode);
 161     }
 162 };
 163
 164 export const editCodeBlock: EditorButtonDefinition = Object.assign({}, codeBlock, {
 165     label: 'Edit code block',
 166     icon: editIcon,
 167 });
 168
 169 export const diagram: EditorButtonDefinition = {
 170     label: 'Insert/edit drawing',
 171     icon: diagramIcon,
 172     action(context: EditorUiContext) {
 173         context.editor.getEditorState().read(() => {
 174             const selection = $getSelection();
 175             const diagramNode = $getNodeFromSelection(context.lastSelection, $isDiagramNode) as (DiagramNode | null);
 176             if (diagramNode === null) {
 177                 context.editor.update(() => {
 178                     const diagram = $createDiagramNode();
 179                     $insertNewBlockNodeAtSelection(diagram, true);
 180                     $openDrawingEditorForNode(context, diagram);
 181                     diagram.selectStart();
 182                 });
 183             } else {
 184                 $openDrawingEditorForNode(context, diagramNode);
 185             }
 186         });
 187     },
 188     isActive(selection: BaseSelection | null): boolean {
 189         return $selectionContainsNodeType(selection, $isDiagramNode);
 190     }
 191 };
 192
 193 export const media: EditorButtonDefinition = {
 194     label: 'Insert/edit Media',
 195     icon: mediaIcon,
 196     action(context: EditorUiContext) {
 197         const mediaModal = context.manager.createModal('media');
 198
 199         context.editor.getEditorState().read(() => {
 200             const selection = $getSelection();
 201             const selectedNode = $getNodeFromSelection(selection, $isMediaNode) as MediaNode | null;
 202
 203             let formDefaults = {};
 204             if (selectedNode) {
 205                 const nodeAttrs = selectedNode.getAttributes();
 206                 formDefaults = {
 207                     src: nodeAttrs.src || nodeAttrs.data || '',
 208                     width: nodeAttrs.width,
 209                     height: nodeAttrs.height,
 210                     embed: '',
 211                 }
 212             }
 213
 214             mediaModal.show(formDefaults);
 215         });
 216     },
 217     isActive(selection: BaseSelection | null): boolean {
 218         return $selectionContainsNodeType(selection, $isMediaNode);
 219     }
 220 };
 221
 222 export const details: EditorButtonDefinition = {
 223     label: 'Insert collapsible block',
 224     icon: detailsIcon,
 225     action(context: EditorUiContext) {
 226         context.editor.update(() => {
 227             const selection = $getSelection();
 228             const detailsNode = $createDetailsNode();
 229             const selectionNodes = selection?.getNodes() || [];
 230             const topLevels = selectionNodes.map(n => n.getTopLevelElement())
 231                 .filter(n => n !== null) as ElementNode[];
 232             const uniqueTopLevels = [...new Set(topLevels)];
 233
 234             if (uniqueTopLevels.length > 0) {
 235                 uniqueTopLevels[0].insertAfter(detailsNode);
 236             } else {
 237                 $getRoot().append(detailsNode);
 238             }
 239
 240             for (const node of uniqueTopLevels) {
 241                 detailsNode.append(node);
 242             }
 243         });
 244     },
 245     isActive(selection: BaseSelection | null): boolean {
 246         return $selectionContainsNodeType(selection, $isDetailsNode);
 247     }
 248 }