Lexical: Got media node core work & form done

[bookstack] / resources / js / wysiwyg / ui / defaults / form-definitions.ts

diff --git a/resources/js/wysiwyg/ui/defaults/form-definitions.ts b/resources/js/wysiwyg/ui/defaults/form-definitions.ts
index 04147a4f0577f34767b961a13185755a94903bf3..a2242c338739f8993939a755eb3964e13c399b1b 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/form-definitions.ts
+++ b/resources/js/wysiwyg/ui/defaults/form-definitions.ts
@@ -1,14 +1,17 @@
 import {EditorFormDefinition, EditorSelectFormFieldDefinition} from "../framework/forms";
 import {EditorUiContext} from "../framework/core";
 import {$createLinkNode} from "@lexical/link";
-import {$createTextNode, $getSelection} from "lexical";
+import {$createTextNode, $getSelection, LexicalNode} from "lexical";
 import {$createImageNode} from "../../nodes/image";
 import {setEditorContentFromHtml} from "../../actions";
+import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "../../nodes/media";
+import {$getNodeFromSelection} from "../../helpers";
+import {$insertNodeToNearestRoot} from "@lexical/utils";
 
 
 export const link: EditorFormDefinition = {
     submitText: 'Apply',
-    action(formData, context: EditorUiContext) {
+    async action(formData, context: EditorUiContext) {
         context.editor.update(() => {
 
             const selection = $getSelection();
@@ -53,7 +56,7 @@ export const link: EditorFormDefinition = {
 
 export const image: EditorFormDefinition = {
     submitText: 'Apply',
-    action(formData, context: EditorUiContext) {
+    async action(formData, context: EditorUiContext) {
         context.editor.update(() => {
             const selection = $getSelection();
             const imageNode = $createImageNode(formData.get('src')?.toString() || '', {
@@ -89,9 +92,73 @@ export const image: EditorFormDefinition = {
     ],
 };
 
+export const media: EditorFormDefinition = {
+    submitText: 'Save',
+    async action(formData, context: EditorUiContext) {
+        const selectedNode: MediaNode|null = await (new Promise((res, rej) => {
+            context.editor.getEditorState().read(() => {
+                const node = $getNodeFromSelection($getSelection(), $isMediaNode);
+                res(node as MediaNode|null);
+            });
+        }));
+
+        const embedCode = (formData.get('embed') || '').toString().trim();
+        if (embedCode) {
+            context.editor.update(() => {
+                const node = $createMediaNodeFromHtml(embedCode);
+                if (selectedNode && node) {
+                    selectedNode.replace(node)
+                } else if (node) {
+                    $insertNodeToNearestRoot(node);
+                }
+            });
+
+            return true;
+        }
+
+        context.editor.update(() => {
+            const src = (formData.get('src') || '').toString().trim();
+            const height = (formData.get('height') || '').toString().trim();
+            const width = (formData.get('width') || '').toString().trim();
+
+            const updateNode = selectedNode || $createMediaNodeFromSrc(src);
+            updateNode.setSrc(src);
+            updateNode.setWidthAndHeight(width, height);
+            if (!selectedNode) {
+                $insertNodeToNearestRoot(updateNode);
+            }
+        });
+
+        return true;
+    },
+    fields: [
+        {
+            label: 'Source',
+            name: 'src',
+            type: 'text',
+        },
+        {
+            label: 'Width',
+            name: 'width',
+            type: 'text',
+        },
+        {
+            label: 'Height',
+            name: 'height',
+            type: 'text',
+        },
+        // TODO - Tabbed interface to separate this option
+        {
+            label: 'Paste your embed code below:',
+            name: 'embed',
+            type: 'textarea',
+        },
+    ],
+};
+
 export const source: EditorFormDefinition = {
     submitText: 'Save',
-    action(formData, context: EditorUiContext) {
+    async action(formData, context: EditorUiContext) {
         setEditorContentFromHtml(context.editor, formData.get('source')?.toString() || '');
         return true;
     },