Lexical: Started adding editor shortcuts

[bookstack] / resources / js / wysiwyg / ui / defaults / buttons / objects.ts

diff --git a/resources/js/wysiwyg/ui/defaults/buttons/objects.ts b/resources/js/wysiwyg/ui/defaults/buttons/objects.ts
index 88241e9262605b7053246c221c45bc85345e29f9..3494096a2c2230efe8e59eef1a429ed947a6dca7 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/buttons/objects.ts
+++ b/resources/js/wysiwyg/ui/defaults/buttons/objects.ts
@@ -5,12 +5,11 @@ import {
     $createNodeSelection,
     $createTextNode,
     $getRoot,
-    $getSelection,
+    $getSelection, $insertNodes,
     $setSelection,
     BaseSelection,
     ElementNode
 } from "lexical";
-import {$getNodeFromSelection, $insertNewBlockNodeAtSelection, $selectionContainsNodeType} from "../../../helpers";
 import {$isLinkNode, LinkNode} from "@lexical/link";
 import unlinkIcon from "@icons/editor/unlink.svg";
 import imageIcon from "@icons/editor/image.svg";
@@ -21,9 +20,20 @@ import codeBlockIcon from "@icons/editor/code-block.svg";
 import {$createCodeBlockNode, $isCodeBlockNode, $openCodeEditorForNode, CodeBlockNode} from "../../../nodes/code-block";
 import editIcon from "@icons/edit.svg";
 import diagramIcon from "@icons/editor/diagram.svg";
-import {$createDiagramNode, $isDiagramNode, $openDrawingEditorForNode, DiagramNode} from "../../../nodes/diagram";
+import {$createDiagramNode, DiagramNode} from "../../../nodes/diagram";
 import detailsIcon from "@icons/editor/details.svg";
+import mediaIcon from "@icons/editor/media.svg";
 import {$createDetailsNode, $isDetailsNode} from "../../../nodes/details";
+import {$isMediaNode, MediaNode} from "../../../nodes/media";
+import {
+    $getNodeFromSelection,
+    $insertNewBlockNodeAtSelection,
+    $selectionContainsNodeType, getLastSelection
+} from "../../../utils/selection";
+import {$isDiagramNode, $openDrawingEditorForNode, showDiagramManagerForInsert} from "../../../utils/diagrams";
+import {$createLinkedImageNodeFromImageData, showImageManager} from "../../../utils/images";
+import {$showImageForm} from "../forms/objects";
+import {formatCodeBlock} from "../../../utils/formats";
 
 export const link: EditorButtonDefinition = {
     label: 'Insert/edit link',
@@ -32,7 +42,7 @@ export const link: EditorButtonDefinition = {
         const linkModal = context.manager.createModal('link');
         context.editor.getEditorState().read(() => {
             const selection = $getSelection();
-            const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode|null;
+            const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode | null;
 
             let formDefaults = {};
             if (selectedLink) {
@@ -53,7 +63,7 @@ export const link: EditorButtonDefinition = {
             linkModal.show(formDefaults);
         });
     },
-    isActive(selection: BaseSelection|null): boolean {
+    isActive(selection: BaseSelection | null): boolean {
         return $selectionContainsNodeType(selection, $isLinkNode);
     }
 };
@@ -63,8 +73,8 @@ export const unlink: EditorButtonDefinition = {
     icon: unlinkIcon,
     action(context: EditorUiContext) {
         context.editor.update(() => {
-            const selection = context.lastSelection;
-            const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode|null;
+            const selection = getLastSelection(context.editor);
+            const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode | null;
             const selectionPoints = selection?.getStartEndPoints();
 
             if (selectedLink) {
@@ -78,42 +88,33 @@ export const unlink: EditorButtonDefinition = {
             }
         });
     },
-    isActive(selection: BaseSelection|null): boolean {
+    isActive(selection: BaseSelection | null): boolean {
         return false;
     }
 };
 
 
-
 export const image: EditorButtonDefinition = {
     label: 'Insert/Edit Image',
     icon: imageIcon,
     action(context: EditorUiContext) {
-        const imageModal = context.manager.createModal('image');
-        const selection = context.lastSelection;
-        const selectedImage = $getNodeFromSelection(selection, $isImageNode) as ImageNode|null;
-
         context.editor.getEditorState().read(() => {
-            let formDefaults = {};
+            const selection = getLastSelection(context.editor);
+            const selectedImage = $getNodeFromSelection(selection, $isImageNode) as ImageNode | null;
             if (selectedImage) {
-                formDefaults = {
-                    src: selectedImage.getSrc(),
-                    alt: selectedImage.getAltText(),
-                    height: selectedImage.getHeight(),
-                    width: selectedImage.getWidth(),
-                }
+                $showImageForm(selectedImage, context);
+                return;
+            }
 
+            showImageManager((image) => {
                 context.editor.update(() => {
-                    const selection = $createNodeSelection();
-                    selection.add(selectedImage.getKey());
-                    $setSelection(selection);
+                    const link = $createLinkedImageNodeFromImageData(image);
+                    $insertNodes([link]);
                 });
-            }
-
-            imageModal.show(formDefaults);
+            })
         });
     },
-    isActive(selection: BaseSelection|null): boolean {
+    isActive(selection: BaseSelection | null): boolean {
         return $selectionContainsNodeType(selection, $isImageNode);
     }
 };
@@ -126,7 +127,7 @@ export const horizontalRule: EditorButtonDefinition = {
             $insertNewBlockNodeAtSelection($createHorizontalRuleNode(), false);
         });
     },
-    isActive(selection: BaseSelection|null): boolean {
+    isActive(selection: BaseSelection | null): boolean {
         return $selectionContainsNodeType(selection, $isHorizontalRuleNode);
     }
 };
@@ -135,23 +136,9 @@ export const codeBlock: EditorButtonDefinition = {
     label: 'Insert code block',
     icon: codeBlockIcon,
     action(context: EditorUiContext) {
-        context.editor.getEditorState().read(() => {
-            const selection = $getSelection();
-            const codeBlock = $getNodeFromSelection(context.lastSelection, $isCodeBlockNode) as (CodeBlockNode|null);
-            if (codeBlock === null) {
-                context.editor.update(() => {
-                    const codeBlock = $createCodeBlockNode();
-                    codeBlock.setCode(selection?.getTextContent() || '');
-                    $insertNewBlockNodeAtSelection(codeBlock, true);
-                    $openCodeEditorForNode(context.editor, codeBlock);
-                    codeBlock.selectStart();
-                });
-            } else {
-                $openCodeEditorForNode(context.editor, codeBlock);
-            }
-        });
+        formatCodeBlock(context.editor);
     },
-    isActive(selection: BaseSelection|null): boolean {
+    isActive(selection: BaseSelection | null): boolean {
         return $selectionContainsNodeType(selection, $isCodeBlockNode);
     }
 };
@@ -166,8 +153,8 @@ export const diagram: EditorButtonDefinition = {
     icon: diagramIcon,
     action(context: EditorUiContext) {
         context.editor.getEditorState().read(() => {
-            const selection = $getSelection();
-            const diagramNode = $getNodeFromSelection(context.lastSelection, $isDiagramNode) as (DiagramNode|null);
+            const selection = getLastSelection(context.editor);
+            const diagramNode = $getNodeFromSelection(selection, $isDiagramNode) as (DiagramNode | null);
             if (diagramNode === null) {
                 context.editor.update(() => {
                     const diagram = $createDiagramNode();
@@ -180,11 +167,49 @@ export const diagram: EditorButtonDefinition = {
             }
         });
     },
-    isActive(selection: BaseSelection|null): boolean {
+    isActive(selection: BaseSelection | null): boolean {
         return $selectionContainsNodeType(selection, $isDiagramNode);
     }
 };
 
+export const diagramManager: EditorButtonDefinition = {
+    label: 'Drawing manager',
+    action(context: EditorUiContext) {
+        showDiagramManagerForInsert(context);
+    },
+    isActive(): boolean {
+        return false;
+    }
+};
+
+export const media: EditorButtonDefinition = {
+    label: 'Insert/edit Media',
+    icon: mediaIcon,
+    action(context: EditorUiContext) {
+        const mediaModal = context.manager.createModal('media');
+
+        context.editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            const selectedNode = $getNodeFromSelection(selection, $isMediaNode) as MediaNode | null;
+
+            let formDefaults = {};
+            if (selectedNode) {
+                const nodeAttrs = selectedNode.getAttributes();
+                formDefaults = {
+                    src: nodeAttrs.src || nodeAttrs.data || '',
+                    width: nodeAttrs.width,
+                    height: nodeAttrs.height,
+                    embed: '',
+                }
+            }
+
+            mediaModal.show(formDefaults);
+        });
+    },
+    isActive(selection: BaseSelection | null): boolean {
+        return $selectionContainsNodeType(selection, $isMediaNode);
+    }
+};
 
 export const details: EditorButtonDefinition = {
     label: 'Insert collapsible block',
@@ -209,7 +234,7 @@ export const details: EditorButtonDefinition = {
             }
         });
     },
-    isActive(selection: BaseSelection|null): boolean {
+    isActive(selection: BaseSelection | null): boolean {
         return $selectionContainsNodeType(selection, $isDetailsNode);
     }
 }
\ No newline at end of file