@payloadcms/richtext-slate 3.0.0-beta.78 → 3.0.0-beta.80

package/dist/field/elements/relationship/Element/index.js

@@ -12,9 +12,9 @@ const baseClass = 'rich-text-relationship';
 const initialParams = {
     depth: 0
 };
-const RelationshipElement = ()=>{
+const RelationshipElementComponent = ()=>{
     const { attributes, children, element, element: { relationTo, value }, fieldProps } = useElement();
-    const { collections, routes: { api }, serverURL } = useConfig();
+    const { config: { collections, routes: { api }, serverURL } } = useConfig();
     const [enabledCollectionSlugs] = useState(()=>collections.filter(({ admin: { enableRichTextRelationship } })=>enableRichTextRelationship).map(({ slug })=>slug));
     const [relatedCollection, setRelatedCollection] = useState(()=>collections.find((coll)=>coll.slug === relationTo));
     const selected = useSelected();
@@ -134,10 +134,10 @@ const RelationshipElement = ()=>{
                 children: [
                     /*#__PURE__*/ _jsx(ListDrawerToggler, {
                         className: `${baseClass}__list-drawer-toggler`,
-                        disabled: fieldProps?.readOnly,
+                        disabled: fieldProps?.field?.admin?.readOnly,
                         children: /*#__PURE__*/ _jsx(Button, {
                             buttonStyle: "icon-label",
-                            disabled: fieldProps?.readOnly,
+                            disabled: fieldProps?.field?.admin?.readOnly,
                             el: "div",
                             icon: "swap",
                             onClick: ()=>{
@@ -150,7 +150,7 @@ const RelationshipElement = ()=>{
                     /*#__PURE__*/ _jsx(Button, {
                         buttonStyle: "icon-label",
                         className: `${baseClass}__removeButton`,
-                        disabled: fieldProps?.readOnly,
+                        disabled: fieldProps?.field?.admin?.readOnly,
                         icon: "x",
                         onClick: (e)=>{
                             e.preventDefault();
@@ -171,10 +171,10 @@ const RelationshipElement = ()=>{
         ]
     });
 };
-export const Element = (props)=>{
+export const RelationshipElement = (props)=>{
     return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
         ...props,
-        children: /*#__PURE__*/ _jsx(RelationshipElement, {
+        children: /*#__PURE__*/ _jsx(RelationshipElementComponent, {
             ...props
         })
     });

package/dist/field/elements/relationship/Element/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/relationship/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  useConfig,\n  useDocumentDrawer,\n  useListDrawer,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { RelationshipElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  name: string\n  richTextComponentMap: Map<string, React.ReactNode>\n} & FormFieldBase\n\nconst RelationshipElement: React.FC<Props> = () => {\n  const {\n    attributes,\n    children,\n    element,\n    element: { relationTo, value },\n    fieldProps,\n  } = useElement<RelationshipElementType>()\n\n  const {\n    collections,\n    routes: { api },\n    serverURL,\n  } = useConfig()\n  const [enabledCollectionSlugs] = useState(() =>\n    collections\n      .filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship)\n      .map(({ slug }) => slug),\n  )\n  const [relatedCollection, setRelatedCollection] = useState(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const selected = useSelected()\n  const focused = useFocused()\n  const { i18n, t } = useTranslation()\n  const editor = useSlateStatic()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: relatedCollection.slug,\n  })\n\n  const removeRelationship = useCallback(() => {\n    const elementPath = ReactEditor.findPath(editor, element)\n\n    Transforms.removeNodes(editor, { at: elementPath })\n  }, [editor, element])\n\n  const updateRelationship = React.useCallback(\n    ({ doc }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: relatedCollection.slug,\n          value: { id: doc.id },\n        },\n        { at: elementPath },\n      )\n\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      closeDrawer()\n      dispatchCacheBust()\n    },\n    [editor, element, relatedCollection, cacheBust, setParams, closeDrawer],\n  )\n\n  const swapRelationship = React.useCallback(\n    ({ collectionSlug, docID }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: collectionSlug,\n          value: { id: docID },\n        },\n        { at: elementPath },\n      )\n\n      setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\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      closeListDrawer()\n      dispatchCacheBust()\n    },\n    [closeListDrawer, editor, element, cacheBust, setParams, collections],\n  )\n\n  return (\n    <div\n      className={[baseClass, selected && focused && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      contentEditable={false}\n      {...attributes}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <p className={`${baseClass}__label`}>\n          {t('fields:labelRelationship', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n        </p>\n        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n          <p className={`${baseClass}__title`}>\n            {data[relatedCollection?.admin?.useAsTitle || 'id']}\n          </p>\n        </DocumentDrawerToggler>\n      </div>\n      <div className={`${baseClass}__actions`}>\n        <ListDrawerToggler\n          className={`${baseClass}__list-drawer-toggler`}\n          disabled={fieldProps?.readOnly}\n        >\n          <Button\n            buttonStyle=\"icon-label\"\n            disabled={fieldProps?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              // do nothing\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n        </ListDrawerToggler>\n        <Button\n          buttonStyle=\"icon-label\"\n          className={`${baseClass}__removeButton`}\n          disabled={fieldProps?.readOnly}\n          icon=\"x\"\n          onClick={(e) => {\n            e.preventDefault()\n            removeRelationship()\n          }}\n          round\n          tooltip={t('fields:removeRelationship')}\n        />\n      </div>\n      {value?.id && <DocumentDrawer onSave={updateRelationship} />}\n      <ListDrawer onSelect={swapRelationship} />\n      {children}\n    </div>\n  )\n}\n\nexport const Element = (props: Props): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipElement {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["getTranslation","Button","useConfig","useDocumentDrawer","useListDrawer","usePayloadAPI","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","baseClass","initialParams","depth","RelationshipElement","attributes","children","element","relationTo","value","fieldProps","collections","routes","api","serverURL","enabledCollectionSlugs","filter","admin","enableRichTextRelationship","map","slug","relatedCollection","setRelatedCollection","find","coll","selected","focused","i18n","t","editor","cacheBust","dispatchCacheBust","state","data","setParams","id","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","ListDrawer","ListDrawerToggler","closeListDrawer","collectionSlugs","selectedCollection","removeRelationship","elementPath","findPath","removeNodes","at","updateRelationship","doc","setNodes","type","text","swapRelationship","docID","div","className","Boolean","join","contentEditable","p","label","labels","singular","useAsTitle","disabled","readOnly","buttonStyle","el","icon","onClick","round","tooltip","e","preventDefault","onSave","onSelect","Element","props"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/elements/relationship/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase, MappedComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  useConfig,\n  useDocumentDrawer,\n  useListDrawer,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { RelationshipElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  name: string\n  richTextComponentMap: Map<string, MappedComponent>\n} & FormFieldBase\n\nconst RelationshipElementComponent: React.FC<Props> = () => {\n  const {\n    attributes,\n    children,\n    element,\n    element: { relationTo, value },\n    fieldProps,\n  } = useElement<RelationshipElementType>()\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const [enabledCollectionSlugs] = useState(() =>\n    collections\n      .filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship)\n      .map(({ slug }) => slug),\n  )\n  const [relatedCollection, setRelatedCollection] = useState(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const selected = useSelected()\n  const focused = useFocused()\n  const { i18n, t } = useTranslation()\n  const editor = useSlateStatic()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: relatedCollection.slug,\n  })\n\n  const removeRelationship = useCallback(() => {\n    const elementPath = ReactEditor.findPath(editor, element)\n\n    Transforms.removeNodes(editor, { at: elementPath })\n  }, [editor, element])\n\n  const updateRelationship = React.useCallback(\n    ({ doc }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: relatedCollection.slug,\n          value: { id: doc.id },\n        },\n        { at: elementPath },\n      )\n\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      closeDrawer()\n      dispatchCacheBust()\n    },\n    [editor, element, relatedCollection, cacheBust, setParams, closeDrawer],\n  )\n\n  const swapRelationship = React.useCallback(\n    ({ collectionSlug, docID }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: collectionSlug,\n          value: { id: docID },\n        },\n        { at: elementPath },\n      )\n\n      setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\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      closeListDrawer()\n      dispatchCacheBust()\n    },\n    [closeListDrawer, editor, element, cacheBust, setParams, collections],\n  )\n\n  return (\n    <div\n      className={[baseClass, selected && focused && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      contentEditable={false}\n      {...attributes}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <p className={`${baseClass}__label`}>\n          {t('fields:labelRelationship', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n        </p>\n        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n          <p className={`${baseClass}__title`}>\n            {data[relatedCollection?.admin?.useAsTitle || 'id']}\n          </p>\n        </DocumentDrawerToggler>\n      </div>\n      <div className={`${baseClass}__actions`}>\n        <ListDrawerToggler\n          className={`${baseClass}__list-drawer-toggler`}\n          disabled={fieldProps?.field?.admin?.readOnly}\n        >\n          <Button\n            buttonStyle=\"icon-label\"\n            disabled={fieldProps?.field?.admin?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              // do nothing\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n        </ListDrawerToggler>\n        <Button\n          buttonStyle=\"icon-label\"\n          className={`${baseClass}__removeButton`}\n          disabled={fieldProps?.field?.admin?.readOnly}\n          icon=\"x\"\n          onClick={(e) => {\n            e.preventDefault()\n            removeRelationship()\n          }}\n          round\n          tooltip={t('fields:removeRelationship')}\n        />\n      </div>\n      {value?.id && <DocumentDrawer onSave={updateRelationship} />}\n      <ListDrawer onSelect={swapRelationship} />\n      {children}\n    </div>\n  )\n}\n\nexport const RelationshipElement = (props: Props): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipElementComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["getTranslation","Button","useConfig","useDocumentDrawer","useListDrawer","usePayloadAPI","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","baseClass","initialParams","depth","RelationshipElementComponent","attributes","children","element","relationTo","value","fieldProps","config","collections","routes","api","serverURL","enabledCollectionSlugs","filter","admin","enableRichTextRelationship","map","slug","relatedCollection","setRelatedCollection","find","coll","selected","focused","i18n","t","editor","cacheBust","dispatchCacheBust","state","data","setParams","id","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","ListDrawer","ListDrawerToggler","closeListDrawer","collectionSlugs","selectedCollection","removeRelationship","elementPath","findPath","removeNodes","at","updateRelationship","doc","setNodes","type","text","swapRelationship","docID","div","className","Boolean","join","contentEditable","p","label","labels","singular","useAsTitle","disabled","field","readOnly","buttonStyle","el","icon","onClick","round","tooltip","e","preventDefault","onSave","onSelect","RelationshipElement","props"],"mappings":"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"}

package/dist/field/elements/relationship/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/relationship/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAO9D,eAAO,MAAM,YAAY,EAAE,qBAK1B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/relationship/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAI9D,eAAO,MAAM,YAAY,EAAE,qBAK1B,CAAA"}

package/dist/field/elements/relationship/index.js

@@ -1,13 +1,10 @@
-import { Button } from './Button/index.js';
-import { Element } from './Element/index.js';
-import { WithRelationship } from './plugin.js';
 import { relationshipName } from './shared.js';
 export const relationship = {
     name: relationshipName,
-    Button,
-    Element,
+    Button: '@payloadcms/richtext-slate/client#RelationshipButton',
+    Element: '@payloadcms/richtext-slate/client#RelationshipElement',
     plugins: [
-        WithRelationship
+        '@payloadcms/richtext-slate/client#WithRelationship'
     ]
 };
 

package/dist/field/elements/relationship/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/elements/relationship/index.ts"],"sourcesContent":["import type { RichTextCustomElement } from '../../../types.js'\n\nimport { Button } from './Button/index.js'\nimport { Element } from './Element/index.js'\nimport { WithRelationship } from './plugin.js'\nimport { relationshipName } from './shared.js'\n\nexport const relationship: RichTextCustomElement = {\n  name: relationshipName,\n  Button,\n  Element,\n  plugins: [WithRelationship],\n}\n"],"names":["Button","Element","WithRelationship","relationshipName","relationship","name","plugins"],"mappings":"AAEA,SAASA,MAAM,QAAQ,oBAAmB;AAC1C,SAASC,OAAO,QAAQ,qBAAoB;AAC5C,SAASC,gBAAgB,QAAQ,cAAa;AAC9C,SAASC,gBAAgB,QAAQ,cAAa;AAE9C,OAAO,MAAMC,eAAsC;IACjDC,MAAMF;IACNH;IACAC;IACAK,SAAS;QAACJ;KAAiB;AAC7B,EAAC"}
+{"version":3,"sources":["../../../../src/field/elements/relationship/index.ts"],"sourcesContent":["import type { RichTextCustomElement } from '../../../types.js'\n\nimport { relationshipName } from './shared.js'\n\nexport const relationship: RichTextCustomElement = {\n  name: relationshipName,\n  Button: '@payloadcms/richtext-slate/client#RelationshipButton',\n  Element: '@payloadcms/richtext-slate/client#RelationshipElement',\n  plugins: ['@payloadcms/richtext-slate/client#WithRelationship'],\n}\n"],"names":["relationshipName","relationship","name","Button","Element","plugins"],"mappings":"AAEA,SAASA,gBAAgB,QAAQ,cAAa;AAE9C,OAAO,MAAMC,eAAsC;IACjDC,MAAMF;IACNG,QAAQ;IACRC,SAAS;IACTC,SAAS;QAAC;KAAqD;AACjE,EAAC"}

package/dist/field/elements/textAlign/Button.d.ts

@@ -0,0 +1,2 @@
+export declare const TextAlignElementButton: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/field/elements/textAlign/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/textAlign/Button.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB,+CAYlC,CAAA"}

package/dist/field/elements/textAlign/Button.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AlignCenterIcon } from '../../icons/AlignCenter/index.js';
+import { AlignLeftIcon } from '../../icons/AlignLeft/index.js';
+import { AlignRightIcon } from '../../icons/AlignRight/index.js';
+import { ElementButton } from '../Button.js';
+export const TextAlignElementButton = ()=>/*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(ElementButton, {
+                format: "left",
+                type: "textAlign",
+                children: /*#__PURE__*/ _jsx(AlignLeftIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(ElementButton, {
+                format: "center",
+                type: "textAlign",
+                children: /*#__PURE__*/ _jsx(AlignCenterIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(ElementButton, {
+                format: "right",
+                type: "textAlign",
+                children: /*#__PURE__*/ _jsx(AlignRightIcon, {})
+            })
+        ]
+    });
+
+//# sourceMappingURL=Button.js.map

package/dist/field/elements/textAlign/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/field/elements/textAlign/Button.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { AlignCenterIcon } from '../../icons/AlignCenter/index.js'\nimport { AlignLeftIcon } from '../../icons/AlignLeft/index.js'\nimport { AlignRightIcon } from '../../icons/AlignRight/index.js'\nimport { ElementButton } from '../Button.js'\n\nexport const TextAlignElementButton = () => (\n  <React.Fragment>\n    <ElementButton format=\"left\" type=\"textAlign\">\n      <AlignLeftIcon />\n    </ElementButton>\n    <ElementButton format=\"center\" type=\"textAlign\">\n      <AlignCenterIcon />\n    </ElementButton>\n    <ElementButton format=\"right\" type=\"textAlign\">\n      <AlignRightIcon />\n    </ElementButton>\n  </React.Fragment>\n)\n"],"names":["React","AlignCenterIcon","AlignLeftIcon","AlignRightIcon","ElementButton","TextAlignElementButton","Fragment","format","type"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SAASC,aAAa,QAAQ,eAAc;AAE5C,OAAO,MAAMC,yBAAyB,kBACpC,MAACL,MAAMM,QAAQ;;0BACb,KAACF;gBAAcG,QAAO;gBAAOC,MAAK;0BAChC,cAAA,KAACN;;0BAEH,KAACE;gBAAcG,QAAO;gBAASC,MAAK;0BAClC,cAAA,KAACP;;0BAEH,KAACG;gBAAcG,QAAO;gBAAQC,MAAK;0BACjC,cAAA,KAACL;;;OAGN"}

package/dist/field/elements/textAlign/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/textAlign/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAO9D,eAAO,MAAM,SAAS,EAAE,qBAkBvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/textAlign/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAE9D,eAAO,MAAM,SAAS,EAAE,qBAIvB,CAAA"}

package/dist/field/elements/textAlign/index.js

@@ -1,33 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { AlignCenterIcon } from '../../icons/AlignCenter/index.js';
-import { AlignLeftIcon } from '../../icons/AlignLeft/index.js';
-import { AlignRightIcon } from '../../icons/AlignRight/index.js';
-import { ElementButton } from '../Button.js';
 export const textAlign = {
     name: 'alignment',
-    Button: ()=>{
-        return /*#__PURE__*/ _jsxs(React.Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(ElementButton, {
-                    format: "left",
-                    type: "textAlign",
-                    children: /*#__PURE__*/ _jsx(AlignLeftIcon, {})
-                }),
-                /*#__PURE__*/ _jsx(ElementButton, {
-                    format: "center",
-                    type: "textAlign",
-                    children: /*#__PURE__*/ _jsx(AlignCenterIcon, {})
-                }),
-                /*#__PURE__*/ _jsx(ElementButton, {
-                    format: "right",
-                    type: "textAlign",
-                    children: /*#__PURE__*/ _jsx(AlignRightIcon, {})
-                })
-            ]
-        });
-    },
-    Element: ()=>null
+    Button: '@payloadcms/richtext-slate/client#TextAlignElementButton',
+    Element: '@payloadcms/ui/shared#emptyComponent'
 };
 
 //# sourceMappingURL=index.js.map

package/dist/field/elements/textAlign/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/elements/textAlign/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { RichTextCustomElement } from '../../../types.js'\n\nimport { AlignCenterIcon } from '../../icons/AlignCenter/index.js'\nimport { AlignLeftIcon } from '../../icons/AlignLeft/index.js'\nimport { AlignRightIcon } from '../../icons/AlignRight/index.js'\nimport { ElementButton } from '../Button.js'\n\nexport const textAlign: RichTextCustomElement = {\n  name: 'alignment',\n  Button: () => {\n    return (\n      <React.Fragment>\n        <ElementButton format=\"left\" type=\"textAlign\">\n          <AlignLeftIcon />\n        </ElementButton>\n        <ElementButton format=\"center\" type=\"textAlign\">\n          <AlignCenterIcon />\n        </ElementButton>\n        <ElementButton format=\"right\" type=\"textAlign\">\n          <AlignRightIcon />\n        </ElementButton>\n      </React.Fragment>\n    )\n  },\n  Element: () => null,\n}\n"],"names":["React","AlignCenterIcon","AlignLeftIcon","AlignRightIcon","ElementButton","textAlign","name","Button","Fragment","format","type","Element"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAIzB,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SAASC,aAAa,QAAQ,eAAc;AAE5C,OAAO,MAAMC,YAAmC;IAC9CC,MAAM;IACNC,QAAQ;QACN,qBACE,MAACP,MAAMQ,QAAQ;;8BACb,KAACJ;oBAAcK,QAAO;oBAAOC,MAAK;8BAChC,cAAA,KAACR;;8BAEH,KAACE;oBAAcK,QAAO;oBAASC,MAAK;8BAClC,cAAA,KAACT;;8BAEH,KAACG;oBAAcK,QAAO;oBAAQC,MAAK;8BACjC,cAAA,KAACP;;;;IAIT;IACAQ,SAAS,IAAM;AACjB,EAAC"}
+{"version":3,"sources":["../../../../src/field/elements/textAlign/index.tsx"],"sourcesContent":["import type { RichTextCustomElement } from '../../../types.js'\n\nexport const textAlign: RichTextCustomElement = {\n  name: 'alignment',\n  Button: '@payloadcms/richtext-slate/client#TextAlignElementButton',\n  Element: '@payloadcms/ui/shared#emptyComponent',\n}\n"],"names":["textAlign","name","Button","Element"],"mappings":"AAEA,OAAO,MAAMA,YAAmC;IAC9CC,MAAM;IACNC,QAAQ;IACRC,SAAS;AACX,EAAC"}

package/dist/field/elements/ul/Button.d.ts

@@ -0,0 +1,4 @@
+export declare const ULElementButton: ({ format }: {
+    format: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/field/elements/ul/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/ul/Button.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,eAAgB;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,4CAI7D,CAAA"}

package/dist/field/elements/ul/Button.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ULIcon } from '../../icons/UnorderedList/index.js';
+import { ListButton } from '../ListButton.js';
+export const ULElementButton = ({ format })=>/*#__PURE__*/ _jsx(ListButton, {
+        format: format,
+        children: /*#__PURE__*/ _jsx(ULIcon, {})
+    });
+
+//# sourceMappingURL=Button.js.map

package/dist/field/elements/ul/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/field/elements/ul/Button.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ULIcon } from '../../icons/UnorderedList/index.js'\nimport { ListButton } from '../ListButton.js'\n\nexport const ULElementButton = ({ format }: { format: string }) => (\n  <ListButton format={format}>\n    <ULIcon />\n  </ListButton>\n)\n"],"names":["React","ULIcon","ListButton","ULElementButton","format"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,qCAAoC;AAC3D,SAASC,UAAU,QAAQ,mBAAkB;AAE7C,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,MAAM,EAAsB,iBAC5D,KAACF;QAAWE,QAAQA;kBAClB,cAAA,KAACH;OAEJ"}

package/dist/field/elements/ul/UnorderedList.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import './index.scss';
-export declare const UnorderedList: React.FC;
+export declare const UnorderedListElement: React.FC;
 //# sourceMappingURL=UnorderedList.d.ts.map

package/dist/field/elements/ul/UnorderedList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnorderedList.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/ul/UnorderedList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAQjC,CAAA"}
+{"version":3,"file":"UnorderedList.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/ul/UnorderedList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAQxC,CAAA"}

package/dist/field/elements/ul/UnorderedList.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useElement } from '../../providers/ElementProvider.js';
 import './index.scss';
-export const UnorderedList = ()=>{
+export const UnorderedListElement = ()=>{
     const { attributes, children } = useElement();
     return /*#__PURE__*/ _jsx("ul", {
         className: "rich-text-ul",

package/dist/field/elements/ul/UnorderedList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/elements/ul/UnorderedList.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useElement } from '../../providers/ElementProvider.js'\nimport './index.scss'\n\nexport const UnorderedList: React.FC = () => {\n  const { attributes, children } = useElement()\n\n  return (\n    <ul className=\"rich-text-ul\" {...attributes}>\n      {children}\n    </ul>\n  )\n}\n"],"names":["React","useElement","UnorderedList","attributes","children","ul","className"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,UAAU,QAAQ,qCAAoC;AAC/D,OAAO,eAAc;AAErB,OAAO,MAAMC,gBAA0B;IACrC,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAGH;IAEjC,qBACE,KAACI;QAAGC,WAAU;QAAgB,GAAGH,UAAU;kBACxCC;;AAGP,EAAC"}
+{"version":3,"sources":["../../../../src/field/elements/ul/UnorderedList.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useElement } from '../../providers/ElementProvider.js'\nimport './index.scss'\n\nexport const UnorderedListElement: React.FC = () => {\n  const { attributes, children } = useElement()\n\n  return (\n    <ul className=\"rich-text-ul\" {...attributes}>\n      {children}\n    </ul>\n  )\n}\n"],"names":["React","useElement","UnorderedListElement","attributes","children","ul","className"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,UAAU,QAAQ,qCAAoC;AAC/D,OAAO,eAAc;AAErB,OAAO,MAAMC,uBAAiC;IAC5C,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAGH;IAEjC,qBACE,KAACI;QAAGC,WAAU;QAAgB,GAAGH,UAAU;kBACxCC;;AAGP,EAAC"}

package/dist/field/elements/ul/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/ul/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAQ9D,eAAO,MAAM,EAAE,EAAE,qBAQhB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/ul/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAI9D,eAAO,MAAM,EAAE,EAAE,qBAShB,CAAA"}

package/dist/field/elements/ul/index.js

@@ -1,16 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { ULIcon } from '../../icons/UnorderedList/index.js';
-import { ListButton } from '../ListButton.js';
-import { UnorderedList } from './UnorderedList.js';
 const name = 'ul';
 export const ul = {
     name,
-    Button: ()=>/*#__PURE__*/ _jsx(ListButton, {
-            format: name,
-            children: /*#__PURE__*/ _jsx(ULIcon, {})
-        }),
-    Element: UnorderedList
+    Button: {
+        clientProps: {
+            format: name
+        },
+        path: '@payloadcms/richtext-slate/client#ULElementButton'
+    },
+    Element: '@payloadcms/richtext-slate/client#UnorderedListElement'
 };
 
 //# sourceMappingURL=index.js.map

package/dist/field/elements/ul/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/elements/ul/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { RichTextCustomElement } from '../../../types.js'\n\nimport { ULIcon } from '../../icons/UnorderedList/index.js'\nimport { ListButton } from '../ListButton.js'\nimport { UnorderedList } from './UnorderedList.js'\n\nconst name = 'ul'\n\nexport const ul: RichTextCustomElement = {\n  name,\n  Button: () => (\n    <ListButton format={name}>\n      <ULIcon />\n    </ListButton>\n  ),\n  Element: UnorderedList,\n}\n"],"names":["React","ULIcon","ListButton","UnorderedList","name","ul","Button","format","Element"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAIzB,SAASC,MAAM,QAAQ,qCAAoC;AAC3D,SAASC,UAAU,QAAQ,mBAAkB;AAC7C,SAASC,aAAa,QAAQ,qBAAoB;AAElD,MAAMC,OAAO;AAEb,OAAO,MAAMC,KAA4B;IACvCD;IACAE,QAAQ,kBACN,KAACJ;YAAWK,QAAQH;sBAClB,cAAA,KAACH;;IAGLO,SAASL;AACX,EAAC"}
+{"version":3,"sources":["../../../../src/field/elements/ul/index.tsx"],"sourcesContent":["import type { RichTextCustomElement } from '../../../types.js'\n\nconst name = 'ul'\n\nexport const ul: RichTextCustomElement = {\n  name,\n  Button: {\n    clientProps: {\n      format: name,\n    },\n    path: '@payloadcms/richtext-slate/client#ULElementButton',\n  },\n  Element: '@payloadcms/richtext-slate/client#UnorderedListElement',\n}\n"],"names":["name","ul","Button","clientProps","format","path","Element"],"mappings":"AAEA,MAAMA,OAAO;AAEb,OAAO,MAAMC,KAA4B;IACvCD;IACAE,QAAQ;QACNC,aAAa;YACXC,QAAQJ;QACV;QACAK,MAAM;IACR;IACAC,SAAS;AACX,EAAC"}

package/dist/field/elements/upload/Button/index.d.ts

@@ -4,6 +4,6 @@ type ButtonProps = {
     enabledCollectionSlugs: string[];
     path: string;
 };
-export declare const Button: (props: ButtonProps) => React.ReactNode;
+export declare const UploadElementButton: (props: ButtonProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/field/elements/upload/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/upload/Button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAOpD,OAAO,cAAc,CAAA;AAmBrB,KAAK,WAAW,GAAG;IACjB,sBAAsB,EAAE,MAAM,EAAE,CAAA;IAChC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AA4CD,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,KAAK,CAAC,SAMjD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/upload/Button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAOpD,OAAO,cAAc,CAAA;AAmBrB,KAAK,WAAW,GAAG;IACjB,sBAAsB,EAAE,MAAM,EAAE,CAAA;IAChC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AA4CD,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,KAAK,CAAC,SAM9D,CAAA"}

package/dist/field/elements/upload/Button/index.js

@@ -63,7 +63,7 @@ const UploadButton = ({ enabledCollectionSlugs })=>{
         ]
     });
 };
-export const Button = (props)=>{
+export const UploadElementButton = (props)=>{
     return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
         ...props,
         uploads: true,

package/dist/field/elements/upload/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/upload/Button/index.tsx"],"sourcesContent":["'use client'\n\nimport { useListDrawer, useTranslation } from '@payloadcms/ui'\nimport React, { Fragment, useCallback } from 'react'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport { UploadIcon } from '../../../icons/Upload/index.js'\nimport { ElementButton } from '../../Button.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport { injectVoidElement } from '../../injectVoid.js'\nimport './index.scss'\n\nconst baseClass = 'upload-rich-text-button'\n\nconst insertUpload = (editor, { relationTo, value }) => {\n  const text = { text: ' ' }\n\n  const upload = {\n    type: 'upload',\n    children: [text],\n    relationTo,\n    value,\n  }\n\n  injectVoidElement(editor, upload)\n\n  ReactEditor.focus(editor)\n}\n\ntype ButtonProps = {\n  enabledCollectionSlugs: string[]\n  path: string\n}\n\nconst UploadButton: React.FC<ButtonProps> = ({ enabledCollectionSlugs }) => {\n  const { t } = useTranslation()\n  const editor = useSlate()\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    uploads: true,\n  })\n\n  const onSelect = useCallback(\n    ({ collectionSlug, docID }) => {\n      insertUpload(editor, {\n        relationTo: collectionSlug,\n        value: {\n          id: docID,\n        },\n      })\n      closeDrawer()\n    },\n    [editor, closeDrawer],\n  )\n\n  return (\n    <Fragment>\n      <ListDrawerToggler>\n        <ElementButton\n          className={baseClass}\n          el=\"div\"\n          format=\"upload\"\n          onClick={() => {\n            // do nothing\n          }}\n          tooltip={t('fields:addUpload')}\n        >\n          <UploadIcon />\n        </ElementButton>\n      </ListDrawerToggler>\n      <ListDrawer onSelect={onSelect} />\n    </Fragment>\n  )\n}\n\nexport const Button = (props: ButtonProps): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <UploadButton {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["useListDrawer","useTranslation","React","Fragment","useCallback","ReactEditor","useSlate","UploadIcon","ElementButton","EnabledRelationshipsCondition","injectVoidElement","baseClass","insertUpload","editor","relationTo","value","text","upload","type","children","focus","UploadButton","enabledCollectionSlugs","t","ListDrawer","ListDrawerToggler","closeDrawer","collectionSlugs","uploads","onSelect","collectionSlug","docID","id","className","el","format","onClick","tooltip","Button","props"],"mappings":"AAAA;;AAEA,SAASA,aAAa,EAAEC,cAAc,QAAQ,iBAAgB;AAC9D,OAAOC,SAASC,QAAQ,EAAEC,WAAW,QAAQ,QAAO;AACpD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,cAAa;AAEnD,SAASC,UAAU,QAAQ,iCAAgC;AAC3D,SAASC,aAAa,QAAQ,kBAAiB;AAC/C,SAASC,6BAA6B,QAAQ,yCAAwC;AACtF,SAASC,iBAAiB,QAAQ,sBAAqB;AACvD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,eAAe,CAACC,QAAQ,EAAEC,UAAU,EAAEC,KAAK,EAAE;IACjD,MAAMC,OAAO;QAAEA,MAAM;IAAI;IAEzB,MAAMC,SAAS;QACbC,MAAM;QACNC,UAAU;YAACH;SAAK;QAChBF;QACAC;IACF;IAEAL,kBAAkBG,QAAQI;IAE1BZ,YAAYe,KAAK,CAACP;AACpB;AAOA,MAAMQ,eAAsC,CAAC,EAAEC,sBAAsB,EAAE;IACrE,MAAM,EAAEC,CAAC,EAAE,GAAGtB;IACd,MAAMY,SAASP;IAEf,MAAM,CAACkB,YAAYC,mBAAmB,EAAEC,WAAW,EAAE,CAAC,GAAG1B,cAAc;QACrE2B,iBAAiBL;QACjBM,SAAS;IACX;IAEA,MAAMC,WAAWzB,YACf,CAAC,EAAE0B,cAAc,EAAEC,KAAK,EAAE;QACxBnB,aAAaC,QAAQ;YACnBC,YAAYgB;YACZf,OAAO;gBACLiB,IAAID;YACN;QACF;QACAL;IACF,GACA;QAACb;QAAQa;KAAY;IAGvB,qBACE,MAACvB;;0BACC,KAACsB;0BACC,cAAA,KAACjB;oBACCyB,WAAWtB;oBACXuB,IAAG;oBACHC,QAAO;oBACPC,SAAS;oBACP,aAAa;oBACf;oBACAC,SAASd,EAAE;8BAEX,cAAA,KAAChB;;;0BAGL,KAACiB;gBAAWK,UAAUA;;;;AAG5B;AAEA,OAAO,MAAMS,SAAS,CAACC;IACrB,qBACE,KAAC9B;QAA+B,GAAG8B,KAAK;QAAEX,OAAO;kBAC/C,cAAA,KAACP;YAAc,GAAGkB,KAAK;;;AAG7B,EAAC"}
+{"version":3,"sources":["../../../../../src/field/elements/upload/Button/index.tsx"],"sourcesContent":["'use client'\n\nimport { useListDrawer, useTranslation } from '@payloadcms/ui'\nimport React, { Fragment, useCallback } from 'react'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport { UploadIcon } from '../../../icons/Upload/index.js'\nimport { ElementButton } from '../../Button.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport { injectVoidElement } from '../../injectVoid.js'\nimport './index.scss'\n\nconst baseClass = 'upload-rich-text-button'\n\nconst insertUpload = (editor, { relationTo, value }) => {\n  const text = { text: ' ' }\n\n  const upload = {\n    type: 'upload',\n    children: [text],\n    relationTo,\n    value,\n  }\n\n  injectVoidElement(editor, upload)\n\n  ReactEditor.focus(editor)\n}\n\ntype ButtonProps = {\n  enabledCollectionSlugs: string[]\n  path: string\n}\n\nconst UploadButton: React.FC<ButtonProps> = ({ enabledCollectionSlugs }) => {\n  const { t } = useTranslation()\n  const editor = useSlate()\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    uploads: true,\n  })\n\n  const onSelect = useCallback(\n    ({ collectionSlug, docID }) => {\n      insertUpload(editor, {\n        relationTo: collectionSlug,\n        value: {\n          id: docID,\n        },\n      })\n      closeDrawer()\n    },\n    [editor, closeDrawer],\n  )\n\n  return (\n    <Fragment>\n      <ListDrawerToggler>\n        <ElementButton\n          className={baseClass}\n          el=\"div\"\n          format=\"upload\"\n          onClick={() => {\n            // do nothing\n          }}\n          tooltip={t('fields:addUpload')}\n        >\n          <UploadIcon />\n        </ElementButton>\n      </ListDrawerToggler>\n      <ListDrawer onSelect={onSelect} />\n    </Fragment>\n  )\n}\n\nexport const UploadElementButton = (props: ButtonProps): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <UploadButton {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["useListDrawer","useTranslation","React","Fragment","useCallback","ReactEditor","useSlate","UploadIcon","ElementButton","EnabledRelationshipsCondition","injectVoidElement","baseClass","insertUpload","editor","relationTo","value","text","upload","type","children","focus","UploadButton","enabledCollectionSlugs","t","ListDrawer","ListDrawerToggler","closeDrawer","collectionSlugs","uploads","onSelect","collectionSlug","docID","id","className","el","format","onClick","tooltip","UploadElementButton","props"],"mappings":"AAAA;;AAEA,SAASA,aAAa,EAAEC,cAAc,QAAQ,iBAAgB;AAC9D,OAAOC,SAASC,QAAQ,EAAEC,WAAW,QAAQ,QAAO;AACpD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,cAAa;AAEnD,SAASC,UAAU,QAAQ,iCAAgC;AAC3D,SAASC,aAAa,QAAQ,kBAAiB;AAC/C,SAASC,6BAA6B,QAAQ,yCAAwC;AACtF,SAASC,iBAAiB,QAAQ,sBAAqB;AACvD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,eAAe,CAACC,QAAQ,EAAEC,UAAU,EAAEC,KAAK,EAAE;IACjD,MAAMC,OAAO;QAAEA,MAAM;IAAI;IAEzB,MAAMC,SAAS;QACbC,MAAM;QACNC,UAAU;YAACH;SAAK;QAChBF;QACAC;IACF;IAEAL,kBAAkBG,QAAQI;IAE1BZ,YAAYe,KAAK,CAACP;AACpB;AAOA,MAAMQ,eAAsC,CAAC,EAAEC,sBAAsB,EAAE;IACrE,MAAM,EAAEC,CAAC,EAAE,GAAGtB;IACd,MAAMY,SAASP;IAEf,MAAM,CAACkB,YAAYC,mBAAmB,EAAEC,WAAW,EAAE,CAAC,GAAG1B,cAAc;QACrE2B,iBAAiBL;QACjBM,SAAS;IACX;IAEA,MAAMC,WAAWzB,YACf,CAAC,EAAE0B,cAAc,EAAEC,KAAK,EAAE;QACxBnB,aAAaC,QAAQ;YACnBC,YAAYgB;YACZf,OAAO;gBACLiB,IAAID;YACN;QACF;QACAL;IACF,GACA;QAACb;QAAQa;KAAY;IAGvB,qBACE,MAACvB;;0BACC,KAACsB;0BACC,cAAA,KAACjB;oBACCyB,WAAWtB;oBACXuB,IAAG;oBACHC,QAAO;oBACPC,SAAS;oBACP,aAAa;oBACf;oBACAC,SAASd,EAAE;8BAEX,cAAA,KAAChB;;;0BAGL,KAACiB;gBAAWK,UAAUA;;;;AAG5B;AAEA,OAAO,MAAMS,sBAAsB,CAACC;IAClC,qBACE,KAAC9B;QAA+B,GAAG8B,KAAK;QAAEX,OAAO;kBAC/C,cAAA,KAACP;YAAc,GAAGkB,KAAK;;;AAG7B,EAAC"}

package/dist/field/elements/upload/Element/UploadDrawer/index.d.ts

@@ -1,14 +1,12 @@
-import type { ClientCollectionConfig, FormFieldBase } from 'payload';
+import type { ClientCollectionConfig } from 'payload';
 import React from 'react';
+import type { LoadedSlateFieldProps } from '../../../../types.js';
 import type { UploadElementType } from '../../types.js';
 export declare const UploadDrawer: React.FC<{
-    drawerSlug: string;
-    element: UploadElementType;
-    fieldProps: {
-        name: string;
-        richTextComponentMap: Map<string, React.ReactNode>;
-    } & FormFieldBase;
-    relatedCollection: ClientCollectionConfig;
-    schemaPath: string;
+    readonly drawerSlug: string;
+    readonly element: UploadElementType;
+    readonly fieldProps: LoadedSlateFieldProps;
+    readonly relatedCollection: ClientCollectionConfig;
+    readonly schemaPath: string;
 }>;
 //# sourceMappingURL=index.d.ts.map

package/dist/field/elements/upload/Element/UploadDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAiBpE,OAAO,KAA2C,MAAM,OAAO,CAAA;AAI/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIvD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,iBAAiB,CAAA;IAC1B,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,GAAG,aAAa,CAAA;IACjB,iBAAiB,EAAE,sBAAsB,CAAA;IACzC,UAAU,EAAE,MAAM,CAAA;CACnB,CAyGA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAiBrD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAI/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIvD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAA;IACnC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAA;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,sBAAsB,CAAA;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CA2GA,CAAA"}

package/dist/field/elements/upload/Element/UploadDrawer/index.js

@@ -17,10 +17,10 @@ export const UploadDrawer = (props)=>{
     const { closeModal } = useModal();
     const { id, collectionSlug } = useDocumentInfo();
     const [initialState, setInitialState] = useState({});
-    const { richTextComponentMap } = fieldProps;
+    const { field: { richTextComponentMap } } = fieldProps;
     const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`;
-    const fieldMap = richTextComponentMap.get(relatedFieldSchemaPath);
-    const config = useConfig();
+    const fields = richTextComponentMap.get(relatedFieldSchemaPath);
+    const { config } = useConfig();
     const handleUpdateEditData = useCallback((_, data)=>{
         const newNode = {
             fields: data
@@ -99,7 +99,7 @@ export const UploadDrawer = (props)=>{
             onSubmit: handleUpdateEditData,
             children: [
                 /*#__PURE__*/ _jsx(RenderFields, {
-                    fieldMap: Array.isArray(fieldMap) ? fieldMap : [],
+                    fields: Array.isArray(fields) ? fields : [],
                     path: "",
                     readOnly: false,
                     schemaPath: ""

package/dist/field/elements/upload/Element/UploadDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\nimport type { ClientCollectionConfig, FormFieldBase } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Drawer,\n  Form,\n  FormSubmit,\n  RenderFields,\n  useAuth,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { deepCopyObject } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useSlateStatic } from 'slate-react'\n\nimport type { UploadElementType } from '../../types.js'\n\nimport { uploadFieldsSchemaPath } from '../../shared.js'\n\nexport const UploadDrawer: React.FC<{\n  drawerSlug: string\n  element: UploadElementType\n  fieldProps: {\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  } & FormFieldBase\n  relatedCollection: ClientCollectionConfig\n  schemaPath: string\n}> = (props) => {\n  const editor = useSlateStatic()\n\n  const { drawerSlug, element, fieldProps, relatedCollection, schemaPath } = props\n\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { user } = useAuth()\n  const { closeModal } = useModal()\n  const { id, collectionSlug } = useDocumentInfo()\n  const [initialState, setInitialState] = useState({})\n  const { richTextComponentMap } = fieldProps\n\n  const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n  const fieldMap = richTextComponentMap.get(relatedFieldSchemaPath)\n\n  const config = useConfig()\n\n  const handleUpdateEditData = useCallback(\n    (_, data) => {\n      const newNode = {\n        fields: data,\n      }\n\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(editor, newNode, { at: elementPath })\n      closeModal(drawerSlug)\n    },\n    [closeModal, editor, element, drawerSlug],\n  )\n\n  useEffect(() => {\n    const data = deepCopyObject(element?.fields || {})\n\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          collectionSlug,\n          data,\n          operation: 'update',\n          schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n        },\n        serverURL: config.serverURL,\n      })\n\n      setInitialState(state)\n    }\n\n    void awaitInitialState()\n  }, [\n    config,\n    element?.fields,\n    user,\n    locale,\n    t,\n    collectionSlug,\n    id,\n    schemaPath,\n    relatedCollection.slug,\n  ])\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: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n        },\n        serverURL: config.serverURL,\n      })\n    },\n\n    [config.routes.api, config.serverURL, relatedCollection.slug, schemaPath, id],\n  )\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      title={t('general:editLabel', {\n        label: getTranslation(relatedCollection.labels.singular, i18n),\n      })}\n    >\n      <Form\n        beforeSubmit={[onChange]}\n        disableValidationOnSubmit\n        initialState={initialState}\n        onChange={[onChange]}\n        onSubmit={handleUpdateEditData}\n      >\n        <RenderFields\n          fieldMap={Array.isArray(fieldMap) ? fieldMap : []}\n          path=\"\"\n          readOnly={false}\n          schemaPath=\"\"\n        />\n        <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n      </Form>\n    </Drawer>\n  )\n}\n"],"names":["getTranslation","Drawer","Form","FormSubmit","RenderFields","useAuth","useConfig","useDocumentInfo","useLocale","useModal","useTranslation","getFormState","deepCopyObject","React","useCallback","useEffect","useState","Transforms","ReactEditor","useSlateStatic","uploadFieldsSchemaPath","UploadDrawer","props","editor","drawerSlug","element","fieldProps","relatedCollection","schemaPath","i18n","t","code","locale","user","closeModal","id","collectionSlug","initialState","setInitialState","richTextComponentMap","relatedFieldSchemaPath","slug","fieldMap","get","config","handleUpdateEditData","_","data","newNode","fields","elementPath","findPath","setNodes","at","awaitInitialState","state","apiRoute","routes","api","body","operation","serverURL","onChange","formState","prevFormState","title","label","labels","singular","beforeSubmit","disableValidationOnSubmit","onSubmit","Array","isArray","path","readOnly"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Drawer,\n  Form,\n  FormSubmit,\n  RenderFields,\n  useAuth,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { deepCopyObject } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useSlateStatic } from 'slate-react'\n\nimport type { LoadedSlateFieldProps } from '../../../../types.js'\nimport type { UploadElementType } from '../../types.js'\n\nimport { uploadFieldsSchemaPath } from '../../shared.js'\n\nexport const UploadDrawer: React.FC<{\n  readonly drawerSlug: string\n  readonly element: UploadElementType\n  readonly fieldProps: LoadedSlateFieldProps\n  readonly relatedCollection: ClientCollectionConfig\n  readonly schemaPath: string\n}> = (props) => {\n  const editor = useSlateStatic()\n\n  const { drawerSlug, element, fieldProps, relatedCollection, schemaPath } = props\n\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { user } = useAuth()\n  const { closeModal } = useModal()\n  const { id, collectionSlug } = useDocumentInfo()\n  const [initialState, setInitialState] = useState({})\n  const {\n    field: { richTextComponentMap },\n  } = fieldProps\n\n  const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n  const fields = richTextComponentMap.get(relatedFieldSchemaPath)\n\n  const { config } = useConfig()\n\n  const handleUpdateEditData = useCallback(\n    (_, data) => {\n      const newNode = {\n        fields: data,\n      }\n\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(editor, newNode, { at: elementPath })\n      closeModal(drawerSlug)\n    },\n    [closeModal, editor, element, drawerSlug],\n  )\n\n  useEffect(() => {\n    const data = deepCopyObject(element?.fields || {})\n\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          collectionSlug,\n          data,\n          operation: 'update',\n          schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n        },\n        serverURL: config.serverURL,\n      })\n\n      setInitialState(state)\n    }\n\n    void awaitInitialState()\n  }, [\n    config,\n    element?.fields,\n    user,\n    locale,\n    t,\n    collectionSlug,\n    id,\n    schemaPath,\n    relatedCollection.slug,\n  ])\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: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n        },\n        serverURL: config.serverURL,\n      })\n    },\n\n    [config.routes.api, config.serverURL, relatedCollection.slug, schemaPath, id],\n  )\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      title={t('general:editLabel', {\n        label: getTranslation(relatedCollection.labels.singular, i18n),\n      })}\n    >\n      <Form\n        beforeSubmit={[onChange]}\n        disableValidationOnSubmit\n        initialState={initialState}\n        onChange={[onChange]}\n        onSubmit={handleUpdateEditData}\n      >\n        <RenderFields\n          fields={Array.isArray(fields) ? fields : []}\n          path=\"\"\n          readOnly={false}\n          schemaPath=\"\"\n        />\n        <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n      </Form>\n    </Drawer>\n  )\n}\n"],"names":["getTranslation","Drawer","Form","FormSubmit","RenderFields","useAuth","useConfig","useDocumentInfo","useLocale","useModal","useTranslation","getFormState","deepCopyObject","React","useCallback","useEffect","useState","Transforms","ReactEditor","useSlateStatic","uploadFieldsSchemaPath","UploadDrawer","props","editor","drawerSlug","element","fieldProps","relatedCollection","schemaPath","i18n","t","code","locale","user","closeModal","id","collectionSlug","initialState","setInitialState","field","richTextComponentMap","relatedFieldSchemaPath","slug","fields","get","config","handleUpdateEditData","_","data","newNode","elementPath","findPath","setNodes","at","awaitInitialState","state","apiRoute","routes","api","body","operation","serverURL","onChange","formState","prevFormState","title","label","labels","singular","beforeSubmit","disableValidationOnSubmit","onSubmit","Array","isArray","path","readOnly"],"mappings":"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"}

package/dist/field/elements/upload/Element/index.d.ts

@@ -5,6 +5,6 @@ type Props = {
     name: string;
     richTextComponentMap: Map<string, React.ReactNode>;
 } & FormFieldBase;
-export declare const Element: (props: Props) => React.ReactNode;
+export declare const UploadElement: (props: Props) => React.ReactNode;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/field/elements/upload/Element/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAe5C,OAAO,KAA4C,MAAM,OAAO,CAAA;AAUhE,OAAO,cAAc,CAAA;AAQrB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,GAAG,aAAa,CAAA;AAwLjB,eAAO,MAAM,OAAO,UAAW,KAAK,KAAG,KAAK,CAAC,SAM5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA0B,aAAa,EAAE,MAAM,SAAS,CAAA;AAcpE,OAAO,KAA4C,MAAM,OAAO,CAAA;AAUhE,OAAO,cAAc,CAAA;AAQrB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,GAAG,aAAa,CAAA;AA0LjB,eAAO,MAAM,aAAa,UAAW,KAAK,KAAG,KAAK,CAAC,SAMlD,CAAA"}

package/dist/field/elements/upload/Element/index.js

@@ -14,9 +14,9 @@ const baseClass = 'rich-text-upload';
 const initialParams = {
     depth: 0
 };
-const UploadElement = ({ enabledCollectionSlugs })=>{
+const UploadElementComponent = ({ enabledCollectionSlugs })=>{
     const { attributes, children, element: { relationTo, value }, element, fieldProps, schemaPath } = useElement();
-    const { collections, routes: { api }, serverURL } = useConfig();
+    const { config: { collections, routes: { api }, serverURL } } = useConfig();
     const { i18n, t } = useTranslation();
     const [cacheBust, dispatchCacheBust] = useReducer((state)=>state + 1, 0);
     const [relatedCollection, setRelatedCollection] = useState(()=>collections.find((coll)=>coll.slug === relationTo));
@@ -95,7 +95,7 @@ const UploadElement = ({ enabledCollectionSlugs })=>{
         collections
     ]);
     const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`;
-    const customFieldsMap = fieldProps.richTextComponentMap.get(relatedFieldSchemaPath);
+    const customFieldsMap = fieldProps.field.richTextComponentMap.get(relatedFieldSchemaPath);
     return /*#__PURE__*/ _jsxs("div", {
         className: [
             baseClass,
@@ -129,7 +129,7 @@ const UploadElement = ({ enabledCollectionSlugs })=>{
                                         children: [
                                             Boolean(customFieldsMap) && /*#__PURE__*/ _jsx(DrawerToggler, {
                                                 className: `${baseClass}__upload-drawer-toggler`,
-                                                disabled: fieldProps?.readOnly,
+                                                disabled: fieldProps?.field?.admin?.readOnly,
                                                 slug: drawerSlug,
                                                 children: /*#__PURE__*/ _jsx(Button, {
                                                     buttonStyle: "icon-label",
@@ -144,10 +144,10 @@ const UploadElement = ({ enabledCollectionSlugs })=>{
                                             }),
                                             /*#__PURE__*/ _jsx(ListDrawerToggler, {
                                                 className: `${baseClass}__list-drawer-toggler`,
-                                                disabled: fieldProps?.readOnly,
+                                                disabled: fieldProps?.field?.admin?.readOnly,
                                                 children: /*#__PURE__*/ _jsx(Button, {
                                                     buttonStyle: "icon-label",
-                                                    disabled: fieldProps?.readOnly,
+                                                    disabled: fieldProps?.field?.admin?.readOnly,
                                                     el: "div",
                                                     icon: "swap",
                                                     onClick: ()=>{
@@ -160,7 +160,7 @@ const UploadElement = ({ enabledCollectionSlugs })=>{
                                             /*#__PURE__*/ _jsx(Button, {
                                                 buttonStyle: "icon-label",
                                                 className: `${baseClass}__removeButton`,
-                                                disabled: fieldProps?.readOnly,
+                                                disabled: fieldProps?.field?.admin?.readOnly,
                                                 icon: "x",
                                                 onClick: (e)=>{
                                                     e.preventDefault();
@@ -203,11 +203,11 @@ const UploadElement = ({ enabledCollectionSlugs })=>{
         ]
     });
 };
-export const Element = (props)=>{
+export const UploadElement = (props)=>{
     return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
         ...props,
         uploads: true,
-        children: /*#__PURE__*/ _jsx(UploadElement, {
+        children: /*#__PURE__*/ _jsx(UploadElementComponent, {
             ...props
         })
     });