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

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';
-export const PendingUploadComponent = () => {
-  return /*#__PURE__*/_jsx("div", {
-    className: 'lexical-upload',
-    children: /*#__PURE__*/_jsx(ShimmerEffect, {
-      height: '95px',
-      width: '203px'
-    })
-  });
+import '../index.scss';
+export const PendingUploadComponent = ()=>{
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: 'lexical-upload',
+        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,"file":"index.js","names":["ShimmerEffect","PendingUploadComponent","_jsx","className","height","width"],"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"],"mappings":"AAAA;;;AAEA,SAASA,aAAa,QAAQ;AAI9B,OAAO,MAAMC,sBAAA,GAAyBA,CAAA;EACpC,oBACEC,IAAA,CAAC;IAAIC,SAAA,EAAW;cACd,aAAAD,IAAA,CAACF,aAAA;MAAcI,MAAA,EAAQ;MAAQC,KAAA,EAAO;;;AAG5C","ignoreList":[]}
+{"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/commands.js

@@ -1,5 +1,5 @@
 'use client';
-
 import { createCommand } from 'lexical';
 export const INSERT_UPLOAD_WITH_DRAWER_COMMAND = createCommand('INSERT_UPLOAD_WITH_DRAWER_COMMAND');
+
 //# sourceMappingURL=commands.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"commands.js","names":["createCommand","INSERT_UPLOAD_WITH_DRAWER_COMMAND"],"sources":["../../../../../src/features/upload/client/drawer/commands.ts"],"sourcesContent":["'use client'\nimport type { LexicalCommand } from 'lexical'\n\nimport { createCommand } from 'lexical'\n\nexport const INSERT_UPLOAD_WITH_DRAWER_COMMAND: LexicalCommand<{\n  replace: { nodeKey: string } | false\n}> = createCommand('INSERT_UPLOAD_WITH_DRAWER_COMMAND')\n"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ;AAE9B,OAAO,MAAMC,iCAAA,GAERD,aAAA,CAAc","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/upload/client/drawer/commands.ts"],"sourcesContent":["'use client'\nimport type { LexicalCommand } from 'lexical'\n\nimport { createCommand } from 'lexical'\n\nexport const INSERT_UPLOAD_WITH_DRAWER_COMMAND: LexicalCommand<{\n  replace: { nodeKey: string } | false\n}> = createCommand('INSERT_UPLOAD_WITH_DRAWER_COMMAND')\n"],"names":["createCommand","INSERT_UPLOAD_WITH_DRAWER_COMMAND"],"mappings":"AAAA;AAGA,SAASA,aAAa,QAAQ,UAAS;AAEvC,OAAO,MAAMC,oCAERD,cAAc,qCAAoC"}

package/dist/features/upload/client/drawer/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 { toast } from '@payloadcms/ui';
 import { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical';
@@ -10,142 +8,95 @@ import { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexi
 import { $createUploadNode } from '../nodes/UploadNode.js';
 import { INSERT_UPLOAD_COMMAND } from '../plugin/index.js';
 import { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from './commands.js';
-const insertUpload = ({
-  editor,
-  relationTo,
-  replaceNodeKey,
-  value
-}) => {
-  if (!replaceNodeKey) {
-    editor.dispatchCommand(INSERT_UPLOAD_COMMAND, {
-      // @ts-expect-error - TODO: fix this
-      fields: null,
-      relationTo,
-      value
-    });
-  } else {
-    editor.update(() => {
-      const node = $getNodeByKey(replaceNodeKey);
-      if (node) {
-        node.replace($createUploadNode({
-          data: {
+const insertUpload = ({ editor, relationTo, replaceNodeKey, value })=>{
+    if (!replaceNodeKey) {
+        editor.dispatchCommand(INSERT_UPLOAD_COMMAND, {
             // @ts-expect-error - TODO: fix this
             fields: null,
             relationTo,
             value
-          }
-        }));
-      }
-    });
-  }
+        });
+    } else {
+        editor.update(()=>{
+            const node = $getNodeByKey(replaceNodeKey);
+            if (node) {
+                node.replace($createUploadNode({
+                    data: {
+                        // @ts-expect-error - TODO: fix this
+                        fields: null,
+                        relationTo,
+                        value
+                    }
+                }));
+            }
+        });
+    }
 };
-const UploadDrawerComponent = t0 => {
-  const $ = _c(13);
-  const {
-    enabledCollectionSlugs
-  } = t0;
-  const [editor] = useLexicalComposerContext();
-  const [replaceNodeKey, setReplaceNodeKey] = useState(null);
-  let t1;
-  if ($[0] !== enabledCollectionSlugs) {
-    t1 = {
-      collectionSlugs: enabledCollectionSlugs,
-      uploads: true
-    };
-    $[0] = enabledCollectionSlugs;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const {
-    closeListDrawer,
-    ListDrawer,
-    openListDrawer
-  } = useLexicalListDrawer(t1);
-  let t2;
-  let t3;
-  if ($[2] !== editor || $[3] !== openListDrawer) {
-    t2 = () => editor.registerCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, payload => {
-      setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null);
-      openListDrawer();
-      return true;
-    }, COMMAND_PRIORITY_EDITOR);
-    t3 = [editor, openListDrawer];
-    $[2] = editor;
-    $[3] = openListDrawer;
-    $[4] = t2;
-    $[5] = t3;
-  } else {
-    t2 = $[4];
-    t3 = $[5];
-  }
-  useEffect(t2, t3);
-  let t4;
-  if ($[6] !== closeListDrawer || $[7] !== editor || $[8] !== replaceNodeKey) {
-    t4 = t5 => {
-      const {
-        collectionSlug,
-        doc
-      } = t5;
-      closeListDrawer();
-      insertUpload({
-        editor,
-        relationTo: collectionSlug,
-        replaceNodeKey,
-        value: doc.id
-      });
-    };
-    $[6] = closeListDrawer;
-    $[7] = editor;
-    $[8] = replaceNodeKey;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  const onSelect = t4;
-  let t5;
-  if ($[10] !== ListDrawer || $[11] !== onSelect) {
-    t5 = _jsx(ListDrawer, {
-      onSelect
+const UploadDrawerComponent = ({ enabledCollectionSlugs })=>{
+    const [editor] = useLexicalComposerContext();
+    const [replaceNodeKey, setReplaceNodeKey] = useState(null);
+    const { closeListDrawer, ListDrawer, openListDrawer } = useLexicalListDrawer({
+        collectionSlugs: enabledCollectionSlugs,
+        uploads: true
     });
-    $[10] = ListDrawer;
-    $[11] = onSelect;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  return t5;
+    useEffect(()=>{
+        return editor.registerCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, (payload)=>{
+            setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null);
+            openListDrawer();
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [
+        editor,
+        openListDrawer
+    ]);
+    const onSelect = useCallback(({ collectionSlug, doc })=>{
+        closeListDrawer();
+        insertUpload({
+            editor,
+            relationTo: collectionSlug,
+            replaceNodeKey,
+            value: doc.id
+        });
+    }, [
+        editor,
+        closeListDrawer,
+        replaceNodeKey
+    ]);
+    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 $ = _c(3);
-  const [editor] = useLexicalComposerContext();
-  let t0;
-  let t1;
-  if ($[0] !== editor) {
-    t0 = () => editor.registerCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, _temp, COMMAND_PRIORITY_EDITOR);
-    t1 = [editor];
-    $[0] = editor;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  useEffect(t0, t1);
-  return null;
+const UploadDrawerComponentFallback = ()=>{
+    const [editor] = useLexicalComposerContext();
+    useEffect(()=>{
+        return editor.registerCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, ()=>{
+            toast.error('No upload collections enabled');
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [
+        editor
+    ]);
+    return null;
 };
-export const UploadDrawer = ({
-  enabledCollectionSlugs
-}) => {
-  if (!enabledCollectionSlugs?.length) {
-    return /*#__PURE__*/_jsx(UploadDrawerComponentFallback, {});
-  }
-  return /*#__PURE__*/_jsx(UploadDrawerComponent, {
-    enabledCollectionSlugs: enabledCollectionSlugs
-  });
+export const UploadDrawer = ({ enabledCollectionSlugs })=>{
+    if (!enabledCollectionSlugs?.length) {
+        return /*#__PURE__*/ _jsxDEV(UploadDrawerComponentFallback, {}, void 0, false, {
+            fileName: "src/features/upload/client/drawer/index.tsx",
+            lineNumber: 118,
+            columnNumber: 12
+        }, this);
+    }
+    return /*#__PURE__*/ _jsxDEV(UploadDrawerComponent, {
+        enabledCollectionSlugs: enabledCollectionSlugs
+    }, void 0, false, {
+        fileName: "src/features/upload/client/drawer/index.tsx",
+        lineNumber: 121,
+        columnNumber: 10
+    }, this);
 };
-function _temp() {
-  toast.error("No upload collections enabled");
-  return true;
-}
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","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","t0","$","enabledCollectionSlugs","setReplaceNodeKey","t1","collectionSlugs","uploads","closeListDrawer","ListDrawer","openListDrawer","t2","t3","registerCommand","payload","nodeKey","t4","t5","collectionSlug","doc","id","onSelect","_jsx","UploadDrawerComponentFallback","_temp","UploadDrawer","length","error"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAKA,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,KAAK,QAAQ;AACtB,SAASC,aAAa,EAAEC,uBAAuB,QAAQ;AACvD,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAExD,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,iCAAiC,QAAQ;AAElD,MAAMC,YAAA,GAAeA,CAAC;EACpBC,MAAM;EACNC,UAAU;EACVC,cAAc;EACdC;AAAK,CAMN;EACC,IAAI,CAACD,cAAA,EAAgB;IACnBF,MAAA,CAAOI,eAAe,CAACP,qBAAA,EAAuB;MAC5C;MACAQ,MAAA,EAAQ;MACRJ,UAAA;MACAE;IACF;EACF,OAAO;IACLH,MAAA,CAAOM,MAAM,CAAC;MACZ,MAAMC,IAAA,GAAOlB,aAAA,CAAca,cAAA;MAC3B,IAAIK,IAAA,EAAM;QACRA,IAAA,CAAKC,OAAO,CACVZ,iBAAA,CAAkB;UAChBa,IAAA,EAAM;YACJ;YACAJ,MAAA,EAAQ;YACRJ,UAAA;YACAE;UACF;QACF;MAEJ;IACF;EACF;AACF;AAMA,MAAMO,qBAAA,GAAyCC,EAAA;EAAA,MAAAC,CAAA,GAAA1B,EAAA;EAAC;IAAA2B;EAAA,IAAAF,EAA0B;EACxE,OAAAX,MAAA,IAAiBb,yBAAA;EAEjB,OAAAe,cAAA,EAAAY,iBAAA,IAA4CpB,QAAA,KAAwB;EAAA,IAAAqB,EAAA;EAAA,IAAAH,CAAA,QAAAC,sBAAA;IAESE,EAAA;MAAAC,eAAA,EAC1DH,sBAAA;MAAAI,OAAA;IAAA;IAEnBL,CAAA,MAAAC,sBAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAHA;IAAAM,eAAA;IAAAC,UAAA;IAAAC;EAAA,IAAwDzB,oBAAA,CAAqBoB,EAG7E;EAAA,IAAAM,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAZ,MAAA,IAAAY,CAAA,QAAAQ,cAAA;IAEUC,EAAA,GAAAA,CAAA,KACDrB,MAAA,CAAAuB,eAAA,CAAAzB,iCAAA,EAAA0B,OAAA;MAKHV,iBAAA,CAAkBU,OAAA,EAAAhB,OAAA,GAAmBgB,OAAA,EAAAhB,OAAA,CAAAiB,OAAA,OAA2B;MAChEL,cAAA;MAAA;IAAA,GAAA9B,uBAGF;IAEDgC,EAAA,IAACtB,MAAA,EAAQoB,cAAA;IAAeR,CAAA,MAAAZ,MAAA;IAAAY,CAAA,MAAAQ,cAAA;IAAAR,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAD,EAAA,GAAAT,CAAA;IAAAU,EAAA,GAAAV,CAAA;EAAA;EAZ3BnB,SAAA,CAAU4B,EAYV,EAAGC,EAAwB;EAAA,IAAAI,EAAA;EAAA,IAAAd,CAAA,QAAAM,eAAA,IAAAN,CAAA,QAAAZ,MAAA,IAAAY,CAAA,QAAAV,cAAA;IAGzBwB,EAAA,GAAAC,EAAA;MAAC;QAAAC,cAAA;QAAAC;MAAA,IAAAF,EAAuB;MACtBT,eAAA;MACAnB,YAAA;QAAAC,MAAA;QAAAC,UAAA,EAEc2B,cAAA;QAAA1B,cAAA;QAAAC,KAAA,EAEL0B,GAAA,CAAAC;MAAA,CACT;IAAA;IACFlB,CAAA,MAAAM,eAAA;IAAAN,CAAA,MAAAZ,MAAA;IAAAY,CAAA,MAAAV,cAAA;IAAAU,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EATF,MAAAmB,QAAA,GAAiBL,EAU0B;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,SAAAO,UAAA,IAAAP,CAAA,SAAAmB,QAAA;IAGpCJ,EAAA,GAAAK,IAAA,CAACb,UAAA;MAAAY;IAAA,C;;;;;;;SAADJ,E;CACT;AAEA,MAAMM,6BAAA,GAA0CA,CAAA;EAAA,MAAArB,CAAA,GAAA1B,EAAA;EAC9C,OAAAc,MAAA,IAAiBb,yBAAA;EAAA,IAAAwB,EAAA;EAAA,IAAAI,EAAA;EAAA,IAAAH,CAAA,QAAAZ,MAAA;IAEPW,EAAA,GAAAA,CAAA,KACDX,MAAA,CAAAuB,eAAA,CAAAzB,iCAAA,EAAAoC,KAAA,EAAA5C,uBAQL;IAEDyB,EAAA,IAACf,MAAA;IAAOY,CAAA,MAAAZ,MAAA;IAAAY,CAAA,MAAAD,EAAA;IAAAC,CAAA,MAAAG,EAAA;EAAA;IAAAJ,EAAA,GAAAC,CAAA;IAAAG,EAAA,GAAAH,CAAA;EAAA;EAXXnB,SAAA,CAAUkB,EAWV,EAAGI,EAAQ;EAAA;AAAA,CAGb;AAEA,OAAO,MAAMoB,YAAA,GAAeA,CAAC;EAAEtB;AAAsB,CAAS;EAC5D,IAAI,CAACA,sBAAA,EAAwBuB,MAAA,EAAQ;IACnC,oBAAOJ,IAAA,CAACC,6BAAA;EACV;EAEA,oBAAOD,IAAA,CAACtB,qBAAA;IAAsBG,sBAAA,EAAwBA;;AACxD;AAzBgD,SAAAqB,MAAA;EASxC9C,KAAA,CAAAiD,KAAA,CAAY;EAAA;AAAA","ignoreList":[]}
+{"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/index.js

@@ -1,5 +1,4 @@
 'use client';
-
 import { $isNodeSelection } from 'lexical';
 import { UploadIcon } from '../../../lexical/ui/icons/Upload/index.js';
 import { createClientFeature } from '../../../utilities/createClientFeature.js';
@@ -9,56 +8,67 @@ import { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from './drawer/commands.js';
 import { $isUploadNode, UploadNode } from './nodes/UploadNode.js';
 import { UploadPlugin } from './plugin/index.js';
 export const UploadFeatureClient = createClientFeature({
-  nodes: [UploadNode],
-  plugins: [{
-    Component: UploadPlugin,
-    position: 'normal'
-  }],
-  slashMenu: {
-    groups: [slashMenuBasicGroupWithItems([{
-      Icon: UploadIcon,
-      key: 'upload',
-      keywords: ['upload', 'image', 'file', 'img', 'picture', 'photo', 'media'],
-      label: ({
-        i18n
-      }) => {
-        return i18n.t('lexical:upload:label');
-      },
-      onSelect: ({
-        editor
-      }) => {
-        editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {
-          replace: false
-        });
-      }
-    }])]
-  },
-  toolbarFixed: {
-    groups: [toolbarAddDropdownGroupWithItems([{
-      ChildComponent: UploadIcon,
-      isActive: ({
-        selection
-      }) => {
-        if (!$isNodeSelection(selection) || !selection.getNodes().length) {
-          return false;
+    nodes: [
+        UploadNode
+    ],
+    plugins: [
+        {
+            Component: UploadPlugin,
+            position: 'normal'
         }
-        const firstNode = selection.getNodes()[0];
-        return $isUploadNode(firstNode);
-      },
-      key: 'upload',
-      label: ({
-        i18n
-      }) => {
-        return i18n.t('lexical:upload:label');
-      },
-      onSelect: ({
-        editor
-      }) => {
-        editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {
-          replace: false
-        });
-      }
-    }])]
-  }
+    ],
+    slashMenu: {
+        groups: [
+            slashMenuBasicGroupWithItems([
+                {
+                    Icon: UploadIcon,
+                    key: 'upload',
+                    keywords: [
+                        'upload',
+                        'image',
+                        'file',
+                        'img',
+                        'picture',
+                        'photo',
+                        'media'
+                    ],
+                    label: ({ i18n })=>{
+                        return i18n.t('lexical:upload:label');
+                    },
+                    onSelect: ({ editor })=>{
+                        editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {
+                            replace: false
+                        });
+                    }
+                }
+            ])
+        ]
+    },
+    toolbarFixed: {
+        groups: [
+            toolbarAddDropdownGroupWithItems([
+                {
+                    ChildComponent: UploadIcon,
+                    isActive: ({ selection })=>{
+                        if (!$isNodeSelection(selection) || !selection.getNodes().length) {
+                            return false;
+                        }
+                        const firstNode = selection.getNodes()[0];
+                        return $isUploadNode(firstNode);
+                    },
+                    key: 'upload',
+                    label: ({ i18n })=>{
+                        return i18n.t('lexical:upload:label');
+                    },
+                    onSelect: ({ editor })=>{
+                        editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {
+                            replace: false
+                        });
+                    }
+                }
+            ])
+        ]
+    }
 });
+
 //# sourceMappingURL=index.js.map