@payloadcms/richtext-lexical 3.86.0-internal.ac46214 → 4.0.0-internal.183b315

package/dist/exports/client/RelationshipComponent-YCPAKOL7.js

@@ -0,0 +1,2 @@
+"use client";import{a as b}from"./chunk-DBWINSQN.js";import{a as R}from"./chunk-WSAPGI3Z.js";import{jsx as l,jsxs as d}from"react/jsx-runtime";import{useLexicalComposerContext as k}from"@lexical/react/LexicalComposerContext.js";import{useLexicalEditable as K}from"@lexical/react/useLexicalEditable";import{getTranslation as U}from"@payloadcms/translations";import{Button as $,useConfig as H,usePayloadAPI as M,useTranslation as O}from"@payloadcms/ui";import{$getNodeByKey as W,$getSelection as q,$isNodeSelection as z,$isRangeSelection as F}from"lexical";import{formatAdminURL as G}from"payload/shared";import J,{useCallback as Q,useEffect as N,useReducer as V,useRef as X,useState as v}from"react";var C={depth:0},re=S=>{let{className:e,data:{relationTo:w,value:a},nodeKey:o}=S;if(typeof a=="object")throw new Error("Relationship value should be a string or number. The Lexical Relationship component should not receive the populated value object.");let m=X(null),[i]=k(),r=K(),[p,c]=v(!1),{config:{routes:{api:x},serverURL:D},getEntityConfig:E}=H(),[s]=v(()=>E({collectionSlug:w})),{i18n:y,t:u}=O(),[f,L]=V(t=>t+1,0),[{data:h},{setParams:g}]=M(G({apiRoute:x,path:`/${s.slug}/${a}`,serverURL:D}),{initialParams:C}),{closeDocumentDrawer:_,DocumentDrawer:T,DocumentDrawerToggler:j}=R({id:a,collectionSlug:s.slug});N(()=>i.registerUpdateListener(({editorState:t})=>{t.read(()=>{let n=q();if(z(n))c(n.has(o));else if(F(n)){let I=n.getNodes();c(I.some(P=>P.getKey()===o))}else c(!1)})}),[i,o]),N(()=>{let t=m.current?.closest(`.${e}`);t&&t.classList.toggle(`${e}--selected`,p)},[p,e]);let A=Q(()=>{i.update(()=>{W(o)?.remove()})},[i,o]),B=J.useCallback(()=>{g({...C,cacheBust:f}),_(),L()},[f,g,_]);return d("div",{className:`${e}__contents`,contentEditable:!1,ref:m,children:[d("div",{className:`${e}__wrap`,children:[l("p",{className:`${e}__label`,children:u("fields:labelRelationship",{label:s.labels?.singular?U(s.labels?.singular,y):s.slug})}),l(j,{className:`${e}__doc-drawer-toggler`,children:l("p",{className:`${e}__title`,children:h?h[s?.admin?.useAsTitle||"id"]:a})})]}),r&&d("div",{className:`${e}__actions`,children:[l($,{buttonStyle:"ghost",className:`${e}__swapButton`,disabled:!r,el:"button",icon:"swap",onClick:()=>{o&&i.dispatchCommand(b,{replace:{nodeKey:o}})},round:!0,tooltip:u("fields:swapRelationship")}),l($,{buttonStyle:"ghost",className:`${e}__removeButton`,disabled:!r,icon:"x",onClick:t=>{t.preventDefault(),A()},round:!0,tooltip:u("fields:removeRelationship")})]}),!!a&&l(T,{onSave:B})]})};export{re as RelationshipComponent};
+//# sourceMappingURL=RelationshipComponent-YCPAKOL7.js.map

package/dist/exports/client/RelationshipComponent-YCPAKOL7.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/features/relationship/client/components/RelationshipComponent.tsx"],
+  "sourcesContent": ["'use client'\nimport type { ElementFormatType } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport { Button, useConfig, usePayloadAPI, useTranslation } from '@payloadcms/ui'\nimport { $getNodeByKey, $getSelection, $isNodeSelection, $isRangeSelection } from 'lexical'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'\n\nimport type { RelationshipData } from '../../server/schema.js'\n\nimport './index.css'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  className: string\n  data: RelationshipData\n  format?: ElementFormatType\n  nodeKey?: string\n}\n\nexport const RelationshipComponent: React.FC<Props> = (props) => {\n  const {\n    className: baseClass,\n    data: { relationTo, value },\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Relationship value should be a string or number. The Lexical Relationship component should not receive the populated value object.',\n    )\n  }\n\n  const relationshipElemRef = useRef<HTMLDivElement | null>(null)\n\n  const [editor] = useLexicalComposerContext()\n  const isEditable = useLexicalEditable()\n  const [isSelected, setIsSelected] = useState(false)\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const [relatedCollection] = useState(() => getEntityConfig({ collectionSlug: relationTo }))\n\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    formatAdminURL({ apiRoute: api, path: `/${relatedCollection.slug}/${value}`, serverURL }),\n    { initialParams },\n  )\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  useEffect(() => {\n    return editor.registerUpdateListener(({ editorState }) => {\n      editorState.read(() => {\n        const selection = $getSelection()\n\n        if ($isNodeSelection(selection)) {\n          setIsSelected(selection.has(nodeKey!))\n        } else if ($isRangeSelection(selection)) {\n          const nodes = selection.getNodes()\n          setIsSelected(nodes.some((node) => node.getKey() === nodeKey))\n        } else {\n          setIsSelected(false)\n        }\n      })\n    })\n  }, [editor, nodeKey])\n\n  useEffect(() => {\n    const outerEl = relationshipElemRef.current?.closest(`.${baseClass}`)\n\n    if (outerEl) {\n      outerEl.classList.toggle(`${baseClass}--selected`, isSelected)\n    }\n  }, [isSelected, baseClass])\n\n  const removeRelationship = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey!)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateRelationship = React.useCallback(() => {\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    closeDocumentDrawer()\n    dispatchCacheBust()\n  }, [cacheBust, setParams, closeDocumentDrawer])\n\n  return (\n    <div className={`${baseClass}__contents`} contentEditable={false} ref={relationshipElemRef}>\n      <div className={`${baseClass}__wrap`}>\n        <p className={`${baseClass}__label`}>\n          {t('fields:labelRelationship', {\n            label: relatedCollection.labels?.singular\n              ? getTranslation(relatedCollection.labels?.singular, i18n)\n              : relatedCollection.slug,\n          })}\n        </p>\n        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n          <p className={`${baseClass}__title`}>\n            {data ? data[relatedCollection?.admin?.useAsTitle || 'id'] : value}\n          </p>\n        </DocumentDrawerToggler>\n      </div>\n      {isEditable && (\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__swapButton`}\n            disabled={!isEditable}\n            el=\"button\"\n            icon=\"swap\"\n            onClick={() => {\n              if (nodeKey) {\n                editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n                  replace: { nodeKey },\n                })\n              }\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n          <Button\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__removeButton`}\n            disabled={!isEditable}\n            icon=\"x\"\n            onClick={(e) => {\n              e.preventDefault()\n              removeRelationship()\n            }}\n            round\n            tooltip={t('fields:removeRelationship')}\n          />\n        </div>\n      )}\n\n      {!!value && <DocumentDrawer onSave={updateRelationship} />}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["useLexicalComposerContext", "useLexicalEditable", "getTranslation", "Button", "useConfig", "usePayloadAPI", "useTranslation", "$getNodeByKey", "$getSelection", "$isNodeSelection", "$isRangeSelection", "formatAdminURL", "React", "useCallback", "useEffect", "useReducer", "useRef", "useState", "initialParams", "INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND", "RelationshipComponent", "props", "baseClass", "className", "data", "relationTo", "nodeKey", "value", "relationshipElemRef", "useRef", "isEditable", "useLexicalComposerContext", "useLexicalEditable", "config", "routes", "serverURL", "getEntityConfig", "useConfig", "useState", "relatedCollection", "collectionSlug", "i18n", "t", "useTranslation", "dispatchCacheBust", "useReducer", "state", "cacheBust", "setParams", "usePayloadAPI", "apiRoute", "api", "path", "closeDocumentDrawer", "DocumentDrawer", "DocumentDrawerToggler", "useLexicalDocumentDrawer", "id", "useEffect", "editor", "editorState", "$getSelection", "$isNodeSelection", "setIsSelected", "selection", "nodes", "$isRangeSelection", "getNodes", "node", "outerEl", "isSelected", "useCallback", "removeRelationship", "React", "updateRelationship", "contentEditable", "ref", "_jsxs", "_jsx", "getTranslation", "Button", "buttonStyle", "disabled", "el", "icon", "onClick", "dispatchCommand", "replace", "round", "e", "tooltip", "onSave"]
+}