@payloadcms/richtext-lexical 3.57.0-canary.7 → 3.57.0-internal.1d2ebbc

package/dist/exports/client/component-3PENNOM3.js

@@ -0,0 +1,2 @@
+"use client";import{a as S,b as R,c as $}from"./chunk-CYLMY5ZJ.js";import{a as x}from"./chunk-INBEEENE.js";import{a as N}from"./chunk-F26IQ5RE.js";import{b as p}from"./chunk-BZZVLW4U.js";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useLexicalComposerContext as X}from"@lexical/react/LexicalComposerContext.js";import{getTranslation as y}from"@payloadcms/translations";import{Button as h,formatDrawerSlug as Y,Thumbnail as Z,useConfig as ee,useEditDepth as te,usePayloadAPI as oe,useTranslation as ae}from"@payloadcms/ui";import{$getNodeByKey as E}from"lexical";import{isImage as le}from"payload/shared";import{useCallback as f,useId as re,useReducer as se,useRef as ie,useState as ne}from"react";var t="lexical-upload",P={depth:0},ce=i=>{let{data:{fields:T,relationTo:g,value:n},nodeKey:l}=i;if(typeof n=="object")throw new Error("Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.");let{config:{routes:{api:U},serverURL:L},getEntityConfig:F}=ee(),j=ie(null),{uuid:I}=p(),B=te(),[o]=X(),{editorConfig:k,fieldProps:{readOnly:u,schemaPath:A}}=p(),{i18n:b,t:c}=ae(),[_,K]=se(r=>r+1,0),[a]=ne(()=>F({collectionSlug:g})),M=re(),w=Y({slug:"lexical-upload-drawer-"+I+M,depth:B}),{toggleDrawer:O}=x(w,!0),{closeDocumentDrawer:D,DocumentDrawer:W,DocumentDrawerToggler:z}=N({id:n,collectionSlug:a.slug}),[{data:d},{setParams:C}]=oe(`${L}${U}/${a.slug}/${n}`,{initialParams:P}),H=d?.thumbnailURL||d?.url,q=f(()=>{o.update(()=>{E(l)?.remove()})},[o,l]),G=f(r=>{C({...P,cacheBust:_}),K(),D()},[C,_,D]),v=k?.resolvedFeatureMap?.get("upload")?.sanitizedClientFeatureProps.collections?.[a.slug]?.hasExtraFields,J=f((r,Q)=>{o.update(()=>{let m=E(l);if(m){let V={...m.getData(),fields:Q};m.setData(V)}})},[o,l]);return s("div",{className:t,contentEditable:!1,ref:j,children:[s("div",{className:`${t}__card`,children:[s("div",{className:`${t}__topRow`,children:[e("div",{className:`${t}__thumbnail`,children:e(Z,{collectionSlug:g,fileSrc:le(d?.mimeType)?H:null})}),s("div",{className:`${t}__topRowRightPanel`,children:[e("div",{className:`${t}__collectionLabel`,children:y(a.labels.singular,b)}),o.isEditable()&&s("div",{className:`${t}__actions`,children:[v?e(h,{buttonStyle:"icon-label",className:`${t}__upload-drawer-toggler`,disabled:u,el:"button",icon:"edit",onClick:()=>{O()},round:!0,tooltip:c("fields:editRelationship")}):null,e(h,{buttonStyle:"icon-label",className:`${t}__swap-drawer-toggler`,disabled:u,el:"button",icon:"swap",onClick:()=>{o.dispatchCommand($,{replace:{nodeKey:l}})},round:!0,tooltip:c("fields:swapUpload")}),e(h,{buttonStyle:"icon-label",className:`${t}__removeButton`,disabled:u,icon:"x",onClick:r=>{r.preventDefault(),q()},round:!0,tooltip:c("fields:removeUpload")})]})]})]}),e("div",{className:`${t}__bottomRow`,children:e(z,{className:`${t}__doc-drawer-toggler`,children:e("strong",{children:d?.filename})})})]}),n?e(W,{onSave:G}):null,v?e(S,{data:T,drawerSlug:w,drawerTitle:c("general:editLabel",{label:y(a.labels.singular,b)}),featureKey:"upload",handleDrawerSubmit:J,schemaPath:A,schemaPathSuffix:a.slug}):null]})},Se=i=>e(R,{...i,uploads:!0,children:e(ce,{...i})});export{Se as UploadComponent};
+//# sourceMappingURL=component-3PENNOM3.js.map

package/dist/exports/client/component-3PENNOM3.js.map

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