@payloadcms/richtext-lexical 3.0.0-beta.4 → 3.0.0-beta.40

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

@@ -1,6 +1,6 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useTranslation } from '@payloadcms/ui/providers/Translation';
 import { useCallback, useMemo, useState } from 'react';
 import * as React from 'react';
@@ -10,36 +10,40 @@ import { LexicalTypeaheadMenuPlugin } from './LexicalTypeaheadMenuPlugin/index.j
 import './index.scss';
 import { useMenuTriggerMatch } from './useMenuTriggerMatch.js';
 const baseClass = 'slash-menu-popup';
-function SlashMenuItem({ isSelected, onClick, onMouseEnter, option }) {
+function SlashMenuItem({ isSelected, item, onClick, onMouseEnter }) {
     const { i18n } = useTranslation();
-    let className = `${baseClass}__item ${baseClass}__item-${option.key}`;
+    let className = `${baseClass}__item ${baseClass}__item-${item.key}`;
     if (isSelected) {
         className += ` ${baseClass}__item--selected`;
     }
-    let title = option.key;
-    if (option.displayName) {
-        title = typeof option.displayName === 'function' ? option.displayName({
+    let title = item.key;
+    if (item.label) {
+        title = typeof item.label === 'function' ? item.label({
             i18n
-        }) : option.displayName;
+        }) : item.label;
     }
-    // Crop title to max. 50 characters
+    // Crop title to max. 25 characters
     if (title.length > 25) {
         title = title.substring(0, 25) + '...';
     }
-    return /*#__PURE__*/ React.createElement("button", {
+    return /*#__PURE__*/ _jsxs("button", {
         "aria-selected": isSelected,
         className: className,
-        id: baseClass + '__item-' + option.key,
-        key: option.key,
+        id: baseClass + '__item-' + item.key,
         onClick: onClick,
         onMouseEnter: onMouseEnter,
-        ref: option.setRefElement,
-        role: "option",
+        ref: item.ref,
+        role: "item",
         tabIndex: -1,
-        type: "button"
-    }, option?.Icon && /*#__PURE__*/ React.createElement(option.Icon, null), /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__item-text`
-    }, title));
+        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();
@@ -49,124 +53,136 @@ export function SlashMenuPlugin({ anchorElem = document.body }) {
     const checkForTriggerMatch = useMenuTriggerMatch('/', {
         minLength: 0
     });
-    const getDynamicOptions = useCallback(()=>{
-        let groupWithOptions = [];
-        for (const dynamicOption of editorConfig.features.slashMenu.dynamicOptions){
-            const dynamicGroupWithOptions = dynamicOption({
+    const getDynamicItems = useCallback(()=>{
+        let groupWithItems = [];
+        for (const dynamicItem of editorConfig.features.slashMenu.dynamicGroups){
+            const dynamicGroupWithItems = dynamicItem({
                 editor,
                 queryString
             });
-            groupWithOptions = groupWithOptions.concat(dynamicGroupWithOptions);
+            groupWithItems = groupWithItems.concat(dynamicGroupWithItems);
         }
-        return groupWithOptions;
+        return groupWithItems;
     }, [
         editor,
         queryString,
         editorConfig?.features
     ]);
     const groups = useMemo(()=>{
-        let groupsWithOptions = [];
-        for (const groupWithOption of editorConfig?.features.slashMenu.groupsWithOptions ?? []){
-            groupsWithOptions.push(groupWithOption);
+        let groupsWithItems = [];
+        for (const groupWithItem of editorConfig?.features.slashMenu.groups ?? []){
+            groupsWithItems.push(groupWithItem);
         }
         if (queryString) {
             // Filter current groups first
-            groupsWithOptions = groupsWithOptions.map((group)=>{
-                const filteredOptions = group.options.filter((option)=>{
-                    let optionTitle = option.key;
-                    if (option.displayName) {
-                        optionTitle = typeof option.displayName === 'function' ? option.displayName({
+            groupsWithItems = groupsWithItems.map((group)=>{
+                const filteredItems = group.items.filter((item)=>{
+                    let itemTitle = item.key;
+                    if (item.label) {
+                        itemTitle = typeof item.label === 'function' ? item.label({
                             i18n
-                        }) : option.displayName;
+                        }) : item.label;
                     }
-                    return new RegExp(queryString, 'gi').exec(optionTitle) || option.keywords != null ? option.keywords.some((keyword)=>new RegExp(queryString, 'gi').exec(keyword)) : false;
+                    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 (filteredOptions.length) {
+                if (filteredItems.length) {
                     return {
                         ...group,
-                        options: filteredOptions
+                        items: filteredItems
                     };
                 }
                 return null;
             });
-            groupsWithOptions = groupsWithOptions.filter((group)=>group != null);
+            groupsWithItems = groupsWithItems.filter((group)=>group != null);
             // Now add dynamic groups
-            const dynamicOptionGroups = getDynamicOptions();
-            // merge dynamic options into groups
-            for (const dynamicGroup of dynamicOptionGroups){
+            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 = groupsWithOptions.find((group)=>group.key === dynamicGroup.key);
+                let group = groupsWithItems.find((group)=>group.key === dynamicGroup.key);
                 if (!group) {
                     group = {
                         ...dynamicGroup,
-                        options: []
+                        items: []
                     };
                 } else {
-                    groupsWithOptions = groupsWithOptions.filter((group)=>group.key !== dynamicGroup.key);
+                    groupsWithItems = groupsWithItems.filter((group)=>group.key !== dynamicGroup.key);
                 }
-                // 2. Add options to group options array and add to sanitized.slashMenu.groupsWithOptions
-                if (group?.options?.length) {
-                    group.options = group.options.concat(group.options);
+                // 2. Add items to group items array and add to sanitized.slashMenu.groupsWithItems
+                if (group?.items?.length) {
+                    group.items = group.items.concat(group.items);
                 }
-                groupsWithOptions.push(group);
+                groupsWithItems.push(group);
             }
         }
-        return groupsWithOptions;
+        return groupsWithItems;
     }, [
-        getDynamicOptions,
+        getDynamicItems,
         queryString,
         editorConfig?.features,
         i18n
     ]);
-    const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString)=>{
-        editor.update(()=>{
-            if (nodeToRemove) {
+    const onSelectItem = useCallback((selectedItem, nodeToRemove, closeMenu, matchingString)=>{
+        if (nodeToRemove) {
+            editor.update(()=>{
                 nodeToRemove.remove();
-            }
-            selectedOption.onSelect({
-                editor,
-                queryString: matchingString
             });
-            closeMenu();
+        }
+        selectedItem.onSelect({
+            editor,
+            queryString: matchingString
         });
+        closeMenu();
     }, [
         editor
     ]);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(LexicalTypeaheadMenuPlugin, {
-        anchorElem: anchorElem,
-        groupsWithOptions: groups,
-        menuRenderFn: (anchorElementRef, { selectOptionAndCleanUp, selectedOptionKey, setSelectedOptionKey })=>anchorElementRef.current && groups.length ? /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement("div", {
-                className: baseClass
-            }, groups.map((group)=>{
-                let groupTitle = group.key;
-                if (group.displayName) {
-                    groupTitle = typeof group.displayName === 'function' ? group.displayName({
-                        i18n
-                    }) : group.displayName;
-                }
-                return /*#__PURE__*/ React.createElement("div", {
-                    className: `${baseClass}__group ${baseClass}__group-${group.key}`,
-                    key: group.key
-                }, /*#__PURE__*/ React.createElement("div", {
-                    className: `${baseClass}__group-title`
-                }, groupTitle), group.options.map((option, oi)=>/*#__PURE__*/ React.createElement(SlashMenuItem, {
-                        index: oi,
-                        isSelected: selectedOptionKey === option.key,
-                        key: option.key,
-                        onClick: ()=>{
-                            setSelectedOptionKey(option.key);
-                            selectOptionAndCleanUp(option);
-                        },
-                        onMouseEnter: ()=>{
-                            setSelectedOptionKey(option.key);
-                        },
-                        option: option
-                    })));
-            })), anchorElementRef.current) : null,
-        onQueryChange: setQueryString,
-        onSelectOption: onSelectOption,
-        triggerFn: checkForTriggerMatch
-    }));
+    return /*#__PURE__*/ _jsx(React.Fragment, {
+        children: /*#__PURE__*/ _jsx(LexicalTypeaheadMenuPlugin, {
+            anchorElem: anchorElem,
+            groups: groups,
+            menuRenderFn: (anchorElementRef, { selectItemAndCleanUp, selectedItemKey, setSelectedItemKey })=>anchorElementRef.current && groups.length ? /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ _jsx("div", {
+                    className: baseClass,
+                    children: groups.map((group)=>{
+                        let groupTitle = group.key;
+                        if (group.label) {
+                            groupTitle = typeof group.label === 'function' ? group.label({
+                                i18n
+                            }) : group.label;
+                        }
+                        return /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__group ${baseClass}__group-${group.key}`,
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: `${baseClass}__group-title`,
+                                    children: groupTitle
+                                }),
+                                group.items.map((item, oi)=>/*#__PURE__*/ _jsx(SlashMenuItem, {
+                                        index: oi,
+                                        isSelected: selectedItemKey === item.key,
+                                        item: item,
+                                        onClick: ()=>{
+                                            setSelectedItemKey(item.key);
+                                            selectItemAndCleanUp(item);
+                                        },
+                                        onMouseEnter: ()=>{
+                                            setSelectedItemKey(item.key);
+                                        }
+                                    }, item.key))
+                            ]
+                        }, group.key);
+                    })
+                }), anchorElementRef.current) : null,
+            onQueryChange: setQueryString,
+            onSelectItem: onSelectItem,
+            triggerFn: checkForTriggerMatch
+        })
+    });
 }
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/lexical/plugins/SlashMenu/index.tsx"],"sourcesContent":["'use client'\nimport type { TextNode } from 'lexical'\n\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\n\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { useCallback, useMemo, useState } from 'react'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport type { SlashMenuGroup, SlashMenuOption } from './LexicalTypeaheadMenuPlugin/types.js'\n\nimport { useEditorConfigContext } from '../../config/client/EditorConfigProvider.js'\nimport { LexicalTypeaheadMenuPlugin } from './LexicalTypeaheadMenuPlugin/index.js'\nimport './index.scss'\nimport { useMenuTriggerMatch } from './useMenuTriggerMatch.js'\n\nconst baseClass = 'slash-menu-popup'\n\nfunction SlashMenuItem({\n  isSelected,\n  onClick,\n  onMouseEnter,\n  option,\n}: {\n  index: number\n  isSelected: boolean\n  onClick: () => void\n  onMouseEnter: () => void\n  option: SlashMenuOption\n}) {\n  const { i18n } = useTranslation()\n\n  let className = `${baseClass}__item ${baseClass}__item-${option.key}`\n  if (isSelected) {\n    className += ` ${baseClass}__item--selected`\n  }\n\n  let title = option.key\n  if (option.displayName) {\n    title =\n      typeof option.displayName === 'function' ? option.displayName({ i18n }) : option.displayName\n  }\n  // Crop title to max. 50 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-' + option.key}\n      key={option.key}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      ref={option.setRefElement}\n      role=\"option\"\n      tabIndex={-1}\n      type=\"button\"\n    >\n      {option?.Icon && <option.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}): JSX.Element {\n  const [editor] = useLexicalComposerContext()\n  const [queryString, setQueryString] = useState<null | string>(null)\n  const { editorConfig } = useEditorConfigContext()\n  const { i18n } = useTranslation()\n\n  const checkForTriggerMatch = useMenuTriggerMatch('/', {\n    minLength: 0,\n  })\n\n  const getDynamicOptions = useCallback(() => {\n    let groupWithOptions: Array<SlashMenuGroup> = []\n\n    for (const dynamicOption of editorConfig.features.slashMenu.dynamicOptions) {\n      const dynamicGroupWithOptions = dynamicOption({\n        editor,\n        queryString,\n      })\n      groupWithOptions = groupWithOptions.concat(dynamicGroupWithOptions)\n    }\n\n    return groupWithOptions\n  }, [editor, queryString, editorConfig?.features])\n\n  const groups: SlashMenuGroup[] = useMemo(() => {\n    let groupsWithOptions: SlashMenuGroup[] = []\n    for (const groupWithOption of editorConfig?.features.slashMenu.groupsWithOptions ?? []) {\n      groupsWithOptions.push(groupWithOption)\n    }\n\n    if (queryString) {\n      // Filter current groups first\n      groupsWithOptions = groupsWithOptions.map((group) => {\n        const filteredOptions = group.options.filter((option) => {\n          let optionTitle = option.key\n          if (option.displayName) {\n            optionTitle =\n              typeof option.displayName === 'function'\n                ? option.displayName({ i18n })\n                : option.displayName\n          }\n\n          return new RegExp(queryString, 'gi').exec(optionTitle) || option.keywords != null\n            ? option.keywords.some((keyword) => new RegExp(queryString, 'gi').exec(keyword))\n            : false\n        })\n        if (filteredOptions.length) {\n          return {\n            ...group,\n            options: filteredOptions,\n          }\n        }\n        return null\n      })\n\n      groupsWithOptions = groupsWithOptions.filter((group) => group != null)\n\n      // Now add dynamic groups\n      const dynamicOptionGroups = getDynamicOptions()\n\n      // merge dynamic options into groups\n      for (const dynamicGroup of dynamicOptionGroups) {\n        // 1. find the group with the same name or create new one\n        let group = groupsWithOptions.find((group) => group.key === dynamicGroup.key)\n        if (!group) {\n          group = {\n            ...dynamicGroup,\n            options: [],\n          }\n        } else {\n          groupsWithOptions = groupsWithOptions.filter((group) => group.key !== dynamicGroup.key)\n        }\n\n        // 2. Add options to group options array and add to sanitized.slashMenu.groupsWithOptions\n        if (group?.options?.length) {\n          group.options = group.options.concat(group.options)\n        }\n        groupsWithOptions.push(group)\n      }\n    }\n\n    return groupsWithOptions\n  }, [getDynamicOptions, queryString, editorConfig?.features, i18n])\n\n  const onSelectOption = useCallback(\n    (\n      selectedOption: SlashMenuOption,\n      nodeToRemove: TextNode | null,\n      closeMenu: () => void,\n      matchingString: string,\n    ) => {\n      editor.update(() => {\n        if (nodeToRemove) {\n          nodeToRemove.remove()\n        }\n        selectedOption.onSelect({ editor, queryString: matchingString })\n        closeMenu()\n      })\n    },\n    [editor],\n  )\n\n  return (\n    <React.Fragment>\n      <LexicalTypeaheadMenuPlugin\n        anchorElem={anchorElem}\n        groupsWithOptions={groups}\n        menuRenderFn={(\n          anchorElementRef,\n          { selectOptionAndCleanUp, selectedOptionKey, setSelectedOptionKey },\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.displayName) {\n                      groupTitle =\n                        typeof group.displayName === 'function'\n                          ? group.displayName({ i18n })\n                          : group.displayName\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.options.map((option, oi: number) => (\n                          <SlashMenuItem\n                            index={oi}\n                            isSelected={selectedOptionKey === option.key}\n                            key={option.key}\n                            onClick={() => {\n                              setSelectedOptionKey(option.key)\n                              selectOptionAndCleanUp(option)\n                            }}\n                            onMouseEnter={() => {\n                              setSelectedOptionKey(option.key)\n                            }}\n                            option={option}\n                          />\n                        ))}\n                      </div>\n                    )\n                  })}\n                </div>,\n                anchorElementRef.current,\n              )\n            : null\n        }\n        onQueryChange={setQueryString}\n        onSelectOption={onSelectOption}\n        triggerFn={checkForTriggerMatch}\n      />\n    </React.Fragment>\n  )\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","useTranslation","useCallback","useMemo","useState","React","ReactDOM","useEditorConfigContext","LexicalTypeaheadMenuPlugin","useMenuTriggerMatch","baseClass","SlashMenuItem","isSelected","onClick","onMouseEnter","option","i18n","className","key","title","displayName","length","substring","button","aria-selected","id","ref","setRefElement","role","tabIndex","type","Icon","span","SlashMenuPlugin","anchorElem","document","body","editor","queryString","setQueryString","editorConfig","checkForTriggerMatch","minLength","getDynamicOptions","groupWithOptions","dynamicOption","features","slashMenu","dynamicOptions","dynamicGroupWithOptions","concat","groups","groupsWithOptions","groupWithOption","push","map","group","filteredOptions","options","filter","optionTitle","RegExp","exec","keywords","some","keyword","dynamicOptionGroups","dynamicGroup","find","onSelectOption","selectedOption","nodeToRemove","closeMenu","matchingString","update","remove","onSelect","Fragment","menuRenderFn","anchorElementRef","selectOptionAndCleanUp","selectedOptionKey","setSelectedOptionKey","current","createPortal","div","groupTitle","oi","index","onQueryChange","triggerFn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/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/providers/Translation'\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 { LexicalTypeaheadMenuPlugin } from './LexicalTypeaheadMenuPlugin/index.js'\nimport './index.scss'\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 { 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 = typeof item.label === 'function' ? item.label({ i18n }) : 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={item.ref}\n      role=\"item\"\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\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      const dynamicGroupWithItems = dynamicItem({\n        editor,\n        queryString,\n      })\n      groupWithItems = groupWithItems.concat(dynamicGroupWithItems)\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      groupsWithItems = groupsWithItems.map((group) => {\n        const filteredItems = group.items.filter((item) => {\n          let itemTitle = item.key\n          if (item.label) {\n            itemTitle = typeof item.label === 'function' ? item.label({ i18n }) : 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  }, [getDynamicItems, queryString, editorConfig?.features, i18n])\n\n  const onSelectItem = useCallback(\n    (\n      selectedItem: SlashMenuItemType,\n      nodeToRemove: TextNode | null,\n      closeMenu: () => void,\n      matchingString: string,\n    ) => {\n      if (nodeToRemove) {\n        editor.update(() => {\n          nodeToRemove.remove()\n        })\n      }\n      selectedItem.onSelect({ editor, queryString: matchingString })\n\n      closeMenu()\n    },\n    [editor],\n  )\n\n  return (\n    <React.Fragment>\n      <LexicalTypeaheadMenuPlugin\n        anchorElem={anchorElem}\n        groups={groups as SlashMenuGroupInternal[]}\n        menuRenderFn={(\n          anchorElementRef,\n          { selectItemAndCleanUp, selectedItemKey, 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) {\n                      groupTitle =\n                        typeof group.label === 'function' ? group.label({ i18n }) : 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    </React.Fragment>\n  )\n}\n"],"names":["useLexicalComposerContext","useTranslation","useCallback","useMemo","useState","React","ReactDOM","useEditorConfigContext","LexicalTypeaheadMenuPlugin","useMenuTriggerMatch","baseClass","SlashMenuItem","isSelected","item","onClick","onMouseEnter","i18n","className","key","title","label","length","substring","button","aria-selected","id","ref","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","onSelectItem","selectedItem","nodeToRemove","closeMenu","matchingString","update","remove","onSelect","Fragment","menuRenderFn","anchorElementRef","selectItemAndCleanUp","selectedItemKey","setSelectedItemKey","current","createPortal","div","groupTitle","oi","index","onQueryChange","triggerFn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" resolution-mode="require"/>
+import * as React from 'react';
 import './index.scss';
 export declare function AddBlockHandlePlugin({ anchorElem, }: {
     anchorElem?: HTMLElement;
-}): JSX.Element;
+}): React.ReactElement;
 //# sourceMappingURL=index.d.ts.map

package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx"],"names":[],"mappings":";AAoBA,OAAO,cAAc,CAAA;AAwSrB,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,GAC3B,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB,GAAG,GAAG,CAAC,OAAO,CAGd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,cAAc,CAAA;AAwLrB,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,GAC3B,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB,GAAG,KAAK,CAAC,YAAY,CAGrB"}

package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.js

@@ -1,25 +1,21 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
-import lexicalImport from 'lexical';
-const { $createParagraphNode, $getNodeByKey } = lexicalImport;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { $createParagraphNode } from 'lexical';
 import * as React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js';
 import { isHTMLElement } from '../../../utils/guard.js';
 import { Point } from '../../../utils/point.js';
-import { Rect } from '../../../utils/rect.js';
 import { ENABLE_SLASH_MENU_COMMAND } from '../../SlashMenu/LexicalTypeaheadMenuPlugin/index.js';
-import { getCollapsedMargins } from '../utils/getCollapsedMargins.js';
+import { calculateDistanceFromScrollerElem } from '../utils/calculateDistanceFromScrollerElem.js';
+import { getNodeCloseToPoint } from '../utils/getNodeCloseToPoint.js';
 import { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js';
 import { isOnHandleElement } from '../utils/isOnHandleElement.js';
 import { setHandlePosition } from '../utils/setHandlePosition.js';
 import './index.scss';
-const SPACE = -24;
 const ADD_BLOCK_MENU_CLASSNAME = 'add-block-menu';
-const Downward = 1;
-const Upward = -1;
-const Indeterminate = 0;
 let prevIndex = Infinity;
 function getCurrentIndex(keysLength) {
     if (keysLength === 0) {
@@ -30,80 +26,10 @@ function getCurrentIndex(keysLength) {
     }
     return Math.floor(keysLength / 2);
 }
-function getBlockElement(anchorElem, editor, event, useEdgeAsDefault = false, horizontalOffset = 0) {
-    const anchorElementRect = anchorElem.getBoundingClientRect();
-    const topLevelNodeKeys = getTopLevelNodeKeys(editor);
-    let blockElem = null;
-    let blockNode = null;
-    // Return null if matching block element is the first or last node
-    editor.getEditorState().read(()=>{
-        if (useEdgeAsDefault) {
-            const [firstNode, lastNode] = [
-                editor.getElementByKey(topLevelNodeKeys[0]),
-                editor.getElementByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1])
-            ];
-            const [firstNodeRect, lastNodeRect] = [
-                firstNode?.getBoundingClientRect(),
-                lastNode?.getBoundingClientRect()
-            ];
-            if (firstNodeRect && lastNodeRect) {
-                if (event.y < firstNodeRect.top) {
-                    blockElem = firstNode;
-                } else if (event.y > lastNodeRect.bottom) {
-                    blockElem = lastNode;
-                }
-                if (blockElem) {
-                    return {
-                        blockElem: null
-                    };
-                }
-            }
-        }
-        // Find matching block element
-        let index = getCurrentIndex(topLevelNodeKeys.length);
-        let direction = Indeterminate;
-        while(index >= 0 && index < topLevelNodeKeys.length){
-            const key = topLevelNodeKeys[index];
-            const elem = editor.getElementByKey(key);
-            if (elem === null) {
-                break;
-            }
-            const point = new Point(event.x + horizontalOffset, event.y);
-            const domRect = Rect.fromDOM(elem);
-            const { marginBottom, marginTop } = getCollapsedMargins(elem);
-            const rect = domRect.generateNewRect({
-                bottom: domRect.bottom + marginBottom,
-                left: anchorElementRect.left,
-                right: anchorElementRect.right,
-                top: domRect.top - marginTop
-            });
-            const { reason: { isOnBottomSide, isOnTopSide }, result } = rect.contains(point);
-            if (result) {
-                blockElem = elem;
-                blockNode = $getNodeByKey(key);
-                prevIndex = index;
-                break;
-            }
-            if (direction === Indeterminate) {
-                if (isOnTopSide) {
-                    direction = Upward;
-                } else if (isOnBottomSide) {
-                    direction = Downward;
-                } else {
-                    // stop search block element
-                    direction = Infinity;
-                }
-            }
-            index += direction;
-        }
-    });
-    return {
-        blockElem,
-        blockNode
-    };
-}
 function useAddBlockHandle(editor, anchorElem, isEditable) {
     const scrollerElem = anchorElem.parentElement;
+    const { editorConfig } = useEditorConfigContext();
+    const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12;
     const menuRef = useRef(null);
     const [hoveredElement, setHoveredElement] = useState(null);
     useEffect(()=>{
@@ -112,36 +38,35 @@ function useAddBlockHandle(editor, anchorElem, isEditable) {
             if (!isHTMLElement(target)) {
                 return;
             }
-            let distanceFromScrollerElem = 0;
-            // Calculate distance between scrollerElem and target if target is not in scrollerElem
-            if (scrollerElem && !scrollerElem.contains(target)) {
-                const { bottom, left, right, top } = scrollerElem.getBoundingClientRect();
-                const { pageX, pageY } = event;
-                const horizontalBuffer = 50;
-                const verticalBuffer = 25;
-                const adjustedTop = top + window.scrollY;
-                const adjustedBottom = bottom + window.scrollY;
-                if (pageY < adjustedTop - verticalBuffer || pageY > adjustedBottom + verticalBuffer || pageX < left - horizontalBuffer || pageX > right + horizontalBuffer) {
-                    setHoveredElement(null);
-                    return;
-                }
-                // This is used to allow the _emptyBlockElem to be found when the mouse is in the
-                // buffer zone around the scrollerElem.
-                if (pageX < left || pageX > right) {
-                    distanceFromScrollerElem = pageX < left ? pageX - left : pageX - right;
-                }
+            const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
+            if (distanceFromScrollerElem === -1) {
+                setHoveredElement(null);
+                return;
             }
             if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {
                 return;
             }
-            const { blockElem: _emptyBlockElem, blockNode } = getBlockElement(anchorElem, editor, event, false, -distanceFromScrollerElem);
+            const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+            const { blockElem: _emptyBlockElem, blockNode, foundAtIndex } = getNodeCloseToPoint({
+                anchorElem,
+                cache_threshold: 0,
+                editor,
+                horizontalOffset: -distanceFromScrollerElem,
+                point: new Point(event.x, event.y),
+                returnEmptyParagraphs: true,
+                startIndex: getCurrentIndex(topLevelNodeKeys.length),
+                useEdgeAsDefault: false
+            });
+            prevIndex = foundAtIndex;
             if (!_emptyBlockElem) {
                 return;
             }
-            setHoveredElement({
-                elem: _emptyBlockElem,
-                node: blockNode
-            });
+            if (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem) {
+                setHoveredElement({
+                    elem: _emptyBlockElem,
+                    node: blockNode
+                });
+            }
         }
         // Since the draggableBlockElem is outside the actual editor, we need to listen to the document
         // to be able to detect when the mouse is outside the editor and respect a buffer around
@@ -153,23 +78,17 @@ function useAddBlockHandle(editor, anchorElem, isEditable) {
     }, [
         scrollerElem,
         anchorElem,
-        editor
+        editor,
+        hoveredElement
     ]);
     useEffect(()=>{
         if (menuRef.current && hoveredElement?.node) {
-            editor.getEditorState().read(()=>{
-                // Check if blockNode is an empty text node
-                let isEmptyParagraph = true;
-                if (hoveredElement.node.getType() !== 'paragraph' || hoveredElement.node.getTextContent() !== '') {
-                    isEmptyParagraph = false;
-                }
-                setHandlePosition(hoveredElement?.elem, menuRef.current, anchorElem, isEmptyParagraph ? SPACE : SPACE - 20);
-            });
+            setHandlePosition(hoveredElement?.elem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
         }
     }, [
         anchorElem,
         hoveredElement,
-        editor
+        blockHandleHorizontalOffset
     ]);
     const handleAddClick = useCallback((event)=>{
         let hoveredElementToUse = hoveredElement;
@@ -217,16 +136,19 @@ function useAddBlockHandle(editor, anchorElem, isEditable) {
         editor,
         hoveredElement
     ]);
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", {
-        className: "icon add-block-menu",
-        onClick: (event)=>{
-            handleAddClick(event);
-        },
-        ref: menuRef,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: isEditable ? 'icon' : ''
-    }))), anchorElem);
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx(React.Fragment, {
+        children: /*#__PURE__*/ _jsx("button", {
+            className: "icon add-block-menu",
+            onClick: (event)=>{
+                handleAddClick(event);
+            },
+            ref: menuRef,
+            type: "button",
+            children: /*#__PURE__*/ _jsx("div", {
+                className: isEditable ? 'icon' : ''
+            })
+        })
+    }), anchorElem);
 }
 export function AddBlockHandlePlugin({ anchorElem = document.body }) {
     const [editor] = useLexicalComposerContext();