@payloadcms/richtext-lexical 3.55.0-internal.ce8fe55 → 3.55.0-internal.df60e35

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

@@ -28,23 +28,25 @@ export const ToolbarButton = t0 => {
   const [_state, setState] = useState(t1);
   const deferredState = useDeferredValue(_state);
   const editorConfigContext = useEditorConfigContext();
-  const t2 = !deferredState.enabled ? "disabled" : "";
-  const t3 = deferredState.active ? "active" : "";
-  const t4 = item.key ? `${baseClass}-${item.key}` : "";
-  let t5;
-  if ($[1] !== t2 || $[2] !== t3 || $[3] !== t4) {
-    t5 = [baseClass, t2, t3, t4].filter(Boolean);
-    $[1] = t2;
-    $[2] = t3;
-    $[3] = t4;
-    $[4] = t5;
+  let t2;
+  const t3 = !deferredState.enabled ? "disabled" : "";
+  const t4 = deferredState.active ? "active" : "";
+  const t5 = item.key ? `${baseClass}-${item.key}` : "";
+  let t6;
+  if ($[1] !== t3 || $[2] !== t4 || $[3] !== t5) {
+    t6 = [baseClass, t3, t4, t5].filter(Boolean);
+    $[1] = t3;
+    $[2] = t4;
+    $[3] = t5;
+    $[4] = t6;
   } else {
-    t5 = $[4];
+    t6 = $[4];
   }
-  const className = t5.join(" ");
-  let t6;
+  t2 = t6.join(" ");
+  const className = t2;
+  let t7;
   if ($[5] !== editor || $[6] !== editorConfigContext || $[7] !== item) {
-    t6 = () => {
+    t7 = () => {
       editor.getEditorState().read(() => {
         const selection = $getSelection();
         if (!selection) {
@@ -74,16 +76,16 @@ export const ToolbarButton = t0 => {
     $[5] = editor;
     $[6] = editorConfigContext;
     $[7] = item;
-    $[8] = t6;
+    $[8] = t7;
   } else {
-    t6 = $[8];
+    t7 = $[8];
   }
-  const updateStates = t6;
+  const updateStates = t7;
   const runDeprioritized = useRunDeprioritized();
-  let t7;
   let t8;
+  let t9;
   if ($[9] !== editor || $[10] !== runDeprioritized || $[11] !== updateStates) {
-    t7 = () => {
+    t8 = () => {
       runDeprioritized(updateStates);
       const listener = () => runDeprioritized(updateStates);
       const cleanup = mergeRegister(editor.registerUpdateListener(listener));
@@ -93,20 +95,20 @@ export const ToolbarButton = t0 => {
         document.removeEventListener("mouseup", listener);
       };
     };
-    t8 = [editor, runDeprioritized, updateStates];
+    t9 = [editor, runDeprioritized, updateStates];
     $[9] = editor;
     $[10] = runDeprioritized;
     $[11] = updateStates;
-    $[12] = t7;
-    $[13] = t8;
+    $[12] = t8;
+    $[13] = t9;
   } else {
-    t7 = $[12];
-    t8 = $[13];
+    t8 = $[12];
+    t9 = $[13];
   }
-  useEffect(t7, t8);
-  let t9;
+  useEffect(t8, t9);
+  let t10;
   if ($[14] !== _state || $[15] !== editor || $[16] !== item) {
-    t9 = () => {
+    t10 = () => {
       if (!_state.enabled) {
         return;
       }
@@ -121,15 +123,15 @@ export const ToolbarButton = t0 => {
     $[14] = _state;
     $[15] = editor;
     $[16] = item;
-    $[17] = t9;
+    $[17] = t10;
   } else {
-    t9 = $[17];
+    t10 = $[17];
   }
-  const handleClick = t9;
+  const handleClick = t10;
   const handleMouseDown = _temp2;
-  let t10;
+  let t11;
   if ($[18] !== children || $[19] !== className || $[20] !== handleClick || $[21] !== item.key) {
-    t10 = _jsx("button", {
+    t11 = _jsx("button", {
       className,
       "data-button-key": item.key,
       onClick: handleClick,
@@ -141,11 +143,11 @@ export const ToolbarButton = t0 => {
     $[19] = className;
     $[20] = handleClick;
     $[21] = item.key;
-    $[22] = t10;
+    $[22] = t11;
   } else {
-    t10 = $[22];
+    t11 = $[22];
   }
-  return t10;
+  return t11;
 };
 function _temp() {
   $addUpdateTag("toolbar");

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","mergeRegister","$addUpdateTag","$getSelection","React","useCallback","useDeferredValue","useEffect","useMemo","useState","useEditorConfigContext","useRunDeprioritized","baseClass","ToolbarButton","t0","$","children","editor","item","t1","Symbol","for","active","enabled","_state","setState","deferredState","editorConfigContext","t2","t3","t4","key","t5","filter","Boolean","className","join","t6","getEditorState","read","selection","newActive","isActive","newEnabled","isEnabled","prev","updateStates","runDeprioritized","t7","t8","listener","cleanup","registerUpdateListener","document","addEventListener","removeEventListener","t9","focus","update","_temp","onSelect","handleClick","handleMouseDown","_temp2","t10","_jsx","onClick","onMouseDown","type","e","preventDefault"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $addUpdateTag, $getSelection } from 'lexical'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  children,\n  editor,\n  item,\n}: {\n  children: React.JSX.Element\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}) => {\n  const [_state, setState] = useState({ active: false, enabled: true })\n  const deferredState = useDeferredValue(_state)\n\n  const editorConfigContext = useEditorConfigContext()\n\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !deferredState.enabled ? 'disabled' : '',\n      deferredState.active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [deferredState, item.key])\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n      const newActive = item.isActive\n        ? item.isActive({ editor, editorConfigContext, selection })\n        : false\n\n      const newEnabled = item.isEnabled\n        ? item.isEnabled({ editor, editorConfigContext, selection })\n        : true\n\n      setState((prev) => {\n        if (prev.active === newActive && prev.enabled === newEnabled) {\n          return prev\n        }\n        return { active: newActive, enabled: newEnabled }\n      })\n    })\n  }, [editor, editorConfigContext, item])\n\n  const runDeprioritized = useRunDeprioritized()\n\n  useEffect(() => {\n    // Run on mount\n    void runDeprioritized(updateStates)\n\n    const listener = () => runDeprioritized(updateStates)\n\n    const cleanup = mergeRegister(editor.registerUpdateListener(listener))\n    document.addEventListener('mouseup', listener)\n\n    return () => {\n      cleanup()\n      document.removeEventListener('mouseup', listener)\n    }\n  }, [editor, runDeprioritized, updateStates])\n\n  const handleClick = useCallback(() => {\n    if (!_state.enabled) {\n      return\n    }\n\n    editor.focus(() => {\n      editor.update(() => {\n        $addUpdateTag('toolbar')\n      })\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: _state.active,\n      })\n    })\n  }, [editor, item, _state])\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\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\n  return (\n    <button\n      className={className}\n      data-button-key={item.key}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","mergeRegister","$addUpdateTag","$getSelection","React","useCallback","useDeferredValue","useEffect","useMemo","useState","useEditorConfigContext","useRunDeprioritized","baseClass","ToolbarButton","t0","$","children","editor","item","t1","Symbol","for","active","enabled","_state","setState","deferredState","editorConfigContext","t2","t3","t4","t5","key","t6","filter","Boolean","join","className","t7","getEditorState","read","selection","newActive","isActive","newEnabled","isEnabled","prev","updateStates","runDeprioritized","t8","t9","listener","cleanup","registerUpdateListener","document","addEventListener","removeEventListener","t10","focus","update","_temp","onSelect","handleClick","handleMouseDown","_temp2","t11","_jsx","onClick","onMouseDown","type","e","preventDefault"],"sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $addUpdateTag, $getSelection } from 'lexical'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n  children,\n  editor,\n  item,\n}: {\n  children: React.JSX.Element\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}) => {\n  const [_state, setState] = useState({ active: false, enabled: true })\n  const deferredState = useDeferredValue(_state)\n\n  const editorConfigContext = useEditorConfigContext()\n\n  const className = useMemo(() => {\n    return [\n      baseClass,\n      !deferredState.enabled ? 'disabled' : '',\n      deferredState.active ? 'active' : '',\n      item.key ? `${baseClass}-${item.key}` : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }, [deferredState, item.key])\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n      const newActive = item.isActive\n        ? item.isActive({ editor, editorConfigContext, selection })\n        : false\n\n      const newEnabled = item.isEnabled\n        ? item.isEnabled({ editor, editorConfigContext, selection })\n        : true\n\n      setState((prev) => {\n        if (prev.active === newActive && prev.enabled === newEnabled) {\n          return prev\n        }\n        return { active: newActive, enabled: newEnabled }\n      })\n    })\n  }, [editor, editorConfigContext, item])\n\n  const runDeprioritized = useRunDeprioritized()\n\n  useEffect(() => {\n    // Run on mount\n    void runDeprioritized(updateStates)\n\n    const listener = () => runDeprioritized(updateStates)\n\n    const cleanup = mergeRegister(editor.registerUpdateListener(listener))\n    document.addEventListener('mouseup', listener)\n\n    return () => {\n      cleanup()\n      document.removeEventListener('mouseup', listener)\n    }\n  }, [editor, runDeprioritized, updateStates])\n\n  const handleClick = useCallback(() => {\n    if (!_state.enabled) {\n      return\n    }\n\n    editor.focus(() => {\n      editor.update(() => {\n        $addUpdateTag('toolbar')\n      })\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: _state.active,\n      })\n    })\n  }, [editor, item, _state])\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\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\n  return (\n    <button\n      className={className}\n      data-button-key={item.key}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -11,7 +11,7 @@ import { useEditorConfigContext } from '../../../../lexical/config/client/Editor
 import { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js';
 import { DropDown, DropDownItem } from './DropDown.js';
 const ToolbarItem = t0 => {
-  const $ = _c(14);
+  const $ = _c(18);
   const {
     active,
     anchorElem,
@@ -50,22 +50,33 @@ const ToolbarItem = t0 => {
     }
     return t2;
   }
-  let t2;
-  if ($[6] !== active || $[7] !== editor || $[8] !== enabled || $[9] !== featureClientSchemaMap || $[10] !== i18n || $[11] !== item || $[12] !== schemaPath) {
-    let title = item.key;
-    let croppedTitle;
-    if (item.label) {
-      title = typeof item.label === "function" ? item.label({
+  let title = item.key;
+  let croppedTitle;
+  if (item.label) {
+    let t2;
+    if ($[6] !== featureClientSchemaMap || $[7] !== i18n || $[8] !== item || $[9] !== schemaPath) {
+      t2 = typeof item.label === "function" ? item.label({
         featureClientSchemaMap,
         i18n,
         schemaPath
       }) : item.label;
-    }
-    if (title.length > 25) {
-      croppedTitle = title.substring(0, 25) + "...";
+      $[6] = featureClientSchemaMap;
+      $[7] = i18n;
+      $[8] = item;
+      $[9] = schemaPath;
+      $[10] = t2;
     } else {
-      croppedTitle = title;
+      t2 = $[10];
     }
+    title = t2;
+  }
+  if (title.length > 25) {
+    croppedTitle = title.substring(0, 25) + "...";
+  } else {
+    croppedTitle = title;
+  }
+  let t2;
+  if ($[11] !== active || $[12] !== croppedTitle || $[13] !== editor || $[14] !== enabled || $[15] !== item || $[16] !== title) {
     t2 = _jsx(DropDownItem, {
       active,
       editor,
@@ -79,16 +90,15 @@ const ToolbarItem = t0 => {
         children: croppedTitle
       })
     }, item.key);
-    $[6] = active;
-    $[7] = editor;
-    $[8] = enabled;
-    $[9] = featureClientSchemaMap;
-    $[10] = i18n;
-    $[11] = item;
-    $[12] = schemaPath;
-    $[13] = t2;
+    $[11] = active;
+    $[12] = croppedTitle;
+    $[13] = editor;
+    $[14] = enabled;
+    $[15] = item;
+    $[16] = title;
+    $[17] = t2;
   } else {
-    t2 = $[13];
+    t2 = $[17];
   }
   return t2;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useDeferredValue","useEffect","useMemo","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","useRunDeprioritized","DropDown","DropDownItem","ToolbarItem","t0","$","active","anchorElem","editor","enabled","item","i18n","fieldProps","t1","featureClientSchemaMap","schemaPath","Component","t2","_jsx","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","children","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","toolbarState","setToolbarState","useState","activeItemKeys","enabledGroup","enabledItemKeys","deferredToolbarState","editorConfigContext","items","groupKey","runDeprioritized","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","registerUpdateListener","renderedItems","map","includes","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","dropdownKey"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo } 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 { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\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<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\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  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\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 [toolbarState, setToolbarState] = React.useState<{\n    activeItemKeys: string[]\n    enabledGroup: boolean\n    enabledItemKeys: string[]\n  }>({\n    activeItemKeys: [],\n    enabledGroup: true,\n    enabledItemKeys: [],\n  })\n  const deferredToolbarState = useDeferredValue(toolbarState)\n\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const runDeprioritized = useRunDeprioritized()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\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\n      setToolbarState({\n        activeItemKeys: _activeItemKeys,\n        enabledGroup: group.isEnabled\n          ? group.isEnabled({ editor, editorConfigContext, selection })\n          : true,\n        enabledItemKeys: _enabledItemKeys,\n      })\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    // Run on mount in order to update states when dropdown is opened\n    void runDeprioritized(updateStates)\n\n    return mergeRegister(\n      editor.registerUpdateListener(async () => {\n        await runDeprioritized(updateStates)\n      }),\n    )\n  }, [editor, runDeprioritized, updateStates])\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={deferredToolbarState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={deferredToolbarState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, deferredToolbarState, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!deferredToolbarState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useDeferredValue","useEffect","useMemo","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","useRunDeprioritized","DropDown","DropDownItem","ToolbarItem","t0","$","active","anchorElem","editor","enabled","item","i18n","fieldProps","t1","featureClientSchemaMap","schemaPath","Component","t2","_jsx","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","children","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","toolbarState","setToolbarState","useState","activeItemKeys","enabledGroup","enabledItemKeys","deferredToolbarState","editorConfigContext","items","groupKey","runDeprioritized","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","registerUpdateListener","renderedItems","map","includes","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","dropdownKey"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo } 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 { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\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<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\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  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\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 [toolbarState, setToolbarState] = React.useState<{\n    activeItemKeys: string[]\n    enabledGroup: boolean\n    enabledItemKeys: string[]\n  }>({\n    activeItemKeys: [],\n    enabledGroup: true,\n    enabledItemKeys: [],\n  })\n  const deferredToolbarState = useDeferredValue(toolbarState)\n\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const runDeprioritized = useRunDeprioritized()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\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\n      setToolbarState({\n        activeItemKeys: _activeItemKeys,\n        enabledGroup: group.isEnabled\n          ? group.isEnabled({ editor, editorConfigContext, selection })\n          : true,\n        enabledItemKeys: _enabledItemKeys,\n      })\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    // Run on mount in order to update states when dropdown is opened\n    void runDeprioritized(updateStates)\n\n    return mergeRegister(\n      editor.registerUpdateListener(async () => {\n        await runDeprioritized(updateStates)\n      }),\n    )\n  }, [editor, runDeprioritized, updateStates])\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={deferredToolbarState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={deferredToolbarState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, deferredToolbarState, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!deferredToolbarState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"mappings":"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","ignoreList":[]}