@payloadcms/richtext-lexical 3.69.0-internal.2883df2 → 3.69.0

package/dist/exports/client/component-YQ22OGQW.js

@@ -0,0 +1,2 @@
+"use client";import{a as $,b as S}from"./chunk-O6XRT2H3.js";import{a as C}from"./chunk-INBEEENE.js";import{a as N}from"./chunk-F26IQ5RE.js";import{b as m}from"./chunk-BZZVLW4U.js";import{jsx as a,jsxs as n}from"react/jsx-runtime";import{useLexicalComposerContext as Y}from"@lexical/react/LexicalComposerContext.js";import{useLexicalEditable as Z}from"@lexical/react/useLexicalEditable";import{getTranslation as R}from"@payloadcms/translations";import{Button as p,formatDrawerSlug as ee,Thumbnail as te,useConfig as ae,useEditDepth as oe,usePayloadAPI as le,useTranslation as ie}from"@payloadcms/ui";import{$getNodeByKey as y}from"lexical";import{formatAdminURL as se,isImage as re}from"payload/shared";import{useCallback as h,useId as ne,useReducer as de,useRef as ce,useState as ue}from"react";var E={depth:0},Se=L=>{let{className:e,data:{fields:U,relationTo:f,value:d},format:P,nodeKey:l}=L;if(typeof d=="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:T},serverURL:F},getEntityConfig:j}=ae(),I=ce(null),{uuid:z}=m(),A=oe(),[i]=Y(),{editorConfig:B,fieldProps:{schemaPath:k}}=m(),c=Z(),{i18n:g,t:s}=ie(),[_,K]=de(r=>r+1,0),[o]=ue(()=>j({collectionSlug:f})),M=ne(),b=ee({slug:"lexical-upload-drawer-"+z+M,depth:A}),{toggleDrawer:O}=C(b,!0),{closeDocumentDrawer:w,DocumentDrawer:W,DocumentDrawerToggler:H}=N({id:d,collectionSlug:o.slug}),[{data:t},{setParams:D}]=le(se({apiRoute:T,path:`/${o.slug}/${d}`,serverURL:F}),{initialParams:E}),v=t?.thumbnailURL||t?.url,q=h(()=>{i.update(()=>{y(l)?.remove()})},[i,l]),G=h(r=>{D({...E,cacheBust:_}),K(),w()},[D,_,w]),x=B?.resolvedFeatureMap?.get("upload")?.sanitizedClientFeatureProps.collections?.[o.slug]?.hasExtraFields,J=h((r,V)=>{i.update(()=>{let u=y(l);if(u){let X={...u.getData(),fields:V};u.setData(X)}})},[i,l]),Q=v&&t?.width&&t?.height?t.width>t.height?"landscape":"portrait":"landscape";return n("div",{className:`${e}__contents ${e}__contents--${Q}`,"data-align":P||void 0,"data-filename":t?.filename,ref:I,children:[n("div",{className:`${e}__card`,children:[n("div",{className:`${e}__media`,children:[a(te,{collectionSlug:f,fileSrc:re(t?.mimeType)?v:null,height:t?.height,size:"none",width:t?.width}),c&&a("div",{className:`${e}__overlay ${e}__floater`,children:n("div",{className:`${e}__actions`,role:"toolbar",children:[x?a(p,{buttonStyle:"icon-label",className:`${e}__upload-drawer-toggler`,disabled:!c,el:"button",icon:"edit",onClick:O,round:!0,size:"medium",tooltip:s("fields:editRelationship")}):null,a(p,{buttonStyle:"icon-label",className:`${e}__swap-drawer-toggler`,disabled:!c,el:"button",icon:"swap",onClick:()=>{i.dispatchCommand(S,{replace:{nodeKey:l}})},round:!0,size:"medium",tooltip:s("fields:swapUpload")}),a(p,{buttonStyle:"icon-label",className:`${e}__removeButton`,disabled:!c,icon:"x",onClick:r=>{r.preventDefault(),q()},round:!0,size:"medium",tooltip:s("fields:removeUpload")})]})})]}),n("div",{className:`${e}__metaOverlay ${e}__floater`,children:[a(H,{className:`${e}__doc-drawer-toggler`,children:a("strong",{className:`${e}__filename`,children:t?.filename||s("general:untitled")})}),a("div",{className:`${e}__collectionLabel`,children:R(o.labels.singular,g)})]})]}),d?a(W,{onSave:G}):null,x?a($,{data:U,drawerSlug:b,drawerTitle:s("general:editLabel",{label:R(o.labels.singular,g)}),featureKey:"upload",handleDrawerSubmit:J,schemaPath:k,schemaPathSuffix:o.slug}):null]})};export{Se as UploadComponent};
+//# sourceMappingURL=component-YQ22OGQW.js.map

package/dist/exports/client/component-YQ22OGQW.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 { useLexicalEditable } from '@lexical/react/useLexicalEditable'\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, type ElementFormatType } from 'lexical'\nimport { formatAdminURL, 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 { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport './index.scss'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  className: string\n  data: UploadData\n  format?: ElementFormatType\n  nodeKey: string\n}\n\nexport const UploadComponent: React.FC<ElementProps> = (props) => {\n  const {\n    className: baseClass,\n    data: { fields, relationTo, value },\n    format,\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: { schemaPath },\n  } = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\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    formatAdminURL({ apiRoute: api, path: `/${relatedCollection.slug}/${value}`, serverURL }),\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  const aspectRatio =\n    thumbnailSRC && data?.width && data?.height\n      ? data.width > data.height\n        ? 'landscape'\n        : 'portrait'\n      : 'landscape'\n\n  return (\n    <div\n      className={`${baseClass}__contents ${baseClass}__contents--${aspectRatio}`}\n      data-align={format || undefined}\n      data-filename={data?.filename}\n      ref={uploadRef}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__media`}>\n          <Thumbnail\n            collectionSlug={relationTo}\n            fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null}\n            height={data?.height}\n            size=\"none\"\n            width={data?.width}\n          />\n\n          {isEditable && (\n            <div className={`${baseClass}__overlay ${baseClass}__floater`}>\n              <div className={`${baseClass}__actions`} role=\"toolbar\">\n                {hasExtraFields ? (\n                  <Button\n                    buttonStyle=\"icon-label\"\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={!isEditable}\n                    el=\"button\"\n                    icon=\"edit\"\n                    onClick={toggleDrawer}\n                    round\n                    size=\"medium\"\n                    tooltip={t('fields:editRelationship')}\n                  />\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__swap-drawer-toggler`}\n                  disabled={!isEditable}\n                  el=\"button\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:swapUpload')}\n                />\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={!isEditable}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className={`${baseClass}__metaOverlay ${baseClass}__floater`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong className={`${baseClass}__filename`}>\n              {data?.filename || t('general:untitled')}\n            </strong>\n          </DocumentDrawerToggler>\n          <div className={`${baseClass}__collectionLabel`}>\n            {getTranslation(relatedCollection.labels.singular, i18n)}\n          </div>\n        </div>\n      </div>\n\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"],
+  "mappings": "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",
+  "names": ["useLexicalComposerContext", "useLexicalEditable", "getTranslation", "Button", "formatDrawerSlug", "Thumbnail", "useConfig", "useEditDepth", "usePayloadAPI", "useTranslation", "$getNodeByKey", "formatAdminURL", "isImage", "useCallback", "useId", "useReducer", "useRef", "useState", "initialParams", "depth", "UploadComponent", "props", "className", "baseClass", "data", "fields", "relationTo", "value", "format", "nodeKey", "Error", "config", "routes", "api", "serverURL", "getEntityConfig", "useConfig", "uploadRef", "useRef", "uuid", "useEditorConfigContext", "editDepth", "useEditDepth", "editor", "useLexicalComposerContext", "editorConfig", "fieldProps", "schemaPath", "isEditable", "useLexicalEditable", "i18n", "t", "useTranslation", "cacheBust", "dispatchCacheBust", "useReducer", "state", "relatedCollection", "useState", "collectionSlug", "componentID", "useId", "extraFieldsDrawerSlug", "formatDrawerSlug", "slug", "toggleDrawer", "useLexicalDrawer", "closeDocumentDrawer", "DocumentDrawer", "DocumentDrawerToggler", "useLexicalDocumentDrawer", "id", "setParams", "usePayloadAPI", "formatAdminURL", "apiRoute", "path", "thumbnailSRC", "thumbnailURL", "url", "removeUpload", "useCallback", "update", "$getNodeByKey", "remove", "updateUpload", "_data", "hasExtraFields", "resolvedFeatureMap", "get", "sanitizedClientFeatureProps", "collections", "onExtraFieldsDrawerSubmit", "_", "uploadNode", "newData", "getData", "setData", "aspectRatio", "width", "height", "_jsxs", "undefined", "filename", "ref", "_jsx", "Thumbnail", "fileSrc", "isImage", "mimeType", "size", "role", "Button", "buttonStyle", "disabled", "el", "icon", "onClick", "round", "tooltip", "dispatchCommand", "INSERT_UPLOAD_WITH_DRAWER_COMMAND", "replace", "e", "preventDefault", "getTranslation", "labels", "singular", "onSave", "FieldsDrawer", "drawerSlug", "drawerTitle", "label", "featureKey", "handleDrawerSubmit", "schemaPathSuffix"]
+}