@payloadcms/richtext-lexical 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.js

@@ -0,0 +1,249 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, createCommand } from 'lexical';
+import { useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
+import { LexicalMenu, useMenuAnchorRef } from './LexicalMenu.js';
+export const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+function getTextUpToAnchor(selection) {
+  const anchor = selection.anchor;
+  if (anchor.type !== 'text') {
+    return null;
+  }
+  const anchorNode = anchor.getNode();
+  if (!anchorNode.isSimpleText()) {
+    return null;
+  }
+  const anchorOffset = anchor.offset;
+  return anchorNode.getTextContent().slice(0, anchorOffset);
+}
+function tryToPositionRange(leadOffset, range, editorWindow) {
+  const domSelection = editorWindow.getSelection();
+  if (domSelection === null || !domSelection.isCollapsed) {
+    return false;
+  }
+  const anchorNode = domSelection.anchorNode;
+  const startOffset = leadOffset;
+  const endOffset = domSelection.anchorOffset;
+  if (anchorNode == null || endOffset == null) {
+    return false;
+  }
+  try {
+    range.setStart(anchorNode, startOffset);
+    // if endOffset is 0, positioning the range for when you click the plus button to open the slash menu will fial
+    range.setEnd(anchorNode, endOffset > 1 ? endOffset : 1);
+  } catch (error) {
+    return false;
+  }
+  return true;
+}
+function getQueryTextForSearch(editor) {
+  let text;
+  editor.getEditorState().read(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+    text = getTextUpToAnchor(selection);
+  });
+  return text;
+}
+function isSelectionOnEntityBoundary(editor, offset) {
+  if (offset !== 0) {
+    return false;
+  }
+  return editor.getEditorState().read(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchor = selection.anchor;
+      const anchorNode = anchor.getNode();
+      const prevSibling = anchorNode.getPreviousSibling();
+      return $isTextNode(prevSibling) && prevSibling.isTextEntity();
+    }
+    return false;
+  });
+}
+function startTransition(callback) {
+  if (React.startTransition) {
+    React.startTransition(callback);
+  } else {
+    callback();
+  }
+}
+export { useDynamicPositioning } from './LexicalMenu.js';
+export const ENABLE_SLASH_MENU_COMMAND = createCommand('ENABLE_SLASH_MENU_COMMAND');
+export function LexicalTypeaheadMenuPlugin(t0) {
+  const $ = _c(31);
+  const {
+    anchorClassName,
+    anchorElem,
+    groups,
+    menuRenderFn,
+    onClose,
+    onOpen,
+    onQueryChange,
+    onSelectItem,
+    triggerFn
+  } = t0;
+  const [editor] = useLexicalComposerContext();
+  const [resolution, setResolution] = useState(null);
+  const anchorElementRef = useMenuAnchorRef(anchorElem, resolution, setResolution, anchorClassName);
+  let t1;
+  if ($[0] !== onClose || $[1] !== resolution) {
+    t1 = () => {
+      setResolution(null);
+      if (onClose != null && resolution !== null) {
+        onClose();
+      }
+    };
+    $[0] = onClose;
+    $[1] = resolution;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const closeTypeahead = t1;
+  let t2;
+  if ($[3] !== onOpen || $[4] !== resolution) {
+    t2 = res => {
+      setResolution(res);
+      if (onOpen != null && resolution === null) {
+        onOpen(res);
+      }
+    };
+    $[3] = onOpen;
+    $[4] = resolution;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const openTypeahead = t2;
+  let t3;
+  let t4;
+  if ($[6] !== editor || $[7] !== openTypeahead) {
+    t3 = () => mergeRegister(editor.registerCommand(ENABLE_SLASH_MENU_COMMAND, t5 => {
+      const {
+        node
+      } = t5;
+      editor.getEditorState().read(() => {
+        const match = {
+          leadOffset: 0,
+          matchingString: "",
+          replaceableString: ""
+        };
+        if (!isSelectionOnEntityBoundary(editor, match.leadOffset)) {
+          if (node !== null) {
+            const editorWindow = editor._window ?? window;
+            const range = editorWindow.document.createRange();
+            const isRangePositioned = tryToPositionRange(match.leadOffset, range, editorWindow);
+            if (isRangePositioned !== null) {
+              startTransition(() => openTypeahead({
+                getRect: () => range.getBoundingClientRect(),
+                match
+              }));
+            }
+            return;
+          }
+        }
+      });
+      return true;
+    }, COMMAND_PRIORITY_LOW));
+    t4 = [editor, openTypeahead];
+    $[6] = editor;
+    $[7] = openTypeahead;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t3 = $[8];
+    t4 = $[9];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[10] !== editor || $[11] !== closeTypeahead || $[12] !== triggerFn || $[13] !== onQueryChange || $[14] !== openTypeahead) {
+    t5 = () => {
+      const updateListener = () => {
+        editor.getEditorState().read(() => {
+          const editorWindow_0 = editor._window ?? window;
+          const range_0 = editorWindow_0.document.createRange();
+          const selection = $getSelection();
+          const text = getQueryTextForSearch(editor);
+          if (!$isRangeSelection(selection) || !selection.isCollapsed() || text === undefined || range_0 === null) {
+            closeTypeahead();
+            return;
+          }
+          const match_0 = triggerFn({
+            editor,
+            query: text
+          });
+          onQueryChange(match_0 ? match_0.matchingString : null);
+          if (match_0 !== null && !isSelectionOnEntityBoundary(editor, match_0.leadOffset)) {
+            const isRangePositioned_0 = tryToPositionRange(match_0.leadOffset, range_0, editorWindow_0);
+            if (isRangePositioned_0 !== null) {
+              startTransition(() => openTypeahead({
+                getRect: () => range_0.getBoundingClientRect(),
+                match: match_0
+              }));
+              return;
+            }
+          }
+          closeTypeahead();
+        });
+      };
+      const removeUpdateListener = editor.registerUpdateListener(updateListener);
+      return () => {
+        removeUpdateListener();
+      };
+    };
+    $[10] = editor;
+    $[11] = closeTypeahead;
+    $[12] = triggerFn;
+    $[13] = onQueryChange;
+    $[14] = openTypeahead;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== editor || $[17] !== triggerFn || $[18] !== onQueryChange || $[19] !== resolution || $[20] !== closeTypeahead || $[21] !== openTypeahead) {
+    t6 = [editor, triggerFn, onQueryChange, resolution, closeTypeahead, openTypeahead];
+    $[16] = editor;
+    $[17] = triggerFn;
+    $[18] = onQueryChange;
+    $[19] = resolution;
+    $[20] = closeTypeahead;
+    $[21] = openTypeahead;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[23] !== anchorElementRef || $[24] !== resolution || $[25] !== editor || $[26] !== closeTypeahead || $[27] !== groups || $[28] !== menuRenderFn || $[29] !== onSelectItem) {
+    t7 = anchorElementRef.current === null || resolution === null || editor === null ? null : _jsx(LexicalMenu, {
+      anchorElementRef,
+      close: closeTypeahead,
+      editor,
+      groups,
+      menuRenderFn,
+      onSelectItem,
+      resolution,
+      shouldSplitNodeWithQuery: true
+    });
+    $[23] = anchorElementRef;
+    $[24] = resolution;
+    $[25] = editor;
+    $[26] = closeTypeahead;
+    $[27] = groups;
+    $[28] = menuRenderFn;
+    $[29] = onSelectItem;
+    $[30] = t7;
+  } else {
+    t7 = $[30];
+  }
+  return t7;
+}
+//# sourceMappingURL=index.js.map

package/dist/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","mergeRegister","$getSelection","$isRangeSelection","$isTextNode","COMMAND_PRIORITY_LOW","createCommand","useCallback","useEffect","useState","React","LexicalMenu","useMenuAnchorRef","PUNCTUATION","getTextUpToAnchor","selection","anchor","type","anchorNode","getNode","isSimpleText","anchorOffset","offset","getTextContent","slice","tryToPositionRange","leadOffset","range","editorWindow","domSelection","getSelection","isCollapsed","startOffset","endOffset","setStart","setEnd","error","getQueryTextForSearch","editor","text","getEditorState","read","isSelectionOnEntityBoundary","prevSibling","getPreviousSibling","isTextEntity","startTransition","callback","useDynamicPositioning","ENABLE_SLASH_MENU_COMMAND","LexicalTypeaheadMenuPlugin","t0","$","anchorClassName","anchorElem","groups","menuRenderFn","onClose","onOpen","onQueryChange","onSelectItem","triggerFn","resolution","setResolution","anchorElementRef","t1","closeTypeahead","t2","res","openTypeahead","t3","t4","registerCommand","t5","node","match","matchingString","replaceableString","_window","window","document","createRange","isRangePositioned","getRect","getBoundingClientRect","updateListener","editorWindow_0","range_0","undefined","match_0","query","isRangePositioned_0","removeUpdateListener","registerUpdateListener","t6","t7","current","_jsx","close","shouldSplitNodeWithQuery"],"sources":["../../../../../src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  LexicalCommand,\n  LexicalEditor,\n  ParagraphNode,\n  RangeSelection,\n  TextNode,\n} from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isRangeSelection,\n  $isTextNode,\n  COMMAND_PRIORITY_LOW,\n  createCommand,\n} from 'lexical'\nimport { type JSX, useCallback, useEffect, useState } from 'react'\nimport * as React from 'react'\n\nimport type { MenuTextMatch, TriggerFn } from '../useMenuTriggerMatch.js'\nimport type { MenuRenderFn, MenuResolution } from './LexicalMenu.js'\nimport type { SlashMenuGroupInternal, SlashMenuItem } from './types.js'\n\nimport { LexicalMenu, useMenuAnchorRef } from './LexicalMenu.js'\n\nexport const PUNCTUATION = '\\\\.,\\\\+\\\\*\\\\?\\\\$\\\\@\\\\|#{}\\\\(\\\\)\\\\^\\\\-\\\\[\\\\]\\\\\\\\/!%\\'\"~=<>_:;'\n\nfunction getTextUpToAnchor(selection: RangeSelection): null | string {\n  const anchor = selection.anchor\n  if (anchor.type !== 'text') {\n    return null\n  }\n  const anchorNode = anchor.getNode()\n  if (!anchorNode.isSimpleText()) {\n    return null\n  }\n  const anchorOffset = anchor.offset\n  return anchorNode.getTextContent().slice(0, anchorOffset)\n}\n\nfunction tryToPositionRange(leadOffset: number, range: Range, editorWindow: Window): boolean {\n  const domSelection = editorWindow.getSelection()\n  if (domSelection === null || !domSelection.isCollapsed) {\n    return false\n  }\n  const anchorNode = domSelection.anchorNode\n  const startOffset = leadOffset\n  const endOffset = domSelection.anchorOffset\n\n  if (anchorNode == null || endOffset == null) {\n    return false\n  }\n\n  try {\n    range.setStart(anchorNode, startOffset)\n    // if endOffset is 0, positioning the range for when you click the plus button to open the slash menu will fial\n    range.setEnd(anchorNode, endOffset > 1 ? endOffset : 1)\n  } catch (error) {\n    return false\n  }\n\n  return true\n}\n\nfunction getQueryTextForSearch(editor: LexicalEditor): string | undefined {\n  let text\n  editor.getEditorState().read(() => {\n    const selection = $getSelection()\n    if (!$isRangeSelection(selection)) {\n      return\n    }\n    text = getTextUpToAnchor(selection)\n  })\n  return text\n}\n\nfunction isSelectionOnEntityBoundary(editor: LexicalEditor, offset: number): boolean {\n  if (offset !== 0) {\n    return false\n  }\n  return editor.getEditorState().read(() => {\n    const selection = $getSelection()\n    if ($isRangeSelection(selection)) {\n      const anchor = selection.anchor\n      const anchorNode = anchor.getNode()\n      const prevSibling = anchorNode.getPreviousSibling()\n      return $isTextNode(prevSibling) && prevSibling.isTextEntity()\n    }\n    return false\n  })\n}\n\nfunction startTransition(callback: () => void) {\n  if (React.startTransition) {\n    React.startTransition(callback)\n  } else {\n    callback()\n  }\n}\n\nexport { useDynamicPositioning } from './LexicalMenu.js'\n\nexport type TypeaheadMenuPluginProps = {\n  anchorClassName?: string\n  anchorElem: HTMLElement\n  groups: Array<SlashMenuGroupInternal>\n  menuRenderFn: MenuRenderFn\n  onClose?: () => void\n  onOpen?: (resolution: MenuResolution) => void\n  onQueryChange: (matchingString: null | string) => void\n  onSelectItem: (item: SlashMenuItem, closeMenu: () => void, matchingString: string) => void\n  triggerFn: TriggerFn\n}\n\nexport const ENABLE_SLASH_MENU_COMMAND: LexicalCommand<{\n  node: ParagraphNode\n}> = createCommand('ENABLE_SLASH_MENU_COMMAND')\n\nexport function LexicalTypeaheadMenuPlugin({\n  anchorClassName,\n  anchorElem,\n  groups,\n  menuRenderFn,\n  onClose,\n  onOpen,\n  onQueryChange,\n  onSelectItem,\n  triggerFn,\n}: TypeaheadMenuPluginProps): JSX.Element | null {\n  const [editor] = useLexicalComposerContext()\n  const [resolution, setResolution] = useState<MenuResolution | null>(null)\n  const anchorElementRef = useMenuAnchorRef(anchorElem, resolution, setResolution, anchorClassName)\n\n  const closeTypeahead = useCallback(() => {\n    setResolution(null)\n    if (onClose != null && resolution !== null) {\n      onClose()\n    }\n  }, [onClose, resolution])\n\n  const openTypeahead = useCallback(\n    (res: MenuResolution) => {\n      setResolution(res)\n      if (onOpen != null && resolution === null) {\n        onOpen(res)\n      }\n    },\n    [onOpen, resolution],\n  )\n\n  // This is mainly used for the AddBlockHandlePlugin, so that the slash menu can be opened from there\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand(\n        ENABLE_SLASH_MENU_COMMAND,\n        ({ node }) => {\n          editor.getEditorState().read(() => {\n            const match: MenuTextMatch = {\n              leadOffset: 0,\n              matchingString: '',\n              replaceableString: '',\n            }\n            if (!isSelectionOnEntityBoundary(editor, match.leadOffset)) {\n              if (node !== null) {\n                const editorWindow = editor._window ?? window\n                const range = editorWindow.document.createRange()\n\n                const isRangePositioned = tryToPositionRange(match.leadOffset, range, editorWindow)\n                if (isRangePositioned !== null) {\n                  startTransition(() =>\n                    openTypeahead({\n                      getRect: () => {\n                        return range.getBoundingClientRect()\n                      },\n                      match,\n                    }),\n                  )\n                }\n\n                return\n              }\n            }\n          })\n\n          return true\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor, openTypeahead])\n\n  useEffect(() => {\n    const updateListener = () => {\n      editor.getEditorState().read(() => {\n        const editorWindow = editor._window ?? window\n        const range = editorWindow.document.createRange()\n        const selection = $getSelection()\n        const text = getQueryTextForSearch(editor)\n\n        if (\n          !$isRangeSelection(selection) ||\n          !selection.isCollapsed() ||\n          text === undefined ||\n          range === null\n        ) {\n          closeTypeahead()\n          return\n        }\n\n        const match = triggerFn({ editor, query: text })\n        onQueryChange(match ? match.matchingString : null)\n\n        if (match !== null && !isSelectionOnEntityBoundary(editor, match.leadOffset)) {\n          const isRangePositioned = tryToPositionRange(match.leadOffset, range, editorWindow)\n          if (isRangePositioned !== null) {\n            startTransition(() =>\n              openTypeahead({\n                getRect: () => {\n                  return range.getBoundingClientRect()\n                },\n                match,\n              }),\n            )\n            return\n          }\n        }\n        closeTypeahead()\n      })\n    }\n\n    const removeUpdateListener = editor.registerUpdateListener(updateListener)\n\n    return () => {\n      removeUpdateListener()\n    }\n  }, [editor, triggerFn, onQueryChange, resolution, closeTypeahead, openTypeahead])\n\n  return anchorElementRef.current === null || resolution === null || editor === null ? null : (\n    <LexicalMenu\n      anchorElementRef={anchorElementRef}\n      close={closeTypeahead}\n      editor={editor}\n      groups={groups}\n      menuRenderFn={menuRenderFn}\n      onSelectItem={onSelectItem}\n      resolution={resolution}\n      shouldSplitNodeWithQuery\n    />\n  )\n}\n\nexport type { MenuRenderFn, MenuResolution, MenuTextMatch, TriggerFn }\n"],"mappings":"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","ignoreList":[]}

package/dist/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.d.ts

@@ -0,0 +1,51 @@
+import type { I18nClient } from '@payloadcms/translations';
+import type { LexicalEditor, Spread } from 'lexical';
+import type React from 'react';
+import type { RefObject } from 'react';
+import type { FeatureClientSchemaMap } from '../../../../types.js';
+export type SlashMenuItem = {
+    /** The icon which is rendered in your slash menu item. */
+    Icon: React.FC;
+    /** Each slash menu item needs to have a unique key. The key will be matched when typing, displayed if no `label` property is set, and used for classNames. */
+    key: string;
+    /**
+     * Keywords are used to match the item for different texts typed after the '/'.
+     * E.g. you might want to show a horizontal rule item if you type both /hr, /separator, /horizontal etc.
+     * In addition to the keywords, the label and key will be used to find the right slash menu item.
+     */
+    keywords?: Array<string>;
+    /** The label will be displayed in your slash menu item. In order to make use of i18n, this can be a function. */
+    label?: ((args: {
+        featureClientSchemaMap: FeatureClientSchemaMap;
+        i18n: I18nClient<{}, string>;
+        schemaPath: string;
+    }) => string) | string;
+    /** A function which is called when the slash menu item is selected. */
+    onSelect: ({ editor, queryString }: {
+        editor: LexicalEditor;
+        queryString: string;
+    }) => void;
+};
+export type SlashMenuGroup = {
+    /**
+     * An array of `SlashMenuItem`'s which will be displayed in the slash menu.
+     */
+    items: Array<SlashMenuItem>;
+    /**
+     * Used for class names and, if label is not provided, for display. Slash menus with the same key will have their items merged together.
+     */
+    key: string;
+    /** The label will be displayed before your Slash Menu group. In order to make use of i18n, this can be a function. */
+    label?: ((args: {
+        featureClientSchemaMap: FeatureClientSchemaMap;
+        i18n: I18nClient<{}, string>;
+        schemaPath: string;
+    }) => string) | string;
+};
+export type SlashMenuItemInternal = {
+    ref: RefObject<HTMLButtonElement | null>;
+} & SlashMenuItem;
+export type SlashMenuGroupInternal = Spread<{
+    items: Array<SlashMenuItemInternal>;
+}, SlashMenuGroup>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAA;AAElE,MAAM,MAAM,aAAa,GAAG;IAC1B,0DAA0D;IAC1D,IAAI,EAAE,KAAK,CAAC,EAAE,CAAA;IACd,8JAA8J;IAC9J,GAAG,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACxB,iHAAiH;IACjH,KAAK,CAAC,EACF,CAAC,CAAC,IAAI,EAAE;QACN,sBAAsB,EAAE,sBAAsB,CAAA;QAC9C,IAAI,EAAE,UAAU,CAAC,EAAE,EAAE,MAAM,CAAC,CAAA;QAC5B,UAAU,EAAE,MAAM,CAAA;KACnB,KAAK,MAAM,CAAC,GACb,MAAM,CAAA;IACV,uEAAuE;IACvE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE;QAAE,MAAM,EAAE,aAAa,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC5F,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAA;IAC3B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,sHAAsH;IACtH,KAAK,CAAC,EACF,CAAC,CAAC,IAAI,EAAE;QACN,sBAAsB,EAAE,sBAAsB,CAAA;QAC9C,IAAI,EAAE,UAAU,CAAC,EAAE,EAAE,MAAM,CAAC,CAAA;QAC5B,UAAU,EAAE,MAAM,CAAA;KACnB,KAAK,MAAM,CAAC,GACb,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;CACzC,GAAG,aAAa,CAAA;AAEjB,MAAM,MAAM,sBAAsB,GAAG,MAAM,CACzC;IACE,KAAK,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAA;CACpC,EACD,cAAc,CACf,CAAA"}

package/dist/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.ts"],"sourcesContent":["import type { I18nClient } from '@payloadcms/translations'\nimport type { LexicalEditor, Spread } from 'lexical'\nimport type React from 'react'\nimport type { RefObject } from 'react'\n\nimport type { FeatureClientSchemaMap } from '../../../../types.js'\n\nexport type SlashMenuItem = {\n  /** The icon which is rendered in your slash menu item. */\n  Icon: React.FC\n  /** Each slash menu item needs to have a unique key. The key will be matched when typing, displayed if no `label` property is set, and used for classNames. */\n  key: string\n  /**\n   * Keywords are used to match the item for different texts typed after the '/'.\n   * E.g. you might want to show a horizontal rule item if you type both /hr, /separator, /horizontal etc.\n   * In addition to the keywords, the label and key will be used to find the right slash menu item.\n   */\n  keywords?: Array<string>\n  /** The label will be displayed in your slash menu item. In order to make use of i18n, this can be a function. */\n  label?:\n    | ((args: {\n        featureClientSchemaMap: FeatureClientSchemaMap\n        i18n: I18nClient<{}, string>\n        schemaPath: string\n      }) => string)\n    | string\n  /** A function which is called when the slash menu item is selected. */\n  onSelect: ({ editor, queryString }: { editor: LexicalEditor; queryString: string }) => void\n}\n\nexport type SlashMenuGroup = {\n  /**\n   * An array of `SlashMenuItem`'s which will be displayed in the slash menu.\n   */\n  items: Array<SlashMenuItem>\n  /**\n   * Used for class names and, if label is not provided, for display. Slash menus with the same key will have their items merged together.\n   */\n  key: string\n  /** The label will be displayed before your Slash Menu group. In order to make use of i18n, this can be a function. */\n  label?:\n    | ((args: {\n        featureClientSchemaMap: FeatureClientSchemaMap\n        i18n: I18nClient<{}, string>\n        schemaPath: string\n      }) => string)\n    | string\n}\n\nexport type SlashMenuItemInternal = {\n  ref: RefObject<HTMLButtonElement | null>\n} & SlashMenuItem\n\nexport type SlashMenuGroupInternal = Spread<\n  {\n    items: Array<SlashMenuItemInternal>\n  },\n  SlashMenuGroup\n>\n"],"mappings":"AAqDA","ignoreList":[]}

package/dist/lexical/plugins/SlashMenu/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import './index.scss';
+export declare function SlashMenuPlugin({ anchorElem, }: {
+    anchorElem?: HTMLElement;
+}): React.ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/lexical/plugins/SlashMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lexical/plugins/SlashMenu/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,OAAO,cAAc,CAAA;AA+DrB,wBAAgB,eAAe,CAAC,EAC9B,UAA0B,GAC3B,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB,GAAG,KAAK,CAAC,YAAY,CAoKrB"}

package/dist/lexical/plugins/SlashMenu/index.js

@@ -0,0 +1,205 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { useTranslation } from '@payloadcms/ui';
+import { useCallback, useMemo, useState } from 'react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { useEditorConfigContext } from '../../config/client/EditorConfigProvider.js';
+import { LexicalTypeaheadMenuPlugin } from './LexicalTypeaheadMenuPlugin/index.js';
+import { useMenuTriggerMatch } from './useMenuTriggerMatch.js';
+const baseClass = 'slash-menu-popup';
+function SlashMenuItem({
+  isSelected,
+  item,
+  onClick,
+  onMouseEnter
+}) {
+  const {
+    fieldProps: {
+      featureClientSchemaMap,
+      schemaPath
+    }
+  } = useEditorConfigContext();
+  const {
+    i18n
+  } = useTranslation();
+  let className = `${baseClass}__item ${baseClass}__item-${item.key}`;
+  if (isSelected) {
+    className += ` ${baseClass}__item--selected`;
+  }
+  let title = item.key;
+  if (item.label) {
+    title = typeof item.label === 'function' ? item.label({
+      featureClientSchemaMap,
+      i18n,
+      schemaPath
+    }) : item.label;
+  }
+  // Crop title to max. 25 characters
+  if (title.length > 25) {
+    title = title.substring(0, 25) + '...';
+  }
+  return /*#__PURE__*/_jsxs("button", {
+    "aria-selected": isSelected,
+    className: className,
+    id: baseClass + '__item-' + item.key,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: element => {
+      item.ref = {
+        current: element
+      };
+    },
+    role: "option",
+    tabIndex: -1,
+    type: "button",
+    children: [item?.Icon && /*#__PURE__*/_jsx(item.Icon, {}), /*#__PURE__*/_jsx("span", {
+      className: `${baseClass}__item-text`,
+      children: title
+    })]
+  }, item.key);
+}
+export function SlashMenuPlugin({
+  anchorElem = document.body
+}) {
+  const [editor] = useLexicalComposerContext();
+  const [queryString, setQueryString] = useState(null);
+  const {
+    editorConfig
+  } = useEditorConfigContext();
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    fieldProps: {
+      featureClientSchemaMap,
+      schemaPath
+    }
+  } = useEditorConfigContext();
+  const checkForTriggerMatch = useMenuTriggerMatch('/', {
+    minLength: 0
+  });
+  const getDynamicItems = useCallback(() => {
+    let groupWithItems = [];
+    for (const dynamicItem of editorConfig.features.slashMenu.dynamicGroups) {
+      if (queryString) {
+        const dynamicGroupWithItems = dynamicItem({
+          editor,
+          queryString
+        });
+        groupWithItems = groupWithItems.concat(dynamicGroupWithItems);
+      }
+    }
+    return groupWithItems;
+  }, [editor, queryString, editorConfig?.features]);
+  const groups = useMemo(() => {
+    let groupsWithItems = [];
+    for (const groupWithItem of editorConfig?.features.slashMenu.groups ?? []) {
+      groupsWithItems.push(groupWithItem);
+    }
+    if (queryString) {
+      // Filter current groups first
+      // @ts-expect-error - TODO: fix this
+      groupsWithItems = groupsWithItems.map(group => {
+        const filteredItems = group.items.filter(item => {
+          let itemTitle = item.key;
+          if (item.label) {
+            itemTitle = typeof item.label === 'function' ? item.label({
+              featureClientSchemaMap,
+              i18n,
+              schemaPath
+            }) : item.label;
+          }
+          if (new RegExp(queryString, 'gi').exec(itemTitle)) {
+            return true;
+          }
+          if (item.keywords != null) {
+            return item.keywords.some(keyword => new RegExp(queryString, 'gi').exec(keyword));
+          }
+          return false;
+        });
+        if (filteredItems.length) {
+          return {
+            ...group,
+            items: filteredItems
+          };
+        }
+        return null;
+      });
+      groupsWithItems = groupsWithItems.filter(group_0 => group_0 != null);
+      // Now add dynamic groups
+      const dynamicItemGroups = getDynamicItems();
+      // merge dynamic items into groups
+      for (const dynamicGroup of dynamicItemGroups) {
+        // 1. find the group with the same name or create new one
+        let group_2 = groupsWithItems.find(group_1 => group_1.key === dynamicGroup.key);
+        if (!group_2) {
+          group_2 = {
+            ...dynamicGroup,
+            items: []
+          };
+        } else {
+          groupsWithItems = groupsWithItems.filter(group_3 => group_3.key !== dynamicGroup.key);
+        }
+        // 2. Add items to group items array and add to sanitized.slashMenu.groupsWithItems
+        if (group_2?.items?.length) {
+          group_2.items = group_2.items.concat(group_2.items);
+        }
+        groupsWithItems.push(group_2);
+      }
+    }
+    return groupsWithItems;
+  }, [queryString, editorConfig?.features.slashMenu.groups, getDynamicItems, featureClientSchemaMap, i18n, schemaPath]);
+  const onSelectItem = useCallback((selectedItem, closeMenu, matchingString) => {
+    closeMenu();
+    selectedItem.onSelect({
+      editor,
+      queryString: matchingString
+    });
+  }, [editor]);
+  return /*#__PURE__*/_jsx(LexicalTypeaheadMenuPlugin, {
+    anchorElem: anchorElem,
+    groups: groups,
+    menuRenderFn: (anchorElementRef, {
+      selectedItemKey,
+      selectItemAndCleanUp,
+      setSelectedItemKey
+    }) => anchorElementRef.current && groups.length ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx("div", {
+      className: baseClass,
+      children: groups.map(group_4 => {
+        let groupTitle = group_4.key;
+        if (group_4.label && featureClientSchemaMap) {
+          groupTitle = typeof group_4.label === 'function' ? group_4.label({
+            featureClientSchemaMap,
+            i18n,
+            schemaPath
+          }) : group_4.label;
+        }
+        return /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__group ${baseClass}__group-${group_4.key}`,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__group-title`,
+            children: groupTitle
+          }), group_4.items.map((item_0, oi) => /*#__PURE__*/_jsx(SlashMenuItem, {
+            index: oi,
+            isSelected: selectedItemKey === item_0.key,
+            item: item_0,
+            onClick: () => {
+              setSelectedItemKey(item_0.key);
+              selectItemAndCleanUp(item_0);
+            },
+            onMouseEnter: () => {
+              setSelectedItemKey(item_0.key);
+            }
+          }, item_0.key))]
+        }, group_4.key);
+      })
+    }), anchorElementRef.current) : null,
+    onQueryChange: setQueryString,
+    onSelectItem: onSelectItem,
+    triggerFn: checkForTriggerMatch
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/lexical/plugins/SlashMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useLexicalComposerContext","useTranslation","useCallback","useMemo","useState","React","ReactDOM","useEditorConfigContext","LexicalTypeaheadMenuPlugin","useMenuTriggerMatch","baseClass","SlashMenuItem","isSelected","item","onClick","onMouseEnter","fieldProps","featureClientSchemaMap","schemaPath","i18n","className","key","title","label","length","substring","_jsxs","id","ref","element","current","role","tabIndex","type","Icon","_jsx","SlashMenuPlugin","anchorElem","document","body","editor","queryString","setQueryString","editorConfig","checkForTriggerMatch","minLength","getDynamicItems","groupWithItems","dynamicItem","features","slashMenu","dynamicGroups","dynamicGroupWithItems","concat","groups","groupsWithItems","groupWithItem","push","map","group","filteredItems","items","filter","itemTitle","RegExp","exec","keywords","some","keyword","dynamicItemGroups","dynamicGroup","find","onSelectItem","selectedItem","closeMenu","matchingString","onSelect","menuRenderFn","anchorElementRef","selectedItemKey","selectItemAndCleanUp","setSelectedItemKey","createPortal","groupTitle","oi","index","onQueryChange","triggerFn"],"sources":["../../../../src/lexical/plugins/SlashMenu/index.tsx"],"sourcesContent":["'use client'\nimport type { TextNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useTranslation } from '@payloadcms/ui'\nimport { useCallback, useMemo, useState } from 'react'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport type {\n  SlashMenuGroup,\n  SlashMenuGroupInternal,\n  SlashMenuItemInternal,\n  SlashMenuItem as SlashMenuItemType,\n} from './LexicalTypeaheadMenuPlugin/types.js'\n\nimport { useEditorConfigContext } from '../../config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { LexicalTypeaheadMenuPlugin } from './LexicalTypeaheadMenuPlugin/index.js'\nimport { useMenuTriggerMatch } from './useMenuTriggerMatch.js'\n\nconst baseClass = 'slash-menu-popup'\n\nfunction SlashMenuItem({\n  isSelected,\n  item,\n  onClick,\n  onMouseEnter,\n}: {\n  index: number\n  isSelected: boolean\n  item: SlashMenuItemInternal\n  onClick: () => void\n  onMouseEnter: () => void\n}) {\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const { i18n } = useTranslation()\n\n  let className = `${baseClass}__item ${baseClass}__item-${item.key}`\n  if (isSelected) {\n    className += ` ${baseClass}__item--selected`\n  }\n\n  let title = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    title = title.substring(0, 25) + '...'\n  }\n\n  return (\n    <button\n      aria-selected={isSelected}\n      className={className}\n      id={baseClass + '__item-' + item.key}\n      key={item.key}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      ref={(element) => {\n        item.ref = { current: element }\n      }}\n      role=\"option\"\n      tabIndex={-1}\n      type=\"button\"\n    >\n      {item?.Icon && <item.Icon />}\n\n      <span className={`${baseClass}__item-text`}>{title}</span>\n    </button>\n  )\n}\n\nexport function SlashMenuPlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): React.ReactElement {\n  const [editor] = useLexicalComposerContext()\n  const [queryString, setQueryString] = useState<null | string>(null)\n  const { editorConfig } = useEditorConfigContext()\n  const { i18n } = useTranslation()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const checkForTriggerMatch = useMenuTriggerMatch('/', {\n    minLength: 0,\n  })\n\n  const getDynamicItems = useCallback(() => {\n    let groupWithItems: Array<SlashMenuGroup> = []\n\n    for (const dynamicItem of editorConfig.features.slashMenu.dynamicGroups) {\n      if (queryString) {\n        const dynamicGroupWithItems = dynamicItem({\n          editor,\n          queryString,\n        })\n        groupWithItems = groupWithItems.concat(dynamicGroupWithItems)\n      }\n    }\n\n    return groupWithItems\n  }, [editor, queryString, editorConfig?.features])\n\n  const groups: SlashMenuGroup[] = useMemo(() => {\n    let groupsWithItems: SlashMenuGroup[] = []\n    for (const groupWithItem of editorConfig?.features.slashMenu.groups ?? []) {\n      groupsWithItems.push(groupWithItem)\n    }\n\n    if (queryString) {\n      // Filter current groups first\n      // @ts-expect-error - TODO: fix this\n      groupsWithItems = groupsWithItems.map((group) => {\n        const filteredItems = group.items.filter((item) => {\n          let itemTitle = item.key\n          if (item.label) {\n            itemTitle =\n              typeof item.label === 'function'\n                ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n                : item.label\n          }\n\n          if (new RegExp(queryString, 'gi').exec(itemTitle)) {\n            return true\n          }\n          if (item.keywords != null) {\n            return item.keywords.some((keyword) => new RegExp(queryString, 'gi').exec(keyword))\n          }\n          return false\n        })\n        if (filteredItems.length) {\n          return {\n            ...group,\n            items: filteredItems,\n          }\n        }\n        return null\n      })\n\n      groupsWithItems = groupsWithItems.filter((group) => group != null)\n\n      // Now add dynamic groups\n      const dynamicItemGroups = getDynamicItems()\n\n      // merge dynamic items into groups\n      for (const dynamicGroup of dynamicItemGroups) {\n        // 1. find the group with the same name or create new one\n        let group = groupsWithItems.find((group) => group.key === dynamicGroup.key)\n        if (!group) {\n          group = {\n            ...dynamicGroup,\n            items: [],\n          }\n        } else {\n          groupsWithItems = groupsWithItems.filter((group) => group.key !== dynamicGroup.key)\n        }\n\n        // 2. Add items to group items array and add to sanitized.slashMenu.groupsWithItems\n        if (group?.items?.length) {\n          group.items = group.items.concat(group.items)\n        }\n        groupsWithItems.push(group)\n      }\n    }\n\n    return groupsWithItems\n  }, [\n    queryString,\n    editorConfig?.features.slashMenu.groups,\n    getDynamicItems,\n    featureClientSchemaMap,\n    i18n,\n    schemaPath,\n  ])\n\n  const onSelectItem = useCallback(\n    (selectedItem: SlashMenuItemType, closeMenu: () => void, matchingString: string) => {\n      closeMenu()\n\n      selectedItem.onSelect({ editor, queryString: matchingString })\n    },\n    [editor],\n  )\n\n  return (\n    <LexicalTypeaheadMenuPlugin\n      anchorElem={anchorElem}\n      groups={groups as SlashMenuGroupInternal[]}\n      menuRenderFn={(\n        anchorElementRef,\n        { selectedItemKey, selectItemAndCleanUp, setSelectedItemKey },\n      ) =>\n        anchorElementRef.current && groups.length\n          ? ReactDOM.createPortal(\n              <div className={baseClass}>\n                {groups.map((group) => {\n                  let groupTitle = group.key\n                  if (group.label && featureClientSchemaMap) {\n                    groupTitle =\n                      typeof group.label === 'function'\n                        ? group.label({ featureClientSchemaMap, i18n, schemaPath })\n                        : group.label\n                  }\n\n                  return (\n                    <div\n                      className={`${baseClass}__group ${baseClass}__group-${group.key}`}\n                      key={group.key}\n                    >\n                      <div className={`${baseClass}__group-title`}>{groupTitle}</div>\n                      {group.items.map((item, oi: number) => (\n                        <SlashMenuItem\n                          index={oi}\n                          isSelected={selectedItemKey === item.key}\n                          item={item as SlashMenuItemInternal}\n                          key={item.key}\n                          onClick={() => {\n                            setSelectedItemKey(item.key)\n                            selectItemAndCleanUp(item)\n                          }}\n                          onMouseEnter={() => {\n                            setSelectedItemKey(item.key)\n                          }}\n                        />\n                      ))}\n                    </div>\n                  )\n                })}\n              </div>,\n              anchorElementRef.current,\n            )\n          : null\n      }\n      onQueryChange={setQueryString}\n      onSelectItem={onSelectItem}\n      triggerFn={checkForTriggerMatch}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/lexical/plugins/SlashMenu/useMenuTriggerMatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuTriggerMatch.d.ts","sourceRoot":"","sources":["../../../../src/lexical/plugins/SlashMenu/useMenuTriggerMatch.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,MAAM,MAAM,SAAS,GAAG,CAAC,EACvB,MAAM,EACN,KAAK,GACN,EAAE;IACD,MAAM,EAAE,aAAa,CAAA;IACrB,qFAAqF;IACrF,KAAK,EAAE,MAAM,CAAA;CACd,KAAK,aAAa,GAAG,IAAI,CAAA;AAE1B,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED;;GAEG;AACH,wBAAgB,mBAAmB;AACjC;;GAEG;AACH,OAAO,EAAE,MAAM,EACf,EAAE,SAAc,EAAE,SAAa,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAC5E,SAAS,CAqCX"}

package/dist/lexical/plugins/SlashMenu/useMenuTriggerMatch.js

@@ -0,0 +1,48 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { useCallback } from 'react';
+import { PUNCTUATION } from './LexicalTypeaheadMenuPlugin/index.js';
+/**
+ * Returns a function which checks if the trigger (e.g. '/') is present in the query and, if so, returns the matching string (text after the trigger)
+ */
+export function useMenuTriggerMatch(trigger, t0) {
+  const $ = _c(4);
+  const {
+    maxLength: t1,
+    minLength: t2
+  } = t0;
+  const maxLength = t1 === undefined ? 75 : t1;
+  const minLength = t2 === undefined ? 1 : t2;
+  let t3;
+  if ($[0] !== trigger || $[1] !== maxLength || $[2] !== minLength) {
+    t3 = t4 => {
+      const {
+        query
+      } = t4;
+      const validChars = "[^" + trigger + PUNCTUATION + "\\s]";
+      const TypeaheadTriggerRegex = new RegExp("(^|\\s|\\()([" + trigger + "]" + "((?:" + validChars + "){0," + maxLength + "})" + ")$");
+      const match = TypeaheadTriggerRegex.exec(query);
+      if (match !== null) {
+        const maybeLeadingWhitespace = match[1];
+        const matchingString = match[3];
+        if (matchingString.length >= minLength) {
+          return {
+            leadOffset: match.index + maybeLeadingWhitespace.length,
+            matchingString,
+            replaceableString: match[2]
+          };
+        }
+      }
+      return null;
+    };
+    $[0] = trigger;
+    $[1] = maxLength;
+    $[2] = minLength;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
+}
+//# sourceMappingURL=useMenuTriggerMatch.js.map