@payloadcms/richtext-lexical 3.0.0-beta.9 → 3.0.0-canary.0d307b1

package/dist/features/upload/component/ExtraFieldsDrawer/index.js

@@ -0,0 +1,123 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { getTranslation } from '@payloadcms/translations';
+import { Drawer, Form, FormSubmit, RenderFields, useConfig, useDocumentInfo, useFieldProps, useModal, useTranslation } from '@payloadcms/ui';
+import { getFormState } from '@payloadcms/ui/shared';
+import { $getNodeByKey } from 'lexical';
+import { deepCopyObject } from 'payload/shared';
+import React, { useCallback, useEffect, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+/**
+ * This handles the extra fields, e.g. captions or alt text, which are
+ * potentially added to the upload feature.
+ */ export const ExtraFieldsUploadDrawer = (props)=>{
+    const { data: { fields, relationTo, value }, drawerSlug, nodeKey, relatedCollection } = props;
+    const [editor] = useLexicalComposerContext();
+    const { closeModal } = useModal();
+    const { i18n, t } = useTranslation();
+    const { id } = useDocumentInfo();
+    const { schemaPath } = useFieldProps();
+    const config = useConfig();
+    const [initialState, setInitialState] = useState(false);
+    const { field: { richTextComponentMap } } = useEditorConfigContext();
+    const componentMapRenderedFieldsPath = `feature.upload.fields.${relatedCollection.slug}`;
+    const schemaFieldsPath = `${schemaPath}.feature.upload.${relatedCollection.slug}`;
+    const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath) // Field Schema
+    ;
+    useEffect(()=>{
+        const awaitInitialState = async ()=>{
+            const state = await getFormState({
+                apiRoute: config.routes.api,
+                body: {
+                    id,
+                    data: deepCopyObject(fields || {}),
+                    operation: 'update',
+                    schemaPath: schemaFieldsPath
+                },
+                serverURL: config.serverURL
+            }) // Form State
+            ;
+            setInitialState(state);
+        };
+        void awaitInitialState();
+    }, [
+        config.routes.api,
+        config.serverURL,
+        schemaFieldsPath,
+        id,
+        fields
+    ]);
+    const onChange = useCallback(async ({ formState: prevFormState })=>{
+        return await getFormState({
+            apiRoute: config.routes.api,
+            body: {
+                id,
+                formState: prevFormState,
+                operation: 'update',
+                schemaPath: schemaFieldsPath
+            },
+            serverURL: config.serverURL
+        });
+    }, [
+        config.routes.api,
+        config.serverURL,
+        schemaFieldsPath,
+        id
+    ]);
+    const handleUpdateEditData = useCallback((_, data)=>{
+        // Update lexical node (with key nodeKey) with new data
+        editor.update(()=>{
+            const uploadNode = $getNodeByKey(nodeKey);
+            if (uploadNode) {
+                const newData = {
+                    ...uploadNode.getData(),
+                    fields: data
+                };
+                uploadNode.setData(newData);
+            }
+        });
+        closeModal(drawerSlug);
+    }, [
+        closeModal,
+        editor,
+        drawerSlug,
+        nodeKey
+    ]);
+    return /*#__PURE__*/ _jsx(Drawer, {
+        slug: drawerSlug,
+        title: t('general:editLabel', {
+            label: getTranslation(relatedCollection.labels.singular, i18n)
+        }),
+        children: initialState !== false && /*#__PURE__*/ _jsxs(Form, {
+            beforeSubmit: [
+                onChange
+            ],
+            disableValidationOnSubmit: true,
+            // @ts-expect-error TODO: Fix this
+            fields: fieldMap,
+            initialState: initialState,
+            onChange: [
+                onChange
+            ],
+            onSubmit: handleUpdateEditData,
+            uuid: uuid(),
+            children: [
+                /*#__PURE__*/ _jsx(RenderFields, {
+                    fieldMap: Array.isArray(fieldMap) ? fieldMap : [],
+                    forceRender: true,
+                    path: "" // See Blocks feature path for details as for why this is empty
+                    ,
+                    readOnly: false,
+                    schemaPath: schemaFieldsPath
+                }),
+                /*#__PURE__*/ _jsx(FormSubmit, {
+                    children: t('fields:saveChanges')
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/upload/component/ExtraFieldsDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { FormProps } from '@payloadcms/ui'\nimport type { ClientCollectionConfig, FormState } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Drawer,\n  Form,\n  FormSubmit,\n  RenderFields,\n  useConfig,\n  useDocumentInfo,\n  useFieldProps,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { $getNodeByKey } from 'lexical'\nimport { deepCopyObject } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport type { UploadData, UploadNode } from '../../nodes/UploadNode.js'\nimport type { ElementProps } from '../index.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\n\n/**\n * This handles the extra fields, e.g. captions or alt text, which are\n * potentially added to the upload feature.\n */\nexport const ExtraFieldsUploadDrawer: React.FC<\n  ElementProps & {\n    drawerSlug: string\n    relatedCollection: ClientCollectionConfig\n  }\n> = (props) => {\n  const {\n    data: { fields, relationTo, value },\n    drawerSlug,\n    nodeKey,\n    relatedCollection,\n  } = props\n\n  const [editor] = useLexicalComposerContext()\n\n  const { closeModal } = useModal()\n\n  const { i18n, t } = useTranslation()\n  const { id } = useDocumentInfo()\n  const { schemaPath } = useFieldProps()\n  const config = useConfig()\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const componentMapRenderedFieldsPath = `feature.upload.fields.${relatedCollection.slug}`\n  const schemaFieldsPath = `${schemaPath}.feature.upload.${relatedCollection.slug}`\n\n  const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath) // Field Schema\n\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          data: deepCopyObject(fields || {}),\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      }) // Form State\n\n      setInitialState(state)\n    }\n\n    void awaitInitialState()\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id, fields])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      return await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n    },\n\n    [config.routes.api, config.serverURL, schemaFieldsPath, id],\n  )\n\n  const handleUpdateEditData = useCallback(\n    (_, data) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: UploadNode | null = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n\n      closeModal(drawerSlug)\n    },\n    [closeModal, editor, drawerSlug, nodeKey],\n  )\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      title={t('general:editLabel', {\n        label: getTranslation(relatedCollection.labels.singular, i18n),\n      })}\n    >\n      {initialState !== false && (\n        <Form\n          beforeSubmit={[onChange]}\n          disableValidationOnSubmit\n          // @ts-expect-error TODO: Fix this\n          fields={fieldMap}\n          initialState={initialState}\n          onChange={[onChange]}\n          onSubmit={handleUpdateEditData}\n          uuid={uuid()}\n        >\n          <RenderFields\n            fieldMap={Array.isArray(fieldMap) ? fieldMap : []}\n            forceRender\n            path=\"\" // See Blocks feature path for details as for why this is empty\n            readOnly={false}\n            schemaPath={schemaFieldsPath}\n          />\n          <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n        </Form>\n      )}\n    </Drawer>\n  )\n}\n"],"names":["useLexicalComposerContext","getTranslation","Drawer","Form","FormSubmit","RenderFields","useConfig","useDocumentInfo","useFieldProps","useModal","useTranslation","getFormState","$getNodeByKey","deepCopyObject","React","useCallback","useEffect","useState","v4","uuid","useEditorConfigContext","ExtraFieldsUploadDrawer","props","data","fields","relationTo","value","drawerSlug","nodeKey","relatedCollection","editor","closeModal","i18n","t","id","schemaPath","config","initialState","setInitialState","field","richTextComponentMap","componentMapRenderedFieldsPath","slug","schemaFieldsPath","fieldMap","get","awaitInitialState","state","apiRoute","routes","api","body","operation","serverURL","onChange","formState","prevFormState","handleUpdateEditData","_","update","uploadNode","newData","getData","setData","title","label","labels","singular","beforeSubmit","disableValidationOnSubmit","onSubmit","Array","isArray","forceRender","path","readOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/features/upload/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/upload/component/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAInF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAOxD,OAAO,cAAc,CAAA;AAQrB,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AA2MD,eAAO,MAAM,eAAe,UAAW,YAAY,KAAG,KAAK,CAAC,SAM3D,CAAA"}

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

@@ -0,0 +1,219 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js';
+import { mergeRegister } from '@lexical/utils';
+import { getTranslation } from '@payloadcms/translations';
+import { Button, DrawerToggler, File, useConfig, useDocumentDrawer, useDrawerSlug, usePayloadAPI, useTranslation } from '@payloadcms/ui';
+import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND } from 'lexical';
+import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js';
+import { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js';
+import { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js';
+import { $isUploadNode } from '../nodes/UploadNode.js';
+import { ExtraFieldsUploadDrawer } from './ExtraFieldsDrawer/index.js';
+const baseClass = 'lexical-upload';
+const initialParams = {
+    depth: 0
+};
+const Component = (props)=>{
+    const { data: { fields, relationTo, value }, nodeKey } = props;
+    const { collections, routes: { api }, serverURL } = useConfig();
+    const uploadRef = useRef(null);
+    const [editor] = useLexicalComposerContext();
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const { editorConfig, field } = useEditorConfigContext();
+    const { i18n, t } = useTranslation();
+    const [cacheBust, dispatchCacheBust] = useReducer((state)=>state + 1, 0);
+    const [relatedCollection, setRelatedCollection] = useState(()=>collections.find((coll)=>coll.slug === relationTo));
+    const drawerSlug = useDrawerSlug('upload-drawer');
+    const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({
+        id: value,
+        collectionSlug: relatedCollection.slug
+    });
+    // Get the referenced document
+    const [{ data }, { setParams }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value}`, {
+        initialParams
+    });
+    const thumbnailSRC = data?.thumbnailURL || data?.url;
+    const removeUpload = useCallback(()=>{
+        editor.update(()=>{
+            $getNodeByKey(nodeKey).remove();
+        });
+    }, [
+        editor,
+        nodeKey
+    ]);
+    const updateUpload = useCallback((json)=>{
+        setParams({
+            ...initialParams,
+            cacheBust
+        });
+        dispatchCacheBust();
+        closeDrawer();
+    }, [
+        setParams,
+        cacheBust,
+        closeDrawer
+    ]);
+    const $onDelete = useCallback((payload)=>{
+        if (isSelected && $isNodeSelection($getSelection())) {
+            const event = payload;
+            event.preventDefault();
+            const node = $getNodeByKey(nodeKey);
+            if ($isUploadNode(node)) {
+                node.remove();
+                return true;
+            }
+        }
+        return false;
+    }, [
+        isSelected,
+        nodeKey
+    ]);
+    const onClick = useCallback((payload)=>{
+        const event = payload;
+        // Check if uploadRef.target or anything WITHIN uploadRef.target was clicked
+        if (event.target === uploadRef.current || uploadRef.current?.contains(event.target)) {
+            if (event.shiftKey) {
+                setSelected(!isSelected);
+            } else {
+                if (!isSelected) {
+                    clearSelection();
+                    setSelected(true);
+                }
+            }
+            return true;
+        }
+        return false;
+    }, [
+        isSelected,
+        setSelected,
+        clearSelection
+    ]);
+    useEffect(()=>{
+        return mergeRegister(editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW));
+    }, [
+        clearSelection,
+        editor,
+        isSelected,
+        nodeKey,
+        $onDelete,
+        setSelected,
+        onClick
+    ]);
+    const hasExtraFields = editorConfig?.resolvedFeatureMap?.get('upload')?.sanitizedClientFeatureProps.collections?.[relatedCollection.slug]?.hasExtraFields;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: [
+            baseClass,
+            isSelected && `${baseClass}--selected`
+        ].filter(Boolean).join(' '),
+        contentEditable: false,
+        ref: uploadRef,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__card`,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__topRow`,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${baseClass}__thumbnail`,
+                                children: thumbnailSRC ? /*#__PURE__*/ _jsx("img", {
+                                    alt: data?.filename,
+                                    "data-lexical-upload-id": value,
+                                    "data-lexical-upload-relation-to": relationTo,
+                                    src: thumbnailSRC
+                                }) : /*#__PURE__*/ _jsx(File, {})
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: `${baseClass}__topRowRightPanel`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: `${baseClass}__collectionLabel`,
+                                        children: getTranslation(relatedCollection.labels.singular, i18n)
+                                    }),
+                                    editor.isEditable() && /*#__PURE__*/ _jsxs("div", {
+                                        className: `${baseClass}__actions`,
+                                        children: [
+                                            hasExtraFields ? /*#__PURE__*/ _jsx(DrawerToggler, {
+                                                className: `${baseClass}__upload-drawer-toggler`,
+                                                disabled: field?.readOnly,
+                                                slug: drawerSlug,
+                                                children: /*#__PURE__*/ _jsx(Button, {
+                                                    buttonStyle: "icon-label",
+                                                    el: "div",
+                                                    icon: "edit",
+                                                    onClick: (e)=>{
+                                                        e.preventDefault();
+                                                    },
+                                                    round: true,
+                                                    tooltip: t('fields:editRelationship')
+                                                })
+                                            }) : null,
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                buttonStyle: "icon-label",
+                                                disabled: field?.readOnly,
+                                                el: "div",
+                                                icon: "swap",
+                                                onClick: ()=>{
+                                                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {
+                                                        replace: {
+                                                            nodeKey
+                                                        }
+                                                    });
+                                                },
+                                                round: true,
+                                                tooltip: t('fields:swapUpload')
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                buttonStyle: "icon-label",
+                                                className: `${baseClass}__removeButton`,
+                                                disabled: field?.readOnly,
+                                                icon: "x",
+                                                onClick: (e)=>{
+                                                    e.preventDefault();
+                                                    removeUpload();
+                                                },
+                                                round: true,
+                                                tooltip: t('fields:removeUpload')
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__bottomRow`,
+                        children: /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                            className: `${baseClass}__doc-drawer-toggler`,
+                            children: /*#__PURE__*/ _jsx("strong", {
+                                children: data?.filename
+                            })
+                        })
+                    })
+                ]
+            }),
+            value && /*#__PURE__*/ _jsx(DocumentDrawer, {
+                onSave: updateUpload
+            }),
+            hasExtraFields ? /*#__PURE__*/ _jsx(ExtraFieldsUploadDrawer, {
+                drawerSlug: drawerSlug,
+                relatedCollection: relatedCollection,
+                ...props
+            }) : null
+        ]
+    });
+};
+export const UploadComponent = (props)=>{
+    return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
+        ...props,
+        uploads: true,
+        children: /*#__PURE__*/ _jsx(Component, {
+            ...props
+        })
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/features/upload/component/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'\nimport { mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  DrawerToggler,\n  File,\n  useConfig,\n  useDocumentDrawer,\n  useDrawerSlug,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isNodeSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  KEY_BACKSPACE_COMMAND,\n  KEY_DELETE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { UploadFeaturePropsClient } from '../feature.client.js'\nimport type { UploadData } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport { $isUploadNode } from '../nodes/UploadNode.js'\nimport { ExtraFieldsUploadDrawer } from './ExtraFieldsDrawer/index.js'\nimport './index.scss'\n\nconst baseClass = 'lexical-upload'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  data: UploadData\n  nodeKey: string\n}\n\nconst Component: React.FC<ElementProps> = (props) => {\n  const {\n    data: { fields, relationTo, value },\n    nodeKey,\n  } = props\n\n  const {\n    collections,\n    routes: { api },\n    serverURL,\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n\n  const [editor] = useLexicalComposerContext()\n  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)\n\n  const { editorConfig, field } = useEditorConfigContext()\n\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection, setRelatedCollection] = useState<ClientCollectionConfig>(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const drawerSlug = useDrawerSlug('upload-drawer')\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\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    (json) => {\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      closeDrawer()\n    },\n    [setParams, cacheBust, closeDrawer],\n  )\n\n  const $onDelete = useCallback(\n    (payload: KeyboardEvent) => {\n      if (isSelected && $isNodeSelection($getSelection())) {\n        const event: KeyboardEvent = payload\n        event.preventDefault()\n        const node = $getNodeByKey(nodeKey)\n        if ($isUploadNode(node)) {\n          node.remove()\n          return true\n        }\n      }\n      return false\n    },\n    [isSelected, nodeKey],\n  )\n  const onClick = useCallback(\n    (payload: MouseEvent) => {\n      const event = payload\n      // Check if uploadRef.target or anything WITHIN uploadRef.target was clicked\n      if (event.target === uploadRef.current || uploadRef.current?.contains(event.target as Node)) {\n        if (event.shiftKey) {\n          setSelected(!isSelected)\n        } else {\n          if (!isSelected) {\n            clearSelection()\n            setSelected(true)\n          }\n        }\n        return true\n      }\n\n      return false\n    },\n    [isSelected, setSelected, clearSelection],\n  )\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand<MouseEvent>(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW),\n\n      editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n      editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n    )\n  }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected, onClick])\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as ClientComponentProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  return (\n    <div\n      className={[baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' ')}\n      contentEditable={false}\n      ref={uploadRef}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__topRow`}>\n          {/* TODO: migrate to use @payloadcms/ui/elements/Thumbnail component */}\n          <div className={`${baseClass}__thumbnail`}>\n            {thumbnailSRC ? (\n              <img\n                alt={data?.filename}\n                data-lexical-upload-id={value}\n                data-lexical-upload-relation-to={relationTo}\n                src={thumbnailSRC}\n              />\n            ) : (\n              <File />\n            )}\n          </div>\n          <div className={`${baseClass}__topRowRightPanel`}>\n            <div className={`${baseClass}__collectionLabel`}>\n              {getTranslation(relatedCollection.labels.singular, i18n)}\n            </div>\n            {editor.isEditable() && (\n              <div className={`${baseClass}__actions`}>\n                {hasExtraFields ? (\n                  <DrawerToggler\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={field?.readOnly}\n                    slug={drawerSlug}\n                  >\n                    <Button\n                      buttonStyle=\"icon-label\"\n                      el=\"div\"\n                      icon=\"edit\"\n                      onClick={(e) => {\n                        e.preventDefault()\n                      }}\n                      round\n                      tooltip={t('fields:editRelationship')}\n                    />\n                  </DrawerToggler>\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  disabled={field?.readOnly}\n                  el=\"div\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  tooltip={t('fields:swapUpload')}\n                />\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={field?.readOnly}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n        <div className={`${baseClass}__bottomRow`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong>{data?.filename}</strong>\n          </DocumentDrawerToggler>\n        </div>\n      </div>\n      {value && <DocumentDrawer onSave={updateUpload} />}\n      {hasExtraFields ? (\n        <ExtraFieldsUploadDrawer\n          drawerSlug={drawerSlug}\n          relatedCollection={relatedCollection}\n          {...props}\n        />\n      ) : null}\n    </div>\n  )\n}\n\nexport const UploadComponent = (props: ElementProps): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <Component {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalNodeSelection","mergeRegister","getTranslation","Button","DrawerToggler","File","useConfig","useDocumentDrawer","useDrawerSlug","usePayloadAPI","useTranslation","$getNodeByKey","$getSelection","$isNodeSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","React","useCallback","useEffect","useReducer","useRef","useState","useEditorConfigContext","EnabledRelationshipsCondition","INSERT_UPLOAD_WITH_DRAWER_COMMAND","$isUploadNode","ExtraFieldsUploadDrawer","baseClass","initialParams","depth","Component","props","data","fields","relationTo","value","nodeKey","collections","routes","api","serverURL","uploadRef","editor","isSelected","setSelected","clearSelection","editorConfig","field","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","setRelatedCollection","find","coll","slug","drawerSlug","DocumentDrawer","DocumentDrawerToggler","closeDrawer","id","collectionSlug","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","update","remove","updateUpload","json","$onDelete","payload","event","preventDefault","node","onClick","target","current","contains","shiftKey","registerCommand","hasExtraFields","resolvedFeatureMap","get","sanitizedClientFeatureProps","div","className","filter","Boolean","join","contentEditable","ref","img","alt","filename","data-lexical-upload-id","data-lexical-upload-relation-to","src","labels","singular","isEditable","disabled","readOnly","buttonStyle","el","icon","e","round","tooltip","dispatchCommand","replace","strong","onSave","UploadComponent","uploads"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/features/upload/drawer/commands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../../../../src/features/upload/drawer/commands.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,eAAO,MAAM,iCAAiC,EAAE,cAAc,CAAC;IAC7D,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;CACrC,CAAsD,CAAA"}

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

@@ -0,0 +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/drawer/commands.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/features/upload/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"],"rangeMappings":";;","mappings":"AAAA;AAGA,SAASA,aAAa,QAAQ,UAAS;AAEvC,OAAO,MAAMC,oCAERD,cAAc,qCAAoC"}

package/dist/features/upload/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/upload/drawer/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA0C/D,KAAK,KAAK,GAAG;IACX,sBAAsB,EAAE,MAAM,EAAE,CAAA;CACjC,CAAA;AA0CD,eAAO,MAAM,YAAY,UAAW,KAAK,KAAG,KAAK,CAAC,SAMjD,CAAA"}

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

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { useListDrawer } from '@payloadcms/ui';
+import { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import React, { useCallback, useEffect, useState } from 'react';
+import { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js';
+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, {
+            fields: null,
+            relationTo,
+            value
+        });
+    } else {
+        editor.update(()=>{
+            const node = $getNodeByKey(replaceNodeKey);
+            if (node) {
+                node.replace($createUploadNode({
+                    data: {
+                        fields: null,
+                        relationTo,
+                        value
+                    }
+                }));
+            }
+        });
+    }
+};
+const UploadDrawerComponent = ({ enabledCollectionSlugs })=>{
+    const [editor] = useLexicalComposerContext();
+    const [replaceNodeKey, setReplaceNodeKey] = useState(null);
+    const [ListDrawer, ListDrawerToggler, { closeDrawer, openDrawer }] = useListDrawer({
+        collectionSlugs: enabledCollectionSlugs,
+        uploads: true
+    });
+    useEffect(()=>{
+        return editor.registerCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, (payload)=>{
+            setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null);
+            openDrawer();
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [
+        editor,
+        openDrawer
+    ]);
+    const onSelect = useCallback(({ collectionSlug, docID })=>{
+        insertUpload({
+            editor,
+            relationTo: collectionSlug,
+            replaceNodeKey,
+            value: docID
+        });
+        closeDrawer();
+    }, [
+        editor,
+        closeDrawer,
+        replaceNodeKey
+    ]);
+    return /*#__PURE__*/ _jsx(ListDrawer, {
+        onSelect: onSelect
+    });
+};
+export const UploadDrawer = (props)=>{
+    return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
+        ...props,
+        uploads: true,
+        children: /*#__PURE__*/ _jsx(UploadDrawerComponent, {
+            ...props
+        })
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/features/upload/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useListDrawer } from '@payloadcms/ui'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.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      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              fields: null,\n              relationTo,\n              value,\n            },\n          }),\n        )\n      }\n    })\n  }\n}\n\ntype Props = {\n  enabledCollectionSlugs: string[]\n}\n\nconst UploadDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {\n  const [editor] = useLexicalComposerContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer, openDrawer }] = useListDrawer({\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        openDrawer()\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, openDrawer])\n\n  const onSelect = useCallback(\n    ({ collectionSlug, docID }) => {\n      insertUpload({\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\n        value: docID,\n      })\n      closeDrawer()\n    },\n    [editor, closeDrawer, replaceNodeKey],\n  )\n\n  return <ListDrawer onSelect={onSelect} />\n}\n\nexport const UploadDrawer = (props: Props): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <UploadDrawerComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["useLexicalComposerContext","useListDrawer","$getNodeByKey","COMMAND_PRIORITY_EDITOR","React","useCallback","useEffect","useState","EnabledRelationshipsCondition","$createUploadNode","INSERT_UPLOAD_COMMAND","INSERT_UPLOAD_WITH_DRAWER_COMMAND","insertUpload","editor","relationTo","replaceNodeKey","value","dispatchCommand","fields","update","node","replace","data","UploadDrawerComponent","enabledCollectionSlugs","setReplaceNodeKey","ListDrawer","ListDrawerToggler","closeDrawer","openDrawer","collectionSlugs","uploads","registerCommand","payload","nodeKey","onSelect","collectionSlug","docID","UploadDrawer","props"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,aAAa,QAAQ,iBAAgB;AAC9C,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,UAAS;AAChE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,6BAA6B,QAAQ,4DAA2D;AACzG,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;YAC5CQ,QAAQ;YACRJ;YACAE;QACF;IACF,OAAO;QACLH,OAAOM,MAAM,CAAC;YACZ,MAAMC,OAAOlB,cAAca;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CACVZ,kBAAkB;oBAChBa,MAAM;wBACJJ,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,CAACmB,YAAYC,mBAAmB,EAAEC,WAAW,EAAEC,UAAU,EAAE,CAAC,GAAG5B,cAAc;QACjF6B,iBAAiBN;QACjBO,SAAS;IACX;IAEAzB,UAAU;QACR,OAAOO,OAAOmB,eAAe,CAG3BrB,mCACA,CAACsB;YACCR,kBAAkBQ,SAASZ,UAAUY,SAASZ,QAAQa,UAAU;YAChEL;YACA,OAAO;QACT,GACA1B;IAEJ,GAAG;QAACU;QAAQgB;KAAW;IAEvB,MAAMM,WAAW9B,YACf,CAAC,EAAE+B,cAAc,EAAEC,KAAK,EAAE;QACxBzB,aAAa;YACXC;YACAC,YAAYsB;YACZrB;YACAC,OAAOqB;QACT;QACAT;IACF,GACA;QAACf;QAAQe;QAAab;KAAe;IAGvC,qBAAO,KAACW;QAAWS,UAAUA;;AAC/B;AAEA,OAAO,MAAMG,eAAe,CAACC;IAC3B,qBACE,KAAC/B;QAA+B,GAAG+B,KAAK;QAAER,OAAO;kBAC/C,cAAA,KAACR;YAAuB,GAAGgB,KAAK;;;AAGtC,EAAC"}

package/dist/features/upload/feature.client.d.ts

@@ -0,0 +1,12 @@
+export type UploadFeaturePropsClient = {
+    collections: {
+        [collection: string]: {
+            hasExtraFields: boolean;
+        };
+    };
+};
+export declare const UploadFeatureClientComponent: import("react").FC<{
+    featureKey: string;
+    order: number;
+} & UploadFeaturePropsClient>;
+//# sourceMappingURL=feature.client.d.ts.map

package/dist/features/upload/feature.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../src/features/upload/feature.client.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE;QACX,CAAC,UAAU,EAAE,MAAM,GAAG;YACpB,cAAc,EAAE,OAAO,CAAA;SACxB,CAAA;KACF,CAAA;CACF,CAAA;AA+DD,eAAO,MAAM,4BAA4B;;;6BAA6C,CAAA"}

package/dist/features/upload/feature.client.js

@@ -0,0 +1,81 @@
+'use client';
+import { $isNodeSelection } from 'lexical';
+import { UploadIcon } from '../../lexical/ui/icons/Upload/index.js';
+import { createClientComponent } from '../createClientComponent.js';
+import { slashMenuBasicGroupWithItems } from '../shared/slashMenu/basicGroup.js';
+import { toolbarAddDropdownGroupWithItems } from '../shared/toolbar/addDropdownGroup.js';
+import { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from './drawer/commands.js';
+import { $isUploadNode, UploadNode } from './nodes/UploadNode.js';
+import { UploadPlugin } from './plugin/index.js';
+const UploadFeatureClient = (props)=>{
+    return {
+        clientFeatureProps: props,
+        feature: ()=>({
+                nodes: [
+                    UploadNode
+                ],
+                plugins: [
+                    {
+                        Component: UploadPlugin,
+                        position: 'normal'
+                    }
+                ],
+                sanitizedClientFeatureProps: props,
+                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
+                                    });
+                                }
+                            }
+                        ])
+                    ]
+                }
+            })
+    };
+};
+export const UploadFeatureClientComponent = createClientComponent(UploadFeatureClient);
+
+//# sourceMappingURL=feature.client.js.map

package/dist/features/upload/feature.client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/upload/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport { $isNodeSelection } from 'lexical'\n\nimport type { FeatureProviderProviderClient } from '../types.js'\n\nimport { UploadIcon } from '../../lexical/ui/icons/Upload/index.js'\nimport { createClientComponent } from '../createClientComponent.js'\nimport { slashMenuBasicGroupWithItems } from '../shared/slashMenu/basicGroup.js'\nimport { toolbarAddDropdownGroupWithItems } from '../shared/toolbar/addDropdownGroup.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from './drawer/commands.js'\nimport { $isUploadNode, UploadNode } from './nodes/UploadNode.js'\nimport { UploadPlugin } from './plugin/index.js'\n\nexport type UploadFeaturePropsClient = {\n  collections: {\n    [collection: string]: {\n      hasExtraFields: boolean\n    }\n  }\n}\n\nconst UploadFeatureClient: FeatureProviderProviderClient<UploadFeaturePropsClient> = (props) => {\n  return {\n    clientFeatureProps: props,\n    feature: () => ({\n      nodes: [UploadNode],\n      plugins: [\n        {\n          Component: UploadPlugin,\n          position: 'normal',\n        },\n      ],\n      sanitizedClientFeatureProps: props,\n      slashMenu: {\n        groups: [\n          slashMenuBasicGroupWithItems([\n            {\n              Icon: UploadIcon,\n              key: 'upload',\n              keywords: ['upload', 'image', 'file', 'img', 'picture', 'photo', 'media'],\n              label: ({ i18n }) => {\n                return i18n.t('lexical:upload:label')\n              },\n              onSelect: ({ editor }) => {\n                editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                  replace: false,\n                })\n              },\n            },\n          ]),\n        ],\n      },\n      toolbarFixed: {\n        groups: [\n          toolbarAddDropdownGroupWithItems([\n            {\n              ChildComponent: UploadIcon,\n              isActive: ({ selection }) => {\n                if (!$isNodeSelection(selection) || !selection.getNodes().length) {\n                  return false\n                }\n\n                const firstNode = selection.getNodes()[0]\n                return $isUploadNode(firstNode)\n              },\n              key: 'upload',\n              label: ({ i18n }) => {\n                return i18n.t('lexical:upload:label')\n              },\n              onSelect: ({ editor }) => {\n                editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                  replace: false,\n                })\n              },\n            },\n          ]),\n        ],\n      },\n    }),\n  }\n}\n\nexport const UploadFeatureClientComponent = createClientComponent(UploadFeatureClient)\n"],"names":["$isNodeSelection","UploadIcon","createClientComponent","slashMenuBasicGroupWithItems","toolbarAddDropdownGroupWithItems","INSERT_UPLOAD_WITH_DRAWER_COMMAND","$isUploadNode","UploadNode","UploadPlugin","UploadFeatureClient","props","clientFeatureProps","feature","nodes","plugins","Component","position","sanitizedClientFeatureProps","slashMenu","groups","Icon","key","keywords","label","i18n","t","onSelect","editor","dispatchCommand","replace","toolbarFixed","ChildComponent","isActive","selection","getNodes","length","firstNode","UploadFeatureClientComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,gBAAgB,QAAQ,UAAS;AAI1C,SAASC,UAAU,QAAQ,yCAAwC;AACnE,SAASC,qBAAqB,QAAQ,8BAA6B;AACnE,SAASC,4BAA4B,QAAQ,oCAAmC;AAChF,SAASC,gCAAgC,QAAQ,wCAAuC;AACxF,SAASC,iCAAiC,QAAQ,uBAAsB;AACxE,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAuB;AACjE,SAASC,YAAY,QAAQ,oBAAmB;AAUhD,MAAMC,sBAA+E,CAACC;IACpF,OAAO;QACLC,oBAAoBD;QACpBE,SAAS,IAAO,CAAA;gBACdC,OAAO;oBAACN;iBAAW;gBACnBO,SAAS;oBACP;wBACEC,WAAWP;wBACXQ,UAAU;oBACZ;iBACD;gBACDC,6BAA6BP;gBAC7BQ,WAAW;oBACTC,QAAQ;wBACNhB,6BAA6B;4BAC3B;gCACEiB,MAAMnB;gCACNoB,KAAK;gCACLC,UAAU;oCAAC;oCAAU;oCAAS;oCAAQ;oCAAO;oCAAW;oCAAS;iCAAQ;gCACzEC,OAAO,CAAC,EAAEC,IAAI,EAAE;oCACd,OAAOA,KAAKC,CAAC,CAAC;gCAChB;gCACAC,UAAU,CAAC,EAAEC,MAAM,EAAE;oCACnBA,OAAOC,eAAe,CAACvB,mCAAmC;wCACxDwB,SAAS;oCACX;gCACF;4BACF;yBACD;qBACF;gBACH;gBACAC,cAAc;oBACZX,QAAQ;wBACNf,iCAAiC;4BAC/B;gCACE2B,gBAAgB9B;gCAChB+B,UAAU,CAAC,EAAEC,SAAS,EAAE;oCACtB,IAAI,CAACjC,iBAAiBiC,cAAc,CAACA,UAAUC,QAAQ,GAAGC,MAAM,EAAE;wCAChE,OAAO;oCACT;oCAEA,MAAMC,YAAYH,UAAUC,QAAQ,EAAE,CAAC,EAAE;oCACzC,OAAO5B,cAAc8B;gCACvB;gCACAf,KAAK;gCACLE,OAAO,CAAC,EAAEC,IAAI,EAAE;oCACd,OAAOA,KAAKC,CAAC,CAAC;gCAChB;gCACAC,UAAU,CAAC,EAAEC,MAAM,EAAE;oCACnBA,OAAOC,eAAe,CAACvB,mCAAmC;wCACxDwB,SAAS;oCACX;gCACF;4BACF;yBACD;qBACF;gBACH;YACF,CAAA;IACF;AACF;AAEA,OAAO,MAAMQ,+BAA+BnC,sBAAsBO,qBAAoB"}

package/dist/features/upload/feature.server.d.ts

@@ -0,0 +1,19 @@
+import type { Field } from 'payload';
+import type { FeatureProviderProviderServer } from '../types.js';
+import type { UploadFeaturePropsClient } from './feature.client.js';
+export type UploadFeatureProps = {
+    collections?: {
+        [collection: string]: {
+            fields: Field[];
+        };
+    };
+    /**
+     * Sets a maximum population depth for this upload (not the fields for this upload), regardless of the remaining depth when the respective field is reached.
+     * This behaves exactly like the maxDepth properties of relationship and upload fields.
+     *
+     * {@link https://payloadcms.com/docs/getting-started/concepts#field-level-max-depth}
+     */
+    maxDepth?: number;
+};
+export declare const UploadFeature: FeatureProviderProviderServer<UploadFeatureProps, UploadFeatureProps, UploadFeaturePropsClient>;
+//# sourceMappingURL=feature.server.d.ts.map