@payloadcms/richtext-lexical 3.70.0 → 3.71.0-internal-debug.80dab4c

package/dist/features/relationship/client/components/RelationshipComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelationshipComponent.js","names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","useConfig","usePayloadAPI","useTranslation","$getNodeByKey","formatAdminURL","React","useCallback","useReducer","useRef","useState","useLexicalDocumentDrawer","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","initialParams","depth","RelationshipComponent","props","className","baseClass","data","relationTo","value","nodeKey","Error","relationshipElemRef","editor","isEditable","config","routes","api","serverURL","getEntityConfig","relatedCollection","collectionSlug","i18n","t","cacheBust","dispatchCacheBust","state","setParams","apiRoute","path","slug","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","removeRelationship","update","remove","updateRelationship","_jsxs","contentEditable","ref","_jsx","label","labels","singular","admin","useAsTitle","buttonStyle","disabled","el","icon","onClick","dispatchCommand","replace","round","tooltip","e","preventDefault","onSave"],"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 } from 'lexical'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useReducer, useRef, useState } from 'react'\n\nimport type { RelationshipData } from '../../server/nodes/RelationshipNode.js'\n\nimport './index.scss'\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 {\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  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=\"icon-label\"\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=\"icon-label\"\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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","ignoreList":[]}
+{"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 } from 'lexical'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useReducer, useRef, useState } from 'react'\n\nimport type { RelationshipData } from '../../server/nodes/RelationshipNode.js'\n\nimport './index.scss'\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 {\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  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=\"icon-label\"\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=\"icon-label\"\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"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","useConfig","usePayloadAPI","useTranslation","$getNodeByKey","formatAdminURL","React","useCallback","useReducer","useRef","useState","useLexicalDocumentDrawer","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","initialParams","depth","RelationshipComponent","props","className","baseClass","data","relationTo","value","nodeKey","Error","relationshipElemRef","editor","isEditable","config","routes","api","serverURL","getEntityConfig","relatedCollection","collectionSlug","i18n","t","cacheBust","dispatchCacheBust","state","setParams","apiRoute","path","slug","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","removeRelationship","update","remove","updateRelationship","div","contentEditable","ref","p","label","labels","singular","admin","useAsTitle","buttonStyle","disabled","el","icon","onClick","dispatchCommand","replace","round","tooltip","e","preventDefault","onSave"],"mappings":"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"}

package/dist/features/relationship/client/components/index.scss

@@ -0,0 +1,95 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .LexicalEditorTheme__relationship {
+    @extend %body;
+    @include shadow-sm;
+    padding: calc(var(--base) * 0.75);
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-elevation-100);
+    border-radius: $style-radius-m;
+    max-width: calc(var(--base) * 15);
+    font-family: var(--font-body);
+    margin-block: base(0.5);
+    color: var(--theme-text);
+
+    &__contents {
+      display: flex;
+      align-items: center;
+    }
+
+    &:hover {
+      border: 1px solid var(--theme-elevation-150);
+    }
+
+    &__label {
+      margin-bottom: calc(var(--base) * 0.25);
+    }
+
+    &__title {
+      margin: 0;
+    }
+
+    &__label,
+    &__title {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 1 !important;
+    }
+
+    &__title {
+      font-weight: bold;
+    }
+
+    &__wrap {
+      flex-grow: 1;
+      overflow: hidden;
+    }
+
+    &__doc-drawer-toggler {
+      text-decoration: underline;
+      pointer-events: all;
+      line-height: inherit;
+      & > * {
+        margin: 0;
+      }
+    }
+
+    &__swapButton.btn {
+      margin: 0;
+    }
+
+    &__doc-drawer-toggler,
+    &__swapButton {
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: calc(var(--base) * 0.5);
+
+      & > *:not(:last-child) {
+        margin-right: calc(var(--base) * 0.25);
+      }
+    }
+
+    &__removeButton.btn {
+      margin: 0;
+
+      line {
+        stroke-width: $style-stroke-width-m;
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
+    }
+  }
+}

package/dist/features/relationship/client/drawer/commands.js

@@ -1,3 +1,4 @@
 import { createCommand } from 'lexical';
 export const INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND = createCommand('INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND');
+
 //# sourceMappingURL=commands.js.map

package/dist/features/relationship/client/drawer/commands.js.map

@@ -1 +1 @@
-{"version":3,"file":"commands.js","names":["createCommand","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND"],"sources":["../../../../../src/features/relationship/client/drawer/commands.ts"],"sourcesContent":["import type { LexicalCommand } from 'lexical'\n\nimport { createCommand } from 'lexical'\n\nexport const INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND: LexicalCommand<{\n  replace: { nodeKey: string } | false\n}> = createCommand('INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND')\n"],"mappings":"AAEA,SAASA,aAAa,QAAQ;AAE9B,OAAO,MAAMC,uCAAA,GAERD,aAAA,CAAc","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/relationship/client/drawer/commands.ts"],"sourcesContent":["import type { LexicalCommand } from 'lexical'\n\nimport { createCommand } from 'lexical'\n\nexport const INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND: LexicalCommand<{\n  replace: { nodeKey: string } | false\n}> = createCommand('INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND')\n"],"names":["createCommand","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND"],"mappings":"AAEA,SAASA,aAAa,QAAQ,UAAS;AAEvC,OAAO,MAAMC,0CAERD,cAAc,2CAA0C"}

package/dist/features/relationship/client/drawer/index.js

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { toast } from '@payloadcms/ui';
 import { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical';
@@ -10,138 +8,89 @@ import { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexi
 import { $createRelationshipNode } from '../nodes/RelationshipNode.js';
 import { INSERT_RELATIONSHIP_COMMAND } from '../plugins/index.js';
 import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './commands.js';
-const insertRelationship = ({
-  editor,
-  relationTo,
-  replaceNodeKey,
-  value
-}) => {
-  if (!replaceNodeKey) {
-    editor.dispatchCommand(INSERT_RELATIONSHIP_COMMAND, {
-      relationTo,
-      value
-    });
-  } else {
-    editor.update(() => {
-      const node = $getNodeByKey(replaceNodeKey);
-      if (node) {
-        node.replace($createRelationshipNode({
-          relationTo,
-          value
-        }));
-      }
-    });
-  }
+const insertRelationship = ({ editor, relationTo, replaceNodeKey, value })=>{
+    if (!replaceNodeKey) {
+        editor.dispatchCommand(INSERT_RELATIONSHIP_COMMAND, {
+            relationTo,
+            value
+        });
+    } else {
+        editor.update(()=>{
+            const node = $getNodeByKey(replaceNodeKey);
+            if (node) {
+                node.replace($createRelationshipNode({
+                    relationTo,
+                    value
+                }));
+            }
+        });
+    }
 };
-const RelationshipDrawerComponent = t0 => {
-  const $ = _c(14);
-  const {
-    enabledCollectionSlugs
-  } = t0;
-  const [editor] = useLexicalComposerContext();
-  const [replaceNodeKey, setReplaceNodeKey] = useState(null);
-  const t1 = enabledCollectionSlugs?.[0];
-  let t2;
-  if ($[0] !== enabledCollectionSlugs || $[1] !== t1) {
-    t2 = {
-      collectionSlugs: enabledCollectionSlugs,
-      selectedCollection: t1
-    };
-    $[0] = enabledCollectionSlugs;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  const {
-    closeListDrawer,
-    ListDrawer,
-    openListDrawer
-  } = useLexicalListDrawer(t2);
-  let t3;
-  let t4;
-  if ($[3] !== editor || $[4] !== openListDrawer) {
-    t3 = () => editor.registerCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, payload => {
-      setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null);
-      openListDrawer();
-      return true;
-    }, COMMAND_PRIORITY_EDITOR);
-    t4 = [editor, openListDrawer];
-    $[3] = editor;
-    $[4] = openListDrawer;
-    $[5] = t3;
-    $[6] = t4;
-  } else {
-    t3 = $[5];
-    t4 = $[6];
-  }
-  useEffect(t3, t4);
-  let t5;
-  if ($[7] !== closeListDrawer || $[8] !== editor || $[9] !== replaceNodeKey) {
-    t5 = t6 => {
-      const {
-        collectionSlug,
-        doc
-      } = t6;
-      insertRelationship({
-        editor,
-        relationTo: collectionSlug,
-        replaceNodeKey,
-        value: doc.id
-      });
-      closeListDrawer();
-    };
-    $[7] = closeListDrawer;
-    $[8] = editor;
-    $[9] = replaceNodeKey;
-    $[10] = t5;
-  } else {
-    t5 = $[10];
-  }
-  const onSelect = t5;
-  let t6;
-  if ($[11] !== ListDrawer || $[12] !== onSelect) {
-    t6 = _jsx(ListDrawer, {
-      onSelect
+const RelationshipDrawerComponent = ({ enabledCollectionSlugs })=>{
+    const [editor] = useLexicalComposerContext();
+    const [replaceNodeKey, setReplaceNodeKey] = useState(null);
+    const { closeListDrawer, ListDrawer, openListDrawer } = useLexicalListDrawer({
+        collectionSlugs: enabledCollectionSlugs,
+        selectedCollection: enabledCollectionSlugs?.[0]
     });
-    $[11] = ListDrawer;
-    $[12] = onSelect;
-    $[13] = t6;
-  } else {
-    t6 = $[13];
-  }
-  return t6;
+    useEffect(()=>{
+        return editor.registerCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, (payload)=>{
+            setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null);
+            openListDrawer();
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [
+        editor,
+        openListDrawer
+    ]);
+    const onSelect = useCallback(({ collectionSlug, doc })=>{
+        insertRelationship({
+            editor,
+            relationTo: collectionSlug,
+            replaceNodeKey,
+            value: doc.id
+        });
+        closeListDrawer();
+    }, [
+        editor,
+        closeListDrawer,
+        replaceNodeKey
+    ]);
+    return /*#__PURE__*/ _jsxDEV(ListDrawer, {
+        onSelect: onSelect
+    }, void 0, false, {
+        fileName: "src/features/relationship/client/drawer/index.tsx",
+        lineNumber: 82,
+        columnNumber: 10
+    }, this);
 };
-const RelationshipDrawerComponentFallback = () => {
-  const $ = _c(3);
-  const [editor] = useLexicalComposerContext();
-  let t0;
-  let t1;
-  if ($[0] !== editor) {
-    t0 = () => editor.registerCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, _temp, COMMAND_PRIORITY_EDITOR);
-    t1 = [editor];
-    $[0] = editor;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  useEffect(t0, t1);
-  return null;
+const RelationshipDrawerComponentFallback = ()=>{
+    const [editor] = useLexicalComposerContext();
+    useEffect(()=>{
+        return editor.registerCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, ()=>{
+            toast.error('No relationship collections enabled');
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [
+        editor
+    ]);
+    return null;
 };
-export const RelationshipDrawer = ({
-  enabledCollectionSlugs
-}) => {
-  if (!enabledCollectionSlugs?.length) {
-    return /*#__PURE__*/_jsx(RelationshipDrawerComponentFallback, {});
-  }
-  return /*#__PURE__*/_jsx(RelationshipDrawerComponent, {
-    enabledCollectionSlugs: enabledCollectionSlugs
-  });
+export const RelationshipDrawer = ({ enabledCollectionSlugs })=>{
+    if (!enabledCollectionSlugs?.length) {
+        return /*#__PURE__*/ _jsxDEV(RelationshipDrawerComponentFallback, {}, void 0, false, {
+            fileName: "src/features/relationship/client/drawer/index.tsx",
+            lineNumber: 106,
+            columnNumber: 12
+        }, this);
+    }
+    return /*#__PURE__*/ _jsxDEV(RelationshipDrawerComponent, {
+        enabledCollectionSlugs: enabledCollectionSlugs
+    }, void 0, false, {
+        fileName: "src/features/relationship/client/drawer/index.tsx",
+        lineNumber: 109,
+        columnNumber: 10
+    }, this);
 };
-function _temp() {
-  toast.error("No relationship collections enabled");
-  return true;
-}
+
 //# sourceMappingURL=index.js.map

package/dist/features/relationship/client/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","toast","$getNodeByKey","COMMAND_PRIORITY_EDITOR","React","useCallback","useEffect","useState","useLexicalListDrawer","$createRelationshipNode","INSERT_RELATIONSHIP_COMMAND","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","insertRelationship","editor","relationTo","replaceNodeKey","value","dispatchCommand","update","node","replace","RelationshipDrawerComponent","t0","$","enabledCollectionSlugs","setReplaceNodeKey","t1","t2","collectionSlugs","selectedCollection","closeListDrawer","ListDrawer","openListDrawer","t3","t4","registerCommand","payload","nodeKey","t5","t6","collectionSlug","doc","id","onSelect","_jsx","RelationshipDrawerComponentFallback","_temp","RelationshipDrawer","length","error"],"sources":["../../../../../src/features/relationship/client/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\nimport type { CollectionSlug } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { type ListDrawerProps, toast } from '@payloadcms/ui'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexicalListDrawer.js'\nimport { $createRelationshipNode } from '../nodes/RelationshipNode.js'\nimport { INSERT_RELATIONSHIP_COMMAND } from '../plugins/index.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './commands.js'\n\nconst insertRelationship = ({\n  editor,\n  relationTo,\n  replaceNodeKey,\n  value,\n}: {\n  editor: LexicalEditor\n  relationTo: string\n  replaceNodeKey: null | string\n  value: number | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_RELATIONSHIP_COMMAND, {\n      relationTo,\n      value,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace($createRelationshipNode({ relationTo, value }))\n      }\n    })\n  }\n}\n\ntype Props = {\n  enabledCollectionSlugs: CollectionSlug[]\n}\n\nconst RelationshipDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {\n  const [editor] = useLexicalComposerContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n\n  const { closeListDrawer, ListDrawer, openListDrawer } = useLexicalListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: enabledCollectionSlugs?.[0],\n  })\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openListDrawer()\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, openListDrawer])\n\n  const onSelect = useCallback<NonNullable<ListDrawerProps['onSelect']>>(\n    ({ collectionSlug, doc }) => {\n      insertRelationship({\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\n        value: doc.id,\n      })\n      closeListDrawer()\n    },\n    [editor, closeListDrawer, replaceNodeKey],\n  )\n\n  return <ListDrawer onSelect={onSelect} />\n}\n\nconst RelationshipDrawerComponentFallback: React.FC = () => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND,\n      () => {\n        toast.error('No relationship collections enabled')\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor])\n\n  return null\n}\n\nexport const RelationshipDrawer = ({ enabledCollectionSlugs }: Props): React.ReactNode => {\n  if (!enabledCollectionSlugs?.length) {\n    return <RelationshipDrawerComponentFallback />\n  }\n\n  return <RelationshipDrawerComponent enabledCollectionSlugs={enabledCollectionSlugs} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/relationship/client/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\nimport type { CollectionSlug } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { type ListDrawerProps, toast } from '@payloadcms/ui'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexicalListDrawer.js'\nimport { $createRelationshipNode } from '../nodes/RelationshipNode.js'\nimport { INSERT_RELATIONSHIP_COMMAND } from '../plugins/index.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './commands.js'\n\nconst insertRelationship = ({\n  editor,\n  relationTo,\n  replaceNodeKey,\n  value,\n}: {\n  editor: LexicalEditor\n  relationTo: string\n  replaceNodeKey: null | string\n  value: number | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_RELATIONSHIP_COMMAND, {\n      relationTo,\n      value,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace($createRelationshipNode({ relationTo, value }))\n      }\n    })\n  }\n}\n\ntype Props = {\n  enabledCollectionSlugs: CollectionSlug[]\n}\n\nconst RelationshipDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {\n  const [editor] = useLexicalComposerContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n\n  const { closeListDrawer, ListDrawer, openListDrawer } = useLexicalListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: enabledCollectionSlugs?.[0],\n  })\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openListDrawer()\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, openListDrawer])\n\n  const onSelect = useCallback<NonNullable<ListDrawerProps['onSelect']>>(\n    ({ collectionSlug, doc }) => {\n      insertRelationship({\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\n        value: doc.id,\n      })\n      closeListDrawer()\n    },\n    [editor, closeListDrawer, replaceNodeKey],\n  )\n\n  return <ListDrawer onSelect={onSelect} />\n}\n\nconst RelationshipDrawerComponentFallback: React.FC = () => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND,\n      () => {\n        toast.error('No relationship collections enabled')\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor])\n\n  return null\n}\n\nexport const RelationshipDrawer = ({ enabledCollectionSlugs }: Props): React.ReactNode => {\n  if (!enabledCollectionSlugs?.length) {\n    return <RelationshipDrawerComponentFallback />\n  }\n\n  return <RelationshipDrawerComponent enabledCollectionSlugs={enabledCollectionSlugs} />\n}\n"],"names":["useLexicalComposerContext","toast","$getNodeByKey","COMMAND_PRIORITY_EDITOR","React","useCallback","useEffect","useState","useLexicalListDrawer","$createRelationshipNode","INSERT_RELATIONSHIP_COMMAND","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","insertRelationship","editor","relationTo","replaceNodeKey","value","dispatchCommand","update","node","replace","RelationshipDrawerComponent","enabledCollectionSlugs","setReplaceNodeKey","closeListDrawer","ListDrawer","openListDrawer","collectionSlugs","selectedCollection","registerCommand","payload","nodeKey","onSelect","collectionSlug","doc","id","RelationshipDrawerComponentFallback","error","RelationshipDrawer","length"],"mappings":"AAAA;;AAIA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAA+BC,KAAK,QAAQ,iBAAgB;AAC5D,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,UAAS;AAChE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,oBAAoB,QAAQ,6DAA4D;AACjG,SAASC,uBAAuB,QAAQ,+BAA8B;AACtE,SAASC,2BAA2B,QAAQ,sBAAqB;AACjE,SAASC,uCAAuC,QAAQ,gBAAe;AAEvE,MAAMC,qBAAqB,CAAC,EAC1BC,MAAM,EACNC,UAAU,EACVC,cAAc,EACdC,KAAK,EAMN;IACC,IAAI,CAACD,gBAAgB;QACnBF,OAAOI,eAAe,CAACP,6BAA6B;YAClDI;YACAE;QACF;IACF,OAAO;QACLH,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOjB,cAAca;YAC3B,IAAII,MAAM;gBACRA,KAAKC,OAAO,CAACX,wBAAwB;oBAAEK;oBAAYE;gBAAM;YAC3D;QACF;IACF;AACF;AAMA,MAAMK,8BAA+C,CAAC,EAAEC,sBAAsB,EAAE;IAC9E,MAAM,CAACT,OAAO,GAAGb;IAEjB,MAAM,CAACe,gBAAgBQ,kBAAkB,GAAGhB,SAAwB;IAEpE,MAAM,EAAEiB,eAAe,EAAEC,UAAU,EAAEC,cAAc,EAAE,GAAGlB,qBAAqB;QAC3EmB,iBAAiBL;QACjBM,oBAAoBN,wBAAwB,CAAC,EAAE;IACjD;IAEAhB,UAAU;QACR,OAAOO,OAAOgB,eAAe,CAG3BlB,yCACA,CAACmB;YACCP,kBAAkBO,SAASV,UAAUU,SAASV,QAAQW,UAAU;YAChEL;YACA,OAAO;QACT,GACAvB;IAEJ,GAAG;QAACU;QAAQa;KAAe;IAE3B,MAAMM,WAAW3B,YACf,CAAC,EAAE4B,cAAc,EAAEC,GAAG,EAAE;QACtBtB,mBAAmB;YACjBC;YACAC,YAAYmB;YACZlB;YACAC,OAAOkB,IAAIC,EAAE;QACf;QACAX;IACF,GACA;QAACX;QAAQW;QAAiBT;KAAe;IAG3C,qBAAO,QAACU;QAAWO,UAAUA;;;;;;AAC/B;AAEA,MAAMI,sCAAgD;IACpD,MAAM,CAACvB,OAAO,GAAGb;IAEjBM,UAAU;QACR,OAAOO,OAAOgB,eAAe,CAG3BlB,yCACA;YACEV,MAAMoC,KAAK,CAAC;YACZ,OAAO;QACT,GACAlC;IAEJ,GAAG;QAACU;KAAO;IAEX,OAAO;AACT;AAEA,OAAO,MAAMyB,qBAAqB,CAAC,EAAEhB,sBAAsB,EAAS;IAClE,IAAI,CAACA,wBAAwBiB,QAAQ;QACnC,qBAAO,QAACH;;;;;IACV;IAEA,qBAAO,QAACf;QAA4BC,wBAAwBA;;;;;;AAC9D,EAAC"}

package/dist/features/relationship/client/index.js

@@ -1,5 +1,4 @@
 'use client';
-
 import { $isNodeSelection } from 'lexical';
 import { RelationshipIcon } from '../../../lexical/ui/icons/Relationship/index.js';
 import { createClientFeature } from '../../../utilities/createClientFeature.js';
@@ -9,58 +8,65 @@ import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './drawer/commands.js';
 import { $isRelationshipNode, RelationshipNode } from './nodes/RelationshipNode.js';
 import { RelationshipPlugin } from './plugins/index.js';
 export const RelationshipFeatureClient = createClientFeature({
-  nodes: [RelationshipNode],
-  plugins: [{
-    Component: RelationshipPlugin,
-    position: 'normal'
-  }],
-  slashMenu: {
-    groups: [slashMenuBasicGroupWithItems([{
-      Icon: RelationshipIcon,
-      key: 'relationship',
-      keywords: ['relationship', 'relation', 'rel'],
-      label: ({
-        i18n
-      }) => {
-        return i18n.t('lexical:relationship:label');
-      },
-      onSelect: ({
-        editor
-      }) => {
-        // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND
-        editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {
-          replace: false
-        });
-      }
-    }])]
-  },
-  toolbarFixed: {
-    groups: [toolbarAddDropdownGroupWithItems([{
-      ChildComponent: RelationshipIcon,
-      isActive: ({
-        selection
-      }) => {
-        if (!$isNodeSelection(selection) || !selection.getNodes().length) {
-          return false;
+    nodes: [
+        RelationshipNode
+    ],
+    plugins: [
+        {
+            Component: RelationshipPlugin,
+            position: 'normal'
         }
-        const firstNode = selection.getNodes()[0];
-        return $isRelationshipNode(firstNode);
-      },
-      key: 'relationship',
-      label: ({
-        i18n
-      }) => {
-        return i18n.t('lexical:relationship:label');
-      },
-      onSelect: ({
-        editor
-      }) => {
-        // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND
-        editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {
-          replace: false
-        });
-      }
-    }])]
-  }
+    ],
+    slashMenu: {
+        groups: [
+            slashMenuBasicGroupWithItems([
+                {
+                    Icon: RelationshipIcon,
+                    key: 'relationship',
+                    keywords: [
+                        'relationship',
+                        'relation',
+                        'rel'
+                    ],
+                    label: ({ i18n })=>{
+                        return i18n.t('lexical:relationship:label');
+                    },
+                    onSelect: ({ editor })=>{
+                        // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND
+                        editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {
+                            replace: false
+                        });
+                    }
+                }
+            ])
+        ]
+    },
+    toolbarFixed: {
+        groups: [
+            toolbarAddDropdownGroupWithItems([
+                {
+                    ChildComponent: RelationshipIcon,
+                    isActive: ({ selection })=>{
+                        if (!$isNodeSelection(selection) || !selection.getNodes().length) {
+                            return false;
+                        }
+                        const firstNode = selection.getNodes()[0];
+                        return $isRelationshipNode(firstNode);
+                    },
+                    key: 'relationship',
+                    label: ({ i18n })=>{
+                        return i18n.t('lexical:relationship:label');
+                    },
+                    onSelect: ({ editor })=>{
+                        // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND
+                        editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {
+                            replace: false
+                        });
+                    }
+                }
+            ])
+        ]
+    }
 });
+
 //# sourceMappingURL=index.js.map

package/dist/features/relationship/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["$isNodeSelection","RelationshipIcon","createClientFeature","slashMenuBasicGroupWithItems","toolbarAddDropdownGroupWithItems","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","$isRelationshipNode","RelationshipNode","RelationshipPlugin","RelationshipFeatureClient","nodes","plugins","Component","position","slashMenu","groups","Icon","key","keywords","label","i18n","t","onSelect","editor","dispatchCommand","replace","toolbarFixed","ChildComponent","isActive","selection","getNodes","length","firstNode"],"sources":["../../../../src/features/relationship/client/index.tsx"],"sourcesContent":["'use client'\n\nimport { $isNodeSelection } from 'lexical'\n\nimport type { RelationshipFeatureProps } from '../server/index.js'\n\nimport { RelationshipIcon } from '../../../lexical/ui/icons/Relationship/index.js'\nimport { createClientFeature } from '../../../utilities/createClientFeature.js'\nimport { slashMenuBasicGroupWithItems } from '../../shared/slashMenu/basicGroup.js'\nimport { toolbarAddDropdownGroupWithItems } from '../../shared/toolbar/addDropdownGroup.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './drawer/commands.js'\nimport { $isRelationshipNode, RelationshipNode } from './nodes/RelationshipNode.js'\nimport { RelationshipPlugin } from './plugins/index.js'\n\nexport const RelationshipFeatureClient = createClientFeature<RelationshipFeatureProps>({\n  nodes: [RelationshipNode],\n  plugins: [\n    {\n      Component: RelationshipPlugin,\n      position: 'normal',\n    },\n  ],\n  slashMenu: {\n    groups: [\n      slashMenuBasicGroupWithItems([\n        {\n          Icon: RelationshipIcon,\n          key: 'relationship',\n          keywords: ['relationship', 'relation', 'rel'],\n          label: ({ i18n }) => {\n            return i18n.t('lexical:relationship:label')\n          },\n          onSelect: ({ editor }) => {\n            // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND\n            editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n              replace: false,\n            })\n          },\n        },\n      ]),\n    ],\n  },\n  toolbarFixed: {\n    groups: [\n      toolbarAddDropdownGroupWithItems([\n        {\n          ChildComponent: RelationshipIcon,\n          isActive: ({ selection }) => {\n            if (!$isNodeSelection(selection) || !selection.getNodes().length) {\n              return false\n            }\n\n            const firstNode = selection.getNodes()[0]\n            return $isRelationshipNode(firstNode)\n          },\n          key: 'relationship',\n          label: ({ i18n }) => {\n            return i18n.t('lexical:relationship:label')\n          },\n          onSelect: ({ editor }) => {\n            // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND\n            editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n              replace: false,\n            })\n          },\n        },\n      ]),\n    ],\n  },\n})\n"],"mappings":"AAAA;;AAEA,SAASA,gBAAgB,QAAQ;AAIjC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,gCAAgC,QAAQ;AACjD,SAASC,uCAAuC,QAAQ;AACxD,SAASC,mBAAmB,EAAEC,gBAAgB,QAAQ;AACtD,SAASC,kBAAkB,QAAQ;AAEnC,OAAO,MAAMC,yBAAA,GAA4BP,mBAAA,CAA8C;EACrFQ,KAAA,EAAO,CAACH,gBAAA,CAAiB;EACzBI,OAAA,EAAS,CACP;IACEC,SAAA,EAAWJ,kBAAA;IACXK,QAAA,EAAU;EACZ,EACD;EACDC,SAAA,EAAW;IACTC,MAAA,EAAQ,CACNZ,4BAAA,CAA6B,CAC3B;MACEa,IAAA,EAAMf,gBAAA;MACNgB,GAAA,EAAK;MACLC,QAAA,EAAU,CAAC,gBAAgB,YAAY,MAAM;MAC7CC,KAAA,EAAOA,CAAC;QAAEC;MAAI,CAAE;QACd,OAAOA,IAAA,CAAKC,CAAC,CAAC;MAChB;MACAC,QAAA,EAAUA,CAAC;QAAEC;MAAM,CAAE;QACnB;QACAA,MAAA,CAAOC,eAAe,CAACnB,uCAAA,EAAyC;UAC9DoB,OAAA,EAAS;QACX;MACF;IACF,EACD;EAEL;EACAC,YAAA,EAAc;IACZX,MAAA,EAAQ,CACNX,gCAAA,CAAiC,CAC/B;MACEuB,cAAA,EAAgB1B,gBAAA;MAChB2B,QAAA,EAAUA,CAAC;QAAEC;MAAS,CAAE;QACtB,IAAI,CAAC7B,gBAAA,CAAiB6B,SAAA,KAAc,CAACA,SAAA,CAAUC,QAAQ,GAAGC,MAAM,EAAE;UAChE,OAAO;QACT;QAEA,MAAMC,SAAA,GAAYH,SAAA,CAAUC,QAAQ,EAAE,CAAC,EAAE;QACzC,OAAOxB,mBAAA,CAAoB0B,SAAA;MAC7B;MACAf,GAAA,EAAK;MACLE,KAAA,EAAOA,CAAC;QAAEC;MAAI,CAAE;QACd,OAAOA,IAAA,CAAKC,CAAC,CAAC;MAChB;MACAC,QAAA,EAAUA,CAAC;QAAEC;MAAM,CAAE;QACnB;QACAA,MAAA,CAAOC,eAAe,CAACnB,uCAAA,EAAyC;UAC9DoB,OAAA,EAAS;QACX;MACF;IACF,EACD;EAEL;AACF","ignoreList":[]}
+{"version":3,"sources":["../../../../src/features/relationship/client/index.tsx"],"sourcesContent":["'use client'\n\nimport { $isNodeSelection } from 'lexical'\n\nimport type { RelationshipFeatureProps } from '../server/index.js'\n\nimport { RelationshipIcon } from '../../../lexical/ui/icons/Relationship/index.js'\nimport { createClientFeature } from '../../../utilities/createClientFeature.js'\nimport { slashMenuBasicGroupWithItems } from '../../shared/slashMenu/basicGroup.js'\nimport { toolbarAddDropdownGroupWithItems } from '../../shared/toolbar/addDropdownGroup.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './drawer/commands.js'\nimport { $isRelationshipNode, RelationshipNode } from './nodes/RelationshipNode.js'\nimport { RelationshipPlugin } from './plugins/index.js'\n\nexport const RelationshipFeatureClient = createClientFeature<RelationshipFeatureProps>({\n  nodes: [RelationshipNode],\n  plugins: [\n    {\n      Component: RelationshipPlugin,\n      position: 'normal',\n    },\n  ],\n  slashMenu: {\n    groups: [\n      slashMenuBasicGroupWithItems([\n        {\n          Icon: RelationshipIcon,\n          key: 'relationship',\n          keywords: ['relationship', 'relation', 'rel'],\n          label: ({ i18n }) => {\n            return i18n.t('lexical:relationship:label')\n          },\n          onSelect: ({ editor }) => {\n            // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND\n            editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n              replace: false,\n            })\n          },\n        },\n      ]),\n    ],\n  },\n  toolbarFixed: {\n    groups: [\n      toolbarAddDropdownGroupWithItems([\n        {\n          ChildComponent: RelationshipIcon,\n          isActive: ({ selection }) => {\n            if (!$isNodeSelection(selection) || !selection.getNodes().length) {\n              return false\n            }\n\n            const firstNode = selection.getNodes()[0]\n            return $isRelationshipNode(firstNode)\n          },\n          key: 'relationship',\n          label: ({ i18n }) => {\n            return i18n.t('lexical:relationship:label')\n          },\n          onSelect: ({ editor }) => {\n            // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND\n            editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n              replace: false,\n            })\n          },\n        },\n      ]),\n    ],\n  },\n})\n"],"names":["$isNodeSelection","RelationshipIcon","createClientFeature","slashMenuBasicGroupWithItems","toolbarAddDropdownGroupWithItems","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","$isRelationshipNode","RelationshipNode","RelationshipPlugin","RelationshipFeatureClient","nodes","plugins","Component","position","slashMenu","groups","Icon","key","keywords","label","i18n","t","onSelect","editor","dispatchCommand","replace","toolbarFixed","ChildComponent","isActive","selection","getNodes","length","firstNode"],"mappings":"AAAA;AAEA,SAASA,gBAAgB,QAAQ,UAAS;AAI1C,SAASC,gBAAgB,QAAQ,kDAAiD;AAClF,SAASC,mBAAmB,QAAQ,4CAA2C;AAC/E,SAASC,4BAA4B,QAAQ,uCAAsC;AACnF,SAASC,gCAAgC,QAAQ,2CAA0C;AAC3F,SAASC,uCAAuC,QAAQ,uBAAsB;AAC9E,SAASC,mBAAmB,EAAEC,gBAAgB,QAAQ,8BAA6B;AACnF,SAASC,kBAAkB,QAAQ,qBAAoB;AAEvD,OAAO,MAAMC,4BAA4BP,oBAA8C;IACrFQ,OAAO;QAACH;KAAiB;IACzBI,SAAS;QACP;YACEC,WAAWJ;YACXK,UAAU;QACZ;KACD;IACDC,WAAW;QACTC,QAAQ;YACNZ,6BAA6B;gBAC3B;oBACEa,MAAMf;oBACNgB,KAAK;oBACLC,UAAU;wBAAC;wBAAgB;wBAAY;qBAAM;oBAC7CC,OAAO,CAAC,EAAEC,IAAI,EAAE;wBACd,OAAOA,KAAKC,CAAC,CAAC;oBAChB;oBACAC,UAAU,CAAC,EAAEC,MAAM,EAAE;wBACnB,mDAAmD;wBACnDA,OAAOC,eAAe,CAACnB,yCAAyC;4BAC9DoB,SAAS;wBACX;oBACF;gBACF;aACD;SACF;IACH;IACAC,cAAc;QACZX,QAAQ;YACNX,iCAAiC;gBAC/B;oBACEuB,gBAAgB1B;oBAChB2B,UAAU,CAAC,EAAEC,SAAS,EAAE;wBACtB,IAAI,CAAC7B,iBAAiB6B,cAAc,CAACA,UAAUC,QAAQ,GAAGC,MAAM,EAAE;4BAChE,OAAO;wBACT;wBAEA,MAAMC,YAAYH,UAAUC,QAAQ,EAAE,CAAC,EAAE;wBACzC,OAAOxB,oBAAoB0B;oBAC7B;oBACAf,KAAK;oBACLE,OAAO,CAAC,EAAEC,IAAI,EAAE;wBACd,OAAOA,KAAKC,CAAC,CAAC;oBAChB;oBACAC,UAAU,CAAC,EAAEC,MAAM,EAAE;wBACnB,mDAAmD;wBACnDA,OAAOC,eAAe,CAACnB,yCAAyC;4BAC9DoB,SAAS;wBACX;oBACF;gBACF;aACD;SACF;IACH;AACF,GAAE"}