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

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

@@ -1,199 +1,222 @@
 'use client';
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-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 './index.scss';
 import { LexicalTypeaheadMenuPlugin } from './LexicalTypeaheadMenuPlugin/index.js';
 import { useMenuTriggerMatch } from './useMenuTriggerMatch.js';
 const baseClass = 'slash-menu-popup';
-function SlashMenuItem({
-  isSelected,
-  item,
-  onClick,
-  onMouseEnter,
-  ref
-}) {
-  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: ref,
-    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);
-      }
+function SlashMenuItem({ isSelected, item, onClick, onMouseEnter, ref }) {
+    const { fieldProps: { featureClientSchemaMap, schemaPath } } = useEditorConfigContext();
+    const { i18n } = useTranslation();
+    let className = `${baseClass}__item ${baseClass}__item-${item.key}`;
+    if (isSelected) {
+        className += ` ${baseClass}__item--selected`;
     }
-    return groupsWithItems;
-  }, [queryString, editorConfig?.features.slashMenu.groups, getDynamicItems, featureClientSchemaMap, i18n, schemaPath]);
-  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({
+    let title = item.key;
+    if (item.label) {
+        title = typeof item.label === 'function' ? item.label({
             featureClientSchemaMap,
             i18n,
             schemaPath
-          }) : group_4.label;
+        }) : item.label;
+    }
+    // Crop title to max. 25 characters
+    if (title.length > 25) {
+        title = title.substring(0, 25) + '...';
+    }
+    return /*#__PURE__*/ _jsxDEV("button", {
+        "aria-selected": isSelected,
+        className: className,
+        id: baseClass + '__item-' + item.key,
+        onClick: onClick,
+        onMouseEnter: onMouseEnter,
+        ref: ref,
+        role: "option",
+        tabIndex: -1,
+        type: "button",
+        children: [
+            item?.Icon && /*#__PURE__*/ _jsxDEV(item.Icon, {}, void 0, false, {
+                fileName: "src/lexical/plugins/SlashMenu/index.tsx",
+                lineNumber: 72,
+                columnNumber: 22
+            }, this),
+            /*#__PURE__*/ _jsxDEV("span", {
+                className: `${baseClass}__item-text`,
+                children: title
+            }, void 0, false, {
+                fileName: "src/lexical/plugins/SlashMenu/index.tsx",
+                lineNumber: 74,
+                columnNumber: 7
+            }, this)
+        ]
+    }, item.key, true, {
+        fileName: "src/lexical/plugins/SlashMenu/index.tsx",
+        lineNumber: 60,
+        columnNumber: 5
+    }, this);
+}
+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);
         }
-        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);
-            },
-            ref: el => {
-              item_0.ref = {
-                current: el
-              };
+        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)=>group != 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 = groupsWithItems.find((group)=>group.key === dynamicGroup.key);
+                if (!group) {
+                    group = {
+                        ...dynamicGroup,
+                        items: []
+                    };
+                } else {
+                    groupsWithItems = groupsWithItems.filter((group)=>group.key !== dynamicGroup.key);
+                }
+                // 2. Add items to group items array and add to sanitized.slashMenu.groupsWithItems
+                if (group?.items?.length) {
+                    group.items = group.items.concat(group.items);
+                }
+                groupsWithItems.push(group);
             }
-          }, item_0.key))]
-        }, group_4.key);
-      })
-    }), anchorElementRef.current) : null,
-    onQueryChange: setQueryString,
-    triggerFn: checkForTriggerMatch
-  });
+        }
+        return groupsWithItems;
+    }, [
+        queryString,
+        editorConfig?.features.slashMenu.groups,
+        getDynamicItems,
+        featureClientSchemaMap,
+        i18n,
+        schemaPath
+    ]);
+    return /*#__PURE__*/ _jsxDEV(LexicalTypeaheadMenuPlugin, {
+        anchorElem: anchorElem,
+        groups: groups,
+        menuRenderFn: (anchorElementRef, { selectedItemKey, selectItemAndCleanUp, setSelectedItemKey })=>anchorElementRef.current && groups.length ? /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ _jsxDEV("div", {
+                className: baseClass,
+                children: groups.map((group)=>{
+                    let groupTitle = group.key;
+                    if (group.label && featureClientSchemaMap) {
+                        groupTitle = typeof group.label === 'function' ? group.label({
+                            featureClientSchemaMap,
+                            i18n,
+                            schemaPath
+                        }) : group.label;
+                    }
+                    return /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__group ${baseClass}__group-${group.key}`,
+                        children: [
+                            /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__group-title`,
+                                children: groupTitle
+                            }, void 0, false, {
+                                fileName: "src/lexical/plugins/SlashMenu/index.tsx",
+                                lineNumber: 209,
+                                columnNumber: 23
+                            }, void 0),
+                            group.items.map((item, oi)=>/*#__PURE__*/ _jsxDEV(SlashMenuItem, {
+                                    index: oi,
+                                    isSelected: selectedItemKey === item.key,
+                                    item: item,
+                                    onClick: ()=>{
+                                        setSelectedItemKey(item.key);
+                                        selectItemAndCleanUp(item);
+                                    },
+                                    onMouseEnter: ()=>{
+                                        setSelectedItemKey(item.key);
+                                    },
+                                    ref: (el)=>{
+                                        ;
+                                        item.ref = {
+                                            current: el
+                                        };
+                                    }
+                                }, item.key, false, {
+                                    fileName: "src/lexical/plugins/SlashMenu/index.tsx",
+                                    lineNumber: 211,
+                                    columnNumber: 25
+                                }, void 0))
+                        ]
+                    }, group.key, true, {
+                        fileName: "src/lexical/plugins/SlashMenu/index.tsx",
+                        lineNumber: 205,
+                        columnNumber: 21
+                    }, void 0);
+                })
+            }, void 0, false, {
+                fileName: "src/lexical/plugins/SlashMenu/index.tsx",
+                lineNumber: 194,
+                columnNumber: 15
+            }, void 0), anchorElementRef.current) : null,
+        onQueryChange: setQueryString,
+        triggerFn: checkForTriggerMatch
+    }, void 0, false, {
+        fileName: "src/lexical/plugins/SlashMenu/index.tsx",
+        lineNumber: 185,
+        columnNumber: 5
+    }, this);
 }
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useLexicalComposerContext","useTranslation","useCallback","useMemo","useState","React","ReactDOM","useEditorConfigContext","LexicalTypeaheadMenuPlugin","useMenuTriggerMatch","baseClass","SlashMenuItem","isSelected","item","onClick","onMouseEnter","ref","fieldProps","featureClientSchemaMap","schemaPath","i18n","className","key","title","label","length","substring","_jsxs","id","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","menuRenderFn","anchorElementRef","selectedItemKey","selectItemAndCleanUp","setSelectedItemKey","current","createPortal","groupTitle","oi","index","el","onQueryChange","triggerFn"],"sources":["../../../../src/lexical/plugins/SlashMenu/index.tsx"],"sourcesContent":["'use client'\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  ref,\n}: {\n  index: number\n  isSelected: boolean\n  item: SlashMenuItemInternal\n  onClick: () => void\n  onMouseEnter: () => void\n  ref?: React.Ref<HTMLButtonElement>\n}) {\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const { i18n } = useTranslation<{}, string>()\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={ref}\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<{}, string>()\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  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                          ref={(el) => {\n                            ;(item as SlashMenuItemInternal).ref = { current: el }\n                          }}\n                        />\n                      ))}\n                    </div>\n                  )\n                })}\n              </div>,\n              anchorElementRef.current,\n            )\n          : null\n      }\n      onQueryChange={setQueryString}\n      triggerFn={checkForTriggerMatch}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../src/lexical/plugins/SlashMenu/index.tsx"],"sourcesContent":["'use client'\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  ref,\n}: {\n  index: number\n  isSelected: boolean\n  item: SlashMenuItemInternal\n  onClick: () => void\n  onMouseEnter: () => void\n  ref?: React.Ref<HTMLButtonElement>\n}) {\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const { i18n } = useTranslation<{}, string>()\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={ref}\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<{}, string>()\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  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                          ref={(el) => {\n                            ;(item as SlashMenuItemInternal).ref = { current: el }\n                          }}\n                        />\n                      ))}\n                    </div>\n                  )\n                })}\n              </div>,\n              anchorElementRef.current,\n            )\n          : null\n      }\n      onQueryChange={setQueryString}\n      triggerFn={checkForTriggerMatch}\n    />\n  )\n}\n"],"names":["useLexicalComposerContext","useTranslation","useCallback","useMemo","useState","React","ReactDOM","useEditorConfigContext","LexicalTypeaheadMenuPlugin","useMenuTriggerMatch","baseClass","SlashMenuItem","isSelected","item","onClick","onMouseEnter","ref","fieldProps","featureClientSchemaMap","schemaPath","i18n","className","key","title","label","length","substring","button","aria-selected","id","role","tabIndex","type","Icon","span","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","menuRenderFn","anchorElementRef","selectedItemKey","selectItemAndCleanUp","setSelectedItemKey","current","createPortal","div","groupTitle","oi","index","el","onQueryChange","triggerFn"],"mappings":"AAAA;;AACA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,SAASC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AACtD,YAAYC,WAAW,QAAO;AAC9B,YAAYC,cAAc,YAAW;AASrC,SAASC,sBAAsB,QAAQ,8CAA6C;AACpF,OAAO,eAAc;AACrB,SAASC,0BAA0B,QAAQ,wCAAuC;AAClF,SAASC,mBAAmB,QAAQ,2BAA0B;AAE9D,MAAMC,YAAY;AAElB,SAASC,cAAc,EACrBC,UAAU,EACVC,IAAI,EACJC,OAAO,EACPC,YAAY,EACZC,GAAG,EAQJ;IACC,MAAM,EACJC,YAAY,EAAEC,sBAAsB,EAAEC,UAAU,EAAE,EACnD,GAAGZ;IAEJ,MAAM,EAAEa,IAAI,EAAE,GAAGnB;IAEjB,IAAIoB,YAAY,GAAGX,UAAU,OAAO,EAAEA,UAAU,OAAO,EAAEG,KAAKS,GAAG,EAAE;IACnE,IAAIV,YAAY;QACdS,aAAa,CAAC,CAAC,EAAEX,UAAU,gBAAgB,CAAC;IAC9C;IAEA,IAAIa,QAAQV,KAAKS,GAAG;IACpB,IAAIT,KAAKW,KAAK,EAAE;QACdD,QACE,OAAOV,KAAKW,KAAK,KAAK,aAClBX,KAAKW,KAAK,CAAC;YAAEN;YAAwBE;YAAMD;QAAW,KACtDN,KAAKW,KAAK;IAClB;IACA,mCAAmC;IACnC,IAAID,MAAME,MAAM,GAAG,IAAI;QACrBF,QAAQA,MAAMG,SAAS,CAAC,GAAG,MAAM;IACnC;IAEA,qBACE,QAACC;QACCC,iBAAehB;QACfS,WAAWA;QACXQ,IAAInB,YAAY,YAAYG,KAAKS,GAAG;QAEpCR,SAASA;QACTC,cAAcA;QACdC,KAAKA;QACLc,MAAK;QACLC,UAAU,CAAC;QACXC,MAAK;;YAEJnB,MAAMoB,sBAAQ,QAACpB,KAAKoB,IAAI;;;;;0BAEzB,QAACC;gBAAKb,WAAW,GAAGX,UAAU,WAAW,CAAC;0BAAGa;;;;;;;OAVxCV,KAAKS,GAAG;;;;;AAanB;AAEA,OAAO,SAASa,gBAAgB,EAC9BC,aAAaC,SAASC,IAAI,EAG3B;IACC,MAAM,CAACC,OAAO,GAAGvC;IACjB,MAAM,CAACwC,aAAaC,eAAe,GAAGrC,SAAwB;IAC9D,MAAM,EAAEsC,YAAY,EAAE,GAAGnC;IACzB,MAAM,EAAEa,IAAI,EAAE,GAAGnB;IACjB,MAAM,EACJgB,YAAY,EAAEC,sBAAsB,EAAEC,UAAU,EAAE,EACnD,GAAGZ;IAEJ,MAAMoC,uBAAuBlC,oBAAoB,KAAK;QACpDmC,WAAW;IACb;IAEA,MAAMC,kBAAkB3C,YAAY;QAClC,IAAI4C,iBAAwC,EAAE;QAE9C,KAAK,MAAMC,eAAeL,aAAaM,QAAQ,CAACC,SAAS,CAACC,aAAa,CAAE;YACvE,IAAIV,aAAa;gBACf,MAAMW,wBAAwBJ,YAAY;oBACxCR;oBACAC;gBACF;gBACAM,iBAAiBA,eAAeM,MAAM,CAACD;YACzC;QACF;QAEA,OAAOL;IACT,GAAG;QAACP;QAAQC;QAAaE,cAAcM;KAAS;IAEhD,MAAMK,SAA2BlD,QAAQ;QACvC,IAAImD,kBAAoC,EAAE;QAC1C,KAAK,MAAMC,iBAAiBb,cAAcM,SAASC,UAAUI,UAAU,EAAE,CAAE;YACzEC,gBAAgBE,IAAI,CAACD;QACvB;QAEA,IAAIf,aAAa;YACf,8BAA8B;YAC9B,oCAAoC;YACpCc,kBAAkBA,gBAAgBG,GAAG,CAAC,CAACC;gBACrC,MAAMC,gBAAgBD,MAAME,KAAK,CAACC,MAAM,CAAC,CAAChD;oBACxC,IAAIiD,YAAYjD,KAAKS,GAAG;oBACxB,IAAIT,KAAKW,KAAK,EAAE;wBACdsC,YACE,OAAOjD,KAAKW,KAAK,KAAK,aAClBX,KAAKW,KAAK,CAAC;4BAAEN;4BAAwBE;4BAAMD;wBAAW,KACtDN,KAAKW,KAAK;oBAClB;oBAEA,IAAI,IAAIuC,OAAOvB,aAAa,MAAMwB,IAAI,CAACF,YAAY;wBACjD,OAAO;oBACT;oBACA,IAAIjD,KAAKoD,QAAQ,IAAI,MAAM;wBACzB,OAAOpD,KAAKoD,QAAQ,CAACC,IAAI,CAAC,CAACC,UAAY,IAAIJ,OAAOvB,aAAa,MAAMwB,IAAI,CAACG;oBAC5E;oBACA,OAAO;gBACT;gBACA,IAAIR,cAAclC,MAAM,EAAE;oBACxB,OAAO;wBACL,GAAGiC,KAAK;wBACRE,OAAOD;oBACT;gBACF;gBACA,OAAO;YACT;YAEAL,kBAAkBA,gBAAgBO,MAAM,CAAC,CAACH,QAAUA,SAAS;YAE7D,yBAAyB;YACzB,MAAMU,oBAAoBvB;YAE1B,kCAAkC;YAClC,KAAK,MAAMwB,gBAAgBD,kBAAmB;gBAC5C,yDAAyD;gBACzD,IAAIV,QAAQJ,gBAAgBgB,IAAI,CAAC,CAACZ,QAAUA,MAAMpC,GAAG,KAAK+C,aAAa/C,GAAG;gBAC1E,IAAI,CAACoC,OAAO;oBACVA,QAAQ;wBACN,GAAGW,YAAY;wBACfT,OAAO,EAAE;oBACX;gBACF,OAAO;oBACLN,kBAAkBA,gBAAgBO,MAAM,CAAC,CAACH,QAAUA,MAAMpC,GAAG,KAAK+C,aAAa/C,GAAG;gBACpF;gBAEA,mFAAmF;gBACnF,IAAIoC,OAAOE,OAAOnC,QAAQ;oBACxBiC,MAAME,KAAK,GAAGF,MAAME,KAAK,CAACR,MAAM,CAACM,MAAME,KAAK;gBAC9C;gBACAN,gBAAgBE,IAAI,CAACE;YACvB;QACF;QAEA,OAAOJ;IACT,GAAG;QACDd;QACAE,cAAcM,SAASC,UAAUI;QACjCR;QACA3B;QACAE;QACAD;KACD;IAED,qBACE,QAACX;QACC4B,YAAYA;QACZiB,QAAQA;QACRkB,cAAc,CACZC,kBACA,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,kBAAkB,EAAE,GAE7DH,iBAAiBI,OAAO,IAAIvB,OAAO5B,MAAM,iBACrCnB,SAASuE,YAAY,eACnB,QAACC;gBAAIzD,WAAWX;0BACb2C,OAAOI,GAAG,CAAC,CAACC;oBACX,IAAIqB,aAAarB,MAAMpC,GAAG;oBAC1B,IAAIoC,MAAMlC,KAAK,IAAIN,wBAAwB;wBACzC6D,aACE,OAAOrB,MAAMlC,KAAK,KAAK,aACnBkC,MAAMlC,KAAK,CAAC;4BAAEN;4BAAwBE;4BAAMD;wBAAW,KACvDuC,MAAMlC,KAAK;oBACnB;oBAEA,qBACE,QAACsD;wBACCzD,WAAW,GAAGX,UAAU,QAAQ,EAAEA,UAAU,QAAQ,EAAEgD,MAAMpC,GAAG,EAAE;;0CAGjE,QAACwD;gCAAIzD,WAAW,GAAGX,UAAU,aAAa,CAAC;0CAAGqE;;;;;;4BAC7CrB,MAAME,KAAK,CAACH,GAAG,CAAC,CAAC5C,MAAMmE,mBACtB,QAACrE;oCACCsE,OAAOD;oCACPpE,YAAY6D,oBAAoB5D,KAAKS,GAAG;oCACxCT,MAAMA;oCAENC,SAAS;wCACP6D,mBAAmB9D,KAAKS,GAAG;wCAC3BoD,qBAAqB7D;oCACvB;oCACAE,cAAc;wCACZ4D,mBAAmB9D,KAAKS,GAAG;oCAC7B;oCACAN,KAAK,CAACkE;;wCACFrE,KAA+BG,GAAG,GAAG;4CAAE4D,SAASM;wCAAG;oCACvD;mCAVKrE,KAAKS,GAAG;;;;;;uBARZoC,MAAMpC,GAAG;;;;;gBAuBpB;;;;;wBAEFkD,iBAAiBI,OAAO,IAE1B;QAENO,eAAe1C;QACf2C,WAAWzC;;;;;;AAGjB"}

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

@@ -0,0 +1,68 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .slash-menu-popup {
+    background: var(--theme-input-bg);
+    width: 200px;
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    list-style: none;
+    font-family: var(--font-body);
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 10;
+    position: absolute;
+    box-shadow:
+      0px 1px 2px 1px rgba(0, 0, 0, 0.1),
+      0px 4px 16px 0px rgba(0, 0, 0, 0.2),
+      0px -4px 8px 0px rgba(0, 0, 0, 0.1);
+
+    &__group {
+      padding-bottom: 8px;
+    }
+
+    &__group-title {
+      padding-left: 10px;
+      color: var(--theme-elevation-600);
+      font-size: 10px;
+    }
+
+    &__item {
+      all: unset;
+      padding-left: 12px;
+      font-size: 13px;
+      box-sizing: border-box;
+      background: none;
+      border: none;
+      color: var(--theme-elevation-900);
+      display: flex;
+      align-items: center;
+      height: 30px;
+      width: 100%;
+      cursor: pointer;
+
+      &--selected {
+        background: var(--theme-elevation-100);
+      }
+
+      &-text {
+        margin-left: 6px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .icon {
+        color: var(--theme-elevation-500);
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .slash-menu-popup {
+      box-shadow:
+        0px 1px 2px 1px rgba(0, 0, 0, 0.05),
+        0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+    }
+  }
+}

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

@@ -1,48 +1,35 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
 import { useCallback } from 'react';
 import { PUNCTUATION } from './LexicalTypeaheadMenuPlugin/index.js';
-/**
+/** The query string is the POTENTIAL trigger AND the text after the trigger text. */ /**
  * 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] !== maxLength || $[1] !== minLength || $[2] !== trigger) {
-    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]
-          };
+ */ export function useMenuTriggerMatch(/**
+   * Text which triggers the menu. Everything after this text will be used as the query.
+   */ trigger, { maxLength = 75, minLength = 1 }) {
+    return useCallback(({ query })=>{
+        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];
+            /**
+         * matchingString is only the text AFTER the trigger text. (So everything after the /)
+         */ const matchingString = match[3];
+            if (matchingString.length >= minLength) {
+                return {
+                    leadOffset: match.index + maybeLeadingWhitespace.length,
+                    matchingString,
+                    replaceableString: match[2]
+                };
+            }
         }
-      }
-      return null;
-    };
-    $[0] = maxLength;
-    $[1] = minLength;
-    $[2] = trigger;
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  return t3;
+        // replaceableString is the trigger text + the matching string
+        return null;
+    }, [
+        maxLength,
+        minLength,
+        trigger
+    ]);
 }
+
 //# sourceMappingURL=useMenuTriggerMatch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useMenuTriggerMatch.js","names":["c","_c","useCallback","PUNCTUATION","useMenuTriggerMatch","trigger","t0","$","maxLength","t1","minLength","t2","undefined","t3","t4","query","validChars","TypeaheadTriggerRegex","RegExp","match","exec","maybeLeadingWhitespace","matchingString","length","leadOffset","index","replaceableString"],"sources":["../../../../src/lexical/plugins/SlashMenu/useMenuTriggerMatch.ts"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useCallback } from 'react'\n\nimport { PUNCTUATION } from './LexicalTypeaheadMenuPlugin/index.js'\n\nexport type TriggerFn = ({\n  editor,\n  query,\n}: {\n  editor: LexicalEditor\n  /** The query string is the POTENTIAL trigger AND the text after the trigger text. */\n  query: string\n}) => MenuTextMatch | null\n\nexport type MenuTextMatch = {\n  leadOffset: number\n  matchingString: string\n  replaceableString: string\n}\n\n/**\n * 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)\n */\nexport function useMenuTriggerMatch(\n  /**\n   * Text which triggers the menu. Everything after this text will be used as the query.\n   */\n  trigger: string,\n  { maxLength = 75, minLength = 1 }: { maxLength?: number; minLength?: number },\n): TriggerFn {\n  return useCallback(\n    ({ query }) => {\n      const validChars = '[^' + trigger + PUNCTUATION + '\\\\s]'\n      const TypeaheadTriggerRegex = new RegExp(\n        '(^|\\\\s|\\\\()(' +\n          '[' +\n          trigger +\n          ']' +\n          '((?:' +\n          validChars +\n          '){0,' +\n          maxLength +\n          '})' +\n          ')$',\n      )\n      const match = TypeaheadTriggerRegex.exec(query)\n      if (match !== null) {\n        const maybeLeadingWhitespace = match[1]!\n\n        /**\n         * matchingString is only the text AFTER the trigger text. (So everything after the /)\n         */\n        const matchingString = match[3]!\n\n        if (matchingString.length >= minLength) {\n          return {\n            leadOffset: match.index + maybeLeadingWhitespace.length,\n            matchingString,\n            replaceableString: match[2]!, // replaceableString is the trigger text + the matching string\n          }\n        }\n      }\n      return null\n    },\n    [maxLength, minLength, trigger],\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAGA,SAASC,WAAW,QAAQ;AAE5B,SAASC,WAAW,QAAQ;AAiB5B;;;AAGA,OAAO,SAAAC,oBAAAC,OAAA,EAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAKL;IAAAO,SAAA,EAAAC,EAAA;IAAAC,SAAA,EAAAC;EAAA,IAAAL,EAA6E;EAA3E,MAAAE,SAAA,GAAAC,EAAc,KAAAG,SAAA,QAAdH,EAAc;EAAE,MAAAC,SAAA,GAAAC,EAAa,KAAAC,SAAA,OAAbD,EAAa;EAAA,IAAAE,EAAA;EAAA,IAAAN,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAF,OAAA;IAG7BQ,EAAA,GAAAC,EAAA;MAAC;QAAAC;MAAA,IAAAD,EAAS;MACR,MAAAE,UAAA,GAAmB,OAAOX,OAAA,GAAAF,WAAU,GAAc;MAClD,MAAAc,qBAAA,OAAAC,MAAA,CACE,eACE,GACAb,OAAA,GACA,MACA,SACAW,UAAA,GACA,SACAR,SAAA,GACA,OACA;MAEJ,MAAAW,KAAA,GAAcF,qBAAA,CAAAG,IAAA,CAA2BL,KAAA;MAAA,IACrCI,KAAA,SAAU;QACZ,MAAAE,sBAAA,GAA+BF,KAAK;QAKpC,MAAAG,cAAA,GAAuBH,KAAK;QAAG,IAE3BG,cAAA,CAAAC,MAAA,IAAyBb,SAAA;UAAA;YAAAc,UAAA,EAEbL,KAAA,CAAAM,KAAA,GAAcJ,sBAAA,CAAAE,MAA6B;YAAAD,cAAA;YAAAI,iBAAA,EAEpCP,KAAK;UAAA;QAAA;MAAA;MAAA;IAAA;IAKhCZ,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAF,OAAA;IAAAE,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAA,OAjCKM,EAkC0B;AAAA","ignoreList":[]}
+{"version":3,"sources":["../../../../src/lexical/plugins/SlashMenu/useMenuTriggerMatch.ts"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useCallback } from 'react'\n\nimport { PUNCTUATION } from './LexicalTypeaheadMenuPlugin/index.js'\n\nexport type TriggerFn = ({\n  editor,\n  query,\n}: {\n  editor: LexicalEditor\n  /** The query string is the POTENTIAL trigger AND the text after the trigger text. */\n  query: string\n}) => MenuTextMatch | null\n\nexport type MenuTextMatch = {\n  leadOffset: number\n  matchingString: string\n  replaceableString: string\n}\n\n/**\n * 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)\n */\nexport function useMenuTriggerMatch(\n  /**\n   * Text which triggers the menu. Everything after this text will be used as the query.\n   */\n  trigger: string,\n  { maxLength = 75, minLength = 1 }: { maxLength?: number; minLength?: number },\n): TriggerFn {\n  return useCallback(\n    ({ query }) => {\n      const validChars = '[^' + trigger + PUNCTUATION + '\\\\s]'\n      const TypeaheadTriggerRegex = new RegExp(\n        '(^|\\\\s|\\\\()(' +\n          '[' +\n          trigger +\n          ']' +\n          '((?:' +\n          validChars +\n          '){0,' +\n          maxLength +\n          '})' +\n          ')$',\n      )\n      const match = TypeaheadTriggerRegex.exec(query)\n      if (match !== null) {\n        const maybeLeadingWhitespace = match[1]!\n\n        /**\n         * matchingString is only the text AFTER the trigger text. (So everything after the /)\n         */\n        const matchingString = match[3]!\n\n        if (matchingString.length >= minLength) {\n          return {\n            leadOffset: match.index + maybeLeadingWhitespace.length,\n            matchingString,\n            replaceableString: match[2]!, // replaceableString is the trigger text + the matching string\n          }\n        }\n      }\n      return null\n    },\n    [maxLength, minLength, trigger],\n  )\n}\n"],"names":["useCallback","PUNCTUATION","useMenuTriggerMatch","trigger","maxLength","minLength","query","validChars","TypeaheadTriggerRegex","RegExp","match","exec","maybeLeadingWhitespace","matchingString","length","leadOffset","index","replaceableString"],"mappings":"AAAA;AAGA,SAASA,WAAW,QAAQ,QAAO;AAEnC,SAASC,WAAW,QAAQ,wCAAuC;AAOjE,mFAAmF,GAUrF;;CAEC,GACD,OAAO,SAASC,oBACd;;GAEC,GACDC,OAAe,EACf,EAAEC,YAAY,EAAE,EAAEC,YAAY,CAAC,EAA8C;IAE7E,OAAOL,YACL,CAAC,EAAEM,KAAK,EAAE;QACR,MAAMC,aAAa,OAAOJ,UAAUF,cAAc;QAClD,MAAMO,wBAAwB,IAAIC,OAChC,iBACE,MACAN,UACA,MACA,SACAI,aACA,SACAH,YACA,OACA;QAEJ,MAAMM,QAAQF,sBAAsBG,IAAI,CAACL;QACzC,IAAII,UAAU,MAAM;YAClB,MAAME,yBAAyBF,KAAK,CAAC,EAAE;YAEvC;;SAEC,GACD,MAAMG,iBAAiBH,KAAK,CAAC,EAAE;YAE/B,IAAIG,eAAeC,MAAM,IAAIT,WAAW;gBACtC,OAAO;oBACLU,YAAYL,MAAMM,KAAK,GAAGJ,uBAAuBE,MAAM;oBACvDD;oBACAI,mBAAmBP,KAAK,CAAC,EAAE;gBAC7B;YACF;QACF;QAHoC,8DAA8D;QAIlG,OAAO;IACT,GACA;QAACN;QAAWC;QAAWF;KAAQ;AAEnC"}