@payloadcms/richtext-lexical 3.0.0-beta.119 → 3.0.0-beta.120

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

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

package/dist/exports/client/RelationshipComponent-LBWKOBGF.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 { field } = useEditorConfigContext()\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const [relatedCollection, setRelatedCollection] = useState(\n    () => collections.find((coll) => coll.slug === 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    ({ doc }) => {\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    },\n    [cacheBust, setParams, closeDocumentDrawer],\n  )\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: getTranslation(relatedCollection.labels.singular, i18n),\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={field?.admin?.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={field?.admin?.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", "field", "useEditorConfigContext", "config", "collections", "routes", "api", "serverURL", "useConfig", "relatedCollection", "setRelatedCollection", "useState", "find", "coll", "slug", "i18n", "t", "useTranslation", "cacheBust", "dispatchCacheBust", "useReducer", "state", "setParams", "usePayloadAPI", "closeDocumentDrawer", "DocumentDrawer", "DocumentDrawerToggler", "useLexicalDocumentDrawer", "id", "collectionSlug", "removeRelationship", "useCallback", "update", "$getNodeByKey", "remove", "updateRelationship", "React", "doc", "$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", "getTranslation", "labels", "singular", "admin", "useAsTitle", "isEditable", "Button", "buttonStyle", "disabled", "readOnly", "el", "icon", "dispatchCommand", "INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND", "replace", "round", "tooltip", "e", "onSave", "RelationshipComponent"]
+}