@payloadcms/richtext-lexical 3.57.0-canary.6 → 3.57.0-canary.7

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

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

package/dist/exports/client/component-VDJI45F2.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, type ElementFormatType } 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  format?: ElementFormatType\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  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} ${baseClass}--${aspectRatio}`}\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          {editor.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={readOnly}\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={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                  size=\"medium\"\n                  tooltip={t('fields:swapUpload')}\n                />\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                  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\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", "aspectRatio", "width", "height", "_jsxs", "className", "filename", "ref", "_jsx", "Thumbnail", "fileSrc", "isImage", "mimeType", "size", "isEditable", "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", "UploadComponent", "EnabledRelationshipsCondition", "uploads"]
+}