@payloadcms/richtext-lexical 3.0.0-canary.95fcd13 → 3.0.0-canary.9beaa28

package/dist/features/toolbars/shared/ToolbarDropdown/DropDown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport React, { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nconst baseClass = 'toolbar-popup__dropdown-item'\n\ninterface DropDownContextType {\n  registerItem: (ref: React.RefObject<HTMLButtonElement | null>) => void\n}\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null)\n\nexport function DropDownItem({\n  active,\n  children,\n  editor,\n  enabled,\n  item,\n  title,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n  title?: string\n}): React.ReactNode {\n  const [className, setClassName] = useState<string>(baseClass)\n\n  useEffect(() => {\n    setClassName(\n      [\n        baseClass,\n        enabled === false ? 'disabled' : '',\n        active ? 'active' : '',\n        item?.key ? `${baseClass}-${item.key}` : '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    )\n  }, [enabled, active, className, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.useContext(DropDownContext)\n\n  if (dropDownContext === null) {\n    throw new Error('DropDownItem must be used within a DropDown')\n  }\n\n  const { registerItem } = dropDownContext\n\n  useEffect(() => {\n    if (ref?.current != null) {\n      registerItem(ref)\n    }\n  }, [ref, registerItem])\n\n  return (\n    <button\n      className={className}\n      onClick={() => {\n        if (enabled !== false) {\n          editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n          editor.focus(() => {\n            // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n            item.onSelect({\n              editor,\n              isActive: active,\n            })\n          })\n        }\n      }}\n      onMouseDown={(e) => {\n        // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.\n        // This only happens in Firefox. Must be something about how Firefox handles focus events differently.\n        e.preventDefault()\n      }}\n      ref={ref}\n      title={title}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n\nfunction DropDownItems({\n  children,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n}: {\n  children: React.ReactNode\n  dropDownRef: React.Ref<HTMLDivElement>\n  itemsContainerClassNames?: string[]\n  onClose: () => void\n}): React.ReactElement {\n  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement | null>>>()\n  const [highlightedItem, setHighlightedItem] =\n    useState<React.RefObject<HTMLButtonElement | null>>()\n\n  const registerItem = useCallback(\n    (itemRef: React.RefObject<HTMLButtonElement | null>) => {\n      setItems((prev) => (prev != null ? [...prev, itemRef] : [itemRef]))\n    },\n    [setItems],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (items == null) return\n\n    const { key } = event\n\n    if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape' || key === 'Tab') {\n      onClose()\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) return items[0]\n        const index = items.indexOf(prev) - 1\n        return items[index === -1 ? items.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) return items[0]\n        return items[items.indexOf(prev) + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (items != null && highlightedItem == null) {\n      setHighlightedItem(items[0])\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem])\n\n  return (\n    <DropDownContext.Provider value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        onKeyDown={handleKeyDown}\n        ref={dropDownRef}\n      >\n        {children}\n      </div>\n    </DropDownContext.Provider>\n  )\n}\n\nexport function DropDown({\n  Icon,\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  Icon?: React.FC\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  itemsContainerClassNames?: string[]\n  label?: string\n  stopCloseOnClickSelf?: boolean\n}): React.ReactNode {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = (): void => {\n    setShowDropDown(false)\n    if (buttonRef?.current != null) {\n      buttonRef.current.focus()\n    }\n  }\n\n  useEffect(() => {\n    const button = buttonRef.current\n    const dropDown = dropDownRef.current\n\n    if (showDropDown && button !== null && dropDown !== null) {\n      const { left, top } = button.getBoundingClientRect()\n      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop\n      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`\n      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`\n    }\n  }, [dropDownRef, buttonRef, showDropDown])\n\n  useEffect(() => {\n    const button = buttonRef.current\n\n    if (button !== null && showDropDown) {\n      const handle = (event: MouseEvent): void => {\n        const { target } = event\n        if (stopCloseOnClickSelf != null) {\n          if (dropDownRef.current != null && dropDownRef.current.contains(target as Node)) {\n            return\n          }\n        }\n        if (!button.contains(target as Node)) {\n          setShowDropDown(false)\n        }\n      }\n      document.addEventListener('click', handle)\n\n      return () => {\n        document.removeEventListener('click', handle)\n      }\n    }\n  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf])\n\n  const portal = createPortal(\n    <DropDownItems\n      dropDownRef={dropDownRef}\n      itemsContainerClassNames={itemsContainerClassNames}\n      onClose={handleClose}\n    >\n      {children}\n    </DropDownItems>,\n    document.body,\n  )\n\n  return (\n    <React.Fragment>\n      <button\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          setShowDropDown(!showDropDown)\n        }}\n        onMouseDown={(e) => {\n          // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n          // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n          // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n          e.preventDefault()\n        }}\n        ref={buttonRef}\n        type=\"button\"\n      >\n        {Icon && <Icon />}\n        {label && <span className=\"toolbar-popup__dropdown-label\">{label}</span>}\n        <i className=\"toolbar-popup__dropdown-caret\" />\n      </button>\n\n      {showDropDown && <React.Fragment>{portal}</React.Fragment>}\n    </React.Fragment>\n  )\n}\n"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","createPortal","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","item","title","className","setClassName","key","filter","Boolean","join","ref","dropDownContext","useContext","Error","registerItem","current","button","onClick","_updateTags","Set","focus","onSelect","isActive","onMouseDown","e","preventDefault","type","DropDownItems","dropDownRef","itemsContainerClassNames","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","includes","index","indexOf","length","contextValue","Provider","value","div","onKeyDown","DropDown","Icon","buttonAriaLabel","buttonClassName","disabled","label","stopCloseOnClickSelf","buttonRef","showDropDown","setShowDropDown","handleClose","dropDown","left","top","getBoundingClientRect","scrollTopOffset","window","scrollY","document","documentElement","scrollTop","style","offsetHeight","Math","min","innerWidth","offsetWidth","handle","target","contains","addEventListener","removeEventListener","portal","body","Fragment","aria-label","span","i"],"mappings":"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"}
+{"version":3,"file":"DropDown.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","createPortal","baseClass","DropDownContext","createContext","DropDownItem","active","children","editor","enabled","item","title","className","setClassName","key","filter","Boolean","join","ref","dropDownContext","useContext","Error","registerItem","current","_jsx","onClick","_updateTags","Set","focus","onSelect","isActive","onMouseDown","e","preventDefault","type","DropDownItems","dropDownRef","itemsContainerClassNames","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","includes","index","indexOf","length","contextValue","Provider","value","onKeyDown","DropDown","Icon","buttonAriaLabel","buttonClassName","disabled","label","stopCloseOnClickSelf","buttonRef","showDropDown","setShowDropDown","handleClose","button","dropDown","left","top","getBoundingClientRect","scrollTopOffset","window","scrollY","document","documentElement","scrollTop","style","offsetHeight","Math","min","innerWidth","offsetWidth","handle","target","contains","addEventListener","removeEventListener","portal","body","_jsxs","Fragment"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport React, { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nconst baseClass = 'toolbar-popup__dropdown-item'\n\ninterface DropDownContextType {\n  registerItem: (ref: React.RefObject<HTMLButtonElement | null>) => void\n}\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null)\n\nexport function DropDownItem({\n  active,\n  children,\n  editor,\n  enabled,\n  item,\n  title,\n}: {\n  active?: boolean\n  children: React.ReactNode\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n  title?: string\n}): React.ReactNode {\n  const [className, setClassName] = useState<string>(baseClass)\n\n  useEffect(() => {\n    setClassName(\n      [\n        baseClass,\n        enabled === false ? 'disabled' : '',\n        active ? 'active' : '',\n        item?.key ? `${baseClass}-${item.key}` : '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    )\n  }, [enabled, active, className, item.key])\n\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const dropDownContext = React.useContext(DropDownContext)\n\n  if (dropDownContext === null) {\n    throw new Error('DropDownItem must be used within a DropDown')\n  }\n\n  const { registerItem } = dropDownContext\n\n  useEffect(() => {\n    if (ref?.current != null) {\n      registerItem(ref)\n    }\n  }, [ref, registerItem])\n\n  return (\n    <button\n      className={className}\n      onClick={() => {\n        if (enabled !== false) {\n          editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n          editor.focus(() => {\n            // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n            item.onSelect({\n              editor,\n              isActive: active,\n            })\n          })\n        }\n      }}\n      onMouseDown={(e) => {\n        // This is required for Firefox compatibility. Without it, the dropdown will disappear without the onClick being called.\n        // This only happens in Firefox. Must be something about how Firefox handles focus events differently.\n        e.preventDefault()\n      }}\n      ref={ref}\n      title={title}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n\nfunction DropDownItems({\n  children,\n  dropDownRef,\n  itemsContainerClassNames,\n  onClose,\n}: {\n  children: React.ReactNode\n  dropDownRef: React.Ref<HTMLDivElement>\n  itemsContainerClassNames?: string[]\n  onClose: () => void\n}): React.ReactElement {\n  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement | null>>>()\n  const [highlightedItem, setHighlightedItem] =\n    useState<React.RefObject<HTMLButtonElement | null>>()\n\n  const registerItem = useCallback(\n    (itemRef: React.RefObject<HTMLButtonElement | null>) => {\n      setItems((prev) => (prev != null ? [...prev, itemRef] : [itemRef]))\n    },\n    [setItems],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (items == null) return\n\n    const { key } = event\n\n    if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n      event.preventDefault()\n    }\n\n    if (key === 'Escape' || key === 'Tab') {\n      onClose()\n    } else if (key === 'ArrowUp') {\n      setHighlightedItem((prev) => {\n        if (prev == null) return items[0]\n        const index = items.indexOf(prev) - 1\n        return items[index === -1 ? items.length - 1 : index]\n      })\n    } else if (key === 'ArrowDown') {\n      setHighlightedItem((prev) => {\n        if (prev == null) return items[0]\n        return items[items.indexOf(prev) + 1]\n      })\n    }\n  }\n\n  const contextValue = useMemo(\n    () => ({\n      registerItem,\n    }),\n    [registerItem],\n  )\n\n  useEffect(() => {\n    if (items != null && highlightedItem == null) {\n      setHighlightedItem(items[0])\n    }\n\n    if (highlightedItem != null && highlightedItem?.current != null) {\n      highlightedItem.current.focus()\n    }\n  }, [items, highlightedItem])\n\n  return (\n    <DropDownContext.Provider value={contextValue}>\n      <div\n        className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}\n        onKeyDown={handleKeyDown}\n        ref={dropDownRef}\n      >\n        {children}\n      </div>\n    </DropDownContext.Provider>\n  )\n}\n\nexport function DropDown({\n  Icon,\n  buttonAriaLabel,\n  buttonClassName,\n  children,\n  disabled = false,\n  itemsContainerClassNames,\n  label,\n  stopCloseOnClickSelf,\n}: {\n  Icon?: React.FC\n  buttonAriaLabel?: string\n  buttonClassName: string\n  children: ReactNode\n  disabled?: boolean\n  itemsContainerClassNames?: string[]\n  label?: string\n  stopCloseOnClickSelf?: boolean\n}): React.ReactNode {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [showDropDown, setShowDropDown] = useState(false)\n\n  const handleClose = (): void => {\n    setShowDropDown(false)\n    if (buttonRef?.current != null) {\n      buttonRef.current.focus()\n    }\n  }\n\n  useEffect(() => {\n    const button = buttonRef.current\n    const dropDown = dropDownRef.current\n\n    if (showDropDown && button !== null && dropDown !== null) {\n      const { left, top } = button.getBoundingClientRect()\n      const scrollTopOffset = window.scrollY || document.documentElement.scrollTop\n      dropDown.style.top = `${top + scrollTopOffset + button.offsetHeight + 5}px`\n      dropDown.style.left = `${Math.min(left - 5, window.innerWidth - dropDown.offsetWidth - 20)}px`\n    }\n  }, [dropDownRef, buttonRef, showDropDown])\n\n  useEffect(() => {\n    const button = buttonRef.current\n\n    if (button !== null && showDropDown) {\n      const handle = (event: MouseEvent): void => {\n        const { target } = event\n        if (stopCloseOnClickSelf != null) {\n          if (dropDownRef.current != null && dropDownRef.current.contains(target as Node)) {\n            return\n          }\n        }\n        if (!button.contains(target as Node)) {\n          setShowDropDown(false)\n        }\n      }\n      document.addEventListener('click', handle)\n\n      return () => {\n        document.removeEventListener('click', handle)\n      }\n    }\n  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf])\n\n  const portal = createPortal(\n    <DropDownItems\n      dropDownRef={dropDownRef}\n      itemsContainerClassNames={itemsContainerClassNames}\n      onClose={handleClose}\n    >\n      {children}\n    </DropDownItems>,\n    document.body,\n  )\n\n  return (\n    <React.Fragment>\n      <button\n        aria-label={buttonAriaLabel}\n        className={buttonClassName + (showDropDown ? ' active' : '')}\n        disabled={disabled}\n        onClick={(event) => {\n          event.preventDefault()\n          setShowDropDown(!showDropDown)\n        }}\n        onMouseDown={(e) => {\n          // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n          // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n          // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n          e.preventDefault()\n        }}\n        ref={buttonRef}\n        type=\"button\"\n      >\n        {Icon && <Icon />}\n        {label && <span className=\"toolbar-popup__dropdown-label\">{label}</span>}\n        <i className=\"toolbar-popup__dropdown-caret\" />\n      </button>\n\n      {showDropDown && <React.Fragment>{portal}</React.Fragment>}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/toolbars/shared/ToolbarDropdown/index.d.ts

@@ -19,5 +19,5 @@ export declare const ToolbarDropdown: ({ Icon, anchorElem, classNames, editor, g
     onActiveChange?: ({ activeItems }: {
         activeItems: ToolbarGroupItem[];
     }) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/features/toolbars/shared/ToolbarDropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAItD,OAAO,cAAc,CAAA;AAiDrB,eAAO,MAAM,eAAe,gIAWzB;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,UAAU,EAAE,WAAW,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;CAChF,4CAoFA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAItD,OAAO,cAAc,CAAA;AAqDrB,eAAO,MAAM,eAAe,gIAWzB;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,UAAU,EAAE,WAAW,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;CAChF,sBAoFA,CAAA"}

package/dist/features/toolbars/shared/ToolbarDropdown/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect } from 'react';
 const baseClass = 'toolbar-popup__dropdown';
@@ -7,135 +9,300 @@ import { useTranslation } from '@payloadcms/ui';
 import { $getSelection } from 'lexical';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { DropDown, DropDownItem } from './DropDown.js';
-const ToolbarItem = ({ active, anchorElem, editor, enabled, item })=>{
-    const { i18n } = useTranslation();
-    if (item.Component) {
-        return item?.Component && /*#__PURE__*/ _jsx(item.Component, {
-            active: active,
-            anchorElem: anchorElem,
-            editor: editor,
-            enabled: enabled,
-            item: item
-        }, item.key);
-    }
-    let title = item.key;
-    if (item.label) {
-        title = typeof item.label === 'function' ? item.label({
-            i18n
-        }) : item.label;
+const ToolbarItem = t0 => {
+  const $ = _c(19);
+  const {
+    active,
+    anchorElem,
+    editor,
+    enabled,
+    item
+  } = t0;
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    field: t1
+  } = useEditorConfigContext();
+  const {
+    richTextComponentMap
+  } = t1;
+  if (item.Component) {
+    let t2;
+    if ($[0] !== item || $[1] !== active || $[2] !== anchorElem || $[3] !== editor || $[4] !== enabled) {
+      t2 = item?.Component && _jsx(item.Component, {
+        active,
+        anchorElem,
+        editor,
+        enabled,
+        item
+      }, item.key);
+      $[0] = item;
+      $[1] = active;
+      $[2] = anchorElem;
+      $[3] = editor;
+      $[4] = enabled;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
     }
-    // Crop title to max. 25 characters
-    if (title.length > 25) {
-        title = title.substring(0, 25) + '...';
+    return t2;
+  }
+  let title = item.key;
+  if (item.label) {
+    let t2;
+    if ($[6] !== item || $[7] !== i18n || $[8] !== richTextComponentMap) {
+      t2 = typeof item.label === "function" ? item.label({
+        i18n,
+        richTextComponentMap
+      }) : item.label;
+      $[6] = item;
+      $[7] = i18n;
+      $[8] = richTextComponentMap;
+      $[9] = t2;
+    } else {
+      t2 = $[9];
     }
-    return /*#__PURE__*/ _jsxs(DropDownItem, {
-        active: active,
-        editor: editor,
-        enabled: enabled,
-        item: item,
-        children: [
-            item?.ChildComponent && /*#__PURE__*/ _jsx(item.ChildComponent, {}),
-            /*#__PURE__*/ _jsx("span", {
-                className: "text",
-                children: title
-            })
-        ]
+    title = t2;
+  }
+  if (title.length > 25) {
+    title = title.substring(0, 25) + "...";
+  }
+  let t2;
+  if ($[10] !== item) {
+    t2 = item?.ChildComponent && _jsx(item.ChildComponent, {});
+    $[10] = item;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  let t3;
+  if ($[12] !== title || $[13] !== t2 || $[14] !== active || $[15] !== editor || $[16] !== enabled || $[17] !== item) {
+    t3 = _jsxs(DropDownItem, {
+      active,
+      editor,
+      enabled,
+      item,
+      children: [t2, _jsx("span", {
+        className: "text",
+        children: title
+      })]
     }, item.key);
+    $[12] = title;
+    $[13] = t2;
+    $[14] = active;
+    $[15] = editor;
+    $[16] = enabled;
+    $[17] = item;
+    $[18] = t3;
+  } else {
+    t3 = $[18];
+  }
+  return t3;
 };
-export const ToolbarDropdown = ({ Icon, anchorElem, classNames, editor, groupKey, items, itemsContainerClassNames, label, maxActiveItems, onActiveChange })=>{
-    const [activeItemKeys, setActiveItemKeys] = React.useState([]);
-    const [enabledItemKeys, setEnabledItemKeys] = React.useState([]);
-    const editorConfigContext = useEditorConfigContext();
-    const updateStates = useCallback(()=>{
-        editor.getEditorState().read(()=>{
-            const selection = $getSelection();
-            const _activeItemKeys = [];
-            const _activeItems = [];
-            const _enabledItemKeys = [];
-            for (const item of items){
-                if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {
-                    const isActive = item.isActive({
-                        editor,
-                        editorConfigContext,
-                        selection
-                    });
-                    if (isActive) {
-                        _activeItemKeys.push(item.key);
-                        _activeItems.push(item);
-                    }
-                }
-                if (item.isEnabled) {
-                    const isEnabled = item.isEnabled({
-                        editor,
-                        editorConfigContext,
-                        selection
-                    });
-                    if (isEnabled) {
-                        _enabledItemKeys.push(item.key);
-                    }
-                } else {
-                    _enabledItemKeys.push(item.key);
-                }
+export const ToolbarDropdown = t0 => {
+  const $ = _c(43);
+  const {
+    Icon,
+    anchorElem,
+    classNames,
+    editor,
+    groupKey,
+    items,
+    itemsContainerClassNames,
+    label,
+    maxActiveItems,
+    onActiveChange
+  } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [activeItemKeys, setActiveItemKeys] = React.useState(t1);
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [];
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const [enabledItemKeys, setEnabledItemKeys] = React.useState(t2);
+  const editorConfigContext = useEditorConfigContext();
+  let t3;
+  if ($[2] !== editor || $[3] !== items || $[4] !== maxActiveItems || $[5] !== editorConfigContext || $[6] !== onActiveChange) {
+    t3 = () => {
+      editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        const _activeItemKeys = [];
+        const _activeItems = [];
+        const _enabledItemKeys = [];
+        for (const item of items) {
+          if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {
+            const isActive = item.isActive({
+              editor,
+              editorConfigContext,
+              selection
+            });
+            if (isActive) {
+              _activeItemKeys.push(item.key);
+              _activeItems.push(item);
             }
-            setActiveItemKeys(_activeItemKeys);
-            setEnabledItemKeys(_enabledItemKeys);
-            if (onActiveChange) {
-                onActiveChange({
-                    activeItems: _activeItems
-                });
+          }
+          if (item.isEnabled) {
+            const isEnabled = item.isEnabled({
+              editor,
+              editorConfigContext,
+              selection
+            });
+            if (isEnabled) {
+              _enabledItemKeys.push(item.key);
             }
-        });
-    }, [
+          } else {
+            _enabledItemKeys.push(item.key);
+          }
+        }
+        setActiveItemKeys(_activeItemKeys);
+        setEnabledItemKeys(_enabledItemKeys);
+        if (onActiveChange) {
+          onActiveChange({
+            activeItems: _activeItems
+          });
+        }
+      });
+    };
+    $[2] = editor;
+    $[3] = items;
+    $[4] = maxActiveItems;
+    $[5] = editorConfigContext;
+    $[6] = onActiveChange;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const updateStates = t3;
+  let t4;
+  let t5;
+  if ($[8] !== updateStates) {
+    t4 = () => {
+      updateStates();
+    };
+    t5 = [updateStates];
+    $[8] = updateStates;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t4 = $[9];
+    t5 = $[10];
+  }
+  useEffect(t4, t5);
+  let t6;
+  let t7;
+  if ($[11] !== updateStates) {
+    t6 = () => {
+      document.addEventListener("mouseup", updateStates);
+      return () => {
+        document.removeEventListener("mouseup", updateStates);
+      };
+    };
+    t7 = [updateStates];
+    $[11] = updateStates;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t6 = $[12];
+    t7 = $[13];
+  }
+  useEffect(t6, t7);
+  let t8;
+  let t9;
+  if ($[14] !== editor || $[15] !== updateStates) {
+    t8 = () => mergeRegister(editor.registerUpdateListener(() => {
+      updateStates();
+    }));
+    t9 = [editor, updateStates];
+    $[14] = editor;
+    $[15] = updateStates;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t8 = $[16];
+    t9 = $[17];
+  }
+  useEffect(t8, t9);
+  const t10 = `${groupKey} dropdown`;
+  const t11 = `${baseClass}-${groupKey}`;
+  let t12;
+  if ($[18] !== classNames) {
+    t12 = classNames || [];
+    $[18] = classNames;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== t11 || $[21] !== t12) {
+    t13 = [baseClass, t11, ...t12].filter(Boolean);
+    $[20] = t11;
+    $[21] = t12;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  const t14 = t13.join(" ");
+  let t15;
+  if ($[23] !== itemsContainerClassNames) {
+    t15 = itemsContainerClassNames || [];
+    $[23] = itemsContainerClassNames;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  let t16;
+  if ($[25] !== t15 || $[26] !== items || $[27] !== activeItemKeys || $[28] !== anchorElem || $[29] !== editor || $[30] !== enabledItemKeys || $[31] !== Icon || $[32] !== t10 || $[33] !== t14 || $[34] !== label || $[35] !== groupKey) {
+    let t17;
+    if ($[37] !== items || $[38] !== activeItemKeys || $[39] !== anchorElem || $[40] !== editor || $[41] !== enabledItemKeys) {
+      t17 = items.length && items.map(item_0 => _jsx(ToolbarItem, {
+        active: activeItemKeys.includes(item_0.key),
+        anchorElem,
         editor,
-        editorConfigContext,
-        items,
-        maxActiveItems,
-        onActiveChange
-    ]);
-    useEffect(()=>{
-        updateStates();
-    }, [
-        updateStates
-    ]);
-    useEffect(()=>{
-        document.addEventListener('mouseup', updateStates);
-        return ()=>{
-            document.removeEventListener('mouseup', updateStates);
-        };
-    }, [
-        updateStates
-    ]);
-    useEffect(()=>{
-        return mergeRegister(editor.registerUpdateListener(()=>{
-            updateStates();
-        }));
-    }, [
-        editor,
-        updateStates
-    ]);
-    return /*#__PURE__*/ _jsx(DropDown, {
-        Icon: Icon,
-        buttonAriaLabel: `${groupKey} dropdown`,
-        buttonClassName: [
-            baseClass,
-            `${baseClass}-${groupKey}`,
-            ...classNames || []
-        ].filter(Boolean).join(' '),
-        itemsContainerClassNames: [
-            `${baseClass}-items`,
-            ...itemsContainerClassNames || []
-        ],
-        label: label,
-        children: items.length && items.map((item)=>{
-            return /*#__PURE__*/ _jsx(ToolbarItem, {
-                active: activeItemKeys.includes(item.key),
-                anchorElem: anchorElem,
-                editor: editor,
-                enabled: enabledItemKeys.includes(item.key),
-                item: item
-            }, item.key);
-        })
+        enabled: enabledItemKeys.includes(item_0.key),
+        item: item_0
+      }, item_0.key));
+      $[37] = items;
+      $[38] = activeItemKeys;
+      $[39] = anchorElem;
+      $[40] = editor;
+      $[41] = enabledItemKeys;
+      $[42] = t17;
+    } else {
+      t17 = $[42];
+    }
+    t16 = _jsx(DropDown, {
+      Icon,
+      buttonAriaLabel: t10,
+      buttonClassName: t14,
+      itemsContainerClassNames: [`${baseClass}-items`, ...t15],
+      label,
+      children: t17
     }, groupKey);
+    $[25] = t15;
+    $[26] = items;
+    $[27] = activeItemKeys;
+    $[28] = anchorElem;
+    $[29] = editor;
+    $[30] = enabledItemKeys;
+    $[31] = Icon;
+    $[32] = t10;
+    $[33] = t14;
+    $[34] = label;
+    $[35] = groupKey;
+    $[36] = t16;
+  } else {
+    t16 = $[36];
+  }
+  return t16;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/features/toolbars/shared/ToolbarDropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { DropDown, DropDownItem } from './DropDown.js'\nimport './index.scss'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\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    <DropDownItem active={active} editor={editor} enabled={enabled} item={item} key={item.key}>\n      {item?.ChildComponent && <item.ChildComponent />}\n      <span className=\"text\">{title}</span>\n    </DropDownItem>\n  )\n}\n\nexport const ToolbarDropdown = ({\n  Icon,\n  anchorElem,\n  classNames,\n  editor,\n  groupKey,\n  items,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  Icon?: React.FC\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  groupKey: string\n  items: ToolbarGroupItem[]\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [activeItemKeys, setActiveItemKeys] = React.useState<string[]>([])\n  const [enabledItemKeys, setEnabledItemKeys] = React.useState<string[]>([])\n  const editorConfigContext = useEditorConfigContext()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n      setActiveItemKeys(_activeItemKeys)\n      setEnabledItemKeys(_enabledItemKeys)\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    updateStates()\n  }, [updateStates])\n\n  useEffect(() => {\n    document.addEventListener('mouseup', updateStates)\n    return () => {\n      document.removeEventListener('mouseup', updateStates)\n    }\n  }, [updateStates])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updateStates()\n      }),\n    )\n  }, [editor, updateStates])\n\n  return (\n    <DropDown\n      Icon={Icon}\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {items.length &&\n        items.map((item) => {\n          return (\n            <ToolbarItem\n              active={activeItemKeys.includes(item.key)}\n              anchorElem={anchorElem}\n              editor={editor}\n              enabled={enabledItemKeys.includes(item.key)}\n              item={item}\n              key={item.key}\n            />\n          )\n        })}\n    </DropDown>\n  )\n}\n"],"names":["React","useCallback","useEffect","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","DropDown","DropDownItem","ToolbarItem","active","anchorElem","editor","enabled","item","i18n","Component","key","title","label","length","substring","ChildComponent","span","className","ToolbarDropdown","Icon","classNames","groupKey","items","itemsContainerClassNames","maxActiveItems","onActiveChange","activeItemKeys","setActiveItemKeys","useState","enabledItemKeys","setEnabledItemKeys","editorConfigContext","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","document","addEventListener","removeEventListener","registerUpdateListener","buttonAriaLabel","buttonClassName","filter","Boolean","join","map","includes"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","DropDown","DropDownItem","ToolbarItem","t0","$","active","anchorElem","editor","enabled","item","i18n","field","t1","richTextComponentMap","Component","t2","_jsx","key","title","label","length","substring","ChildComponent","t3","_jsxs","children","className","ToolbarDropdown","Icon","classNames","groupKey","items","itemsContainerClassNames","maxActiveItems","onActiveChange","Symbol","for","activeItemKeys","setActiveItemKeys","useState","enabledItemKeys","setEnabledItemKeys","editorConfigContext","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","updateStates","t4","t5","t6","t7","document","addEventListener","removeEventListener","t8","t9","registerUpdateListener","t10","t11","t12","t13","filter","Boolean","t14","join","t15","t16","t17","map","item_0","includes","buttonAriaLabel","buttonClassName"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { DropDown, DropDownItem } from './DropDown.js'\nimport './index.scss'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation()\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function' ? item.label({ i18n, richTextComponentMap }) : 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    <DropDownItem active={active} editor={editor} enabled={enabled} item={item} key={item.key}>\n      {item?.ChildComponent && <item.ChildComponent />}\n      <span className=\"text\">{title}</span>\n    </DropDownItem>\n  )\n}\n\nexport const ToolbarDropdown = ({\n  Icon,\n  anchorElem,\n  classNames,\n  editor,\n  groupKey,\n  items,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  Icon?: React.FC\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  groupKey: string\n  items: ToolbarGroupItem[]\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [activeItemKeys, setActiveItemKeys] = React.useState<string[]>([])\n  const [enabledItemKeys, setEnabledItemKeys] = React.useState<string[]>([])\n  const editorConfigContext = useEditorConfigContext()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n      setActiveItemKeys(_activeItemKeys)\n      setEnabledItemKeys(_enabledItemKeys)\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    updateStates()\n  }, [updateStates])\n\n  useEffect(() => {\n    document.addEventListener('mouseup', updateStates)\n    return () => {\n      document.removeEventListener('mouseup', updateStates)\n    }\n  }, [updateStates])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updateStates()\n      }),\n    )\n  }, [editor, updateStates])\n\n  return (\n    <DropDown\n      Icon={Icon}\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {items.length &&\n        items.map((item) => {\n          return (\n            <ToolbarItem\n              active={activeItemKeys.includes(item.key)}\n              anchorElem={anchorElem}\n              editor={editor}\n              enabled={enabledItemKeys.includes(item.key)}\n              item={item}\n              key={item.key}\n            />\n          )\n        })}\n    </DropDown>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/toolbars/types.d.ts

@@ -67,8 +67,9 @@ export type ToolbarGroupItem = {
     /** Each toolbar item needs to have a unique key. */
     key: string;
     /** The label will be displayed in your toolbar item, if it's within a dropdown group. In order to make use of i18n, this can be a function. */
-    label?: (({ i18n }: {
+    label?: ((args: {
         i18n: I18nClient<{}, string>;
+        richTextComponentMap: Map<string, React.ReactNode>;
     }) => string) | string;
     /** Each toolbar item needs to have a unique key. */
     onSelect?: ({ editor, isActive }: {

package/dist/features/toolbars/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/features/toolbars/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAElG,MAAM,MAAM,YAAY,GACpB;IACE;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;IAC9B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAA;CAChB,GACD;IACE;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;IAC9B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAEL,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qIAAqI;IACrI,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB,iMAAiM;IACjM,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,UAAU,EAAE,WAAW,CAAA;QACvB,MAAM,EAAE,aAAa,CAAA;QACrB,OAAO,CAAC,EAAE,OAAO,CAAA;QACjB,IAAI,EAAE,gBAAgB,CAAA;KACvB,CAAC,CAAA;IACF,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,EACV,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,EAAE;QACD,MAAM,EAAE,aAAa,CAAA;QACrB,mBAAmB,EAAE,uBAAuB,CAAA;QAC5C,SAAS,EAAE,aAAa,CAAA;KACzB,KAAK,OAAO,CAAA;IACb,iJAAiJ;IACjJ,SAAS,CAAC,EAAE,CAAC,EACX,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,EAAE;QACD,MAAM,EAAE,aAAa,CAAA;QACrB,mBAAmB,EAAE,uBAAuB,CAAA;QAC5C,SAAS,EAAE,aAAa,CAAA;KACzB,KAAK,OAAO,CAAA;IACb,oDAAoD;IACpD,GAAG,EAAE,MAAM,CAAA;IACX,+IAA+I;IAC/I,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,UAAU,CAAC,EAAE,EAAE,MAAM,CAAC,CAAA;KAAE,KAAK,MAAM,CAAC,GAAG,MAAM,CAAA;IACzE,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;QAAE,MAAM,EAAE,aAAa,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACvF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/features/toolbars/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAElG,MAAM,MAAM,YAAY,GACpB;IACE;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;IAC9B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAA;CAChB,GACD;IACE;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;IAC9B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAEL,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qIAAqI;IACrI,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB,iMAAiM;IACjM,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,UAAU,EAAE,WAAW,CAAA;QACvB,MAAM,EAAE,aAAa,CAAA;QACrB,OAAO,CAAC,EAAE,OAAO,CAAA;QACjB,IAAI,EAAE,gBAAgB,CAAA;KACvB,CAAC,CAAA;IACF,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,EACV,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,EAAE;QACD,MAAM,EAAE,aAAa,CAAA;QACrB,mBAAmB,EAAE,uBAAuB,CAAA;QAC5C,SAAS,EAAE,aAAa,CAAA;KACzB,KAAK,OAAO,CAAA;IACb,iJAAiJ;IACjJ,SAAS,CAAC,EAAE,CAAC,EACX,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,EAAE;QACD,MAAM,EAAE,aAAa,CAAA;QACrB,mBAAmB,EAAE,uBAAuB,CAAA;QAC5C,SAAS,EAAE,aAAa,CAAA;KACzB,KAAK,OAAO,CAAA;IACb,oDAAoD;IACpD,GAAG,EAAE,MAAM,CAAA;IACX,+IAA+I;IAC/I,KAAK,CAAC,EACF,CAAC,CAAC,IAAI,EAAE;QACN,IAAI,EAAE,UAAU,CAAC,EAAE,EAAE,MAAM,CAAC,CAAA;QAC5B,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,KAAK,MAAM,CAAC,GACb,MAAM,CAAA;IACV,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;QAAE,MAAM,EAAE,aAAa,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACvF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

package/dist/features/toolbars/types.js

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

package/dist/features/toolbars/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/toolbars/types.ts"],"sourcesContent":["import type { I18nClient } from '@payloadcms/translations'\nimport type { BaseSelection, LexicalEditor } from 'lexical'\nimport type React from 'react'\n\nimport type { EditorConfigContextType } from '../../lexical/config/client/EditorConfigProvider.js'\n\nexport type ToolbarGroup =\n  | {\n      /**\n       * All toolbar items part of this toolbar group need to be added here.\n       */\n      items: Array<ToolbarGroupItem>\n      /**\n       * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.\n       */\n      key: string\n      /**\n       * Determines where the toolbar group will be.\n       */\n      order?: number\n      /**\n       * Controls the toolbar group type. Set to `buttons` to create a buttons toolbar group, which displays toolbar items horizontally using only their icons.\n       */\n      type: 'buttons'\n    }\n  | {\n      /**\n       * The dropdown toolbar ChildComponent allows you to pass in a React Component which will be displayed within the dropdown button.\n       */\n      ChildComponent?: React.FC\n      /**\n       * All toolbar items part of this toolbar group need to be added here.\n       */\n      items: Array<ToolbarGroupItem>\n      /**\n       * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.\n       */\n      key: string\n      /**\n       * Determines where the toolbar group will be.\n       */\n      order?: number\n      /**\n       * Controls the toolbar group type. Set to `dropdown` to create a buttons toolbar group, which displays toolbar items vertically using their icons and labels, if the dropdown is open.\n       */\n      type: 'dropdown'\n    }\n\nexport type ToolbarGroupItem = {\n  /** A React component which is rendered within your toolbar item's default button component. Usually, you want this to be an icon. */\n  ChildComponent?: React.FC\n  /** A React component which is rendered in place of the toolbar item's default button component, thus completely replacing it. The `ChildComponent` and `onSelect` properties will be ignored. */\n  Component?: React.FC<{\n    active?: boolean\n    anchorElem: HTMLElement\n    editor: LexicalEditor\n    enabled?: boolean\n    item: ToolbarGroupItem\n  }>\n  /** This is optional and controls if the toolbar item is highlighted or not. */\n  isActive?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /** This is optional and controls if the toolbar item is clickable or not. If `false` is returned here, it will be grayed out and unclickable. */\n  isEnabled?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /** Each toolbar item needs to have a unique key. */\n  key: string\n  /** The label will be displayed in your toolbar item, if it's within a dropdown group. In order to make use of i18n, this can be a function. */\n  label?: (({ i18n }: { i18n: I18nClient<{}, string> }) => string) | string\n  /** Each toolbar item needs to have a unique key. */\n  onSelect?: ({ editor, isActive }: { editor: LexicalEditor; isActive: boolean }) => void\n  order?: number\n}\n"],"names":[],"mappings":"AAgDA,WAsCC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/features/toolbars/types.ts"],"sourcesContent":["import type { I18nClient } from '@payloadcms/translations'\nimport type { BaseSelection, LexicalEditor } from 'lexical'\nimport type React from 'react'\n\nimport type { EditorConfigContextType } from '../../lexical/config/client/EditorConfigProvider.js'\n\nexport type ToolbarGroup =\n  | {\n      /**\n       * All toolbar items part of this toolbar group need to be added here.\n       */\n      items: Array<ToolbarGroupItem>\n      /**\n       * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.\n       */\n      key: string\n      /**\n       * Determines where the toolbar group will be.\n       */\n      order?: number\n      /**\n       * Controls the toolbar group type. Set to `buttons` to create a buttons toolbar group, which displays toolbar items horizontally using only their icons.\n       */\n      type: 'buttons'\n    }\n  | {\n      /**\n       * The dropdown toolbar ChildComponent allows you to pass in a React Component which will be displayed within the dropdown button.\n       */\n      ChildComponent?: React.FC\n      /**\n       * All toolbar items part of this toolbar group need to be added here.\n       */\n      items: Array<ToolbarGroupItem>\n      /**\n       * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.\n       */\n      key: string\n      /**\n       * Determines where the toolbar group will be.\n       */\n      order?: number\n      /**\n       * Controls the toolbar group type. Set to `dropdown` to create a buttons toolbar group, which displays toolbar items vertically using their icons and labels, if the dropdown is open.\n       */\n      type: 'dropdown'\n    }\n\nexport type ToolbarGroupItem = {\n  /** A React component which is rendered within your toolbar item's default button component. Usually, you want this to be an icon. */\n  ChildComponent?: React.FC\n  /** A React component which is rendered in place of the toolbar item's default button component, thus completely replacing it. The `ChildComponent` and `onSelect` properties will be ignored. */\n  Component?: React.FC<{\n    active?: boolean\n    anchorElem: HTMLElement\n    editor: LexicalEditor\n    enabled?: boolean\n    item: ToolbarGroupItem\n  }>\n  /** This is optional and controls if the toolbar item is highlighted or not. */\n  isActive?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /** This is optional and controls if the toolbar item is clickable or not. If `false` is returned here, it will be grayed out and unclickable. */\n  isEnabled?: ({\n    editor,\n    editorConfigContext,\n    selection,\n  }: {\n    editor: LexicalEditor\n    editorConfigContext: EditorConfigContextType\n    selection: BaseSelection\n  }) => boolean\n  /** Each toolbar item needs to have a unique key. */\n  key: string\n  /** The label will be displayed in your toolbar item, if it's within a dropdown group. In order to make use of i18n, this can be a function. */\n  label?:\n    | ((args: {\n        i18n: I18nClient<{}, string>\n        richTextComponentMap: Map<string, React.ReactNode>\n      }) => string)\n    | string\n  /** Each toolbar item needs to have a unique key. */\n  onSelect?: ({ editor, isActive }: { editor: LexicalEditor; isActive: boolean }) => void\n  order?: number\n}\n"],"mappings":"AAgDA","ignoreList":[]}

package/dist/features/typeUtilities.js

@@ -1,8 +1,7 @@
 /**
  * Utility function to create a node with hooks. You don't have to use this utility, but it improves type inference
  * @param node the node
- */ export function createNode(node) {
-    return node;
+ */export function createNode(node) {
+  return node;
 }
-
 //# sourceMappingURL=typeUtilities.js.map

package/dist/features/typeUtilities.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/features/typeUtilities.ts"],"sourcesContent":["import type { LexicalNode } from 'lexical'\n\nimport type { NodeWithHooks } from './typesServer.js'\n\n/**\n * Utility function to create a node with hooks. You don't have to use this utility, but it improves type inference\n * @param node the node\n */\nexport function createNode<Node extends LexicalNode>(\n  node: NodeWithHooks<Node>,\n): NodeWithHooks<Node> {\n  return node\n}\n"],"names":["createNode","node"],"mappings":"AAIA;;;CAGC,GACD,OAAO,SAASA,WACdC,IAAyB;IAEzB,OAAOA;AACT"}
+{"version":3,"file":"typeUtilities.js","names":["createNode","node"],"sources":["../../src/features/typeUtilities.ts"],"sourcesContent":["import type { LexicalNode } from 'lexical'\n\nimport type { NodeWithHooks } from './typesServer.js'\n\n/**\n * Utility function to create a node with hooks. You don't have to use this utility, but it improves type inference\n * @param node the node\n */\nexport function createNode<Node extends LexicalNode>(\n  node: NodeWithHooks<Node>,\n): NodeWithHooks<Node> {\n  return node\n}\n"],"mappings":"AAIA;;;GAIA,OAAO,SAASA,WACdC,IAAyB;EAEzB,OAAOA,IAAA;AACT","ignoreList":[]}