@payloadcms/richtext-lexical 3.0.0-beta.22 → 3.0.0-beta.24

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

@@ -1,39 +1,3 @@
-export class SlashMenuOption {
-    // Icon for display
-    Icon;
-    displayName;
-    // Used for class names and, if displayName is not provided, for display.
-    key;
-    // TBD
-    keyboardShortcut;
-    // For extra searching.
-    keywords;
-    // What happens when you select this option?
-    onSelect;
-    ref;
-    constructor(key, options){
-        this.key = key;
-        this.ref = {
-            current: null
-        };
-        this.setRefElement = this.setRefElement.bind(this);
-        this.displayName = options.displayName;
-        this.keywords = options.keywords || [];
-        this.Icon = options.Icon;
-        this.keyboardShortcut = options.keyboardShortcut;
-        this.onSelect = options.onSelect.bind(this);
-    }
-    setRefElement(element) {
-        this.ref = {
-            current: element
-        };
-    }
-}
-export class SlashMenuGroup {
-    // Used for class names and, if displayName is not provided, for display.
-    displayName;
-    key;
-    options;
-}
+export { };
 
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.ts"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\nimport type { LexicalEditor } from 'lexical'\nimport type { MutableRefObject } from 'react'\nimport type React from 'react'\n\nexport class SlashMenuOption {\n  // Icon for display\n  Icon: React.FC\n\n  displayName?: (({ i18n }: { i18n: I18n }) => string) | string\n  // Used for class names and, if displayName is not provided, for display.\n  key: string\n  // TBD\n  keyboardShortcut?: string\n  // For extra searching.\n  keywords: Array<string>\n  // What happens when you select this option?\n  onSelect: ({ editor, queryString }: { editor: LexicalEditor; queryString: string }) => void\n\n  ref?: MutableRefObject<HTMLElement | null>\n\n  constructor(\n    key: string,\n    options: {\n      Icon: React.FC\n      displayName?: (({ i18n }: { i18n: I18n }) => string) | string\n      keyboardShortcut?: string\n      keywords?: Array<string>\n      onSelect: ({ editor, queryString }: { editor: LexicalEditor; queryString: string }) => void\n    },\n  ) {\n    this.key = key\n    this.ref = { current: null }\n    this.setRefElement = this.setRefElement.bind(this)\n\n    this.displayName = options.displayName\n    this.keywords = options.keywords || []\n    this.Icon = options.Icon\n    this.keyboardShortcut = options.keyboardShortcut\n    this.onSelect = options.onSelect.bind(this)\n  }\n\n  setRefElement(element: HTMLElement | null) {\n    this.ref = { current: element }\n  }\n}\n\nexport class SlashMenuGroup {\n  // Used for class names and, if displayName is not provided, for display.\n  displayName?: (({ i18n }: { i18n: I18n }) => string) | string\n  key: string\n  options: Array<SlashMenuOption>\n}\n"],"names":["SlashMenuOption","Icon","displayName","key","keyboardShortcut","keywords","onSelect","ref","constructor","options","current","setRefElement","bind","element","SlashMenuGroup"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAKA,OAAO,MAAMA;IACX,mBAAmB;IACnBC,KAAc;IAEdC,YAA6D;IAC7D,yEAAyE;IACzEC,IAAW;IACX,MAAM;IACNC,iBAAyB;IACzB,uBAAuB;IACvBC,SAAuB;IACvB,4CAA4C;IAC5CC,SAA2F;IAE3FC,IAA0C;IAE1CC,YACEL,GAAW,EACXM,OAMC,CACD;QACA,IAAI,CAACN,GAAG,GAAGA;QACX,IAAI,CAACI,GAAG,GAAG;YAAEG,SAAS;QAAK;QAC3B,IAAI,CAACC,aAAa,GAAG,IAAI,CAACA,aAAa,CAACC,IAAI,CAAC,IAAI;QAEjD,IAAI,CAACV,WAAW,GAAGO,QAAQP,WAAW;QACtC,IAAI,CAACG,QAAQ,GAAGI,QAAQJ,QAAQ,IAAI,EAAE;QACtC,IAAI,CAACJ,IAAI,GAAGQ,QAAQR,IAAI;QACxB,IAAI,CAACG,gBAAgB,GAAGK,QAAQL,gBAAgB;QAChD,IAAI,CAACE,QAAQ,GAAGG,QAAQH,QAAQ,CAACM,IAAI,CAAC,IAAI;IAC5C;IAEAD,cAAcE,OAA2B,EAAE;QACzC,IAAI,CAACN,GAAG,GAAG;YAAEG,SAASG;QAAQ;IAChC;AACF;AAEA,OAAO,MAAMC;IACX,yEAAyE;IACzEZ,YAA6D;IAC7DC,IAAW;IACXM,QAA+B;AACjC"}
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.ts"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\nimport type { LexicalEditor } from 'lexical'\nimport type { MutableRefObject } from 'react'\nimport type React from 'react'\n\nexport type SlashMenuItem = {\n  // Icon for display\n  Icon: React.FC\n\n  displayName?: (({ i18n }: { i18n: I18n }) => string) | string\n  // Used for class names and, if displayName is not provided, for display.\n  key: string\n  // TBD\n  keyboardShortcut?: string\n  // For extra searching.\n  keywords?: Array<string>\n  // What happens when you select this item?\n  onSelect: ({ editor, queryString }: { editor: LexicalEditor; queryString: string }) => void\n}\n\nexport type SlashMenuGroup = {\n  // Used for class names and, if displayName is not provided, for display.\n  displayName?: (({ i18n }: { i18n: I18n }) => string) | string\n  items: Array<SlashMenuItem>\n  key: string\n}\n\nexport type SlashMenuItemInternal = SlashMenuItem & {\n  ref: MutableRefObject<HTMLButtonElement | null>\n}\n\nexport type SlashMenuGroupInternal = SlashMenuGroup & {\n  items: Array<SlashMenuItemInternal>\n}\n"],"names":[],"rangeMappings":"","mappings":"AA+BA,WAEC"}

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

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

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

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

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

@@ -9,17 +9,17 @@ 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.displayName) {
+        title = typeof item.displayName === 'function' ? item.displayName({
             i18n
-        }) : option.displayName;
+        }) : item.displayName;
     }
     // Crop title to max. 50 characters
     if (title.length > 25) {
@@ -28,15 +28,15 @@ function SlashMenuItem({ isSelected, onClick, onMouseEnter, option }) {
     return /*#__PURE__*/ React.createElement("button", {
         "aria-selected": isSelected,
         className: className,
-        id: baseClass + '__item-' + option.key,
-        key: option.key,
+        id: baseClass + '__item-' + item.key,
+        key: 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", {
+    }, item?.Icon && /*#__PURE__*/ React.createElement(item.Icon, null), /*#__PURE__*/ React.createElement("span", {
         className: `${baseClass}__item-text`
     }, title));
 }
@@ -48,93 +48,99 @@ 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.displayName) {
+                        itemTitle = typeof item.displayName === 'function' ? item.displayName({
                             i18n
-                        }) : option.displayName;
+                        }) : item.displayName;
                     }
-                    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", {
+        groups: groups,
+        menuRenderFn: (anchorElementRef, { selectItemAndCleanUp, selectedItemKey, setSelectedItemKey })=>anchorElementRef.current && groups.length ? /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement("div", {
                 className: baseClass
             }, groups.map((group)=>{
                 let groupTitle = group.key;
@@ -148,22 +154,22 @@ export function SlashMenuPlugin({ anchorElem = document.body }) {
                     key: group.key
                 }, /*#__PURE__*/ React.createElement("div", {
                     className: `${baseClass}__group-title`
-                }, groupTitle), group.options.map((option, oi)=>/*#__PURE__*/ React.createElement(SlashMenuItem, {
+                }, groupTitle), group.items.map((item, oi)=>/*#__PURE__*/ React.createElement(SlashMenuItem, {
                         index: oi,
-                        isSelected: selectedOptionKey === option.key,
-                        key: option.key,
+                        isSelected: selectedItemKey === item.key,
+                        item: item,
+                        key: item.key,
                         onClick: ()=>{
-                            setSelectedOptionKey(option.key);
-                            selectOptionAndCleanUp(option);
+                            setSelectedItemKey(item.key);
+                            selectItemAndCleanUp(item);
                         },
                         onMouseEnter: ()=>{
-                            setSelectedOptionKey(option.key);
-                        },
-                        option: option
+                            setSelectedItemKey(item.key);
+                        }
                     })));
             })), anchorElementRef.current) : null,
         onQueryChange: setQueryString,
-        onSelectOption: onSelectOption,
+        onSelectItem: onSelectItem,
         triggerFn: checkForTriggerMatch
     }));
 }

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 { 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 { 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":["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":"AAAA;AAGA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AACtD,YAAYC,WAAW,QAAO;AAC9B,YAAYC,cAAc,YAAW;AAIrC,SAASC,sBAAsB,QAAQ,8CAA6C;AACpF,SAASC,0BAA0B,QAAQ,wCAAuC;AAClF,OAAO,eAAc;AACrB,SAASC,mBAAmB,QAAQ,2BAA0B;AAE9D,MAAMC,YAAY;AAElB,SAASC,cAAc,EACrBC,UAAU,EACVC,OAAO,EACPC,YAAY,EACZC,MAAM,EAOP;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGf;IAEjB,IAAIgB,YAAY,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,OAAO,EAAEK,OAAOG,GAAG,CAAC,CAAC;IACrE,IAAIN,YAAY;QACdK,aAAa,CAAC,CAAC,EAAEP,UAAU,gBAAgB,CAAC;IAC9C;IAEA,IAAIS,QAAQJ,OAAOG,GAAG;IACtB,IAAIH,OAAOK,WAAW,EAAE;QACtBD,QACE,OAAOJ,OAAOK,WAAW,KAAK,aAAaL,OAAOK,WAAW,CAAC;YAAEJ;QAAK,KAAKD,OAAOK,WAAW;IAChG;IACA,mCAAmC;IACnC,IAAID,MAAME,MAAM,GAAG,IAAI;QACrBF,QAAQA,MAAMG,SAAS,CAAC,GAAG,MAAM;IACnC;IAEA,qBACE,oBAACC;QACCC,iBAAeZ;QACfK,WAAWA;QACXQ,IAAIf,YAAY,YAAYK,OAAOG,GAAG;QACtCA,KAAKH,OAAOG,GAAG;QACfL,SAASA;QACTC,cAAcA;QACdY,KAAKX,OAAOY,aAAa;QACzBC,MAAK;QACLC,UAAU,CAAC;QACXC,MAAK;OAEJf,QAAQgB,sBAAQ,oBAAChB,OAAOgB,IAAI,uBAE7B,oBAACC;QAAKf,WAAW,CAAC,EAAEP,UAAU,WAAW,CAAC;OAAGS;AAGnD;AAEA,OAAO,SAASc,gBAAgB,EAC9BC,aAAaC,SAASC,IAAI,EAG3B;IACC,MAAM,CAACC,OAAO,GAAGrC;IACjB,MAAM,CAACsC,aAAaC,eAAe,GAAGnC,SAAwB;IAC9D,MAAM,EAAEoC,YAAY,EAAE,GAAGjC;IACzB,MAAM,EAAES,IAAI,EAAE,GAAGf;IAEjB,MAAMwC,uBAAuBhC,oBAAoB,KAAK;QACpDiC,WAAW;IACb;IAEA,MAAMC,oBAAoBzC,YAAY;QACpC,IAAI0C,mBAA0C,EAAE;QAEhD,KAAK,MAAMC,iBAAiBL,aAAaM,QAAQ,CAACC,SAAS,CAACC,cAAc,CAAE;YAC1E,MAAMC,0BAA0BJ,cAAc;gBAC5CR;gBACAC;YACF;YACAM,mBAAmBA,iBAAiBM,MAAM,CAACD;QAC7C;QAEA,OAAOL;IACT,GAAG;QAACP;QAAQC;QAAaE,cAAcM;KAAS;IAEhD,MAAMK,SAA2BhD,QAAQ;QACvC,IAAIiD,oBAAsC,EAAE;QAC5C,KAAK,MAAMC,mBAAmBb,cAAcM,SAASC,UAAUK,qBAAqB,EAAE,CAAE;YACtFA,kBAAkBE,IAAI,CAACD;QACzB;QAEA,IAAIf,aAAa;YACf,8BAA8B;YAC9Bc,oBAAoBA,kBAAkBG,GAAG,CAAC,CAACC;gBACzC,MAAMC,kBAAkBD,MAAME,OAAO,CAACC,MAAM,CAAC,CAAC5C;oBAC5C,IAAI6C,cAAc7C,OAAOG,GAAG;oBAC5B,IAAIH,OAAOK,WAAW,EAAE;wBACtBwC,cACE,OAAO7C,OAAOK,WAAW,KAAK,aAC1BL,OAAOK,WAAW,CAAC;4BAAEJ;wBAAK,KAC1BD,OAAOK,WAAW;oBAC1B;oBAEA,OAAO,IAAIyC,OAAOvB,aAAa,MAAMwB,IAAI,CAACF,gBAAgB7C,OAAOgD,QAAQ,IAAI,OACzEhD,OAAOgD,QAAQ,CAACC,IAAI,CAAC,CAACC,UAAY,IAAIJ,OAAOvB,aAAa,MAAMwB,IAAI,CAACG,YACrE;gBACN;gBACA,IAAIR,gBAAgBpC,MAAM,EAAE;oBAC1B,OAAO;wBACL,GAAGmC,KAAK;wBACRE,SAASD;oBACX;gBACF;gBACA,OAAO;YACT;YAEAL,oBAAoBA,kBAAkBO,MAAM,CAAC,CAACH,QAAUA,SAAS;YAEjE,yBAAyB;YACzB,MAAMU,sBAAsBvB;YAE5B,oCAAoC;YACpC,KAAK,MAAMwB,gBAAgBD,oBAAqB;gBAC9C,yDAAyD;gBACzD,IAAIV,QAAQJ,kBAAkBgB,IAAI,CAAC,CAACZ,QAAUA,MAAMtC,GAAG,KAAKiD,aAAajD,GAAG;gBAC5E,IAAI,CAACsC,OAAO;oBACVA,QAAQ;wBACN,GAAGW,YAAY;wBACfT,SAAS,EAAE;oBACb;gBACF,OAAO;oBACLN,oBAAoBA,kBAAkBO,MAAM,CAAC,CAACH,QAAUA,MAAMtC,GAAG,KAAKiD,aAAajD,GAAG;gBACxF;gBAEA,yFAAyF;gBACzF,IAAIsC,OAAOE,SAASrC,QAAQ;oBAC1BmC,MAAME,OAAO,GAAGF,MAAME,OAAO,CAACR,MAAM,CAACM,MAAME,OAAO;gBACpD;gBACAN,kBAAkBE,IAAI,CAACE;YACzB;QACF;QAEA,OAAOJ;IACT,GAAG;QAACT;QAAmBL;QAAaE,cAAcM;QAAU9B;KAAK;IAEjE,MAAMqD,iBAAiBnE,YACrB,CACEoE,gBACAC,cACAC,WACAC;QAEApC,OAAOqC,MAAM,CAAC;YACZ,IAAIH,cAAc;gBAChBA,aAAaI,MAAM;YACrB;YACAL,eAAeM,QAAQ,CAAC;gBAAEvC;gBAAQC,aAAamC;YAAe;YAC9DD;QACF;IACF,GACA;QAACnC;KAAO;IAGV,qBACE,oBAAChC,MAAMwE,QAAQ,sBACb,oBAACrE;QACC0B,YAAYA;QACZkB,mBAAmBD;QACnB2B,cAAc,CACZC,kBACA,EAAEC,sBAAsB,EAAEC,iBAAiB,EAAEC,oBAAoB,EAAE,GAEnEH,iBAAiBI,OAAO,IAAIhC,OAAO9B,MAAM,iBACrCf,SAAS8E,YAAY,eACnB,oBAACC;gBAAIpE,WAAWP;eACbyC,OAAOI,GAAG,CAAC,CAACC;gBACX,IAAI8B,aAAa9B,MAAMtC,GAAG;gBAC1B,IAAIsC,MAAMpC,WAAW,EAAE;oBACrBkE,aACE,OAAO9B,MAAMpC,WAAW,KAAK,aACzBoC,MAAMpC,WAAW,CAAC;wBAAEJ;oBAAK,KACzBwC,MAAMpC,WAAW;gBACzB;gBAEA,qBACE,oBAACiE;oBACCpE,WAAW,CAAC,EAAEP,UAAU,QAAQ,EAAEA,UAAU,QAAQ,EAAE8C,MAAMtC,GAAG,CAAC,CAAC;oBACjEA,KAAKsC,MAAMtC,GAAG;iCAEd,oBAACmE;oBAAIpE,WAAW,CAAC,EAAEP,UAAU,aAAa,CAAC;mBAAG4E,aAC7C9B,MAAME,OAAO,CAACH,GAAG,CAAC,CAACxC,QAAQwE,mBAC1B,oBAAC5E;wBACC6E,OAAOD;wBACP3E,YAAYqE,sBAAsBlE,OAAOG,GAAG;wBAC5CA,KAAKH,OAAOG,GAAG;wBACfL,SAAS;4BACPqE,qBAAqBnE,OAAOG,GAAG;4BAC/B8D,uBAAuBjE;wBACzB;wBACAD,cAAc;4BACZoE,qBAAqBnE,OAAOG,GAAG;wBACjC;wBACAH,QAAQA;;YAKlB,KAEFgE,iBAAiBI,OAAO,IAE1B;QAENM,eAAelD;QACf8B,gBAAgBA;QAChBqB,WAAWjD;;AAInB"}
+{"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.displayName) {\n    title = typeof item.displayName === 'function' ? item.displayName({ i18n }) : item.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-' + 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.displayName) {\n            itemTitle =\n              typeof item.displayName === 'function' ? item.displayName({ i18n }) : item.displayName\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.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.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","displayName","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/{FloatingSelectToolbar → toolbars/fixed}/types.d.ts

@@ -1,24 +1,24 @@
 import type { BaseSelection, LexicalEditor } from 'lexical';
 import type React from 'react';
-export type FloatingToolbarSection = {
+export type FixedToolbarGroup = {
     ChildComponent?: React.FC;
-    entries: Array<FloatingToolbarSectionEntry>;
+    items: Array<FixedToolbarGroupItem>;
     key: string;
     order?: number;
     type: 'dropdown';
 } | {
-    entries: Array<FloatingToolbarSectionEntry>;
+    items: Array<FixedToolbarGroupItem>;
     key: string;
     order?: number;
     type: 'buttons';
 };
-export type FloatingToolbarSectionEntry = {
+export type FixedToolbarGroupItem = {
     ChildComponent?: React.FC;
     /** Use component to ignore the children and onClick properties. It does not use the default, pre-defined format Button component */
     Component?: React.FC<{
         anchorElem: HTMLElement;
         editor: LexicalEditor;
-        entry: FloatingToolbarSectionEntry;
+        item: FixedToolbarGroupItem;
     }>;
     isActive?: ({ editor, selection }: {
         editor: LexicalEditor;
@@ -29,7 +29,7 @@ export type FloatingToolbarSectionEntry = {
         selection: BaseSelection;
     }) => boolean;
     key: string;
-    /** The label is displayed as text if the entry is part of a dropdown section */
+    /** The label is displayed as text if the item is part of a dropdown group */
     label?: string;
     onClick?: ({ editor, isActive }: {
         editor: LexicalEditor;

package/dist/field/lexical/plugins/toolbars/fixed/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/toolbars/fixed/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,iBAAiB,GACzB;IACE,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB,KAAK,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAA;IACnC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,UAAU,CAAA;CACjB,GACD;IACE,KAAK,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAA;IACnC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAEL,MAAM,MAAM,qBAAqB,GAAG;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB,oIAAoI;IACpI,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QACnB,UAAU,EAAE,WAAW,CAAA;QACvB,MAAM,EAAE,aAAa,CAAA;QACrB,IAAI,EAAE,qBAAqB,CAAA;KAC5B,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,aAAa,CAAC;QAAC,SAAS,EAAE,aAAa,CAAA;KAAE,KAAK,OAAO,CAAA;IAClG,SAAS,CAAC,EAAE,CAAC,EACX,MAAM,EACN,SAAS,GACV,EAAE;QACD,MAAM,EAAE,aAAa,CAAA;QACrB,SAAS,EAAE,aAAa,CAAA;KACzB,KAAK,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;QAAE,MAAM,EAAE,aAAa,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACtF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

package/dist/field/lexical/plugins/toolbars/fixed/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/toolbars/fixed/types.ts"],"sourcesContent":["import type { BaseSelection, LexicalEditor } from 'lexical'\nimport type React from 'react'\n\nexport type FixedToolbarGroup =\n  | {\n      ChildComponent?: React.FC\n      items: Array<FixedToolbarGroupItem>\n      key: string\n      order?: number\n      type: 'dropdown'\n    }\n  | {\n      items: Array<FixedToolbarGroupItem>\n      key: string\n      order?: number\n      type: 'buttons'\n    }\n\nexport type FixedToolbarGroupItem = {\n  ChildComponent?: React.FC\n  /** Use component to ignore the children and onClick properties. It does not use the default, pre-defined format Button component */\n  Component?: React.FC<{\n    anchorElem: HTMLElement\n    editor: LexicalEditor\n    item: FixedToolbarGroupItem\n  }>\n  isActive?: ({ editor, selection }: { editor: LexicalEditor; selection: BaseSelection }) => boolean\n  isEnabled?: ({\n    editor,\n    selection,\n  }: {\n    editor: LexicalEditor\n    selection: BaseSelection\n  }) => boolean\n  key: string\n  /** The label is displayed as text if the item is part of a dropdown group */\n  label?: string\n  onClick?: ({ editor, isActive }: { editor: LexicalEditor; isActive: boolean }) => void\n  order?: number\n}\n"],"names":[],"rangeMappings":"","mappings":"AAkBA,WAqBC"}

package/dist/field/lexical/plugins/toolbars/inline/Toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/field/lexical/plugins/toolbars/inline/Toolbar/index.tsx"],"names":[],"mappings":";AAuBA,OAAO,cAAc,CAAA;AAsVrB,wBAAgB,2BAA2B,CAAC,EAC1C,UAA0B,GAC3B,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAGrB"}

package/dist/field/lexical/plugins/{FloatingSelectToolbar → toolbars/inline/Toolbar}/index.js

@@ -5,51 +5,51 @@ import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, SE
 import { useCallback, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { useEditorConfigContext } from '../../config/client/EditorConfigProvider.js';
-import { getDOMRangeRect } from '../../utils/getDOMRangeRect.js';
-import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition.js';
-import { ToolbarButton } from './ToolbarButton/index.js';
-import { ToolbarDropdown } from './ToolbarDropdown/index.js';
+import { useEditorConfigContext } from '../../../../config/client/EditorConfigProvider.js';
+import { getDOMRangeRect } from '../../../../utils/getDOMRangeRect.js';
+import { setFloatingElemPosition } from '../../../../utils/setFloatingElemPosition.js';
+import { ToolbarButton } from '../ToolbarButton/index.js';
+import { ToolbarDropdown } from '../ToolbarDropdown/index.js';
 import './index.scss';
-function ButtonSectionEntry({ anchorElem, editor, entry }) {
-    if (entry.Component) {
-        return entry?.Component && /*#__PURE__*/ React.createElement(entry.Component, {
+function ButtonGroupItem({ anchorElem, editor, item }) {
+    if (item.Component) {
+        return item?.Component && /*#__PURE__*/ React.createElement(item.Component, {
             anchorElem: anchorElem,
             editor: editor,
-            entry: entry,
-            key: entry.key
+            item: item,
+            key: item.key
         });
     }
     return /*#__PURE__*/ React.createElement(ToolbarButton, {
-        entry: entry,
-        key: entry.key
-    }, entry?.ChildComponent && /*#__PURE__*/ React.createElement(entry.ChildComponent, null));
+        item: item,
+        key: item.key
+    }, item?.ChildComponent && /*#__PURE__*/ React.createElement(item.ChildComponent, null));
 }
-function ToolbarSection({ anchorElem, editor, index, section }) {
+function ToolbarGroup({ anchorElem, editor, group, index }) {
     const { editorConfig } = useEditorConfigContext();
-    const Icon = section?.type === 'dropdown' && section.entries.length && section.ChildComponent ? section.ChildComponent : null;
+    const Icon = group?.type === 'dropdown' && group.items.length && group.ChildComponent ? group.ChildComponent : null;
     return /*#__PURE__*/ React.createElement("div", {
-        className: `floating-select-toolbar-popup__section floating-select-toolbar-popup__section-${section.key}`,
-        key: section.key
-    }, section.type === 'dropdown' && section.entries.length && (Icon ? /*#__PURE__*/ React.createElement(ToolbarDropdown, {
+        className: `inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`,
+        key: group.key
+    }, group.type === 'dropdown' && group.items.length && (Icon ? /*#__PURE__*/ React.createElement(ToolbarDropdown, {
         Icon: Icon,
         anchorElem: anchorElem,
         editor: editor,
-        entries: section.entries,
-        sectionKey: section.key
+        groupKey: group.key,
+        items: group.items
     }) : /*#__PURE__*/ React.createElement(ToolbarDropdown, {
         anchorElem: anchorElem,
         editor: editor,
-        entries: section.entries,
-        sectionKey: section.key
-    })), section.type === 'buttons' && section.entries.length && section.entries.map((entry)=>{
-        return /*#__PURE__*/ React.createElement(ButtonSectionEntry, {
+        groupKey: group.key,
+        items: group.items
+    })), group.type === 'buttons' && group.items.length && group.items.map((item)=>{
+        return /*#__PURE__*/ React.createElement(ButtonGroupItem, {
             anchorElem: anchorElem,
             editor: editor,
-            entry: entry,
-            key: entry.key
+            item: item,
+            key: item.key
         });
-    }), index < editorConfig.features.floatingSelectToolbar?.sections.length - 1 && /*#__PURE__*/ React.createElement("div", {
+    }), index < editorConfig.features.toolbarInline?.groups.length - 1 && /*#__PURE__*/ React.createElement("div", {
         className: "divider"
     }));
 }
@@ -172,18 +172,18 @@ function FloatingSelectToolbar({ anchorElem, editor }) {
         updateTextFormatFloatingToolbar
     ]);
     return /*#__PURE__*/ React.createElement("div", {
-        className: "floating-select-toolbar-popup",
+        className: "inline-toolbar-popup",
         ref: floatingToolbarRef
     }, /*#__PURE__*/ React.createElement("div", {
         className: "caret",
         ref: caretRef
-    }), editor.isEditable() && /*#__PURE__*/ React.createElement(React.Fragment, null, editorConfig?.features && editorConfig.features?.floatingSelectToolbar?.sections.map((section, i)=>{
-        return /*#__PURE__*/ React.createElement(ToolbarSection, {
+    }), editor.isEditable() && /*#__PURE__*/ React.createElement(React.Fragment, null, editorConfig?.features && editorConfig.features?.toolbarInline?.groups.map((group, i)=>{
+        return /*#__PURE__*/ React.createElement(ToolbarGroup, {
             anchorElem: anchorElem,
             editor: editor,
+            group: group,
             index: i,
-            key: section.key,
-            section: section
+            key: group.key
         });
     })));
 }

package/dist/field/lexical/plugins/toolbars/inline/Toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/field/lexical/plugins/toolbars/inline/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } 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  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { InlineToolbarGroup, InlineToolbarGroupItem } from '../types.js'\n\nimport { useEditorConfigContext } from '../../../../config/client/EditorConfigProvider.js'\nimport { getDOMRangeRect } from '../../../../utils/getDOMRangeRect.js'\nimport { setFloatingElemPosition } from '../../../../utils/setFloatingElemPosition.js'\nimport { ToolbarButton } from '../ToolbarButton/index.js'\nimport { ToolbarDropdown } from '../ToolbarDropdown/index.js'\nimport './index.scss'\n\nfunction ButtonGroupItem({\n  anchorElem,\n  editor,\n  item,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  item: InlineToolbarGroupItem\n}): React.ReactNode {\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n      )\n    )\n  }\n\n  return (\n    <ToolbarButton item={item} key={item.key}>\n      {item?.ChildComponent && <item.ChildComponent />}\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroup({\n  anchorElem,\n  editor,\n  group,\n  index,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  group: InlineToolbarGroup\n  index: number\n}): React.ReactNode {\n  const { editorConfig } = useEditorConfigContext()\n\n  const Icon =\n    group?.type === 'dropdown' && group.items.length && group.ChildComponent\n      ? group.ChildComponent\n      : null\n\n  return (\n    <div\n      className={`inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`}\n      key={group.key}\n    >\n      {group.type === 'dropdown' &&\n        group.items.length &&\n        (Icon ? (\n          <ToolbarDropdown\n            Icon={Icon}\n            anchorElem={anchorElem}\n            editor={editor}\n            groupKey={group.key}\n            items={group.items}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            groupKey={group.key}\n            items={group.items}\n          />\n        ))}\n      {group.type === 'buttons' &&\n        group.items.length &&\n        group.items.map((item) => {\n          return (\n            <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n          )\n        })}\n      {index < editorConfig.features.toolbarInline?.groups.length - 1 && (\n        <div className=\"divider\" />\n      )}\n    </div>\n  )\n}\n\nfunction FloatingSelectToolbar({\n  anchorElem,\n  editor,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n}): React.ReactNode {\n  const floatingToolbarRef = useRef<HTMLDivElement | null>(null)\n  const caretRef = useRef<HTMLDivElement | null>(null)\n\n  const { editorConfig } = useEditorConfigContext()\n\n  const closeFloatingToolbar = useCallback(() => {\n    if (floatingToolbarRef?.current) {\n      const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n      const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n\n      if (!isOpacityZero) {\n        floatingToolbarRef.current.style.opacity = '0'\n      }\n      if (!isPointerEventsNone) {\n        floatingToolbarRef.current.style.pointerEvents = 'none'\n      }\n    }\n  }, [floatingToolbarRef])\n\n  const mouseMoveListener = useCallback(\n    (e: MouseEvent) => {\n      if (floatingToolbarRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n        const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n        const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n        if (!isOpacityZero || !isPointerEventsNone) {\n          // Check if the mouse is not over the popup\n          const x = e.clientX\n          const y = e.clientY\n          const elementUnderMouse = document.elementFromPoint(x, y)\n          if (!floatingToolbarRef.current.contains(elementUnderMouse)) {\n            // Mouse is not over the target element => not a normal click, but probably a drag\n            closeFloatingToolbar()\n          }\n        }\n      }\n    },\n    [closeFloatingToolbar],\n  )\n\n  const mouseUpListener = useCallback(() => {\n    if (floatingToolbarRef?.current) {\n      if (floatingToolbarRef.current.style.opacity !== '1') {\n        floatingToolbarRef.current.style.opacity = '1'\n      }\n      if (floatingToolbarRef.current.style.pointerEvents !== 'auto') {\n        floatingToolbarRef.current.style.pointerEvents = 'auto'\n      }\n    }\n  }, [floatingToolbarRef])\n\n  useEffect(() => {\n    document.addEventListener('mousemove', mouseMoveListener)\n    document.addEventListener('mouseup', mouseUpListener)\n\n    return () => {\n      document.removeEventListener('mousemove', mouseMoveListener)\n      document.removeEventListener('mouseup', mouseUpListener)\n    }\n  }, [floatingToolbarRef, mouseMoveListener, mouseUpListener])\n\n  const updateTextFormatFloatingToolbar = useCallback(() => {\n    const selection = $getSelection()\n\n    const nativeSelection = window.getSelection()\n\n    if (floatingToolbarRef.current === null) {\n      return\n    }\n\n    const rootElement = editor.getRootElement()\n    if (\n      selection !== null &&\n      nativeSelection !== null &&\n      !nativeSelection.isCollapsed &&\n      rootElement !== null &&\n      rootElement.contains(nativeSelection.anchorNode)\n    ) {\n      const rangeRect = getDOMRangeRect(nativeSelection, rootElement)\n\n      // Position floating toolbar\n      const offsetIfFlipped = setFloatingElemPosition(\n        rangeRect, // selection to position around\n        floatingToolbarRef.current, // what to position\n        anchorElem, // anchor elem\n        'center',\n      )\n\n      // Position caret\n      if (caretRef.current) {\n        setFloatingElemPosition(\n          rangeRect, // selection to position around\n          caretRef.current, // what to position\n          floatingToolbarRef.current, // anchor elem\n          'center',\n          10,\n          5,\n          true,\n          offsetIfFlipped,\n        )\n      }\n    }\n  }, [editor, anchorElem])\n\n  useEffect(() => {\n    const scrollerElem = anchorElem.parentElement\n\n    const update = () => {\n      editor.getEditorState().read(() => {\n        updateTextFormatFloatingToolbar()\n      })\n    }\n\n    window.addEventListener('resize', update)\n    if (scrollerElem) {\n      scrollerElem.addEventListener('scroll', update)\n    }\n\n    return () => {\n      window.removeEventListener('resize', update)\n      if (scrollerElem) {\n        scrollerElem.removeEventListener('scroll', update)\n      }\n    }\n  }, [editor, updateTextFormatFloatingToolbar, anchorElem])\n\n  useEffect(() => {\n    editor.getEditorState().read(() => {\n      updateTextFormatFloatingToolbar()\n    })\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          updateTextFormatFloatingToolbar()\n        })\n      }),\n\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          updateTextFormatFloatingToolbar()\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor, updateTextFormatFloatingToolbar])\n\n  return (\n    <div className=\"inline-toolbar-popup\" ref={floatingToolbarRef}>\n      <div className=\"caret\" ref={caretRef} />\n      {editor.isEditable() && (\n        <React.Fragment>\n          {editorConfig?.features &&\n            editorConfig.features?.toolbarInline?.groups.map((group, i) => {\n              return (\n                <ToolbarGroup\n                  anchorElem={anchorElem}\n                  editor={editor}\n                  group={group}\n                  index={i}\n                  key={group.key}\n                />\n              )\n            })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\nfunction useFloatingTextFormatToolbar(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n): JSX.Element | null {\n  const [isText, setIsText] = useState(false)\n\n  const updatePopup = useCallback(() => {\n    editor.getEditorState().read(() => {\n      // Should not to pop up the floating toolbar when using IME input\n      if (editor.isComposing()) {\n        return\n      }\n      const selection = $getSelection()\n      const nativeSelection = window.getSelection()\n      const rootElement = editor.getRootElement()\n\n      if (\n        nativeSelection !== null &&\n        (!$isRangeSelection(selection) ||\n          rootElement === null ||\n          !rootElement.contains(nativeSelection.anchorNode))\n      ) {\n        setIsText(false)\n        return\n      }\n\n      if (!$isRangeSelection(selection)) {\n        return\n      }\n\n      if (selection.getTextContent() !== '') {\n        const nodes = selection.getNodes()\n        let foundNodeWithText = false\n        for (const node of nodes) {\n          if ($isTextNode(node)) {\n            setIsText(true)\n            foundNodeWithText = true\n            break\n          }\n        }\n        if (!foundNodeWithText) {\n          setIsText(false)\n        }\n      } else {\n        setIsText(false)\n      }\n\n      const rawTextContent = selection.getTextContent().replace(/\\n/g, '')\n      if (!selection.isCollapsed() && rawTextContent === '') {\n        setIsText(false)\n        return\n      }\n    })\n  }, [editor])\n\n  useEffect(() => {\n    document.addEventListener('selectionchange', updatePopup)\n    document.addEventListener('mouseup', updatePopup)\n    return () => {\n      document.removeEventListener('selectionchange', updatePopup)\n      document.removeEventListener('mouseup', updatePopup)\n    }\n  }, [updatePopup])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updatePopup()\n      }),\n      editor.registerRootListener(() => {\n        if (editor.getRootElement() === null) {\n          setIsText(false)\n        }\n      }),\n    )\n  }, [editor, updatePopup])\n\n  if (!isText) {\n    return null\n  }\n\n  return createPortal(<FloatingSelectToolbar anchorElem={anchorElem} editor={editor} />, anchorElem)\n}\n\nexport function FloatingSelectToolbarPlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): JSX.Element | null {\n  const [editor] = useLexicalComposerContext()\n  return useFloatingTextFormatToolbar(editor, anchorElem)\n}\n"],"names":["useLexicalComposerContext","mergeRegister","$getSelection","$isRangeSelection","$isTextNode","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","useCallback","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","getDOMRangeRect","setFloatingElemPosition","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","key","ChildComponent","ToolbarGroup","group","index","editorConfig","Icon","type","items","length","div","className","groupKey","map","features","toolbarInline","groups","FloatingSelectToolbar","floatingToolbarRef","caretRef","closeFloatingToolbar","current","isOpacityZero","style","opacity","isPointerEventsNone","pointerEvents","mouseMoveListener","e","buttons","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","offsetIfFlipped","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","ref","isEditable","Fragment","i","useFloatingTextFormatToolbar","isText","setIsText","updatePopup","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","registerRootListener","FloatingSelectToolbarPlugin","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/lexical/plugins/{FloatingSelectToolbar → toolbars/inline/Toolbar}/index.scss

@@ -1,12 +1,12 @@
-@import '../../../../scss/styles.scss';
+@import '../../../../../../scss/styles';
 
 html[data-theme='light'] {
-  .floating-select-toolbar-popup {
+  .inline-toolbar-popup {
     @include shadow-m;
   }
 }
 
-.floating-select-toolbar-popup {
+.inline-toolbar-popup {
   display: flex;
   align-items: center;
   background: var(--color-base-0);
@@ -31,9 +31,10 @@ html[data-theme='light'] {
     border-top-color: var(--color-base-0);
   }
 
-  &__section {
+  &__group {
     display: flex;
     align-items: center;
+    gap: 2px;
 
     .icon {
       min-width: 20px;

package/dist/field/lexical/plugins/toolbars/inline/ToolbarButton/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { InlineToolbarGroupItem } from '../types.js';
+import './index.scss';
+export declare const ToolbarButton: ({ children, item, }: {
+    children: React.JSX.Element;
+    item: InlineToolbarGroupItem;
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/field/lexical/plugins/toolbars/inline/ToolbarButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/field/lexical/plugins/toolbars/inline/ToolbarButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAEzD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,aAAa,wBAGvB;IACD,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAA;IAC3B,IAAI,EAAE,sBAAsB,CAAA;CAC7B,sBA8EA,CAAA"}