Merge pull request #5731 from BookStackApp/lexical_jul25

[bookstack] / resources / js / wysiwyg / services / drop-paste-handling.ts

diff --git a/resources/js/wysiwyg/services/drop-paste-handling.ts b/resources/js/wysiwyg/services/drop-paste-handling.ts
index 07e35d4438e050b9410dd00f14913c4cca28dab5..57f9a80ae18fa8076cc1288c31b61eebb9f6c7fa 100644 (file)
--- a/resources/js/wysiwyg/services/drop-paste-handling.ts
+++ b/resources/js/wysiwyg/services/drop-paste-handling.ts
@@ -1,4 +1,5 @@
 import {
 import {

+    $createParagraphNode,

     $insertNodes,
     $isDecoratorNode, COMMAND_PRIORITY_HIGH, DROP_COMMAND,
     LexicalEditor,
     $insertNodes,
     $isDecoratorNode, COMMAND_PRIORITY_HIGH, DROP_COMMAND,
     LexicalEditor,


@@ -7,8 +8,7 @@ import {
 import {$insertNewBlockNodesAtSelection, $selectSingleNode} from "../utils/selection";
 import {$getNearestBlockNodeForCoords, $htmlToBlockNodes} from "../utils/nodes";
 import {Clipboard} from "../../services/clipboard";
 import {$insertNewBlockNodesAtSelection, $selectSingleNode} from "../utils/selection";
 import {$getNearestBlockNodeForCoords, $htmlToBlockNodes} from "../utils/nodes";
 import {Clipboard} from "../../services/clipboard";

-import {$createImageNode} from "../nodes/image";
-import {$createCustomParagraphNode} from "../nodes/custom-paragraph";
+import {$createImageNode} from "@lexical/rich-text/LexicalImageNode";

 import {$createLinkNode} from "@lexical/link";
 import {EditorImageData, uploadImageFile} from "../utils/images";
 import {EditorUiContext} from "../ui/framework/core";
 import {$createLinkNode} from "@lexical/link";
 import {EditorImageData, uploadImageFile} from "../utils/images";
 import {EditorUiContext} from "../ui/framework/core";


@@ -67,7 +67,7 @@ function handleMediaInsert(data: DataTransfer, context: EditorUiContext): boolea
         for (const imageFile of images) {
             const loadingImage = window.baseUrl('/loading.gif');
             const loadingNode = $createImageNode(loadingImage);
         for (const imageFile of images) {
             const loadingImage = window.baseUrl('/loading.gif');
             const loadingNode = $createImageNode(loadingImage);

-            const imageWrap = $createCustomParagraphNode();
+            const imageWrap = $createParagraphNode();

             imageWrap.append(loadingNode);
             $insertNodes([imageWrap]);
 
             imageWrap.append(loadingNode);
             $insertNodes([imageWrap]);
 


@@ -95,6 +95,21 @@ function handleMediaInsert(data: DataTransfer, context: EditorUiContext): boolea
     return handled;
 }
 
     return handled;
 }
 

+function handleImageLinkInsert(data: DataTransfer, context: EditorUiContext): boolean {
+    const regex = /https?:\/\/([^?#]*?)\.(png|jpeg|jpg|gif|webp|bmp|avif)/i
+    const text = data.getData('text/plain');
+    if (text && regex.test(text)) {
+        context.editor.update(() => {
+            const image = $createImageNode(text);
+            $insertNodes([image]);
+            image.select();
+        });
+        return true;
+    }
+
+    return false;
+}
+

 function createDropListener(context: EditorUiContext): (event: DragEvent) => boolean {
     const editor = context.editor;
     return (event: DragEvent): boolean => {
 function createDropListener(context: EditorUiContext): (event: DragEvent) => boolean {
     const editor = context.editor;
     return (event: DragEvent): boolean => {


@@ -138,7 +153,10 @@ function createPasteListener(context: EditorUiContext): (event: ClipboardEvent)
             return false;
         }
 
             return false;
         }
 

-        const handled = handleMediaInsert(event.clipboardData, context);
+        const handled =
+            handleImageLinkInsert(event.clipboardData, context) ||
+            handleMediaInsert(event.clipboardData, context);
+

         if (handled) {
             event.preventDefault();
         }
         if (handled) {
             event.preventDefault();
         }