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