@payloadcms/richtext-lexical 3.0.0-beta.52 → 3.0.0-beta.53

package/dist/exports/client/RelationshipComponent-5OU5HATX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/features/relationship/nodes/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, useDocumentDrawer, 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 '../RelationshipNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../../drawer/commands.js'\nimport { $isRelationshipNode } from '../RelationshipNode.js'\nconst baseClass = 'lexical-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  children?: React.ReactNode\n  className?: string\n  data: RelationshipData\n  format?: ElementFormatType\n  nodeKey?: string\n}\n\nconst Component: React.FC<Props> = (props) => {\n  const {\n    children,\n    data: { relationTo, value: id },\n    nodeKey,\n  } = props\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    collections,\n    routes: { api },\n    serverURL,\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}/${id}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id,\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      closeDrawer()\n      dispatchCacheBust()\n    },\n    [cacheBust, setParams, closeDrawer],\n  )\n\n  const $onDelete = useCallback(\n    (payload: KeyboardEvent) => {\n      if (isSelected && $isNodeSelection($getSelection())) {\n        const event: KeyboardEvent = payload\n        event.preventDefault()\n        const node = $getNodeByKey(nodeKey)\n        if ($isRelationshipNode(node)) {\n          node.remove()\n          return true\n        }\n      }\n      return false\n    },\n    [isSelected, nodeKey],\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'] : id}\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?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n                replace: { nodeKey },\n              })\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__removeButton`}\n            disabled={field?.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      {id && <DocumentDrawer onSave={updateRelationship} />}\n      {children}\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", "useDocumentDrawer", "usePayloadAPI", "useTranslation", "$getNodeByKey", "$getSelection", "$isNodeSelection", "CLICK_COMMAND", "COMMAND_PRIORITY_LOW", "KEY_BACKSPACE_COMMAND", "KEY_DELETE_COMMAND", "React", "useCallback", "useEffect", "useReducer", "useRef", "useState", "jsx", "jsxs", "baseClass", "initialParams", "Component", "props", "children", "relationTo", "id", "nodeKey", "relationshipElemRef", "useRef", "editor", "useLexicalComposerContext", "isSelected", "setSelected", "clearSelection", "useLexicalNodeSelection", "field", "useEditorConfigContext", "collections", "api", "serverURL", "useConfig", "relatedCollection", "setRelatedCollection", "useState", "coll", "i18n", "t", "useTranslation", "cacheBust", "dispatchCacheBust", "useReducer", "state", "data", "setParams", "usePayloadAPI", "DocumentDrawer", "DocumentDrawerToggler", "closeDrawer", "useDocumentDrawer", "removeRelationship", "useCallback", "$getNodeByKey", "updateRelationship", "React", "doc", "$onDelete", "payload", "$isNodeSelection", "$getSelection", "node", "$isRelationshipNode", "onClick", "event", "useEffect", "mergeRegister", "CLICK_COMMAND", "COMMAND_PRIORITY_LOW", "KEY_DELETE_COMMAND", "KEY_BACKSPACE_COMMAND", "getTranslation", "Button", "INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND", "RelationshipComponent"]
+}