@payloadcms/richtext-lexical 3.70.0-canary.9 → 3.71.0-internal-debug.80dab4c

package/dist/features/upload/client/plugin/index.js

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { $dfsIterator, $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils';
 import { useBulkUpload, useEffectEvent, useModal } from '@payloadcms/ui';
@@ -12,350 +10,311 @@ import { useEnabledRelationships } from '../../../relationship/client/utils/useE
 import { UploadDrawer } from '../drawer/index.js';
 import { $createUploadNode, $isUploadNode, UploadNode } from '../nodes/UploadNode.js';
 function canDropImage(event) {
-  const target = event.target;
-  return !!(isHTMLElement(target) && !target.closest('code, span.editor-image') && isHTMLElement(target.parentElement) && target.parentElement.closest('div.ContentEditable__root'));
+    const target = event.target;
+    return !!(isHTMLElement(target) && !target.closest('code, span.editor-image') && isHTMLElement(target.parentElement) && target.parentElement.closest('div.ContentEditable__root'));
 }
 function getDragSelection(event) {
-  // Source: https://github.com/AlessioGr/lexical/blob/main/packages/lexical-playground/src/plugins/ImagesPlugin/index.tsx
-  let range;
-  const domSelection = getDOMSelectionFromTarget(event.target);
-  if (document.caretRangeFromPoint) {
-    range = document.caretRangeFromPoint(event.clientX, event.clientY);
-  } else if (event.rangeParent && domSelection !== null) {
-    domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
-    range = domSelection.getRangeAt(0);
-  } else {
-    throw Error(`Cannot get the selection when dragging`);
-  }
-  return range;
+    // Source: https://github.com/AlessioGr/lexical/blob/main/packages/lexical-playground/src/plugins/ImagesPlugin/index.tsx
+    let range;
+    const domSelection = getDOMSelectionFromTarget(event.target);
+    if (document.caretRangeFromPoint) {
+        range = document.caretRangeFromPoint(event.clientX, event.clientY);
+    } else if (event.rangeParent && domSelection !== null) {
+        domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+        range = domSelection.getRangeAt(0);
+    } else {
+        throw Error(`Cannot get the selection when dragging`);
+    }
+    return range;
 }
 export const INSERT_UPLOAD_COMMAND = createCommand('INSERT_UPLOAD_COMMAND');
-export const UploadPlugin = t0 => {
-  const $ = _c(21);
-  const {
-    clientProps
-  } = t0;
-  const [editor] = useLexicalComposerContext();
-  const t1 = clientProps?.disabledCollections;
-  const t2 = clientProps?.enabledCollections;
-  let t3;
-  if ($[0] !== t1 || $[1] !== t2) {
-    t3 = {
-      collectionSlugsBlacklist: t1,
-      collectionSlugsWhitelist: t2,
-      uploads: true
-    };
-    $[0] = t1;
-    $[1] = t2;
-    $[2] = t3;
-  } else {
-    t3 = $[2];
-  }
-  const {
-    enabledCollectionSlugs
-  } = useEnabledRelationships(t3);
-  const {
-    drawerSlug: bulkUploadDrawerSlug,
-    setCollectionSlug,
-    setInitialForms,
-    setOnCancel,
-    setOnSuccess,
-    setSelectableCollections
-  } = useBulkUpload();
-  const {
-    isModalOpen,
-    openModal
-  } = useModal();
-  let t4;
-  if ($[3] !== bulkUploadDrawerSlug || $[4] !== editor || $[5] !== enabledCollectionSlugs || $[6] !== isModalOpen || $[7] !== openModal || $[8] !== setCollectionSlug || $[9] !== setInitialForms || $[10] !== setOnCancel || $[11] !== setOnSuccess || $[12] !== setSelectableCollections) {
-    t4 = t5 => {
-      const {
-        files
-      } = t5;
-      if (files?.length === 0) {
-        return;
-      }
-      setInitialForms(initialForms => [...(initialForms ?? []), ...files.map(_temp)]);
-      if (!isModalOpen(bulkUploadDrawerSlug)) {
-        if (!enabledCollectionSlugs.length || !enabledCollectionSlugs[0]) {
-          return;
-        }
-        setCollectionSlug(enabledCollectionSlugs[0]);
-        setSelectableCollections(enabledCollectionSlugs);
-        setOnCancel(() => {
-          editor.update(_temp2);
-        });
-        setOnSuccess(newDocs => {
-          const newDocsMap = new Map(newDocs.map(_temp3));
-          editor.update(() => {
-            for (const dfsNode_0 of $dfsIterator()) {
-              const node_0 = dfsNode_0.node;
-              if ($isUploadNode(node_0)) {
-                const nodeData_0 = node_0.getData();
-                if (nodeData_0?.pending) {
-                  const newDoc = newDocsMap.get(nodeData_0.pending?.formID);
-                  if (newDoc) {
-                    node_0.replace($createUploadNode({
-                      data: {
-                        id: new ObjectID.default().toHexString(),
-                        fields: {},
-                        relationTo: newDoc.collectionSlug,
-                        value: newDoc.doc.id
-                      }
-                    }));
-                  }
-                }
-              }
-            }
-          });
-        });
-        openModal(bulkUploadDrawerSlug);
-      }
-    };
-    $[3] = bulkUploadDrawerSlug;
-    $[4] = editor;
-    $[5] = enabledCollectionSlugs;
-    $[6] = isModalOpen;
-    $[7] = openModal;
-    $[8] = setCollectionSlug;
-    $[9] = setInitialForms;
-    $[10] = setOnCancel;
-    $[11] = setOnSuccess;
-    $[12] = setSelectableCollections;
-    $[13] = t4;
-  } else {
-    t4 = $[13];
-  }
-  const openBulkUpload = useEffectEvent(t4);
-  let t5;
-  if ($[14] !== editor || $[15] !== openBulkUpload) {
-    t5 = () => {
-      if (!editor.hasNodes([UploadNode])) {
-        throw new Error("UploadPlugin: UploadNode not registered on editor");
-      }
-      return mergeRegister(editor.registerNodeTransform(UploadNode, node_1 => {
-        const nodeData_1 = node_1.getData();
-        if (!nodeData_1?.pending) {
-          return;
+/**
+   * Bulk Upload Form ID that should be created, which can then be matched
+   * against the node formID if the upload is successful
+   */ export const UploadPlugin = ({ clientProps })=>{
+    const [editor] = useLexicalComposerContext();
+    const { enabledCollectionSlugs } = useEnabledRelationships({
+        collectionSlugsBlacklist: clientProps?.disabledCollections,
+        collectionSlugsWhitelist: clientProps?.enabledCollections,
+        uploads: true
+    });
+    const { drawerSlug: bulkUploadDrawerSlug, setCollectionSlug, setInitialForms, setOnCancel, setOnSuccess, setSelectableCollections } = useBulkUpload();
+    const { isModalOpen, openModal } = useModal();
+    const openBulkUpload = useEffectEvent(({ files })=>{
+        if (files?.length === 0) {
+            return;
         }
-        const upload = async function upload() {
-          let transformedImage = null;
-          const src = nodeData_1?.pending?.src;
-          const formID = nodeData_1?.pending?.formID;
-          if (src?.startsWith("data:")) {
-            const mimeMatch = src.match(/data:(image\/[a-zA-Z]+);base64,/);
-            const mimeType = mimeMatch ? mimeMatch[1] : "image/png";
-            const base64Data = src.replace(/^data:image\/[a-zA-Z]+;base64,/, "");
-            const byteCharacters = atob(base64Data);
-            const byteNumbers = new Array(byteCharacters.length);
-            for (let i = 0; i < byteCharacters.length; i++) {
-              byteNumbers[i] = byteCharacters.charCodeAt(i);
+        setInitialForms((initialForms)=>[
+                ...initialForms ?? [],
+                ...files.map((file)=>({
+                        file: file.file,
+                        formID: file.formID
+                    }))
+            ]);
+        if (!isModalOpen(bulkUploadDrawerSlug)) {
+            if (!enabledCollectionSlugs.length || !enabledCollectionSlugs[0]) {
+                return;
             }
-            const byteArray = new Uint8Array(byteNumbers);
-            const file_0 = new File([byteArray], "pasted-image." + mimeType?.split("/", 2)[1], {
-              type: mimeType
+            setCollectionSlug(enabledCollectionSlugs[0]);
+            setSelectableCollections(enabledCollectionSlugs);
+            setOnCancel(()=>{
+                // Remove all the pending upload nodes that were added but not uploaded
+                editor.update(()=>{
+                    for (const dfsNode of $dfsIterator()){
+                        const node = dfsNode.node;
+                        if ($isUploadNode(node)) {
+                            const nodeData = node.getData();
+                            if (nodeData?.pending) {
+                                node.remove();
+                            }
+                        }
+                    }
+                });
             });
-            transformedImage = {
-              alt: undefined,
-              file: file_0,
-              formID
-            };
-          } else {
-            if (src?.startsWith("http") || src?.startsWith("https")) {
-              const res = await fetch(src);
-              const blob = await res.blob();
-              const inferredFileName = src.split("/").pop() || "pasted-image" + blob.type.split("/", 2)[1];
-              const file_1 = new File([blob], inferredFileName, {
-                type: blob.type
-              });
-              transformedImage = {
-                alt: undefined,
-                file: file_1,
-                formID
-              };
-            }
-          }
-          if (!transformedImage) {
-            return;
-          }
-          openBulkUpload({
-            files: [transformedImage]
-          });
-        };
-        upload();
-      }), editor.registerCommand(INSERT_UPLOAD_COMMAND, payload => {
-        editor.update(() => {
-          const selection = $getSelection() || $getPreviousSelection();
-          if ($isRangeSelection(selection)) {
-            const uploadNode = $createUploadNode({
-              data: {
-                id: payload.id,
-                fields: payload.fields,
-                relationTo: payload.relationTo,
-                value: payload.value
-              }
+            setOnSuccess((newDocs)=>{
+                const newDocsMap = new Map(newDocs.map((doc)=>[
+                        doc.formID,
+                        doc
+                    ]));
+                editor.update(()=>{
+                    for (const dfsNode of $dfsIterator()){
+                        const node = dfsNode.node;
+                        if ($isUploadNode(node)) {
+                            const nodeData = node.getData();
+                            if (nodeData?.pending) {
+                                const newDoc = newDocsMap.get(nodeData.pending?.formID);
+                                if (newDoc) {
+                                    node.replace($createUploadNode({
+                                        data: {
+                                            id: new ObjectID.default().toHexString(),
+                                            fields: {},
+                                            relationTo: newDoc.collectionSlug,
+                                            value: newDoc.doc.id
+                                        }
+                                    }));
+                                }
+                            }
+                        }
+                    }
+                });
             });
-            const {
-              focus
-            } = selection;
-            const focusNode = focus.getNode();
-            $insertNodeToNearestRoot(uploadNode);
-            if ($isParagraphNode(focusNode) && !focusNode.__first) {
-              focusNode.remove();
-            }
-          }
-        });
-        return true;
-      }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(PASTE_COMMAND, event => {
-        if (!(event instanceof ClipboardEvent)) {
-          return false;
-        }
-        const clipboardData = event.clipboardData;
-        if (!clipboardData?.types?.length || clipboardData?.types?.includes("text/html")) {
-          return false;
+            openModal(bulkUploadDrawerSlug);
         }
-        const files_0 = [];
-        if (clipboardData?.files?.length) {
-          Array.from(clipboardData.files).forEach(file_2 => {
-            files_0.push({
-              alt: "",
-              file: file_2,
-              formID: new ObjectID.default().toHexString()
-            });
-          });
+    });
+    useEffect(()=>{
+        if (!editor.hasNodes([
+            UploadNode
+        ])) {
+            throw new Error('UploadPlugin: UploadNode not registered on editor');
         }
-        if (files_0.length) {
-          editor.update(() => {
-            const selection_0 = $getSelection() || $getPreviousSelection();
-            if ($isRangeSelection(selection_0)) {
-              for (const file_3 of files_0) {
-                const pendingUploadNode = $createUploadNode({
-                  data: {
-                    pending: {
-                      formID: file_3.formID,
-                      src: URL.createObjectURL(file_3.file)
+        return mergeRegister(/**
+       * Handle auto-uploading files if you copy & paste an image dom element from the clipboard
+       */ editor.registerNodeTransform(UploadNode, (node)=>{
+            const nodeData = node.getData();
+            if (!nodeData?.pending) {
+                return;
+            }
+            async function upload() {
+                let transformedImage = null;
+                const src = nodeData?.pending?.src;
+                const formID = nodeData?.pending?.formID;
+                if (src?.startsWith('data:')) {
+                    // It's a base64-encoded image
+                    const mimeMatch = src.match(/data:(image\/[a-zA-Z]+);base64,/);
+                    const mimeType = mimeMatch ? mimeMatch[1] : 'image/png';
+                    // Default to PNG if MIME type not found
+                    const base64Data = src.replace(/^data:image\/[a-zA-Z]+;base64,/, '');
+                    const byteCharacters = atob(base64Data);
+                    const byteNumbers = new Array(byteCharacters.length);
+                    for(let i = 0; i < byteCharacters.length; i++){
+                        byteNumbers[i] = byteCharacters.charCodeAt(i);
                     }
-                  }
-                });
-                const {
-                  focus: focus_0
-                } = selection_0;
-                const focusNode_0 = focus_0.getNode();
-                $insertNodeToNearestRoot(pendingUploadNode);
-                if ($isParagraphNode(focusNode_0) && !focusNode_0.__first) {
-                  focusNode_0.remove();
+                    const byteArray = new Uint8Array(byteNumbers);
+                    const file = new File([
+                        byteArray
+                    ], 'pasted-image.' + mimeType?.split('/', 2)[1], {
+                        type: mimeType
+                    });
+                    transformedImage = {
+                        alt: undefined,
+                        file,
+                        formID
+                    };
+                } else if (src?.startsWith('http') || src?.startsWith('https')) {
+                    // It's an image URL
+                    const res = await fetch(src);
+                    const blob = await res.blob();
+                    const inferredFileName = src.split('/').pop() || 'pasted-image' + blob.type.split('/', 2)[1];
+                    const file = new File([
+                        blob
+                    ], inferredFileName, {
+                        type: blob.type
+                    });
+                    transformedImage = {
+                        alt: undefined,
+                        file,
+                        formID
+                    };
+                }
+                if (!transformedImage) {
+                    return;
                 }
-              }
+                openBulkUpload({
+                    files: [
+                        transformedImage
+                    ]
+                });
             }
-          });
-          openBulkUpload({
-            files: files_0
-          });
-          return true;
-        }
-        return false;
-      }, COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, event_0 => {
-        if (!(event_0 instanceof DragEvent)) {
-          return false;
-        }
-        const dt = event_0.dataTransfer;
-        if (!dt?.types?.length) {
-          return false;
-        }
-        const files_1 = [];
-        if (dt?.files?.length) {
-          Array.from(dt.files).forEach(file_4 => {
-            files_1.push({
-              alt: "",
-              file: file_4,
-              formID: new ObjectID.default().toHexString()
+            void upload();
+        }), editor.registerCommand(INSERT_UPLOAD_COMMAND, (payload)=>{
+            editor.update(()=>{
+                const selection = $getSelection() || $getPreviousSelection();
+                if ($isRangeSelection(selection)) {
+                    const uploadNode = $createUploadNode({
+                        data: {
+                            id: payload.id,
+                            fields: payload.fields,
+                            relationTo: payload.relationTo,
+                            value: payload.value
+                        }
+                    });
+                    // we need to get the focus node before inserting the block node, as $insertNodeToNearestRoot can change the focus node
+                    const { focus } = selection;
+                    const focusNode = focus.getNode();
+                    // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist
+                    $insertNodeToNearestRoot(uploadNode);
+                    // Delete the node it it's an empty paragraph
+                    if ($isParagraphNode(focusNode) && !focusNode.__first) {
+                        focusNode.remove();
+                    }
+                }
             });
-          });
-        }
-        if (files_1.length) {
-          event_0.preventDefault();
-          event_0.stopPropagation();
-          editor.update(() => {
-            if (canDropImage(event_0)) {
-              const range = getDragSelection(event_0);
-              const selection_1 = $createRangeSelection();
-              if (range !== null && range !== undefined) {
-                selection_1.applyDOMRange(range);
-              }
-              $setSelection(selection_1);
-              for (const file_5 of files_1) {
-                const pendingUploadNode_0 = $createUploadNode({
-                  data: {
-                    pending: {
-                      formID: file_5.formID,
-                      src: URL.createObjectURL(file_5.file)
+            return true;
+        }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(PASTE_COMMAND, (event)=>{
+            // Pending UploadNodes are automatically created when importDOM is called. However, if you paste a file from your computer
+            // directly, importDOM won't be called, as it's not a HTML dom element. So we need to handle that case here.
+            if (!(event instanceof ClipboardEvent)) {
+                return false;
+            }
+            const clipboardData = event.clipboardData;
+            if (!clipboardData?.types?.length || clipboardData?.types?.includes('text/html')) {
+                // HTML is handled through importDOM => registerNodeTransform for pending UploadNode
+                return false;
+            }
+            const files = [];
+            if (clipboardData?.files?.length) {
+                Array.from(clipboardData.files).forEach((file)=>{
+                    files.push({
+                        alt: '',
+                        file,
+                        formID: new ObjectID.default().toHexString()
+                    });
+                });
+            }
+            if (files.length) {
+                // Insert a pending UploadNode for each image
+                editor.update(()=>{
+                    const selection = $getSelection() || $getPreviousSelection();
+                    if ($isRangeSelection(selection)) {
+                        for (const file of files){
+                            const pendingUploadNode = $createUploadNode({
+                                data: {
+                                    pending: {
+                                        formID: file.formID,
+                                        src: URL.createObjectURL(file.file)
+                                    }
+                                }
+                            });
+                            // we need to get the focus node before inserting the upload node, as $insertNodeToNearestRoot can change the focus node
+                            const { focus } = selection;
+                            const focusNode = focus.getNode();
+                            // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist
+                            $insertNodeToNearestRoot(pendingUploadNode);
+                            // Delete the node it it's an empty paragraph
+                            if ($isParagraphNode(focusNode) && !focusNode.__first) {
+                                focusNode.remove();
+                            }
+                        }
                     }
-                  }
                 });
-                const {
-                  focus: focus_1
-                } = selection_1;
-                const focusNode_1 = focus_1.getNode();
-                $insertNodeToNearestRoot(pendingUploadNode_0);
-                if ($isParagraphNode(focusNode_1) && !focusNode_1.__first) {
-                  focusNode_1.remove();
-                }
-              }
+                // Open the bulk drawer - the node transform will not open it for us, as it does not handle blob/file uploads
+                openBulkUpload({
+                    files
+                });
+                return true;
             }
-          });
-          openBulkUpload({
-            files: files_1
-          });
-          return true;
-        }
-        return false;
-      }, COMMAND_PRIORITY_LOW));
-    };
-    $[14] = editor;
-    $[15] = openBulkUpload;
-    $[16] = t5;
-  } else {
-    t5 = $[16];
-  }
-  let t6;
-  if ($[17] !== editor) {
-    t6 = [editor];
-    $[17] = editor;
-    $[18] = t6;
-  } else {
-    t6 = $[18];
-  }
-  useEffect(t5, t6);
-  let t7;
-  if ($[19] !== enabledCollectionSlugs) {
-    t7 = _jsx(UploadDrawer, {
-      enabledCollectionSlugs
-    });
-    $[19] = enabledCollectionSlugs;
-    $[20] = t7;
-  } else {
-    t7 = $[20];
-  }
-  return t7;
+            return false;
+        }, COMMAND_PRIORITY_LOW), // Handle drag & drop of files from the desktop into the editor
+        editor.registerCommand(DROP_COMMAND, (event)=>{
+            if (!(event instanceof DragEvent)) {
+                return false;
+            }
+            const dt = event.dataTransfer;
+            if (!dt?.types?.length) {
+                return false;
+            }
+            const files = [];
+            if (dt?.files?.length) {
+                Array.from(dt.files).forEach((file)=>{
+                    files.push({
+                        alt: '',
+                        file,
+                        formID: new ObjectID.default().toHexString()
+                    });
+                });
+            }
+            if (files.length) {
+                // Prevent the default browser drop handling, which would open the file in the browser
+                event.preventDefault();
+                event.stopPropagation();
+                // Insert a PendingUploadNode for each image
+                editor.update(()=>{
+                    if (canDropImage(event)) {
+                        const range = getDragSelection(event);
+                        const selection = $createRangeSelection();
+                        if (range !== null && range !== undefined) {
+                            selection.applyDOMRange(range);
+                        }
+                        $setSelection(selection);
+                        for (const file of files){
+                            const pendingUploadNode = $createUploadNode({
+                                data: {
+                                    pending: {
+                                        formID: file.formID,
+                                        src: URL.createObjectURL(file.file)
+                                    }
+                                }
+                            });
+                            // we need to get the focus node before inserting the upload node, as $insertNodeToNearestRoot can change the focus node
+                            const { focus } = selection;
+                            const focusNode = focus.getNode();
+                            // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist
+                            $insertNodeToNearestRoot(pendingUploadNode);
+                            // Delete the node it it's an empty paragraph
+                            if ($isParagraphNode(focusNode) && !focusNode.__first) {
+                                focusNode.remove();
+                            }
+                        }
+                    }
+                });
+                // Open the bulk drawer - the node transform will not open it for us, as it does not handle blob/file uploads
+                openBulkUpload({
+                    files
+                });
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW));
+    }, [
+        editor
+    ]);
+    return /*#__PURE__*/ _jsxDEV(UploadDrawer, {
+        enabledCollectionSlugs: enabledCollectionSlugs
+    }, void 0, false, {
+        fileName: "src/features/upload/client/plugin/index.tsx",
+        lineNumber: 401,
+        columnNumber: 10
+    }, this);
 };
-function _temp(file) {
-  return {
-    file: file.file,
-    formID: file.formID
-  };
-}
-function _temp2() {
-  for (const dfsNode of $dfsIterator()) {
-    const node = dfsNode.node;
-    if ($isUploadNode(node)) {
-      const nodeData = node.getData();
-      if (nodeData?.pending) {
-        node.remove();
-      }
-    }
-  }
-}
-function _temp3(doc) {
-  return [doc.formID, doc];
-}
+
 //# sourceMappingURL=index.js.map