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