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 0eac497fce8de43d24c0f226a484ffa4c7848f8a..3494096a2c2230efe8e59eef1a429ed947a6dca7 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/buttons/objects.ts
+++ b/resources/js/wysiwyg/ui/defaults/buttons/objects.ts
@@ -5,7 +5,7 @@ import {
     $createNodeSelection,
     $createTextNode,
     $getRoot,
-    $getSelection,
+    $getSelection, $insertNodes,
     $setSelection,
     BaseSelection,
     ElementNode
@@ -20,7 +20,7 @@ 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";
@@ -28,8 +28,12 @@ import {$isMediaNode, MediaNode} from "../../../nodes/media";
 import {
     $getNodeFromSelection,
     $insertNewBlockNodeAtSelection,
-    $selectionContainsNodeType
+    $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',
@@ -69,7 +73,7 @@ export const unlink: EditorButtonDefinition = {
     icon: unlinkIcon,
     action(context: EditorUiContext) {
         context.editor.update(() => {
-            const selection = context.lastSelection;
+            const selection = getLastSelection(context.editor);
             const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode | null;
             const selectionPoints = selection?.getStartEndPoints();
 
@@ -94,28 +98,20 @@ 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 {
@@ -140,21 +136,7 @@ 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 {
         return $selectionContainsNodeType(selection, $isCodeBlockNode);
@@ -171,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();
@@ -190,6 +172,16 @@ export const diagram: EditorButtonDefinition = {
     }
 };
 
+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,