@payloadcms/richtext-lexical 3.18.0-canary.707517e → 3.18.0

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

@@ -0,0 +1,2 @@
+"use client";import{a as S,d as w}from"./chunk-TP3JCLAP.js";import{a as x}from"./chunk-F26IQ5RE.js";import{b as $}from"./chunk-3LGFOM34.js";import{jsx as l,jsxs as C}from"react/jsx-runtime";import{useLexicalComposerContext as W}from"@lexical/react/LexicalComposerContext.js";import{useLexicalNodeSelection as Y}from"@lexical/react/useLexicalNodeSelection.js";import{mergeRegister as H}from"@lexical/utils";import{getTranslation as U}from"@payloadcms/translations";import{Button as A,useConfig as q,usePayloadAPI as z,useTranslation as F}from"@payloadcms/ui";import{$getNodeByKey as G,$getSelection as J,$isNodeSelection as Q,CLICK_COMMAND as V,COMMAND_PRIORITY_LOW as h,KEY_BACKSPACE_COMMAND as X,KEY_DELETE_COMMAND as Z}from"lexical";import ee,{useCallback as g,useEffect as te,useReducer as oe,useRef as se,useState as le}from"react";var t="lexical-relationship",T={depth:0},ne=u=>{let{data:{relationTo:y,value:r},nodeKey:n}=u;if(typeof r=="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=se(null),[e]=W(),[o,c,d]=Y(n),{fieldProps:{readOnly:_}}=$(),{config:{routes:{api:M},serverURL:L},getEntityConfig:O}=q(),[i,ie]=le(()=>O({collectionSlug:y})),{i18n:B,t:p}=F(),[R,I]=oe(s=>s+1,0),[{data:b},{setParams:N}]=z(`${L}${M}/${i.slug}/${r}`,{initialParams:T}),{closeDocumentDrawer:v,DocumentDrawer:P,DocumentDrawerToggler:j}=x({id:r,collectionSlug:i.slug}),K=g(()=>{e.update(()=>{G(n)?.remove()})},[e,n]),k=ee.useCallback(()=>{N({...T,cacheBust:R}),v(),I()},[R,N,v]),f=g(s=>{let a=J();return o&&Q(a)&&(s.preventDefault(),e.update(()=>{a.getNodes().forEach(E=>{w(E)&&E.remove()})})),!1},[e,o]),D=g(s=>{let a=s;return a.target===m.current||m.current?.contains(a.target)?(a.shiftKey?c(!o):o||(d(),c(!0)),!0):!1},[o,c,d]);return te(()=>H(e.registerCommand(V,D,h),e.registerCommand(Z,f,h),e.registerCommand(X,f,h)),[d,e,o,n,f,c,D]),C("div",{className:[t,o&&`${t}--selected`].filter(Boolean).join(" "),contentEditable:!1,ref:m,children:[C("div",{className:`${t}__wrap`,children:[l("p",{className:`${t}__label`,children:p("fields:labelRelationship",{label:i.labels?.singular?U(i.labels?.singular,B):i.slug})}),l(j,{className:`${t}__doc-drawer-toggler`,children:l("p",{className:`${t}__title`,children:b?b[i?.admin?.useAsTitle||"id"]:r})})]}),e.isEditable()&&C("div",{className:`${t}__actions`,children:[l(A,{buttonStyle:"icon-label",className:`${t}__swapButton`,disabled:_,el:"button",icon:"swap",onClick:()=>{n&&e.dispatchCommand(S,{replace:{nodeKey:n}})},round:!0,tooltip:p("fields:swapRelationship")}),l(A,{buttonStyle:"icon-label",className:`${t}__removeButton`,disabled:_,icon:"x",onClick:s=>{s.preventDefault(),K()},round:!0,tooltip:p("fields:removeRelationship")})]}),!!r&&l(P,{onSave:k})]})},be=u=>l(ne,{...u});export{be as RelationshipComponent};
+//# sourceMappingURL=RelationshipComponent-BWAHSMVN.js.map

package/dist/exports/client/RelationshipComponent-BWAHSMVN.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 { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'\nimport { mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport { Button, useConfig, usePayloadAPI, useTranslation } from '@payloadcms/ui'\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 { RelationshipData } from '../../server/nodes/RelationshipNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport { $isRelationshipNode } from '../nodes/RelationshipNode.js'\nimport './index.scss'\n\nconst baseClass = 'lexical-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  className?: string\n  data: RelationshipData\n  format?: ElementFormatType\n  nodeKey?: string\n}\n\nconst Component: React.FC<Props> = (props) => {\n  const {\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 [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey!)\n  const {\n    fieldProps: { readOnly },\n  } = useEditorConfigContext()\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const [relatedCollection, setRelatedCollection] = useState(() =>\n    getEntityConfig({ collectionSlug: relationTo }),\n  )\n\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\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  const $onDelete = useCallback(\n    (payload: KeyboardEvent) => {\n      const deleteSelection = $getSelection()\n      if (isSelected && $isNodeSelection(deleteSelection)) {\n        const event: KeyboardEvent = payload\n        event.preventDefault()\n        editor.update(() => {\n          deleteSelection.getNodes().forEach((node) => {\n            if ($isRelationshipNode(node)) {\n              node.remove()\n            }\n          })\n        })\n      }\n      return false\n    },\n    [editor, isSelected],\n  )\n  const onClick = useCallback(\n    (payload: MouseEvent) => {\n      const event = payload\n      // Check if relationshipElemRef.target or anything WITHIN relationshipElemRef.target was clicked\n      if (\n        event.target === relationshipElemRef.current ||\n        relationshipElemRef.current?.contains(event.target as Node)\n      ) {\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  return (\n    <div\n      className={[baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' ')}\n      contentEditable={false}\n      ref={relationshipElemRef}\n    >\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      {editor.isEditable() && (\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__swapButton`}\n            disabled={readOnly}\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=\"icon-label\"\n            className={`${baseClass}__removeButton`}\n            disabled={readOnly}\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\nexport const RelationshipComponent = (props: Props): React.ReactNode => {\n  return <Component {...props} />\n}\n"],
+  "mappings": "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",
+  "names": ["useLexicalComposerContext", "useLexicalNodeSelection", "mergeRegister", "getTranslation", "Button", "useConfig", "usePayloadAPI", "useTranslation", "$getNodeByKey", "$getSelection", "$isNodeSelection", "CLICK_COMMAND", "COMMAND_PRIORITY_LOW", "KEY_BACKSPACE_COMMAND", "KEY_DELETE_COMMAND", "React", "useCallback", "useEffect", "useReducer", "useRef", "useState", "baseClass", "initialParams", "depth", "Component", "props", "data", "relationTo", "value", "nodeKey", "Error", "relationshipElemRef", "useRef", "editor", "useLexicalComposerContext", "isSelected", "setSelected", "clearSelection", "useLexicalNodeSelection", "fieldProps", "readOnly", "useEditorConfigContext", "config", "routes", "api", "serverURL", "getEntityConfig", "useConfig", "relatedCollection", "setRelatedCollection", "useState", "collectionSlug", "i18n", "t", "useTranslation", "cacheBust", "dispatchCacheBust", "useReducer", "state", "setParams", "usePayloadAPI", "slug", "closeDocumentDrawer", "DocumentDrawer", "DocumentDrawerToggler", "useLexicalDocumentDrawer", "id", "removeRelationship", "useCallback", "update", "$getNodeByKey", "remove", "updateRelationship", "React", "$onDelete", "payload", "deleteSelection", "$getSelection", "$isNodeSelection", "preventDefault", "getNodes", "forEach", "node", "$isRelationshipNode", "onClick", "event", "target", "current", "contains", "shiftKey", "useEffect", "mergeRegister", "registerCommand", "CLICK_COMMAND", "COMMAND_PRIORITY_LOW", "KEY_DELETE_COMMAND", "KEY_BACKSPACE_COMMAND", "_jsxs", "className", "filter", "Boolean", "join", "contentEditable", "ref", "_jsx", "label", "labels", "singular", "getTranslation", "admin", "useAsTitle", "isEditable", "Button", "buttonStyle", "disabled", "el", "icon", "dispatchCommand", "INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND", "replace", "round", "tooltip", "e", "onSave", "RelationshipComponent"]
+}