@payloadcms/richtext-lexical 3.68.0-internal-debug.2eb12b9 → 3.68.0-internal-debug.dafc24d

package/dist/features/upload/client/component/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/upload/client/component/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Data, FormState, JsonObject } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  formatDrawerSlug,\n  Thumbnail,\n  useConfig,\n  useEditDepth,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { $getNodeByKey, type ElementFormatType } from 'lexical'\nimport { isImage } from 'payload/shared'\nimport React, { useCallback, useId, useReducer, useRef, useState } from 'react'\n\nimport type { BaseClientFeatureProps } from '../../../typesClient.js'\nimport type { UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../index.js'\nimport type { UploadNode } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport './index.scss'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  className: string\n  data: UploadData\n  format?: ElementFormatType\n  nodeKey: string\n}\n\nexport const UploadComponent: React.FC<ElementProps> = (props) => {\n  const {\n    className: baseClass,\n    data: { fields, relationTo, value },\n    format,\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.',\n    )\n  }\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n  const { uuid } = useEditorConfigContext()\n  const editDepth = useEditDepth()\n  const [editor] = useLexicalComposerContext()\n\n  const {\n    editorConfig,\n    fieldProps: { schemaPath },\n  } = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection] = useState<ClientCollectionConfig>(() =>\n    getEntityConfig({ collectionSlug: relationTo }),\n  )\n\n  const componentID = useId()\n\n  const extraFieldsDrawerSlug = formatDrawerSlug({\n    slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID\n    depth: editDepth,\n  })\n\n  // Need to use hook to initialize useEffect that restores cursor position\n  const { toggleDrawer } = useLexicalDrawer(extraFieldsDrawerSlug, true)\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (_data: Data) => {\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      dispatchCacheBust()\n      closeDocumentDrawer()\n    },\n    [setParams, cacheBust, closeDocumentDrawer],\n  )\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as BaseClientFeatureProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  const onExtraFieldsDrawerSubmit = useCallback(\n    (_: FormState, data: JsonObject) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: null | UploadNode = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n    },\n    [editor, nodeKey],\n  )\n\n  const aspectRatio =\n    thumbnailSRC && data?.width && data?.height\n      ? data.width > data.height\n        ? 'landscape'\n        : 'portrait'\n      : 'landscape'\n\n  return (\n    <div\n      className={`${baseClass}__contents ${baseClass}__contents--${aspectRatio}`}\n      data-align={format || undefined}\n      data-filename={data?.filename}\n      ref={uploadRef}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__media`}>\n          <Thumbnail\n            collectionSlug={relationTo}\n            fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null}\n            height={data?.height}\n            size=\"none\"\n            width={data?.width}\n          />\n\n          {isEditable && (\n            <div className={`${baseClass}__overlay ${baseClass}__floater`}>\n              <div className={`${baseClass}__actions`} role=\"toolbar\">\n                {hasExtraFields ? (\n                  <Button\n                    buttonStyle=\"icon-label\"\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={!isEditable}\n                    el=\"button\"\n                    icon=\"edit\"\n                    onClick={toggleDrawer}\n                    round\n                    size=\"medium\"\n                    tooltip={t('fields:editRelationship')}\n                  />\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__swap-drawer-toggler`}\n                  disabled={!isEditable}\n                  el=\"button\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:swapUpload')}\n                />\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={!isEditable}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className={`${baseClass}__metaOverlay ${baseClass}__floater`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong className={`${baseClass}__filename`}>\n              {data?.filename || t('general:untitled')}\n            </strong>\n          </DocumentDrawerToggler>\n          <div className={`${baseClass}__collectionLabel`}>\n            {getTranslation(relatedCollection.labels.singular, i18n)}\n          </div>\n        </div>\n      </div>\n\n      {value ? <DocumentDrawer onSave={updateUpload} /> : null}\n      {hasExtraFields ? (\n        <FieldsDrawer\n          data={fields}\n          drawerSlug={extraFieldsDrawerSlug}\n          drawerTitle={t('general:editLabel', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n          featureKey=\"upload\"\n          handleDrawerSubmit={onExtraFieldsDrawerSubmit}\n          schemaPath={schemaPath}\n          schemaPathSuffix={relatedCollection.slug}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","formatDrawerSlug","Thumbnail","useConfig","useEditDepth","usePayloadAPI","useTranslation","$getNodeByKey","isImage","React","useCallback","useId","useReducer","useRef","useState","useEditorConfigContext","FieldsDrawer","useLexicalDocumentDrawer","useLexicalDrawer","INSERT_UPLOAD_WITH_DRAWER_COMMAND","initialParams","depth","UploadComponent","props","className","baseClass","data","fields","relationTo","value","format","nodeKey","Error","config","routes","api","serverURL","getEntityConfig","uploadRef","uuid","editDepth","editor","editorConfig","fieldProps","schemaPath","isEditable","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","collectionSlug","componentID","extraFieldsDrawerSlug","slug","toggleDrawer","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","update","remove","updateUpload","_data","hasExtraFields","resolvedFeatureMap","get","sanitizedClientFeatureProps","collections","onExtraFieldsDrawerSubmit","_","uploadNode","newData","getData","setData","aspectRatio","width","height","div","data-align","undefined","data-filename","filename","ref","fileSrc","mimeType","size","role","buttonStyle","disabled","el","icon","onClick","round","tooltip","dispatchCommand","replace","e","preventDefault","strong","labels","singular","onSave","drawerSlug","drawerTitle","label","featureKey","handleDrawerSubmit","schemaPathSuffix"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/features/upload/client/component/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Data, FormState, JsonObject } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  formatDrawerSlug,\n  Thumbnail,\n  useConfig,\n  useEditDepth,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { $getNodeByKey, type ElementFormatType } from 'lexical'\nimport { isImage } from 'payload/shared'\nimport React, { useCallback, useId, useReducer, useRef, useState } from 'react'\n\nimport type { BaseClientFeatureProps } from '../../../typesClient.js'\nimport type { UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../index.js'\nimport type { UploadNode } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport './index.scss'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  className: string\n  data: UploadData\n  format?: ElementFormatType\n  nodeKey: string\n}\n\nexport const UploadComponent: React.FC<ElementProps> = (props) => {\n  const {\n    className: baseClass,\n    data: { fields, relationTo, value },\n    format,\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.',\n    )\n  }\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n  const { uuid } = useEditorConfigContext()\n  const editDepth = useEditDepth()\n  const [editor] = useLexicalComposerContext()\n\n  const {\n    editorConfig,\n    fieldProps: { schemaPath },\n  } = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection] = useState<ClientCollectionConfig>(() =>\n    getEntityConfig({ collectionSlug: relationTo }),\n  )\n\n  const componentID = useId()\n\n  const extraFieldsDrawerSlug = formatDrawerSlug({\n    slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID\n    depth: editDepth,\n  })\n\n  // Need to use hook to initialize useEffect that restores cursor position\n  const { toggleDrawer } = useLexicalDrawer(extraFieldsDrawerSlug, true)\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (_data: Data) => {\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      dispatchCacheBust()\n      closeDocumentDrawer()\n    },\n    [setParams, cacheBust, closeDocumentDrawer],\n  )\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as BaseClientFeatureProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  const onExtraFieldsDrawerSubmit = useCallback(\n    (_: FormState, data: JsonObject) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: null | UploadNode = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n    },\n    [editor, nodeKey],\n  )\n\n  const aspectRatio =\n    thumbnailSRC && data?.width && data?.height\n      ? data.width > data.height\n        ? 'landscape'\n        : 'portrait'\n      : 'landscape'\n\n  return (\n    <div\n      className={`${baseClass}__contents ${baseClass}__contents--${aspectRatio}`}\n      data-align={format || undefined}\n      data-filename={data?.filename}\n      ref={uploadRef}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__media`}>\n          <Thumbnail\n            collectionSlug={relationTo}\n            fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null}\n            height={data?.height}\n            size=\"none\"\n            width={data?.width}\n          />\n\n          {isEditable && (\n            <div className={`${baseClass}__overlay ${baseClass}__floater`}>\n              <div className={`${baseClass}__actions`} role=\"toolbar\">\n                {hasExtraFields ? (\n                  <Button\n                    buttonStyle=\"icon-label\"\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={!isEditable}\n                    el=\"button\"\n                    icon=\"edit\"\n                    onClick={toggleDrawer}\n                    round\n                    size=\"medium\"\n                    tooltip={t('fields:editRelationship')}\n                  />\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__swap-drawer-toggler`}\n                  disabled={!isEditable}\n                  el=\"button\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:swapUpload')}\n                />\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={!isEditable}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className={`${baseClass}__metaOverlay ${baseClass}__floater`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong className={`${baseClass}__filename`}>\n              {data?.filename || t('general:untitled')}\n            </strong>\n          </DocumentDrawerToggler>\n          <div className={`${baseClass}__collectionLabel`}>\n            {getTranslation(relatedCollection.labels.singular, i18n)}\n          </div>\n        </div>\n      </div>\n\n      {value ? <DocumentDrawer onSave={updateUpload} /> : null}\n      {hasExtraFields ? (\n        <FieldsDrawer\n          data={fields}\n          drawerSlug={extraFieldsDrawerSlug}\n          drawerTitle={t('general:editLabel', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n          featureKey=\"upload\"\n          handleDrawerSubmit={onExtraFieldsDrawerSubmit}\n          schemaPath={schemaPath}\n          schemaPathSuffix={relatedCollection.slug}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","formatDrawerSlug","Thumbnail","useConfig","useEditDepth","usePayloadAPI","useTranslation","$getNodeByKey","isImage","React","useCallback","useId","useReducer","useRef","useState","useEditorConfigContext","FieldsDrawer","useLexicalDocumentDrawer","useLexicalDrawer","INSERT_UPLOAD_WITH_DRAWER_COMMAND","initialParams","depth","UploadComponent","props","className","baseClass","data","fields","relationTo","value","format","nodeKey","Error","config","routes","api","serverURL","getEntityConfig","uploadRef","uuid","editDepth","editor","editorConfig","fieldProps","schemaPath","isEditable","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","collectionSlug","componentID","extraFieldsDrawerSlug","slug","toggleDrawer","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","update","remove","updateUpload","_data","hasExtraFields","resolvedFeatureMap","get","sanitizedClientFeatureProps","collections","onExtraFieldsDrawerSubmit","_","uploadNode","newData","getData","setData","aspectRatio","width","height","div","data-align","undefined","data-filename","filename","ref","fileSrc","mimeType","size","role","buttonStyle","disabled","el","icon","onClick","round","tooltip","dispatchCommand","replace","e","preventDefault","strong","labels","singular","onSave","drawerSlug","drawerTitle","label","featureKey","handleDrawerSubmit","schemaPathSuffix"],"mappings":"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"}

package/dist/features/upload/client/component/index.scss

@@ -0,0 +1,191 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .LexicalEditorTheme__upload {
+    @extend %body;
+    @include shadow-sm;
+
+    border-radius: $style-radius-m;
+    border: 1px solid var(--theme-elevation-100);
+    position: relative;
+    font-family: var(--font-body);
+    margin-block: base(0.5);
+
+    // Alignment support using :has() selector
+    &:has([data-align='center']) {
+      width: fit-content;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    &:has([data-align='right']),
+    &:has([data-align='end']) {
+      width: fit-content;
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    &:has([data-align='left']),
+    &:has([data-align='start']) {
+      width: fit-content;
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+    &:hover {
+      border: 1px solid var(--theme-elevation-150);
+    }
+
+    img,
+    svg {
+      border-radius: $style-radius-s;
+      width: auto;
+    }
+
+    &__contents {
+      &--landscape {
+        img,
+        svg {
+          max-width: 450px;
+          min-width: 450px;
+        }
+      }
+      &--portrait {
+        img,
+        svg {
+          max-height: 450px;
+          min-height: 450px;
+        }
+      }
+    }
+
+    button {
+      margin: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &__card {
+      @include soft-shadow-bottom;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    &__floater {
+      @include shadow-lg;
+      position: absolute;
+      color: var(--theme-text);
+
+      /* hidden by default */
+      opacity: 0;
+      transition:
+        opacity 0.15s ease,
+        transform 0.15s ease;
+      pointer-events: none;
+    }
+
+    &:hover .LexicalEditorTheme__upload__floater,
+    &__media:focus-within .LexicalEditorTheme__upload__floater {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    /* --- Floating Action Buttons (top-right) ------------------------------------- */
+    &__overlay {
+      display: flex;
+      top: calc(var(--base) * 0.5);
+      right: calc(var(--base) * 0.5);
+      padding: calc(var(--base) * 0.2) calc(var(--base) * 0.2);
+
+      background: var(--theme-elevation-50);
+      border-radius: $style-radius-m;
+      transform: translateY(-6px);
+    }
+    &:hover .LexicalEditorTheme__upload__overlay,
+    &__media:focus-within .LexicalEditorTheme__upload__overlay {
+      transform: translateY(0);
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap: calc(var(--base) * 0.3);
+
+      .btn:hover {
+        background: var(--theme-elevation-100);
+      }
+    }
+    /* --- Floating Metadata (bottom-center) ------------------------------------- */
+    &__metaOverlay {
+      display: inline-flex;
+      left: 50%;
+      bottom: 0;
+      width: 100%;
+      padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
+      transform: translateX(-50%);
+
+      flex-wrap: wrap;
+      gap: calc(var(--base) * 0.5);
+      row-gap: 0;
+
+      background: color-mix(in oklab, var(--theme-elevation-50) 55%, transparent);
+      border-radius: 0 0 $style-radius-s $style-radius-s;
+      backdrop-filter: saturate(1.2) blur(8px);
+    }
+
+    html[data-theme='light'] & {
+      &__metaOverlay {
+        background: color-mix(in oklab, var(--theme-elevation-800) 55%, transparent);
+        color: var(--theme-elevation-50);
+      }
+
+      &__collectionLabel {
+        color: var(--theme-elevation-300);
+      }
+    }
+
+    &__filename {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    &__collectionLabel {
+      color: var(--theme-elevation-500);
+      font-size: 0.9em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    @include small-break {
+      img,
+      svg {
+        // Allow images to shrink < 450px on small screens to
+        // maintain aspect ratio
+        min-width: unset;
+        min-height: unset;
+      }
+
+      &__metaOverlay {
+        gap: 0;
+        padding: calc(var(--base) * 0.5) calc(var(--base) * 0.6);
+        flex-direction: column;
+
+        button {
+          display: flex;
+          justify-content: flex-start;
+        }
+      }
+
+      &__collectionLabel {
+        max-width: 100%;
+      }
+    }
+  }
+}

package/dist/features/upload/client/component/pending/index.js

@@ -1,14 +1,23 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { ShimmerEffect } from '@payloadcms/ui';
+import '../index.scss';
 export const PendingUploadComponent = ()=>{
-    return /*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         className: 'lexical-upload',
-        children: /*#__PURE__*/ _jsx(ShimmerEffect, {
+        children: /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
             height: '95px',
             width: '203px'
-        })
-    });
+        }, void 0, false, {
+            fileName: "src/features/upload/client/component/pending/index.tsx",
+            lineNumber: 10,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/features/upload/client/component/pending/index.tsx",
+        lineNumber: 9,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

package/dist/features/upload/client/component/pending/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/features/upload/client/component/pending/index.tsx"],"sourcesContent":["'use client'\n\nimport { ShimmerEffect } from '@payloadcms/ui'\n\nimport '../index.scss'\n\nexport const PendingUploadComponent = (): React.ReactNode => {\n  return (\n    <div className={'lexical-upload'}>\n      <ShimmerEffect height={'95px'} width={'203px'} />\n    </div>\n  )\n}\n"],"names":["ShimmerEffect","PendingUploadComponent","div","className","height","width"],"mappings":"AAAA;;AAEA,SAASA,aAAa,QAAQ,iBAAgB;AAI9C,OAAO,MAAMC,yBAAyB;IACpC,qBACE,KAACC;QAAIC,WAAW;kBACd,cAAA,KAACH;YAAcI,QAAQ;YAAQC,OAAO;;;AAG5C,EAAC"}
+{"version":3,"sources":["../../../../../../src/features/upload/client/component/pending/index.tsx"],"sourcesContent":["'use client'\n\nimport { ShimmerEffect } from '@payloadcms/ui'\n\nimport '../index.scss'\n\nexport const PendingUploadComponent = (): React.ReactNode => {\n  return (\n    <div className={'lexical-upload'}>\n      <ShimmerEffect height={'95px'} width={'203px'} />\n    </div>\n  )\n}\n"],"names":["ShimmerEffect","PendingUploadComponent","div","className","height","width"],"mappings":"AAAA;;AAEA,SAASA,aAAa,QAAQ,iBAAgB;AAE9C,OAAO,gBAAe;AAEtB,OAAO,MAAMC,yBAAyB;IACpC,qBACE,QAACC;QAAIC,WAAW;kBACd,cAAA,QAACH;YAAcI,QAAQ;YAAQC,OAAO;;;;;;;;;;;AAG5C,EAAC"}

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

@@ -1,5 +1,5 @@
 'use client';
-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 { toast } from '@payloadcms/ui';
 import { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical';
@@ -62,9 +62,13 @@ const UploadDrawerComponent = ({ enabledCollectionSlugs })=>{
         closeListDrawer,
         replaceNodeKey
     ]);
-    return /*#__PURE__*/ _jsx(ListDrawer, {
+    return /*#__PURE__*/ _jsxDEV(ListDrawer, {
         onSelect: onSelect
-    });
+    }, void 0, false, {
+        fileName: "src/features/upload/client/drawer/index.tsx",
+        lineNumber: 94,
+        columnNumber: 10
+    }, this);
 };
 const UploadDrawerComponentFallback = ()=>{
     const [editor] = useLexicalComposerContext();
@@ -80,11 +84,19 @@ const UploadDrawerComponentFallback = ()=>{
 };
 export const UploadDrawer = ({ enabledCollectionSlugs })=>{
     if (!enabledCollectionSlugs?.length) {
-        return /*#__PURE__*/ _jsx(UploadDrawerComponentFallback, {});
+        return /*#__PURE__*/ _jsxDEV(UploadDrawerComponentFallback, {}, void 0, false, {
+            fileName: "src/features/upload/client/drawer/index.tsx",
+            lineNumber: 118,
+            columnNumber: 12
+        }, this);
     }
-    return /*#__PURE__*/ _jsx(UploadDrawerComponent, {
+    return /*#__PURE__*/ _jsxDEV(UploadDrawerComponent, {
         enabledCollectionSlugs: enabledCollectionSlugs
-    });
+    }, void 0, false, {
+        fileName: "src/features/upload/client/drawer/index.tsx",
+        lineNumber: 121,
+        columnNumber: 10
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

package/dist/features/upload/client/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/upload/client/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { ListDrawerProps } from '@payloadcms/ui'\nimport type { LexicalEditor } from 'lexical'\nimport type { UploadCollectionSlug } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { toast } from '@payloadcms/ui'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexicalListDrawer.js'\nimport { $createUploadNode } from '../nodes/UploadNode.js'\nimport { INSERT_UPLOAD_COMMAND } from '../plugin/index.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from './commands.js'\n\nconst insertUpload = ({\n  editor,\n  relationTo,\n  replaceNodeKey,\n  value,\n}: {\n  editor: LexicalEditor\n  relationTo: string\n  replaceNodeKey: null | string\n  value: number | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_UPLOAD_COMMAND, {\n      // @ts-expect-error - TODO: fix this\n      fields: null,\n      relationTo,\n      value,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace(\n          $createUploadNode({\n            data: {\n              // @ts-expect-error - TODO: fix this\n              fields: null,\n              relationTo,\n              value,\n            },\n          }),\n        )\n      }\n    })\n  }\n}\n\ntype Props = {\n  enabledCollectionSlugs: UploadCollectionSlug[]\n}\n\nconst UploadDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {\n  const [editor] = useLexicalComposerContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n\n  const { closeListDrawer, ListDrawer, openListDrawer } = useLexicalListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    uploads: true,\n  })\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_UPLOAD_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openListDrawer()\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, openListDrawer])\n\n  const onSelect = useCallback<NonNullable<ListDrawerProps['onSelect']>>(\n    ({ collectionSlug, doc }) => {\n      closeListDrawer()\n      insertUpload({\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\n        value: doc.id,\n      })\n    },\n    [editor, closeListDrawer, replaceNodeKey],\n  )\n\n  return <ListDrawer onSelect={onSelect} />\n}\n\nconst UploadDrawerComponentFallback: React.FC = () => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_UPLOAD_WITH_DRAWER_COMMAND,\n      () => {\n        toast.error('No upload collections enabled')\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor])\n\n  return null\n}\n\nexport const UploadDrawer = ({ enabledCollectionSlugs }: Props): React.ReactNode => {\n  if (!enabledCollectionSlugs?.length) {\n    return <UploadDrawerComponentFallback />\n  }\n\n  return <UploadDrawerComponent enabledCollectionSlugs={enabledCollectionSlugs} />\n}\n"],"names":["useLexicalComposerContext","toast","$getNodeByKey","COMMAND_PRIORITY_EDITOR","React","useCallback","useEffect","useState","useLexicalListDrawer","$createUploadNode","INSERT_UPLOAD_COMMAND","INSERT_UPLOAD_WITH_DRAWER_COMMAND","insertUpload","editor","relationTo","replaceNodeKey","value","dispatchCommand","fields","update","node","replace","data","UploadDrawerComponent","enabledCollectionSlugs","setReplaceNodeKey","closeListDrawer","ListDrawer","openListDrawer","collectionSlugs","uploads","registerCommand","payload","nodeKey","onSelect","collectionSlug","doc","id","UploadDrawerComponentFallback","error","UploadDrawer","length"],"mappings":"AAAA;;AAKA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,KAAK,QAAQ,iBAAgB;AACtC,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,UAAS;AAChE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,oBAAoB,QAAQ,6DAA4D;AACjG,SAASC,iBAAiB,QAAQ,yBAAwB;AAC1D,SAASC,qBAAqB,QAAQ,qBAAoB;AAC1D,SAASC,iCAAiC,QAAQ,gBAAe;AAEjE,MAAMC,eAAe,CAAC,EACpBC,MAAM,EACNC,UAAU,EACVC,cAAc,EACdC,KAAK,EAMN;IACC,IAAI,CAACD,gBAAgB;QACnBF,OAAOI,eAAe,CAACP,uBAAuB;YAC5C,oCAAoC;YACpCQ,QAAQ;YACRJ;YACAE;QACF;IACF,OAAO;QACLH,OAAOM,MAAM,CAAC;YACZ,MAAMC,OAAOlB,cAAca;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CACVZ,kBAAkB;oBAChBa,MAAM;wBACJ,oCAAoC;wBACpCJ,QAAQ;wBACRJ;wBACAE;oBACF;gBACF;YAEJ;QACF;IACF;AACF;AAMA,MAAMO,wBAAyC,CAAC,EAAEC,sBAAsB,EAAE;IACxE,MAAM,CAACX,OAAO,GAAGb;IAEjB,MAAM,CAACe,gBAAgBU,kBAAkB,GAAGlB,SAAwB;IAEpE,MAAM,EAAEmB,eAAe,EAAEC,UAAU,EAAEC,cAAc,EAAE,GAAGpB,qBAAqB;QAC3EqB,iBAAiBL;QACjBM,SAAS;IACX;IAEAxB,UAAU;QACR,OAAOO,OAAOkB,eAAe,CAG3BpB,mCACA,CAACqB;YACCP,kBAAkBO,SAASX,UAAUW,SAASX,QAAQY,UAAU;YAChEL;YACA,OAAO;QACT,GACAzB;IAEJ,GAAG;QAACU;QAAQe;KAAe;IAE3B,MAAMM,WAAW7B,YACf,CAAC,EAAE8B,cAAc,EAAEC,GAAG,EAAE;QACtBV;QACAd,aAAa;YACXC;YACAC,YAAYqB;YACZpB;YACAC,OAAOoB,IAAIC,EAAE;QACf;IACF,GACA;QAACxB;QAAQa;QAAiBX;KAAe;IAG3C,qBAAO,KAACY;QAAWO,UAAUA;;AAC/B;AAEA,MAAMI,gCAA0C;IAC9C,MAAM,CAACzB,OAAO,GAAGb;IAEjBM,UAAU;QACR,OAAOO,OAAOkB,eAAe,CAG3BpB,mCACA;YACEV,MAAMsC,KAAK,CAAC;YACZ,OAAO;QACT,GACApC;IAEJ,GAAG;QAACU;KAAO;IAEX,OAAO;AACT;AAEA,OAAO,MAAM2B,eAAe,CAAC,EAAEhB,sBAAsB,EAAS;IAC5D,IAAI,CAACA,wBAAwBiB,QAAQ;QACnC,qBAAO,KAACH;IACV;IAEA,qBAAO,KAACf;QAAsBC,wBAAwBA;;AACxD,EAAC"}
+{"version":3,"sources":["../../../../../src/features/upload/client/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { ListDrawerProps } from '@payloadcms/ui'\nimport type { LexicalEditor } from 'lexical'\nimport type { UploadCollectionSlug } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { toast } from '@payloadcms/ui'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexicalListDrawer.js'\nimport { $createUploadNode } from '../nodes/UploadNode.js'\nimport { INSERT_UPLOAD_COMMAND } from '../plugin/index.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from './commands.js'\n\nconst insertUpload = ({\n  editor,\n  relationTo,\n  replaceNodeKey,\n  value,\n}: {\n  editor: LexicalEditor\n  relationTo: string\n  replaceNodeKey: null | string\n  value: number | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_UPLOAD_COMMAND, {\n      // @ts-expect-error - TODO: fix this\n      fields: null,\n      relationTo,\n      value,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace(\n          $createUploadNode({\n            data: {\n              // @ts-expect-error - TODO: fix this\n              fields: null,\n              relationTo,\n              value,\n            },\n          }),\n        )\n      }\n    })\n  }\n}\n\ntype Props = {\n  enabledCollectionSlugs: UploadCollectionSlug[]\n}\n\nconst UploadDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {\n  const [editor] = useLexicalComposerContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n\n  const { closeListDrawer, ListDrawer, openListDrawer } = useLexicalListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    uploads: true,\n  })\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_UPLOAD_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openListDrawer()\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, openListDrawer])\n\n  const onSelect = useCallback<NonNullable<ListDrawerProps['onSelect']>>(\n    ({ collectionSlug, doc }) => {\n      closeListDrawer()\n      insertUpload({\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\n        value: doc.id,\n      })\n    },\n    [editor, closeListDrawer, replaceNodeKey],\n  )\n\n  return <ListDrawer onSelect={onSelect} />\n}\n\nconst UploadDrawerComponentFallback: React.FC = () => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_UPLOAD_WITH_DRAWER_COMMAND,\n      () => {\n        toast.error('No upload collections enabled')\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor])\n\n  return null\n}\n\nexport const UploadDrawer = ({ enabledCollectionSlugs }: Props): React.ReactNode => {\n  if (!enabledCollectionSlugs?.length) {\n    return <UploadDrawerComponentFallback />\n  }\n\n  return <UploadDrawerComponent enabledCollectionSlugs={enabledCollectionSlugs} />\n}\n"],"names":["useLexicalComposerContext","toast","$getNodeByKey","COMMAND_PRIORITY_EDITOR","React","useCallback","useEffect","useState","useLexicalListDrawer","$createUploadNode","INSERT_UPLOAD_COMMAND","INSERT_UPLOAD_WITH_DRAWER_COMMAND","insertUpload","editor","relationTo","replaceNodeKey","value","dispatchCommand","fields","update","node","replace","data","UploadDrawerComponent","enabledCollectionSlugs","setReplaceNodeKey","closeListDrawer","ListDrawer","openListDrawer","collectionSlugs","uploads","registerCommand","payload","nodeKey","onSelect","collectionSlug","doc","id","UploadDrawerComponentFallback","error","UploadDrawer","length"],"mappings":"AAAA;;AAKA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,KAAK,QAAQ,iBAAgB;AACtC,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,UAAS;AAChE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,oBAAoB,QAAQ,6DAA4D;AACjG,SAASC,iBAAiB,QAAQ,yBAAwB;AAC1D,SAASC,qBAAqB,QAAQ,qBAAoB;AAC1D,SAASC,iCAAiC,QAAQ,gBAAe;AAEjE,MAAMC,eAAe,CAAC,EACpBC,MAAM,EACNC,UAAU,EACVC,cAAc,EACdC,KAAK,EAMN;IACC,IAAI,CAACD,gBAAgB;QACnBF,OAAOI,eAAe,CAACP,uBAAuB;YAC5C,oCAAoC;YACpCQ,QAAQ;YACRJ;YACAE;QACF;IACF,OAAO;QACLH,OAAOM,MAAM,CAAC;YACZ,MAAMC,OAAOlB,cAAca;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CACVZ,kBAAkB;oBAChBa,MAAM;wBACJ,oCAAoC;wBACpCJ,QAAQ;wBACRJ;wBACAE;oBACF;gBACF;YAEJ;QACF;IACF;AACF;AAMA,MAAMO,wBAAyC,CAAC,EAAEC,sBAAsB,EAAE;IACxE,MAAM,CAACX,OAAO,GAAGb;IAEjB,MAAM,CAACe,gBAAgBU,kBAAkB,GAAGlB,SAAwB;IAEpE,MAAM,EAAEmB,eAAe,EAAEC,UAAU,EAAEC,cAAc,EAAE,GAAGpB,qBAAqB;QAC3EqB,iBAAiBL;QACjBM,SAAS;IACX;IAEAxB,UAAU;QACR,OAAOO,OAAOkB,eAAe,CAG3BpB,mCACA,CAACqB;YACCP,kBAAkBO,SAASX,UAAUW,SAASX,QAAQY,UAAU;YAChEL;YACA,OAAO;QACT,GACAzB;IAEJ,GAAG;QAACU;QAAQe;KAAe;IAE3B,MAAMM,WAAW7B,YACf,CAAC,EAAE8B,cAAc,EAAEC,GAAG,EAAE;QACtBV;QACAd,aAAa;YACXC;YACAC,YAAYqB;YACZpB;YACAC,OAAOoB,IAAIC,EAAE;QACf;IACF,GACA;QAACxB;QAAQa;QAAiBX;KAAe;IAG3C,qBAAO,QAACY;QAAWO,UAAUA;;;;;;AAC/B;AAEA,MAAMI,gCAA0C;IAC9C,MAAM,CAACzB,OAAO,GAAGb;IAEjBM,UAAU;QACR,OAAOO,OAAOkB,eAAe,CAG3BpB,mCACA;YACEV,MAAMsC,KAAK,CAAC;YACZ,OAAO;QACT,GACApC;IAEJ,GAAG;QAACU;KAAO;IAEX,OAAO;AACT;AAEA,OAAO,MAAM2B,eAAe,CAAC,EAAEhB,sBAAsB,EAAS;IAC5D,IAAI,CAACA,wBAAwBiB,QAAQ;QACnC,qBAAO,QAACH;;;;;IACV;IAEA,qBAAO,QAACf;QAAsBC,wBAAwBA;;;;;;AACxD,EAAC"}

package/dist/features/upload/client/nodes/UploadNode.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import ObjectID from 'bson-objectid';
 import { $applyNodeReplacement } from 'lexical';
 import * as React from 'react';
@@ -47,14 +47,22 @@ export class UploadNode extends UploadServerNode {
     }
     decorate(editor, config) {
         if (this.__data.pending) {
-            return /*#__PURE__*/ _jsx(PendingUploadComponent, {});
+            return /*#__PURE__*/ _jsxDEV(PendingUploadComponent, {}, void 0, false, {
+                fileName: "src/features/upload/client/nodes/UploadNode.tsx",
+                lineNumber: 66,
+                columnNumber: 14
+            }, this);
         }
-        return /*#__PURE__*/ _jsx(RawUploadComponent, {
+        return /*#__PURE__*/ _jsxDEV(RawUploadComponent, {
             className: config?.theme?.upload ?? 'LexicalEditorTheme__upload',
             data: this.__data,
             format: this.__format,
             nodeKey: this.getKey()
-        });
+        }, void 0, false, {
+            fileName: "src/features/upload/client/nodes/UploadNode.tsx",
+            lineNumber: 69,
+            columnNumber: 7
+        }, this);
     }
     exportJSON() {
         return super.exportJSON();

package/dist/features/upload/client/nodes/UploadNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/upload/client/nodes/UploadNode.tsx"],"sourcesContent":["'use client'\nimport type { DOMConversionMap, EditorConfig, LexicalEditor, LexicalNode } from 'lexical'\nimport type { JSX } from 'react'\n\nimport ObjectID from 'bson-objectid'\nimport { $applyNodeReplacement } from 'lexical'\nimport * as React from 'react'\n\nimport type {\n  Internal_UploadData,\n  SerializedUploadNode,\n  UploadData,\n} from '../../server/nodes/UploadNode.js'\n\nimport { $convertUploadElement } from '../../server/nodes/conversions.js'\nimport { UploadServerNode } from '../../server/nodes/UploadNode.js'\nimport { PendingUploadComponent } from '../component/pending/index.js'\n\nconst RawUploadComponent = React.lazy(() =>\n  import('../../client/component/index.js').then((module) => ({ default: module.UploadComponent })),\n)\n\nexport class UploadNode extends UploadServerNode {\n  static override clone(node: UploadServerNode): UploadServerNode {\n    return super.clone(node)\n  }\n\n  static override getType(): string {\n    return super.getType()\n  }\n\n  static override importDOM(): DOMConversionMap<HTMLImageElement> {\n    return {\n      img: (node) => ({\n        conversion: (domNode) => $convertUploadElement(domNode, $createUploadNode),\n        priority: 0,\n      }),\n    }\n  }\n\n  static override importJSON(serializedNode: SerializedUploadNode): UploadNode {\n    if (serializedNode.version === 1 && (serializedNode?.value as unknown as { id: string })?.id) {\n      serializedNode.value = (serializedNode.value as unknown as { id: string }).id\n    }\n    if (serializedNode.version === 2 && !serializedNode?.id) {\n      serializedNode.id = new ObjectID.default().toHexString()\n      serializedNode.version = 3\n    }\n\n    const importedData: Internal_UploadData = {\n      id: serializedNode.id,\n      fields: serializedNode.fields,\n      pending: (serializedNode as Internal_UploadData).pending,\n      relationTo: serializedNode.relationTo,\n      value: serializedNode.value,\n    }\n\n    const node = $createUploadNode({ data: importedData })\n    node.setFormat(serializedNode.format)\n\n    return node\n  }\n\n  override decorate(editor?: LexicalEditor, config?: EditorConfig): JSX.Element {\n    if ((this.__data as Internal_UploadData).pending) {\n      return <PendingUploadComponent />\n    }\n    return (\n      <RawUploadComponent\n        className={config?.theme?.upload ?? 'LexicalEditorTheme__upload'}\n        data={this.__data}\n        format={this.__format}\n        nodeKey={this.getKey()}\n      />\n    )\n  }\n\n  override exportJSON(): SerializedUploadNode {\n    return super.exportJSON()\n  }\n}\n\nexport function $createUploadNode({\n  data,\n}: {\n  data: Omit<UploadData, 'id'> & Partial<Pick<UploadData, 'id'>>\n}): UploadNode {\n  if (!data?.id) {\n    data.id = new ObjectID.default().toHexString()\n  }\n\n  return $applyNodeReplacement(new UploadNode({ data: data as UploadData }))\n}\n\nexport function $isUploadNode(node: LexicalNode | null | undefined): node is UploadNode {\n  return node instanceof UploadNode\n}\n"],"names":["ObjectID","$applyNodeReplacement","React","$convertUploadElement","UploadServerNode","PendingUploadComponent","RawUploadComponent","lazy","then","module","default","UploadComponent","UploadNode","clone","node","getType","importDOM","img","conversion","domNode","$createUploadNode","priority","importJSON","serializedNode","version","value","id","toHexString","importedData","fields","pending","relationTo","data","setFormat","format","decorate","editor","config","__data","className","theme","upload","__format","nodeKey","getKey","exportJSON","$isUploadNode"],"mappings":"AAAA;;AAIA,OAAOA,cAAc,gBAAe;AACpC,SAASC,qBAAqB,QAAQ,UAAS;AAC/C,YAAYC,WAAW,QAAO;AAQ9B,SAASC,qBAAqB,QAAQ,oCAAmC;AACzE,SAASC,gBAAgB,QAAQ,mCAAkC;AACnE,SAASC,sBAAsB,QAAQ,gCAA+B;AAEtE,MAAMC,mCAAqBJ,MAAMK,IAAI,CAAC,IACpC,MAAM,CAAC,mCAAmCC,IAAI,CAAC,CAACC,SAAY,CAAA;YAAEC,SAASD,OAAOE,eAAe;QAAC,CAAA;AAGhG,OAAO,MAAMC,mBAAmBR;IAC9B,OAAgBS,MAAMC,IAAsB,EAAoB;QAC9D,OAAO,KAAK,CAACD,MAAMC;IACrB;IAEA,OAAgBC,UAAkB;QAChC,OAAO,KAAK,CAACA;IACf;IAEA,OAAgBC,YAAgD;QAC9D,OAAO;YACLC,KAAK,CAACH,OAAU,CAAA;oBACdI,YAAY,CAACC,UAAYhB,sBAAsBgB,SAASC;oBACxDC,UAAU;gBACZ,CAAA;QACF;IACF;IAEA,OAAgBC,WAAWC,cAAoC,EAAc;QAC3E,IAAIA,eAAeC,OAAO,KAAK,KAAMD,gBAAgBE,OAAqCC,IAAI;YAC5FH,eAAeE,KAAK,GAAG,AAACF,eAAeE,KAAK,CAA+BC,EAAE;QAC/E;QACA,IAAIH,eAAeC,OAAO,KAAK,KAAK,CAACD,gBAAgBG,IAAI;YACvDH,eAAeG,EAAE,GAAG,IAAI1B,SAASU,OAAO,GAAGiB,WAAW;YACtDJ,eAAeC,OAAO,GAAG;QAC3B;QAEA,MAAMI,eAAoC;YACxCF,IAAIH,eAAeG,EAAE;YACrBG,QAAQN,eAAeM,MAAM;YAC7BC,SAAS,AAACP,eAAuCO,OAAO;YACxDC,YAAYR,eAAeQ,UAAU;YACrCN,OAAOF,eAAeE,KAAK;QAC7B;QAEA,MAAMX,OAAOM,kBAAkB;YAAEY,MAAMJ;QAAa;QACpDd,KAAKmB,SAAS,CAACV,eAAeW,MAAM;QAEpC,OAAOpB;IACT;IAESqB,SAASC,MAAsB,EAAEC,MAAqB,EAAe;QAC5E,IAAI,AAAC,IAAI,CAACC,MAAM,CAAyBR,OAAO,EAAE;YAChD,qBAAO,KAACzB;QACV;QACA,qBACE,KAACC;YACCiC,WAAWF,QAAQG,OAAOC,UAAU;YACpCT,MAAM,IAAI,CAACM,MAAM;YACjBJ,QAAQ,IAAI,CAACQ,QAAQ;YACrBC,SAAS,IAAI,CAACC,MAAM;;IAG1B;IAESC,aAAmC;QAC1C,OAAO,KAAK,CAACA;IACf;AACF;AAEA,OAAO,SAASzB,kBAAkB,EAChCY,IAAI,EAGL;IACC,IAAI,CAACA,MAAMN,IAAI;QACbM,KAAKN,EAAE,GAAG,IAAI1B,SAASU,OAAO,GAAGiB,WAAW;IAC9C;IAEA,OAAO1B,sBAAsB,IAAIW,WAAW;QAAEoB,MAAMA;IAAmB;AACzE;AAEA,OAAO,SAASc,cAAchC,IAAoC;IAChE,OAAOA,gBAAgBF;AACzB"}
+{"version":3,"sources":["../../../../../src/features/upload/client/nodes/UploadNode.tsx"],"sourcesContent":["'use client'\nimport type { DOMConversionMap, EditorConfig, LexicalEditor, LexicalNode } from 'lexical'\nimport type { JSX } from 'react'\n\nimport ObjectID from 'bson-objectid'\nimport { $applyNodeReplacement } from 'lexical'\nimport * as React from 'react'\n\nimport type {\n  Internal_UploadData,\n  SerializedUploadNode,\n  UploadData,\n} from '../../server/nodes/UploadNode.js'\n\nimport { $convertUploadElement } from '../../server/nodes/conversions.js'\nimport { UploadServerNode } from '../../server/nodes/UploadNode.js'\nimport { PendingUploadComponent } from '../component/pending/index.js'\n\nconst RawUploadComponent = React.lazy(() =>\n  import('../../client/component/index.js').then((module) => ({ default: module.UploadComponent })),\n)\n\nexport class UploadNode extends UploadServerNode {\n  static override clone(node: UploadServerNode): UploadServerNode {\n    return super.clone(node)\n  }\n\n  static override getType(): string {\n    return super.getType()\n  }\n\n  static override importDOM(): DOMConversionMap<HTMLImageElement> {\n    return {\n      img: (node) => ({\n        conversion: (domNode) => $convertUploadElement(domNode, $createUploadNode),\n        priority: 0,\n      }),\n    }\n  }\n\n  static override importJSON(serializedNode: SerializedUploadNode): UploadNode {\n    if (serializedNode.version === 1 && (serializedNode?.value as unknown as { id: string })?.id) {\n      serializedNode.value = (serializedNode.value as unknown as { id: string }).id\n    }\n    if (serializedNode.version === 2 && !serializedNode?.id) {\n      serializedNode.id = new ObjectID.default().toHexString()\n      serializedNode.version = 3\n    }\n\n    const importedData: Internal_UploadData = {\n      id: serializedNode.id,\n      fields: serializedNode.fields,\n      pending: (serializedNode as Internal_UploadData).pending,\n      relationTo: serializedNode.relationTo,\n      value: serializedNode.value,\n    }\n\n    const node = $createUploadNode({ data: importedData })\n    node.setFormat(serializedNode.format)\n\n    return node\n  }\n\n  override decorate(editor?: LexicalEditor, config?: EditorConfig): JSX.Element {\n    if ((this.__data as Internal_UploadData).pending) {\n      return <PendingUploadComponent />\n    }\n    return (\n      <RawUploadComponent\n        className={config?.theme?.upload ?? 'LexicalEditorTheme__upload'}\n        data={this.__data}\n        format={this.__format}\n        nodeKey={this.getKey()}\n      />\n    )\n  }\n\n  override exportJSON(): SerializedUploadNode {\n    return super.exportJSON()\n  }\n}\n\nexport function $createUploadNode({\n  data,\n}: {\n  data: Omit<UploadData, 'id'> & Partial<Pick<UploadData, 'id'>>\n}): UploadNode {\n  if (!data?.id) {\n    data.id = new ObjectID.default().toHexString()\n  }\n\n  return $applyNodeReplacement(new UploadNode({ data: data as UploadData }))\n}\n\nexport function $isUploadNode(node: LexicalNode | null | undefined): node is UploadNode {\n  return node instanceof UploadNode\n}\n"],"names":["ObjectID","$applyNodeReplacement","React","$convertUploadElement","UploadServerNode","PendingUploadComponent","RawUploadComponent","lazy","then","module","default","UploadComponent","UploadNode","clone","node","getType","importDOM","img","conversion","domNode","$createUploadNode","priority","importJSON","serializedNode","version","value","id","toHexString","importedData","fields","pending","relationTo","data","setFormat","format","decorate","editor","config","__data","className","theme","upload","__format","nodeKey","getKey","exportJSON","$isUploadNode"],"mappings":"AAAA;;AAIA,OAAOA,cAAc,gBAAe;AACpC,SAASC,qBAAqB,QAAQ,UAAS;AAC/C,YAAYC,WAAW,QAAO;AAQ9B,SAASC,qBAAqB,QAAQ,oCAAmC;AACzE,SAASC,gBAAgB,QAAQ,mCAAkC;AACnE,SAASC,sBAAsB,QAAQ,gCAA+B;AAEtE,MAAMC,mCAAqBJ,MAAMK,IAAI,CAAC,IACpC,MAAM,CAAC,mCAAmCC,IAAI,CAAC,CAACC,SAAY,CAAA;YAAEC,SAASD,OAAOE,eAAe;QAAC,CAAA;AAGhG,OAAO,MAAMC,mBAAmBR;IAC9B,OAAgBS,MAAMC,IAAsB,EAAoB;QAC9D,OAAO,KAAK,CAACD,MAAMC;IACrB;IAEA,OAAgBC,UAAkB;QAChC,OAAO,KAAK,CAACA;IACf;IAEA,OAAgBC,YAAgD;QAC9D,OAAO;YACLC,KAAK,CAACH,OAAU,CAAA;oBACdI,YAAY,CAACC,UAAYhB,sBAAsBgB,SAASC;oBACxDC,UAAU;gBACZ,CAAA;QACF;IACF;IAEA,OAAgBC,WAAWC,cAAoC,EAAc;QAC3E,IAAIA,eAAeC,OAAO,KAAK,KAAMD,gBAAgBE,OAAqCC,IAAI;YAC5FH,eAAeE,KAAK,GAAG,AAACF,eAAeE,KAAK,CAA+BC,EAAE;QAC/E;QACA,IAAIH,eAAeC,OAAO,KAAK,KAAK,CAACD,gBAAgBG,IAAI;YACvDH,eAAeG,EAAE,GAAG,IAAI1B,SAASU,OAAO,GAAGiB,WAAW;YACtDJ,eAAeC,OAAO,GAAG;QAC3B;QAEA,MAAMI,eAAoC;YACxCF,IAAIH,eAAeG,EAAE;YACrBG,QAAQN,eAAeM,MAAM;YAC7BC,SAAS,AAACP,eAAuCO,OAAO;YACxDC,YAAYR,eAAeQ,UAAU;YACrCN,OAAOF,eAAeE,KAAK;QAC7B;QAEA,MAAMX,OAAOM,kBAAkB;YAAEY,MAAMJ;QAAa;QACpDd,KAAKmB,SAAS,CAACV,eAAeW,MAAM;QAEpC,OAAOpB;IACT;IAESqB,SAASC,MAAsB,EAAEC,MAAqB,EAAe;QAC5E,IAAI,AAAC,IAAI,CAACC,MAAM,CAAyBR,OAAO,EAAE;YAChD,qBAAO,QAACzB;;;;;QACV;QACA,qBACE,QAACC;YACCiC,WAAWF,QAAQG,OAAOC,UAAU;YACpCT,MAAM,IAAI,CAACM,MAAM;YACjBJ,QAAQ,IAAI,CAACQ,QAAQ;YACrBC,SAAS,IAAI,CAACC,MAAM;;;;;;IAG1B;IAESC,aAAmC;QAC1C,OAAO,KAAK,CAACA;IACf;AACF;AAEA,OAAO,SAASzB,kBAAkB,EAChCY,IAAI,EAGL;IACC,IAAI,CAACA,MAAMN,IAAI;QACbM,KAAKN,EAAE,GAAG,IAAI1B,SAASU,OAAO,GAAGiB,WAAW;IAC9C;IAEA,OAAO1B,sBAAsB,IAAIW,WAAW;QAAEoB,MAAMA;IAAmB;AACzE;AAEA,OAAO,SAASc,cAAchC,IAAoC;IAChE,OAAOA,gBAAgBF;AACzB"}

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

@@ -1,5 +1,5 @@
 'use client';
-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';
@@ -308,9 +308,13 @@ export const INSERT_UPLOAD_COMMAND = createCommand('INSERT_UPLOAD_COMMAND');
     }, [
         editor
     ]);
-    return /*#__PURE__*/ _jsx(UploadDrawer, {
+    return /*#__PURE__*/ _jsxDEV(UploadDrawer, {
         enabledCollectionSlugs: enabledCollectionSlugs
-    });
+    }, void 0, false, {
+        fileName: "src/features/upload/client/plugin/index.tsx",
+        lineNumber: 401,
+        columnNumber: 10
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/upload/client/plugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalCommand } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $dfsIterator, $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'\nimport { useBulkUpload, useEffectEvent, useModal } from '@payloadcms/ui'\nimport ObjectID from 'bson-objectid'\nimport {\n  $createRangeSelection,\n  $getPreviousSelection,\n  $getSelection,\n  $isParagraphNode,\n  $isRangeSelection,\n  $setSelection,\n  COMMAND_PRIORITY_EDITOR,\n  COMMAND_PRIORITY_LOW,\n  createCommand,\n  DROP_COMMAND,\n  getDOMSelectionFromTarget,\n  isHTMLElement,\n  PASTE_COMMAND,\n} from 'lexical'\nimport React, { useEffect } from 'react'\n\nimport type { PluginComponent } from '../../../typesClient.js'\nimport type { Internal_UploadData, UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../index.js'\n\nimport { useEnabledRelationships } from '../../../relationship/client/utils/useEnabledRelationships.js'\nimport { UploadDrawer } from '../drawer/index.js'\nimport { $createUploadNode, $isUploadNode, UploadNode } from '../nodes/UploadNode.js'\n\nexport type InsertUploadPayload = Readonly<Omit<UploadData, 'id'> & Partial<Pick<UploadData, 'id'>>>\n\ndeclare global {\n  interface DragEvent {\n    rangeOffset?: number\n    rangeParent?: Node\n  }\n}\n\nfunction canDropImage(event: DragEvent): boolean {\n  const target = event.target\n  return !!(\n    isHTMLElement(target) &&\n    !target.closest('code, span.editor-image') &&\n    isHTMLElement(target.parentElement) &&\n    target.parentElement.closest('div.ContentEditable__root')\n  )\n}\n\nfunction getDragSelection(event: DragEvent): null | Range | undefined {\n  // Source: https://github.com/AlessioGr/lexical/blob/main/packages/lexical-playground/src/plugins/ImagesPlugin/index.tsx\n  let range\n  const domSelection = getDOMSelectionFromTarget(event.target)\n  if (document.caretRangeFromPoint) {\n    range = document.caretRangeFromPoint(event.clientX, event.clientY)\n  } else if (event.rangeParent && domSelection !== null) {\n    domSelection.collapse(event.rangeParent, event.rangeOffset || 0)\n    range = domSelection.getRangeAt(0)\n  } else {\n    throw Error(`Cannot get the selection when dragging`)\n  }\n\n  return range\n}\n\nexport const INSERT_UPLOAD_COMMAND: LexicalCommand<InsertUploadPayload> =\n  createCommand('INSERT_UPLOAD_COMMAND')\n\ntype FileToUpload = {\n  alt?: string\n  file: File\n  /**\n   * Bulk Upload Form ID that should be created, which can then be matched\n   * against the node formID if the upload is successful\n   */\n  formID: string\n}\n\nexport const UploadPlugin: PluginComponent<UploadFeaturePropsClient> = ({ clientProps }) => {\n  const [editor] = useLexicalComposerContext()\n\n  const { enabledCollectionSlugs } = useEnabledRelationships({\n    collectionSlugsBlacklist: clientProps?.disabledCollections,\n    collectionSlugsWhitelist: clientProps?.enabledCollections,\n    uploads: true,\n  })\n\n  const {\n    drawerSlug: bulkUploadDrawerSlug,\n    setCollectionSlug,\n    setInitialForms,\n    setOnCancel,\n    setOnSuccess,\n    setSelectableCollections,\n  } = useBulkUpload()\n\n  const { isModalOpen, openModal } = useModal()\n\n  const openBulkUpload = useEffectEvent(({ files }: { files: FileToUpload[] }) => {\n    if (files?.length === 0) {\n      return\n    }\n\n    setInitialForms((initialForms) => [\n      ...(initialForms ?? []),\n      ...files.map((file) => ({\n        file: file.file,\n        formID: file.formID,\n      })),\n    ])\n\n    if (!isModalOpen(bulkUploadDrawerSlug)) {\n      if (!enabledCollectionSlugs.length || !enabledCollectionSlugs[0]) {\n        return\n      }\n\n      setCollectionSlug(enabledCollectionSlugs[0])\n      setSelectableCollections(enabledCollectionSlugs)\n\n      setOnCancel(() => {\n        // Remove all the pending upload nodes that were added but not uploaded\n        editor.update(() => {\n          for (const dfsNode of $dfsIterator()) {\n            const node = dfsNode.node\n\n            if ($isUploadNode(node)) {\n              const nodeData = node.getData()\n              if ((nodeData as Internal_UploadData)?.pending) {\n                node.remove()\n              }\n            }\n          }\n        })\n      })\n\n      setOnSuccess((newDocs) => {\n        const newDocsMap = new Map(newDocs.map((doc) => [doc.formID, doc]))\n        editor.update(() => {\n          for (const dfsNode of $dfsIterator()) {\n            const node = dfsNode.node\n            if ($isUploadNode(node)) {\n              const nodeData: Internal_UploadData = node.getData()\n\n              if (nodeData?.pending) {\n                const newDoc = newDocsMap.get(nodeData.pending?.formID)\n                if (newDoc) {\n                  node.replace(\n                    $createUploadNode({\n                      data: {\n                        id: new ObjectID.default().toHexString(),\n                        fields: {},\n                        relationTo: newDoc.collectionSlug,\n                        value: newDoc.doc.id,\n                      } as UploadData,\n                    }),\n                  )\n                }\n              }\n            }\n          }\n        })\n      })\n\n      openModal(bulkUploadDrawerSlug)\n    }\n  })\n\n  useEffect(() => {\n    if (!editor.hasNodes([UploadNode])) {\n      throw new Error('UploadPlugin: UploadNode not registered on editor')\n    }\n\n    return mergeRegister(\n      /**\n       * Handle auto-uploading files if you copy & paste an image dom element from the clipboard\n       */\n      editor.registerNodeTransform(UploadNode, (node) => {\n        const nodeData: Internal_UploadData = node.getData()\n        if (!nodeData?.pending) {\n          return\n        }\n\n        async function upload() {\n          let transformedImage: FileToUpload | null = null\n\n          const src = nodeData?.pending?.src\n          const formID = nodeData?.pending?.formID as string\n\n          if (src?.startsWith('data:')) {\n            // It's a base64-encoded image\n            const mimeMatch = src.match(/data:(image\\/[a-zA-Z]+);base64,/)\n            const mimeType = mimeMatch ? mimeMatch[1] : 'image/png' // Default to PNG if MIME type not found\n            const base64Data = src.replace(/^data:image\\/[a-zA-Z]+;base64,/, '')\n            const byteCharacters = atob(base64Data)\n            const byteNumbers = new Array(byteCharacters.length)\n            for (let i = 0; i < byteCharacters.length; i++) {\n              byteNumbers[i] = byteCharacters.charCodeAt(i)\n            }\n            const byteArray = new Uint8Array(byteNumbers)\n            const file = new File([byteArray], 'pasted-image.' + mimeType?.split('/', 2)[1], {\n              type: mimeType,\n            })\n            transformedImage = { alt: undefined, file, formID }\n          } else if (src?.startsWith('http') || src?.startsWith('https')) {\n            // It's an image URL\n            const res = await fetch(src)\n            const blob = await res.blob()\n            const inferredFileName =\n              src.split('/').pop() || 'pasted-image' + blob.type.split('/', 2)[1]\n            const file = new File([blob], inferredFileName, {\n              type: blob.type,\n            })\n\n            transformedImage = { alt: undefined, file, formID }\n          }\n\n          if (!transformedImage) {\n            return\n          }\n\n          openBulkUpload({ files: [transformedImage] })\n        }\n        void upload()\n      }),\n      editor.registerCommand<InsertUploadPayload>(\n        INSERT_UPLOAD_COMMAND,\n        (payload: InsertUploadPayload) => {\n          editor.update(() => {\n            const selection = $getSelection() || $getPreviousSelection()\n\n            if ($isRangeSelection(selection)) {\n              const uploadNode = $createUploadNode({\n                data: {\n                  id: payload.id,\n                  fields: payload.fields,\n                  relationTo: payload.relationTo,\n                  value: payload.value,\n                },\n              })\n              // we need to get the focus node before inserting the block node, as $insertNodeToNearestRoot can change the focus node\n              const { focus } = selection\n              const focusNode = focus.getNode()\n              // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist\n              $insertNodeToNearestRoot(uploadNode)\n\n              // Delete the node it it's an empty paragraph\n              if ($isParagraphNode(focusNode) && !focusNode.__first) {\n                focusNode.remove()\n              }\n            }\n          })\n\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n      editor.registerCommand(\n        PASTE_COMMAND,\n        (event) => {\n          // Pending UploadNodes are automatically created when importDOM is called. However, if you paste a file from your computer\n          // directly, importDOM won't be called, as it's not a HTML dom element. So we need to handle that case here.\n\n          if (!(event instanceof ClipboardEvent)) {\n            return false\n          }\n          const clipboardData = event.clipboardData\n\n          if (!clipboardData?.types?.length || clipboardData?.types?.includes('text/html')) {\n            // HTML is handled through importDOM => registerNodeTransform for pending UploadNode\n            return false\n          }\n\n          const files: FileToUpload[] = []\n          if (clipboardData?.files?.length) {\n            Array.from(clipboardData.files).forEach((file) => {\n              files.push({\n                alt: '',\n                file,\n                formID: new ObjectID.default().toHexString(),\n              })\n            })\n          }\n\n          if (files.length) {\n            // Insert a pending UploadNode for each image\n            editor.update(() => {\n              const selection = $getSelection() || $getPreviousSelection()\n\n              if ($isRangeSelection(selection)) {\n                for (const file of files) {\n                  const pendingUploadNode = $createUploadNode({\n                    data: {\n                      pending: {\n                        formID: file.formID,\n                        src: URL.createObjectURL(file.file),\n                      },\n                    } as Internal_UploadData,\n                  })\n                  // we need to get the focus node before inserting the upload node, as $insertNodeToNearestRoot can change the focus node\n                  const { focus } = selection\n                  const focusNode = focus.getNode()\n                  // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist\n                  $insertNodeToNearestRoot(pendingUploadNode)\n\n                  // Delete the node it it's an empty paragraph\n                  if ($isParagraphNode(focusNode) && !focusNode.__first) {\n                    focusNode.remove()\n                  }\n                }\n              }\n            })\n\n            // Open the bulk drawer - the node transform will not open it for us, as it does not handle blob/file uploads\n            openBulkUpload({ files })\n\n            return true\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      // Handle drag & drop of files from the desktop into the editor\n      editor.registerCommand(\n        DROP_COMMAND,\n        (event) => {\n          if (!(event instanceof DragEvent)) {\n            return false\n          }\n\n          const dt = event.dataTransfer\n\n          if (!dt?.types?.length) {\n            return false\n          }\n\n          const files: FileToUpload[] = []\n          if (dt?.files?.length) {\n            Array.from(dt.files).forEach((file) => {\n              files.push({\n                alt: '',\n                file,\n                formID: new ObjectID.default().toHexString(),\n              })\n            })\n          }\n\n          if (files.length) {\n            // Prevent the default browser drop handling, which would open the file in the browser\n            event.preventDefault()\n            event.stopPropagation()\n\n            // Insert a PendingUploadNode for each image\n            editor.update(() => {\n              if (canDropImage(event)) {\n                const range = getDragSelection(event)\n                const selection = $createRangeSelection()\n                if (range !== null && range !== undefined) {\n                  selection.applyDOMRange(range)\n                }\n                $setSelection(selection)\n\n                for (const file of files) {\n                  const pendingUploadNode = $createUploadNode({\n                    data: {\n                      pending: {\n                        formID: file.formID,\n                        src: URL.createObjectURL(file.file),\n                      },\n                    } as Internal_UploadData,\n                  })\n                  // we need to get the focus node before inserting the upload node, as $insertNodeToNearestRoot can change the focus node\n                  const { focus } = selection\n                  const focusNode = focus.getNode()\n                  // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist\n                  $insertNodeToNearestRoot(pendingUploadNode)\n\n                  // Delete the node it it's an empty paragraph\n                  if ($isParagraphNode(focusNode) && !focusNode.__first) {\n                    focusNode.remove()\n                  }\n                }\n              }\n            })\n\n            // Open the bulk drawer - the node transform will not open it for us, as it does not handle blob/file uploads\n            openBulkUpload({ files })\n\n            return true\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor])\n\n  return <UploadDrawer enabledCollectionSlugs={enabledCollectionSlugs} />\n}\n"],"names":["useLexicalComposerContext","$dfsIterator","$insertNodeToNearestRoot","mergeRegister","useBulkUpload","useEffectEvent","useModal","ObjectID","$createRangeSelection","$getPreviousSelection","$getSelection","$isParagraphNode","$isRangeSelection","$setSelection","COMMAND_PRIORITY_EDITOR","COMMAND_PRIORITY_LOW","createCommand","DROP_COMMAND","getDOMSelectionFromTarget","isHTMLElement","PASTE_COMMAND","React","useEffect","useEnabledRelationships","UploadDrawer","$createUploadNode","$isUploadNode","UploadNode","canDropImage","event","target","closest","parentElement","getDragSelection","range","domSelection","document","caretRangeFromPoint","clientX","clientY","rangeParent","collapse","rangeOffset","getRangeAt","Error","INSERT_UPLOAD_COMMAND","UploadPlugin","clientProps","editor","enabledCollectionSlugs","collectionSlugsBlacklist","disabledCollections","collectionSlugsWhitelist","enabledCollections","uploads","drawerSlug","bulkUploadDrawerSlug","setCollectionSlug","setInitialForms","setOnCancel","setOnSuccess","setSelectableCollections","isModalOpen","openModal","openBulkUpload","files","length","initialForms","map","file","formID","update","dfsNode","node","nodeData","getData","pending","remove","newDocs","newDocsMap","Map","doc","newDoc","get","replace","data","id","default","toHexString","fields","relationTo","collectionSlug","value","hasNodes","registerNodeTransform","upload","transformedImage","src","startsWith","mimeMatch","match","mimeType","base64Data","byteCharacters","atob","byteNumbers","Array","i","charCodeAt","byteArray","Uint8Array","File","split","type","alt","undefined","res","fetch","blob","inferredFileName","pop","registerCommand","payload","selection","uploadNode","focus","focusNode","getNode","__first","ClipboardEvent","clipboardData","types","includes","from","forEach","push","pendingUploadNode","URL","createObjectURL","DragEvent","dt","dataTransfer","preventDefault","stopPropagation","applyDOMRange"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/features/upload/client/plugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalCommand } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $dfsIterator, $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'\nimport { useBulkUpload, useEffectEvent, useModal } from '@payloadcms/ui'\nimport ObjectID from 'bson-objectid'\nimport {\n  $createRangeSelection,\n  $getPreviousSelection,\n  $getSelection,\n  $isParagraphNode,\n  $isRangeSelection,\n  $setSelection,\n  COMMAND_PRIORITY_EDITOR,\n  COMMAND_PRIORITY_LOW,\n  createCommand,\n  DROP_COMMAND,\n  getDOMSelectionFromTarget,\n  isHTMLElement,\n  PASTE_COMMAND,\n} from 'lexical'\nimport React, { useEffect } from 'react'\n\nimport type { PluginComponent } from '../../../typesClient.js'\nimport type { Internal_UploadData, UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../index.js'\n\nimport { useEnabledRelationships } from '../../../relationship/client/utils/useEnabledRelationships.js'\nimport { UploadDrawer } from '../drawer/index.js'\nimport { $createUploadNode, $isUploadNode, UploadNode } from '../nodes/UploadNode.js'\n\nexport type InsertUploadPayload = Readonly<Omit<UploadData, 'id'> & Partial<Pick<UploadData, 'id'>>>\n\ndeclare global {\n  interface DragEvent {\n    rangeOffset?: number\n    rangeParent?: Node\n  }\n}\n\nfunction canDropImage(event: DragEvent): boolean {\n  const target = event.target\n  return !!(\n    isHTMLElement(target) &&\n    !target.closest('code, span.editor-image') &&\n    isHTMLElement(target.parentElement) &&\n    target.parentElement.closest('div.ContentEditable__root')\n  )\n}\n\nfunction getDragSelection(event: DragEvent): null | Range | undefined {\n  // Source: https://github.com/AlessioGr/lexical/blob/main/packages/lexical-playground/src/plugins/ImagesPlugin/index.tsx\n  let range\n  const domSelection = getDOMSelectionFromTarget(event.target)\n  if (document.caretRangeFromPoint) {\n    range = document.caretRangeFromPoint(event.clientX, event.clientY)\n  } else if (event.rangeParent && domSelection !== null) {\n    domSelection.collapse(event.rangeParent, event.rangeOffset || 0)\n    range = domSelection.getRangeAt(0)\n  } else {\n    throw Error(`Cannot get the selection when dragging`)\n  }\n\n  return range\n}\n\nexport const INSERT_UPLOAD_COMMAND: LexicalCommand<InsertUploadPayload> =\n  createCommand('INSERT_UPLOAD_COMMAND')\n\ntype FileToUpload = {\n  alt?: string\n  file: File\n  /**\n   * Bulk Upload Form ID that should be created, which can then be matched\n   * against the node formID if the upload is successful\n   */\n  formID: string\n}\n\nexport const UploadPlugin: PluginComponent<UploadFeaturePropsClient> = ({ clientProps }) => {\n  const [editor] = useLexicalComposerContext()\n\n  const { enabledCollectionSlugs } = useEnabledRelationships({\n    collectionSlugsBlacklist: clientProps?.disabledCollections,\n    collectionSlugsWhitelist: clientProps?.enabledCollections,\n    uploads: true,\n  })\n\n  const {\n    drawerSlug: bulkUploadDrawerSlug,\n    setCollectionSlug,\n    setInitialForms,\n    setOnCancel,\n    setOnSuccess,\n    setSelectableCollections,\n  } = useBulkUpload()\n\n  const { isModalOpen, openModal } = useModal()\n\n  const openBulkUpload = useEffectEvent(({ files }: { files: FileToUpload[] }) => {\n    if (files?.length === 0) {\n      return\n    }\n\n    setInitialForms((initialForms) => [\n      ...(initialForms ?? []),\n      ...files.map((file) => ({\n        file: file.file,\n        formID: file.formID,\n      })),\n    ])\n\n    if (!isModalOpen(bulkUploadDrawerSlug)) {\n      if (!enabledCollectionSlugs.length || !enabledCollectionSlugs[0]) {\n        return\n      }\n\n      setCollectionSlug(enabledCollectionSlugs[0])\n      setSelectableCollections(enabledCollectionSlugs)\n\n      setOnCancel(() => {\n        // Remove all the pending upload nodes that were added but not uploaded\n        editor.update(() => {\n          for (const dfsNode of $dfsIterator()) {\n            const node = dfsNode.node\n\n            if ($isUploadNode(node)) {\n              const nodeData = node.getData()\n              if ((nodeData as Internal_UploadData)?.pending) {\n                node.remove()\n              }\n            }\n          }\n        })\n      })\n\n      setOnSuccess((newDocs) => {\n        const newDocsMap = new Map(newDocs.map((doc) => [doc.formID, doc]))\n        editor.update(() => {\n          for (const dfsNode of $dfsIterator()) {\n            const node = dfsNode.node\n            if ($isUploadNode(node)) {\n              const nodeData: Internal_UploadData = node.getData()\n\n              if (nodeData?.pending) {\n                const newDoc = newDocsMap.get(nodeData.pending?.formID)\n                if (newDoc) {\n                  node.replace(\n                    $createUploadNode({\n                      data: {\n                        id: new ObjectID.default().toHexString(),\n                        fields: {},\n                        relationTo: newDoc.collectionSlug,\n                        value: newDoc.doc.id,\n                      } as UploadData,\n                    }),\n                  )\n                }\n              }\n            }\n          }\n        })\n      })\n\n      openModal(bulkUploadDrawerSlug)\n    }\n  })\n\n  useEffect(() => {\n    if (!editor.hasNodes([UploadNode])) {\n      throw new Error('UploadPlugin: UploadNode not registered on editor')\n    }\n\n    return mergeRegister(\n      /**\n       * Handle auto-uploading files if you copy & paste an image dom element from the clipboard\n       */\n      editor.registerNodeTransform(UploadNode, (node) => {\n        const nodeData: Internal_UploadData = node.getData()\n        if (!nodeData?.pending) {\n          return\n        }\n\n        async function upload() {\n          let transformedImage: FileToUpload | null = null\n\n          const src = nodeData?.pending?.src\n          const formID = nodeData?.pending?.formID as string\n\n          if (src?.startsWith('data:')) {\n            // It's a base64-encoded image\n            const mimeMatch = src.match(/data:(image\\/[a-zA-Z]+);base64,/)\n            const mimeType = mimeMatch ? mimeMatch[1] : 'image/png' // Default to PNG if MIME type not found\n            const base64Data = src.replace(/^data:image\\/[a-zA-Z]+;base64,/, '')\n            const byteCharacters = atob(base64Data)\n            const byteNumbers = new Array(byteCharacters.length)\n            for (let i = 0; i < byteCharacters.length; i++) {\n              byteNumbers[i] = byteCharacters.charCodeAt(i)\n            }\n            const byteArray = new Uint8Array(byteNumbers)\n            const file = new File([byteArray], 'pasted-image.' + mimeType?.split('/', 2)[1], {\n              type: mimeType,\n            })\n            transformedImage = { alt: undefined, file, formID }\n          } else if (src?.startsWith('http') || src?.startsWith('https')) {\n            // It's an image URL\n            const res = await fetch(src)\n            const blob = await res.blob()\n            const inferredFileName =\n              src.split('/').pop() || 'pasted-image' + blob.type.split('/', 2)[1]\n            const file = new File([blob], inferredFileName, {\n              type: blob.type,\n            })\n\n            transformedImage = { alt: undefined, file, formID }\n          }\n\n          if (!transformedImage) {\n            return\n          }\n\n          openBulkUpload({ files: [transformedImage] })\n        }\n        void upload()\n      }),\n      editor.registerCommand<InsertUploadPayload>(\n        INSERT_UPLOAD_COMMAND,\n        (payload: InsertUploadPayload) => {\n          editor.update(() => {\n            const selection = $getSelection() || $getPreviousSelection()\n\n            if ($isRangeSelection(selection)) {\n              const uploadNode = $createUploadNode({\n                data: {\n                  id: payload.id,\n                  fields: payload.fields,\n                  relationTo: payload.relationTo,\n                  value: payload.value,\n                },\n              })\n              // we need to get the focus node before inserting the block node, as $insertNodeToNearestRoot can change the focus node\n              const { focus } = selection\n              const focusNode = focus.getNode()\n              // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist\n              $insertNodeToNearestRoot(uploadNode)\n\n              // Delete the node it it's an empty paragraph\n              if ($isParagraphNode(focusNode) && !focusNode.__first) {\n                focusNode.remove()\n              }\n            }\n          })\n\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n      editor.registerCommand(\n        PASTE_COMMAND,\n        (event) => {\n          // Pending UploadNodes are automatically created when importDOM is called. However, if you paste a file from your computer\n          // directly, importDOM won't be called, as it's not a HTML dom element. So we need to handle that case here.\n\n          if (!(event instanceof ClipboardEvent)) {\n            return false\n          }\n          const clipboardData = event.clipboardData\n\n          if (!clipboardData?.types?.length || clipboardData?.types?.includes('text/html')) {\n            // HTML is handled through importDOM => registerNodeTransform for pending UploadNode\n            return false\n          }\n\n          const files: FileToUpload[] = []\n          if (clipboardData?.files?.length) {\n            Array.from(clipboardData.files).forEach((file) => {\n              files.push({\n                alt: '',\n                file,\n                formID: new ObjectID.default().toHexString(),\n              })\n            })\n          }\n\n          if (files.length) {\n            // Insert a pending UploadNode for each image\n            editor.update(() => {\n              const selection = $getSelection() || $getPreviousSelection()\n\n              if ($isRangeSelection(selection)) {\n                for (const file of files) {\n                  const pendingUploadNode = $createUploadNode({\n                    data: {\n                      pending: {\n                        formID: file.formID,\n                        src: URL.createObjectURL(file.file),\n                      },\n                    } as Internal_UploadData,\n                  })\n                  // we need to get the focus node before inserting the upload node, as $insertNodeToNearestRoot can change the focus node\n                  const { focus } = selection\n                  const focusNode = focus.getNode()\n                  // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist\n                  $insertNodeToNearestRoot(pendingUploadNode)\n\n                  // Delete the node it it's an empty paragraph\n                  if ($isParagraphNode(focusNode) && !focusNode.__first) {\n                    focusNode.remove()\n                  }\n                }\n              }\n            })\n\n            // Open the bulk drawer - the node transform will not open it for us, as it does not handle blob/file uploads\n            openBulkUpload({ files })\n\n            return true\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      // Handle drag & drop of files from the desktop into the editor\n      editor.registerCommand(\n        DROP_COMMAND,\n        (event) => {\n          if (!(event instanceof DragEvent)) {\n            return false\n          }\n\n          const dt = event.dataTransfer\n\n          if (!dt?.types?.length) {\n            return false\n          }\n\n          const files: FileToUpload[] = []\n          if (dt?.files?.length) {\n            Array.from(dt.files).forEach((file) => {\n              files.push({\n                alt: '',\n                file,\n                formID: new ObjectID.default().toHexString(),\n              })\n            })\n          }\n\n          if (files.length) {\n            // Prevent the default browser drop handling, which would open the file in the browser\n            event.preventDefault()\n            event.stopPropagation()\n\n            // Insert a PendingUploadNode for each image\n            editor.update(() => {\n              if (canDropImage(event)) {\n                const range = getDragSelection(event)\n                const selection = $createRangeSelection()\n                if (range !== null && range !== undefined) {\n                  selection.applyDOMRange(range)\n                }\n                $setSelection(selection)\n\n                for (const file of files) {\n                  const pendingUploadNode = $createUploadNode({\n                    data: {\n                      pending: {\n                        formID: file.formID,\n                        src: URL.createObjectURL(file.file),\n                      },\n                    } as Internal_UploadData,\n                  })\n                  // we need to get the focus node before inserting the upload node, as $insertNodeToNearestRoot can change the focus node\n                  const { focus } = selection\n                  const focusNode = focus.getNode()\n                  // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist\n                  $insertNodeToNearestRoot(pendingUploadNode)\n\n                  // Delete the node it it's an empty paragraph\n                  if ($isParagraphNode(focusNode) && !focusNode.__first) {\n                    focusNode.remove()\n                  }\n                }\n              }\n            })\n\n            // Open the bulk drawer - the node transform will not open it for us, as it does not handle blob/file uploads\n            openBulkUpload({ files })\n\n            return true\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor])\n\n  return <UploadDrawer enabledCollectionSlugs={enabledCollectionSlugs} />\n}\n"],"names":["useLexicalComposerContext","$dfsIterator","$insertNodeToNearestRoot","mergeRegister","useBulkUpload","useEffectEvent","useModal","ObjectID","$createRangeSelection","$getPreviousSelection","$getSelection","$isParagraphNode","$isRangeSelection","$setSelection","COMMAND_PRIORITY_EDITOR","COMMAND_PRIORITY_LOW","createCommand","DROP_COMMAND","getDOMSelectionFromTarget","isHTMLElement","PASTE_COMMAND","React","useEffect","useEnabledRelationships","UploadDrawer","$createUploadNode","$isUploadNode","UploadNode","canDropImage","event","target","closest","parentElement","getDragSelection","range","domSelection","document","caretRangeFromPoint","clientX","clientY","rangeParent","collapse","rangeOffset","getRangeAt","Error","INSERT_UPLOAD_COMMAND","UploadPlugin","clientProps","editor","enabledCollectionSlugs","collectionSlugsBlacklist","disabledCollections","collectionSlugsWhitelist","enabledCollections","uploads","drawerSlug","bulkUploadDrawerSlug","setCollectionSlug","setInitialForms","setOnCancel","setOnSuccess","setSelectableCollections","isModalOpen","openModal","openBulkUpload","files","length","initialForms","map","file","formID","update","dfsNode","node","nodeData","getData","pending","remove","newDocs","newDocsMap","Map","doc","newDoc","get","replace","data","id","default","toHexString","fields","relationTo","collectionSlug","value","hasNodes","registerNodeTransform","upload","transformedImage","src","startsWith","mimeMatch","match","mimeType","base64Data","byteCharacters","atob","byteNumbers","Array","i","charCodeAt","byteArray","Uint8Array","File","split","type","alt","undefined","res","fetch","blob","inferredFileName","pop","registerCommand","payload","selection","uploadNode","focus","focusNode","getNode","__first","ClipboardEvent","clipboardData","types","includes","from","forEach","push","pendingUploadNode","URL","createObjectURL","DragEvent","dt","dataTransfer","preventDefault","stopPropagation","applyDOMRange"],"mappings":"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"}