@payloadcms/richtext-lexical 3.0.0-beta.49 → 3.0.0-beta.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- import{useAuth as f,useConfig as D,useEntityVisibility as g}from"@payloadcms/ui/client";import*as i from"react";var x=(e,t)=>e.filter(({slug:o,admin:{enableRichTextRelationship:a},upload:n})=>t.visibleEntities.collections.includes(o)?t?.uploads?a&&!!n:n?!1:a:!1),S=e=>{let{children:t,uploads:o=!1,...a}=e,{collections:n}=D(),{user:d}=f(),{visibleEntities:u}=g(),[r]=i.useState(()=>x(n,{uploads:o,user:d,visibleEntities:u}).map(({slug:m})=>m));return r.length?i.cloneElement(t,{...a,enabledCollectionSlugs:r}):null};import{createCommand as y}from"lexical";var T=y("INSERT_UPLOAD_WITH_DRAWER_COMMAND");import{DecoratorBlockNode as C}from"@lexical/react/LexicalDecoratorBlockNode.js";import s from"bson-objectid";import{$applyNodeReplacement as _}from"lexical";import*as p from"react";import{jsx as b}from"react/jsx-runtime";var U=p.lazy(()=>import("./component-GR6KYTLO.js").then(e=>({default:e.UploadComponent})));function E(e){return e.parentElement!=null&&e.parentElement.tagName==="LI"&&e.previousSibling===null&&e.getAttribute("aria-roledescription")==="checkbox"}function O(e){if(e.hasAttribute("data-lexical-upload-relation-to")&&e.hasAttribute("data-lexical-upload-id")){let o=e.getAttribute("data-lexical-upload-id"),a=e.getAttribute("data-lexical-upload-relation-to");if(o!=null&&a!=null)return{node:c({data:{fields:{},relationTo:a,value:o}})}}let t=e;return t.src.startsWith("file:///")||E(t),null}var l=class e extends C{__data;constructor({data:t,format:o,key:a}){super(o,a),this.__data=t}static clone(t){return new e({data:t.__data,format:t.__format,key:t.__key})}static getType(){return"upload"}static importDOM(){return{img:t=>({conversion:O,priority:0})}}static importJSON(t){t.version===1&&t?.value?.id&&(t.value=t.value.id),t.version===2&&!t?.id&&(t.id=new s.default().toHexString(),t.version=3);let o={id:t.id,fields:t.fields,relationTo:t.relationTo,value:t.value},a=c({data:o});return a.setFormat(t.format),a}static isInline(){return!1}decorate(){return b(U,{data:this.__data,format:this.__format,nodeKey:this.getKey()})}exportDOM(){let t=document.createElement("img");return t.setAttribute("data-lexical-upload-id",String(this.__data?.value)),t.setAttribute("data-lexical-upload-relation-to",this.__data?.relationTo),{element:t}}exportJSON(){return{...super.exportJSON(),...this.getData(),type:this.getType(),version:3}}getData(){return this.getLatest().__data}setData(t){let o=this.getWritable();o.__data=t}updateDOM(){return!1}};function c({data:e}){return e?.id||(e.id=new s.default().toHexString()),_(new l({data:e}))}function I(e){return e instanceof l}export{S as a,T as b,l as c,c as d,I as e};
2
- //# sourceMappingURL=chunk-33ZTAHVL.js.map
1
+ import{useAuth as f,useConfig as D,useEntityVisibility as g}from"@payloadcms/ui/client";import*as i from"react";var x=(e,t)=>e.filter(({slug:o,admin:{enableRichTextRelationship:a},upload:n})=>t.visibleEntities.collections.includes(o)?t?.uploads?a&&!!n:n?!1:a:!1),S=e=>{let{children:t,uploads:o=!1,...a}=e,{collections:n}=D(),{user:d}=f(),{visibleEntities:u}=g(),[r]=i.useState(()=>x(n,{uploads:o,user:d,visibleEntities:u}).map(({slug:m})=>m));return r.length?i.cloneElement(t,{...a,enabledCollectionSlugs:r}):null};import{createCommand as y}from"lexical";var T=y("INSERT_UPLOAD_WITH_DRAWER_COMMAND");import{DecoratorBlockNode as C}from"@lexical/react/LexicalDecoratorBlockNode.js";import s from"bson-objectid";import{$applyNodeReplacement as _}from"lexical";import*as p from"react";import{jsx as b}from"react/jsx-runtime";var U=p.lazy(()=>import("./component-Z34HXRX3.js").then(e=>({default:e.UploadComponent})));function E(e){return e.parentElement!=null&&e.parentElement.tagName==="LI"&&e.previousSibling===null&&e.getAttribute("aria-roledescription")==="checkbox"}function O(e){if(e.hasAttribute("data-lexical-upload-relation-to")&&e.hasAttribute("data-lexical-upload-id")){let o=e.getAttribute("data-lexical-upload-id"),a=e.getAttribute("data-lexical-upload-relation-to");if(o!=null&&a!=null)return{node:c({data:{fields:{},relationTo:a,value:o}})}}let t=e;return t.src.startsWith("file:///")||E(t),null}var l=class e extends C{__data;constructor({data:t,format:o,key:a}){super(o,a),this.__data=t}static clone(t){return new e({data:t.__data,format:t.__format,key:t.__key})}static getType(){return"upload"}static importDOM(){return{img:t=>({conversion:O,priority:0})}}static importJSON(t){t.version===1&&t?.value?.id&&(t.value=t.value.id),t.version===2&&!t?.id&&(t.id=new s.default().toHexString(),t.version=3);let o={id:t.id,fields:t.fields,relationTo:t.relationTo,value:t.value},a=c({data:o});return a.setFormat(t.format),a}static isInline(){return!1}decorate(){return b(U,{data:this.__data,format:this.__format,nodeKey:this.getKey()})}exportDOM(){let t=document.createElement("img");return t.setAttribute("data-lexical-upload-id",String(this.__data?.value)),t.setAttribute("data-lexical-upload-relation-to",this.__data?.relationTo),{element:t}}exportJSON(){return{...super.exportJSON(),...this.getData(),type:this.getType(),version:3}}getData(){return this.getLatest().__data}setData(t){let o=this.getWritable();o.__data=t}updateDOM(){return!1}};function c({data:e}){return e?.id||(e.id=new s.default().toHexString()),_(new l({data:e}))}function I(e){return e instanceof l}export{S as a,T as b,l as c,c as d,I as e};
2
+ //# sourceMappingURL=chunk-M6MN4CA5.js.map
@@ -0,0 +1,2 @@
1
+ "use client";import{a as j,b as W,e as Y}from"./chunk-M6MN4CA5.js";import{b as N}from"./chunk-Y5455JF3.js";import{useLexicalComposerContext as Ce}from"@lexical/react/LexicalComposerContext.js";import{useLexicalNodeSelection as ge}from"@lexical/react/useLexicalNodeSelection.js";import{mergeRegister as ve}from"@lexical/utils";import{getTranslation as ye}from"@payloadcms/translations";import{Button as T,DrawerToggler as De,File as be,useConfig as he,useDocumentDrawer as Re,useDrawerSlug as Se,usePayloadAPI as _e,useTranslation as Ee}from"@payloadcms/ui/client";import{$getNodeByKey as z,$getSelection as we,$isNodeSelection as Ne,CLICK_COMMAND as Ue,COMMAND_PRIORITY_LOW as O,KEY_BACKSPACE_COMMAND as Pe,KEY_DELETE_COMMAND as Fe}from"lexical";import{useCallback as U,useEffect as $e,useReducer as xe,useRef as Me,useState as Le}from"react";import{useLexicalComposerContext as X}from"@lexical/react/LexicalComposerContext.js";import{getTranslation as Z}from"@payloadcms/translations";import{Drawer as ee,Form as te,FormSubmit as oe,RenderFields as ae,useConfig as re,useDocumentInfo as le,useFieldProps as ie,useModal as ne,useTranslation as se}from"@payloadcms/ui/client";import{getFormState as H}from"@payloadcms/ui/shared";import{$getNodeByKey as de}from"lexical";import{deepCopyObject as ce}from"payload/shared";import{useCallback as V,useEffect as me,useState as pe}from"react";import{v4 as ue}from"uuid";import{jsx as L,jsxs as fe}from"react/jsx-runtime";var q=d=>{let{data:{fields:P,relationTo:F,value:C},drawerSlug:a,nodeKey:R,relatedCollection:g}=d,[S]=X(),{closeModal:m}=ne(),{i18n:r,t:l}=se(),{id:n}=le(),{schemaPath:v}=ie(),i=re(),[p,$]=pe(!1),{field:{richTextComponentMap:y}}=N(),_=`feature.upload.fields.${g.slug}`,c=`${v}.feature.upload.${g.slug}`,s=y.get(_);me(()=>{(async()=>{let b=await H({apiRoute:i.routes.api,body:{id:n,data:ce(P||{}),operation:"update",schemaPath:c},serverURL:i.serverURL});$(b)})()},[i.routes.api,i.serverURL,c,n,P]);let x=V(async({formState:D})=>await H({apiRoute:i.routes.api,body:{id:n,formState:D,operation:"update",schemaPath:c},serverURL:i.serverURL}),[i.routes.api,i.serverURL,c,n]),E=V((D,b)=>{S.update(()=>{let u=de(R);if(u){let f={...u.getData(),fields:b};u.setData(f)}}),m(a)},[m,S,a,R]);return L(ee,{slug:a,title:l("general:editLabel",{label:Z(g.labels.singular,r)}),children:p!==!1&&fe(te,{beforeSubmit:[x],disableValidationOnSubmit:!0,fields:s,initialState:p,onChange:[x],onSubmit:E,uuid:ue(),children:[L(ae,{fieldMap:Array.isArray(s)?s:[],forceRender:!0,path:"",readOnly:!1,schemaPath:c}),L(oe,{children:l("fields:saveChanges")})]})})};import{jsx as e,jsxs as h}from"react/jsx-runtime";var o="lexical-upload",G={depth:0},Te=d=>{let{data:{fields:P,relationTo:F,value:C},nodeKey:a}=d,{collections:R,routes:{api:g},serverURL:S}=he(),m=Me(null),[r]=Ce(),[l,n,v]=ge(a),{editorConfig:i,field:p}=N(),{i18n:$,t:y}=Ee(),[_,c]=xe(t=>t+1,0),[s,x]=Le(()=>R.find(t=>t.slug===F)),E=Se("upload-drawer"),[D,b,{closeDrawer:u}]=Re({id:C,collectionSlug:s.slug}),[{data:f},{setParams:A}]=_e(`${S}${g}/${s.slug}/${C}`,{initialParams:G}),K=f?.thumbnailURL||f?.url,J=U(()=>{r.update(()=>{z(a).remove()})},[r,a]),Q=U(t=>{A({...G,cacheBust:_}),c(),u()},[A,_,u]),M=U(t=>{if(l&&Ne(we())){t.preventDefault();let k=z(a);if(Y(k))return k.remove(),!0}return!1},[l,a]),I=U(t=>{let w=t;return w.target===m.current||m.current?.contains(w.target)?(w.shiftKey?n(!l):l||(v(),n(!0)),!0):!1},[l,n,v]);$e(()=>ve(r.registerCommand(Ue,I,O),r.registerCommand(Fe,M,O),r.registerCommand(Pe,M,O)),[v,r,l,a,M,n,I]);let B=(i?.resolvedFeatureMap?.get("upload")?.clientFeatureProps).collections?.[s.slug]?.hasExtraFields;return h("div",{className:[o,l&&`${o}--selected`].filter(Boolean).join(" "),contentEditable:!1,ref:m,children:[h("div",{className:`${o}__card`,children:[h("div",{className:`${o}__topRow`,children:[e("div",{className:`${o}__thumbnail`,children:K?e("img",{alt:f?.filename,"data-lexical-upload-id":C,"data-lexical-upload-relation-to":F,src:K}):e(be,{})}),h("div",{className:`${o}__topRowRightPanel`,children:[e("div",{className:`${o}__collectionLabel`,children:ye(s.labels.singular,$)}),r.isEditable()&&h("div",{className:`${o}__actions`,children:[B?e(De,{className:`${o}__upload-drawer-toggler`,disabled:p?.readOnly,slug:E,children:e(T,{buttonStyle:"icon-label",el:"div",icon:"edit",onClick:t=>{t.preventDefault()},round:!0,tooltip:y("fields:editRelationship")})}):null,e(T,{buttonStyle:"icon-label",disabled:p?.readOnly,el:"div",icon:"swap",onClick:()=>{r.dispatchCommand(W,{replace:{nodeKey:a}})},round:!0,tooltip:y("fields:swapUpload")}),e(T,{buttonStyle:"icon-label",className:`${o}__removeButton`,disabled:p?.readOnly,icon:"x",onClick:t=>{t.preventDefault(),J()},round:!0,tooltip:y("fields:removeUpload")})]})]})]}),e("div",{className:`${o}__bottomRow`,children:e(b,{className:`${o}__doc-drawer-toggler`,children:e("strong",{children:f?.filename})})})]}),C&&e(D,{onSave:Q}),B?e(q,{drawerSlug:E,relatedCollection:s,...d}):null]})},nt=d=>e(j,{...d,uploads:!0,children:e(Te,{...d})});export{nt as UploadComponent};
2
+ //# sourceMappingURL=component-Z34HXRX3.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/field/features/upload/component/index.tsx", "../../../src/field/features/upload/component/ExtraFieldsDrawer/index.tsx"],
4
- "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/client'\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'\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 ?.clientFeatureProps 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", "'use client'\nimport type { FormProps } from '@payloadcms/ui/forms/Form'\nimport type { ClientCollectionConfig, FormState } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\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 useTranslation,\n} from '@payloadcms/ui/client'\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"],
5
- "mappings": "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",
6
- "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", "useCallback", "useEffect", "useReducer", "useRef", "useState", "useModal", "useLexicalComposerContext", "getTranslation", "Drawer", "Form", "FormSubmit", "RenderFields", "useConfig", "useDocumentInfo", "useFieldProps", "useTranslation", "getFormState", "$getNodeByKey", "deepCopyObject", "useCallback", "useEffect", "useState", "uuid", "jsx", "jsxs", "ExtraFieldsUploadDrawer", "props", "fields", "relationTo", "value", "drawerSlug", "nodeKey", "relatedCollection", "editor", "useLexicalComposerContext", "closeModal", "useModal", "i18n", "t", "useTranslation", "id", "useDocumentInfo", "schemaPath", "useFieldProps", "config", "useConfig", "initialState", "setInitialState", "useState", "richTextComponentMap", "useEditorConfigContext", "componentMapRenderedFieldsPath", "schemaFieldsPath", "fieldMap", "useEffect", "state", "getFormState", "deepCopyObject", "onChange", "useCallback", "prevFormState", "handleUpdateEditData", "_", "data", "uploadNode", "$getNodeByKey", "newData", "Drawer", "getTranslation", "Form", "uuid", "RenderFields", "FormSubmit", "jsx", "jsxs", "baseClass", "initialParams", "Component", "props", "fields", "relationTo", "value", "nodeKey", "collections", "api", "serverURL", "useConfig", "uploadRef", "useRef", "editor", "useLexicalComposerContext", "isSelected", "setSelected", "clearSelection", "useLexicalNodeSelection", "editorConfig", "field", "useEditorConfigContext", "i18n", "t", "useTranslation", "cacheBust", "dispatchCacheBust", "useReducer", "state", "relatedCollection", "setRelatedCollection", "useState", "coll", "drawerSlug", "useDrawerSlug", "DocumentDrawer", "DocumentDrawerToggler", "closeDrawer", "useDocumentDrawer", "data", "setParams", "usePayloadAPI", "thumbnailSRC", "removeUpload", "useCallback", "$getNodeByKey", "updateUpload", "json", "$onDelete", "payload", "$isNodeSelection", "$getSelection", "node", "$isUploadNode", "onClick", "event", "useEffect", "mergeRegister", "CLICK_COMMAND", "COMMAND_PRIORITY_LOW", "KEY_DELETE_COMMAND", "KEY_BACKSPACE_COMMAND", "hasExtraFields", "File", "getTranslation", "DrawerToggler", "Button", "e", "INSERT_UPLOAD_WITH_DRAWER_COMMAND", "ExtraFieldsUploadDrawer", "UploadComponent", "EnabledRelationshipsCondition"]
4
+ "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/client'\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'\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 ?.clientFeatureProps 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", "'use client'\nimport type { FormProps } from '@payloadcms/ui/forms/Form'\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/client'\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"],
5
+ "mappings": "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",
6
+ "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", "useCallback", "useEffect", "useReducer", "useRef", "useState", "useLexicalComposerContext", "getTranslation", "Drawer", "Form", "FormSubmit", "RenderFields", "useConfig", "useDocumentInfo", "useFieldProps", "useModal", "useTranslation", "getFormState", "$getNodeByKey", "deepCopyObject", "useCallback", "useEffect", "useState", "uuid", "jsx", "jsxs", "ExtraFieldsUploadDrawer", "props", "fields", "relationTo", "value", "drawerSlug", "nodeKey", "relatedCollection", "editor", "useLexicalComposerContext", "closeModal", "useModal", "i18n", "t", "useTranslation", "id", "useDocumentInfo", "schemaPath", "useFieldProps", "config", "useConfig", "initialState", "setInitialState", "useState", "richTextComponentMap", "useEditorConfigContext", "componentMapRenderedFieldsPath", "schemaFieldsPath", "fieldMap", "useEffect", "state", "getFormState", "deepCopyObject", "onChange", "useCallback", "prevFormState", "handleUpdateEditData", "_", "data", "uploadNode", "$getNodeByKey", "newData", "Drawer", "getTranslation", "Form", "uuid", "RenderFields", "FormSubmit", "jsx", "jsxs", "baseClass", "initialParams", "Component", "props", "fields", "relationTo", "value", "nodeKey", "collections", "api", "serverURL", "useConfig", "uploadRef", "useRef", "editor", "useLexicalComposerContext", "isSelected", "setSelected", "clearSelection", "useLexicalNodeSelection", "editorConfig", "field", "useEditorConfigContext", "i18n", "t", "useTranslation", "cacheBust", "dispatchCacheBust", "useReducer", "state", "relatedCollection", "setRelatedCollection", "useState", "coll", "drawerSlug", "useDrawerSlug", "DocumentDrawer", "DocumentDrawerToggler", "closeDrawer", "useDocumentDrawer", "data", "setParams", "usePayloadAPI", "thumbnailSRC", "removeUpload", "useCallback", "$getNodeByKey", "updateUpload", "json", "$onDelete", "payload", "$isNodeSelection", "$getSelection", "node", "$isUploadNode", "onClick", "event", "useEffect", "mergeRegister", "CLICK_COMMAND", "COMMAND_PRIORITY_LOW", "KEY_DELETE_COMMAND", "KEY_BACKSPACE_COMMAND", "hasExtraFields", "File", "getTranslation", "DrawerToggler", "Button", "e", "INSERT_UPLOAD_WITH_DRAWER_COMMAND", "ExtraFieldsUploadDrawer", "UploadComponent", "EnabledRelationshipsCondition"]
7
7
  }