Lexical: Started adding editor shortcuts

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

diff --git a/resources/js/wysiwyg/ui/defaults/forms/objects.ts b/resources/js/wysiwyg/ui/defaults/forms/objects.ts
index 7a388751bc420733df52ecfce6605fb178ea139a..2aefe54145023f9b2bd0bd429e8e58a034dabf94 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/forms/objects.ts
+++ b/resources/js/wysiwyg/ui/defaults/forms/objects.ts
@@ -1,31 +1,82 @@
-import {EditorFormDefinition, EditorFormTabs, EditorSelectFormFieldDefinition} from "../../framework/forms";
+import {
+    EditorFormDefinition,
+    EditorFormField,
+    EditorFormTabs,
+    EditorSelectFormFieldDefinition
+} from "../../framework/forms";
 import {EditorUiContext} from "../../framework/core";
-import {$createTextNode, $getSelection} from "lexical";
-import {$createImageNode} from "../../../nodes/image";
-import {$createLinkNode} from "@lexical/link";
+import {$createTextNode, $getSelection, $insertNodes} from "lexical";
+import {$isImageNode, ImageNode} from "../../../nodes/image";
+import {$createLinkNode, $isLinkNode} from "@lexical/link";
 import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "../../../nodes/media";
-import {$getNodeFromSelection} from "../../../helpers";
 import {$insertNodeToNearestRoot} from "@lexical/utils";
+import {$getNodeFromSelection, getLastSelection} from "../../../utils/selection";
+import {EditorFormModal} from "../../framework/modals";
+import {EditorActionField} from "../../framework/blocks/action-field";
+import {EditorButton} from "../../framework/buttons";
+import {showImageManager} from "../../../utils/images";
+import searchImageIcon from "@icons/editor/image-search.svg";
+import searchIcon from "@icons/search.svg";
+import {showLinkSelector} from "../../../utils/links";
+import {LinkField} from "../../framework/blocks/link-field";
+
+export function $showImageForm(image: ImageNode, context: EditorUiContext) {
+    const imageModal: EditorFormModal = context.manager.createModal('image');
+    const height = image.getHeight();
+    const width = image.getWidth();
+
+    const formData = {
+        src: image.getSrc(),
+        alt: image.getAltText(),
+        height: height === 0 ? '' : String(height),
+        width: width === 0 ? '' : String(width),
+    };
+
+    imageModal.show(formData);
+}
 
 export const image: EditorFormDefinition = {
     submitText: 'Apply',
     async action(formData, context: EditorUiContext) {
         context.editor.update(() => {
-            const selection = $getSelection();
-            const imageNode = $createImageNode(formData.get('src')?.toString() || '', {
-                alt: formData.get('alt')?.toString() || '',
-                height: Number(formData.get('height')?.toString() || '0'),
-                width: Number(formData.get('width')?.toString() || '0'),
-            });
-            selection?.insertNodes([imageNode]);
+            const selection = getLastSelection(context.editor);
+            const selectedImage = $getNodeFromSelection(selection, $isImageNode);
+            if ($isImageNode(selectedImage)) {
+                selectedImage.setSrc(formData.get('src')?.toString() || '');
+                selectedImage.setAltText(formData.get('alt')?.toString() || '');
+
+                selectedImage.setWidth(Number(formData.get('width')?.toString() || '0'));
+                selectedImage.setHeight(Number(formData.get('height')?.toString() || '0'));
+            }
         });
         return true;
     },
     fields: [
         {
-            label: 'Source',
-            name: 'src',
-            type: 'text',
+            build() {
+                return new EditorActionField(
+                    new EditorFormField({
+                        label: 'Source',
+                        name: 'src',
+                        type: 'text',
+                    }),
+                    new EditorButton({
+                        label: 'Browse files',
+                        icon: searchImageIcon,
+                        action(context: EditorUiContext) {
+                            showImageManager((image) => {
+                                 const modal =  context.manager.getActiveModal('image');
+                                 if (modal) {
+                                     modal.getForm().setValues({
+                                         src: image.thumbs?.display || image.url,
+                                         alt: image.name,
+                                     });
+                                 }
+                            });
+                        }
+                    }),
+                );
+            },
         },
         {
             label: 'Alternative description',
@@ -50,23 +101,62 @@ export const link: EditorFormDefinition = {
     async action(formData, context: EditorUiContext) {
         context.editor.update(() => {
 
+            const url = formData.get('url')?.toString() || '';
+            const title = formData.get('title')?.toString() || ''
+            const target = formData.get('target')?.toString() || '';
+            const text = formData.get('text')?.toString() || '';
+
             const selection = $getSelection();
+            let link = $getNodeFromSelection(selection, $isLinkNode);
+            if ($isLinkNode(link)) {
+                link.setURL(url);
+                link.setTarget(target);
+                link.setTitle(title);
+            } else {
+                link = $createLinkNode(url, {
+                    title: title,
+                    target: target,
+                });
 
-            const linkNode = $createLinkNode(formData.get('url')?.toString() || '', {
-                title: formData.get('title')?.toString() || '',
-                target: formData.get('target')?.toString() || '',
-            });
-            linkNode.append($createTextNode(formData.get('text')?.toString() || ''));
+                $insertNodes([link]);
+            }
 
-            selection?.insertNodes([linkNode]);
+            if ($isLinkNode(link)) {
+                for (const child of link.getChildren()) {
+                    child.remove(true);
+                }
+                link.append($createTextNode(text));
+            }
         });
         return true;
     },
     fields: [
         {
-            label: 'URL',
-            name: 'url',
-            type: 'text',
+            build() {
+                return new EditorActionField(
+                    new LinkField(new EditorFormField({
+                        label: 'URL',
+                        name: 'url',
+                        type: 'text',
+                    })),
+                    new EditorButton({
+                        label: 'Browse links',
+                        icon: searchIcon,
+                        action(context: EditorUiContext) {
+                            showLinkSelector(entity => {
+                                const modal =  context.manager.getActiveModal('link');
+                                if (modal) {
+                                    modal.getForm().setValues({
+                                        url: entity.link,
+                                        text: entity.name,
+                                        title: entity.name,
+                                    });
+                                }
+                            });
+                        }
+                    }),
+                );
+            },
         },
         {
             label: 'Text to display',