@payloadcms/richtext-lexical 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/features/toolbars/fixed/server/index.js

@@ -0,0 +1,18 @@
+import { createServerFeature } from '../../../../utilities/createServerFeature.js';
+export const FixedToolbarFeature = createServerFeature({
+  feature: ({
+    props
+  }) => {
+    const sanitizedProps = {
+      applyToFocusedEditor: props?.applyToFocusedEditor === undefined ? false : props.applyToFocusedEditor,
+      disableIfParentHasFixedToolbar: props?.disableIfParentHasFixedToolbar === undefined ? false : props.disableIfParentHasFixedToolbar
+    };
+    return {
+      ClientFeature: '@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient',
+      clientFeatureProps: sanitizedProps,
+      sanitizedServerFeatureProps: sanitizedProps
+    };
+  },
+  key: 'toolbarFixed'
+});
+//# sourceMappingURL=index.js.map

package/dist/features/toolbars/fixed/server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["createServerFeature","FixedToolbarFeature","feature","props","sanitizedProps","applyToFocusedEditor","undefined","disableIfParentHasFixedToolbar","ClientFeature","clientFeatureProps","sanitizedServerFeatureProps","key"],"sources":["../../../../../src/features/toolbars/fixed/server/index.ts"],"sourcesContent":["import { createServerFeature } from '../../../../utilities/createServerFeature.js'\n\nexport type FixedToolbarFeatureProps = {\n  /**\n   * @default false\n   *\n   * If this is enabled, the toolbar will apply to the focused editor, not the editor with the FixedToolbarFeature.\n   *\n   * This means that if the editor has a child-editor, and the child-editor is focused, the toolbar will apply to the child-editor, not the parent editor with this feature added.\n   */\n  applyToFocusedEditor?: boolean\n  /**\n   * @default false\n   *\n   * If there is a parent editor with a fixed toolbar, this will disable the toolbar for this editor.\n   */\n  disableIfParentHasFixedToolbar?: boolean\n}\n\nexport const FixedToolbarFeature = createServerFeature<\n  FixedToolbarFeatureProps,\n  FixedToolbarFeatureProps,\n  FixedToolbarFeatureProps\n>({\n  feature: ({ props }) => {\n    const sanitizedProps: FixedToolbarFeatureProps = {\n      applyToFocusedEditor:\n        props?.applyToFocusedEditor === undefined ? false : props.applyToFocusedEditor,\n      disableIfParentHasFixedToolbar:\n        props?.disableIfParentHasFixedToolbar === undefined\n          ? false\n          : props.disableIfParentHasFixedToolbar,\n    }\n\n    return {\n      ClientFeature: '@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient',\n      clientFeatureProps: sanitizedProps,\n      sanitizedServerFeatureProps: sanitizedProps,\n    }\n  },\n  key: 'toolbarFixed',\n})\n"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ;AAmBpC,OAAO,MAAMC,mBAAA,GAAsBD,mBAAA,CAIjC;EACAE,OAAA,EAASA,CAAC;IAAEC;EAAK,CAAE;IACjB,MAAMC,cAAA,GAA2C;MAC/CC,oBAAA,EACEF,KAAA,EAAOE,oBAAA,KAAyBC,SAAA,GAAY,QAAQH,KAAA,CAAME,oBAAoB;MAChFE,8BAAA,EACEJ,KAAA,EAAOI,8BAAA,KAAmCD,SAAA,GACtC,QACAH,KAAA,CAAMI;IACd;IAEA,OAAO;MACLC,aAAA,EAAe;MACfC,kBAAA,EAAoBL,cAAA;MACpBM,2BAAA,EAA6BN;IAC/B;EACF;EACAO,GAAA,EAAK;AACP","ignoreList":[]}

package/dist/features/toolbars/inline/client/Toolbar/index.d.ts

@@ -0,0 +1,4 @@
+import type { PluginComponentWithAnchor } from '../../../../typesClient.js';
+import './index.scss';
+export declare const InlineToolbarPlugin: PluginComponentWithAnchor<undefined>;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/toolbars/inline/client/Toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/toolbars/inline/client/Toolbar/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAA;AAQ3E,OAAO,cAAc,CAAA;AAqXrB,eAAO,MAAM,mBAAmB,EAAE,yBAAyB,CAAC,SAAS,CAIpE,CAAA"}

package/dist/features/toolbars/inline/client/Toolbar/index.js

@@ -0,0 +1,404 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from 'lexical';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js';
+import { getDOMRangeRect } from '../../../../../lexical/utils/getDOMRangeRect.js';
+import { setFloatingElemPosition } from '../../../../../lexical/utils/setFloatingElemPosition.js';
+import { ToolbarButton } from '../../../shared/ToolbarButton/index.js';
+import { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js';
+function ButtonGroupItem({
+  anchorElem,
+  editor,
+  item
+}) {
+  if (item.Component) {
+    return item?.Component && /*#__PURE__*/_jsx(item.Component, {
+      anchorElem: anchorElem,
+      editor: editor,
+      item: item
+    }, item.key);
+  }
+  if (!item.ChildComponent) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(ToolbarButton, {
+    editor: editor,
+    item: item,
+    children: /*#__PURE__*/_jsx(item.ChildComponent, {})
+  }, item.key);
+}
+function ToolbarGroupComponent(t0) {
+  const $ = _c(22);
+  const {
+    anchorElem,
+    editor,
+    group,
+    index
+  } = t0;
+  const {
+    editorConfig
+  } = useEditorConfigContext();
+  const [DropdownIcon, setDropdownIcon] = React.useState();
+  let t1;
+  let t2;
+  if ($[0] !== group) {
+    t1 = () => {
+      if (group?.type === "dropdown" && group.items.length && group.ChildComponent) {
+        setDropdownIcon(() => group.ChildComponent);
+      } else {
+        setDropdownIcon(undefined);
+      }
+    };
+    t2 = [group];
+    $[0] = group;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  React.useEffect(t1, t2);
+  let t3;
+  if ($[3] !== group) {
+    t3 = t4 => {
+      const {
+        activeItems
+      } = t4;
+      if (!activeItems.length) {
+        if (group?.type === "dropdown" && group.items.length && group.ChildComponent) {
+          setDropdownIcon(() => group.ChildComponent);
+        } else {
+          setDropdownIcon(undefined);
+        }
+        return;
+      }
+      const item = activeItems[0];
+      setDropdownIcon(() => item.ChildComponent);
+    };
+    $[3] = group;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const onActiveChange = t3;
+  const t4 = `inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`;
+  let t5;
+  if ($[5] !== group || $[6] !== DropdownIcon || $[7] !== anchorElem || $[8] !== editor || $[9] !== onActiveChange) {
+    t5 = group.type === "dropdown" && group.items.length && (DropdownIcon ? _jsx(ToolbarDropdown, {
+      anchorElem,
+      editor,
+      group,
+      Icon: DropdownIcon,
+      maxActiveItems: 1,
+      onActiveChange
+    }) : _jsx(ToolbarDropdown, {
+      anchorElem,
+      editor,
+      group,
+      maxActiveItems: 1,
+      onActiveChange
+    }));
+    $[5] = group;
+    $[6] = DropdownIcon;
+    $[7] = anchorElem;
+    $[8] = editor;
+    $[9] = onActiveChange;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== group || $[12] !== anchorElem || $[13] !== editor) {
+    t6 = group.type === "buttons" && group.items.length && group.items.map(item_0 => _jsx(ButtonGroupItem, {
+      anchorElem,
+      editor,
+      item: item_0
+    }, item_0.key));
+    $[11] = group;
+    $[12] = anchorElem;
+    $[13] = editor;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== editorConfig.features.toolbarInline || $[16] !== index || $[17] !== t5 || $[18] !== t6 || $[19] !== t4 || $[20] !== group.key) {
+    t7 = _jsxs("div", {
+      className: t4,
+      children: [t5, t6, index < editorConfig.features.toolbarInline?.groups.length - 1 && _jsx("div", {
+        className: "divider"
+      })]
+    }, group.key);
+    $[15] = editorConfig.features.toolbarInline;
+    $[16] = index;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t4;
+    $[20] = group.key;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  return t7;
+}
+function InlineToolbar({
+  anchorElem,
+  editor
+}) {
+  const floatingToolbarRef = useRef(null);
+  const caretRef = useRef(null);
+  const {
+    editorConfig
+  } = useEditorConfigContext();
+  const closeFloatingToolbar = useCallback(() => {
+    if (floatingToolbarRef?.current) {
+      const isOpacityZero = floatingToolbarRef.current.style.opacity === '0';
+      const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none';
+      if (!isOpacityZero) {
+        floatingToolbarRef.current.style.opacity = '0';
+      }
+      if (!isPointerEventsNone) {
+        floatingToolbarRef.current.style.pointerEvents = 'none';
+      }
+    }
+  }, [floatingToolbarRef]);
+  const mouseMoveListener = useCallback(e => {
+    if (floatingToolbarRef?.current && (e.buttons === 1 || e.buttons === 3)) {
+      const isOpacityZero_0 = floatingToolbarRef.current.style.opacity === '0';
+      const isPointerEventsNone_0 = floatingToolbarRef.current.style.pointerEvents === 'none';
+      if (!isOpacityZero_0 || !isPointerEventsNone_0) {
+        // Check if the mouse is not over the popup
+        const x = e.clientX;
+        const y = e.clientY;
+        const elementUnderMouse = document.elementFromPoint(x, y);
+        if (!floatingToolbarRef.current.contains(elementUnderMouse)) {
+          // Mouse is not over the target element => not a normal click, but probably a drag
+          closeFloatingToolbar();
+        }
+      }
+    }
+  }, [closeFloatingToolbar]);
+  const mouseUpListener = useCallback(() => {
+    if (floatingToolbarRef?.current) {
+      if (floatingToolbarRef.current.style.opacity !== '1') {
+        floatingToolbarRef.current.style.opacity = '1';
+      }
+      if (floatingToolbarRef.current.style.pointerEvents !== 'auto') {
+        floatingToolbarRef.current.style.pointerEvents = 'auto';
+      }
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener('mousemove', mouseMoveListener);
+    document.addEventListener('mouseup', mouseUpListener);
+    return () => {
+      document.removeEventListener('mousemove', mouseMoveListener);
+      document.removeEventListener('mouseup', mouseUpListener);
+    };
+  }, [floatingToolbarRef, mouseMoveListener, mouseUpListener]);
+  const $updateTextFormatFloatingToolbar = useCallback(() => {
+    const selection = $getSelection();
+    const nativeSelection = window.getSelection();
+    if (floatingToolbarRef.current === null) {
+      return;
+    }
+    const possibleLinkEditor = anchorElem.querySelector(':scope > .link-editor');
+    const isLinkEditorVisible = possibleLinkEditor !== null && 'style' in possibleLinkEditor && possibleLinkEditor?.style?.['opacity'] === '1';
+    const rootElement = editor.getRootElement();
+    if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
+      const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+      // Position floating toolbar
+      const offsetIfFlipped = setFloatingElemPosition({
+        alwaysDisplayOnTop: isLinkEditorVisible,
+        anchorElem,
+        floatingElem: floatingToolbarRef.current,
+        horizontalPosition: 'center',
+        targetRect: rangeRect
+      });
+      // Position caret
+      if (caretRef.current) {
+        setFloatingElemPosition({
+          anchorElem: floatingToolbarRef.current,
+          anchorFlippedOffset: offsetIfFlipped,
+          floatingElem: caretRef.current,
+          horizontalOffset: 5,
+          horizontalPosition: 'center',
+          specialHandlingForCaret: true,
+          targetRect: rangeRect,
+          verticalGap: 8
+        });
+      }
+    } else {
+      closeFloatingToolbar();
+    }
+  }, [editor, closeFloatingToolbar, anchorElem]);
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement;
+    const update = () => {
+      editor.getEditorState().read(() => {
+        $updateTextFormatFloatingToolbar();
+      });
+    };
+    window.addEventListener('resize', update);
+    if (scrollerElem) {
+      scrollerElem.addEventListener('scroll', update);
+    }
+    return () => {
+      window.removeEventListener('resize', update);
+      if (scrollerElem) {
+        scrollerElem.removeEventListener('scroll', update);
+      }
+    };
+  }, [editor, $updateTextFormatFloatingToolbar, anchorElem]);
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      $updateTextFormatFloatingToolbar();
+    });
+    return mergeRegister(editor.registerUpdateListener(({
+      editorState
+    }) => {
+      editorState.read(() => {
+        $updateTextFormatFloatingToolbar();
+      });
+    }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+      $updateTextFormatFloatingToolbar();
+      return false;
+    }, COMMAND_PRIORITY_LOW));
+  }, [editor, $updateTextFormatFloatingToolbar]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "inline-toolbar-popup",
+    ref: floatingToolbarRef,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "caret",
+      ref: caretRef
+    }), editorConfig?.features && editorConfig.features?.toolbarInline?.groups.map((group, i) => {
+      return /*#__PURE__*/_jsx(ToolbarGroupComponent, {
+        anchorElem: anchorElem,
+        editor: editor,
+        group: group,
+        index: i
+      }, group.key);
+    })]
+  });
+}
+function useInlineToolbar(editor, anchorElem) {
+  const $ = _c(12);
+  const [isText, setIsText] = useState(false);
+  let t0;
+  if ($[0] !== editor) {
+    t0 = () => {
+      editor.getEditorState().read(() => {
+        if (editor.isComposing()) {
+          return;
+        }
+        const selection = $getSelection();
+        const nativeSelection = window.getSelection();
+        const rootElement = editor.getRootElement();
+        if (nativeSelection !== null && (!$isRangeSelection(selection) || rootElement === null || !rootElement.contains(nativeSelection.anchorNode))) {
+          setIsText(false);
+          return;
+        }
+        if (!$isRangeSelection(selection)) {
+          return;
+        }
+        if (selection.getTextContent() !== "") {
+          const nodes = selection.getNodes();
+          let foundNodeWithText = false;
+          for (const node of nodes) {
+            if ($isTextNode(node)) {
+              setIsText(true);
+              foundNodeWithText = true;
+              break;
+            }
+          }
+          if (!foundNodeWithText) {
+            setIsText(false);
+          }
+        } else {
+          setIsText(false);
+        }
+        const rawTextContent = selection.getTextContent().replace(/\n/g, "");
+        if (!selection.isCollapsed() && rawTextContent === "") {
+          setIsText(false);
+          return;
+        }
+      });
+    };
+    $[0] = editor;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const updatePopup = t0;
+  let t1;
+  let t2;
+  if ($[2] !== updatePopup) {
+    t1 = () => {
+      document.addEventListener("selectionchange", updatePopup);
+      document.addEventListener("mouseup", updatePopup);
+      return () => {
+        document.removeEventListener("selectionchange", updatePopup);
+        document.removeEventListener("mouseup", updatePopup);
+      };
+    };
+    t2 = [updatePopup];
+    $[2] = updatePopup;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  let t4;
+  if ($[5] !== editor || $[6] !== updatePopup) {
+    t3 = () => mergeRegister(editor.registerUpdateListener(() => {
+      updatePopup();
+    }), editor.registerRootListener(() => {
+      if (editor.getRootElement() === null) {
+        setIsText(false);
+      }
+    }));
+    t4 = [editor, updatePopup];
+    $[5] = editor;
+    $[6] = updatePopup;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t3 = $[7];
+    t4 = $[8];
+  }
+  useEffect(t3, t4);
+  if (!isText || !editor.isEditable()) {
+    return null;
+  }
+  let t5;
+  if ($[9] !== anchorElem || $[10] !== editor) {
+    t5 = createPortal(_jsx(InlineToolbar, {
+      anchorElem,
+      editor
+    }), anchorElem);
+    $[9] = anchorElem;
+    $[10] = editor;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
+}
+export const InlineToolbarPlugin = t0 => {
+  const {
+    anchorElem
+  } = t0;
+  const [editor] = useLexicalComposerContext();
+  return useInlineToolbar(editor, anchorElem);
+};
+//# sourceMappingURL=index.js.map

package/dist/features/toolbars/inline/client/Toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","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","_jsx","key","ChildComponent","ToolbarGroupComponent","t0","$","group","index","editorConfig","DropdownIcon","setDropdownIcon","t1","t2","type","items","length","undefined","t3","t4","activeItems","onActiveChange","t5","Icon","maxActiveItems","t6","map","item_0","t7","features","toolbarInline","_jsxs","className","children","groups","InlineToolbar","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","possibleLinkEditor","querySelector","isLinkEditorVisible","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","offsetIfFlipped","alwaysDisplayOnTop","floatingElem","horizontalPosition","targetRect","anchorFlippedOffset","horizontalOffset","specialHandlingForCaret","verticalGap","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","ref","i","useInlineToolbar","isText","setIsText","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","updatePopup","registerRootListener","isEditable","InlineToolbarPlugin"],"sources":["../../../../../../src/features/toolbars/inline/client/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 { PluginComponentWithAnchor } from '../../../../typesClient.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../../types.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { getDOMRangeRect } from '../../../../../lexical/utils/getDOMRangeRect.js'\nimport { setFloatingElemPosition } from '../../../../../lexical/utils/setFloatingElemPosition.js'\nimport { ToolbarButton } from '../../../shared/ToolbarButton/index.js'\nimport { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\nimport './index.scss'\n\nfunction ButtonGroupItem({\n  anchorElem,\n  editor,\n  item,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  item: ToolbarGroupItem\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  if (!item.ChildComponent) {\n    return null\n  }\n\n  return (\n    <ToolbarButton editor={editor} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  group,\n  index,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  group: ToolbarGroup\n  index: number\n}): React.ReactNode {\n  const { editorConfig } = useEditorConfigContext()\n\n  const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | undefined>()\n\n  React.useEffect(() => {\n    if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n      setDropdownIcon(() => group.ChildComponent)\n    } else {\n      setDropdownIcon(undefined)\n    }\n  }, [group])\n\n  const onActiveChange = useCallback(\n    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n      if (!activeItems.length) {\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent)\n        } else {\n          setDropdownIcon(undefined)\n        }\n        return\n      }\n      const item = activeItems[0]\n      setDropdownIcon(() => item.ChildComponent)\n    },\n    [group],\n  )\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        (DropdownIcon ? (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            Icon={DropdownIcon}\n            maxActiveItems={1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            maxActiveItems={1}\n            onActiveChange={onActiveChange}\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 InlineToolbar({\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  }, [])\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 possibleLinkEditor = anchorElem.querySelector(':scope > .link-editor')\n    const isLinkEditorVisible =\n      possibleLinkEditor !== null &&\n      'style' in possibleLinkEditor &&\n      possibleLinkEditor?.style?.['opacity'] === '1'\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        alwaysDisplayOnTop: isLinkEditorVisible,\n        anchorElem,\n        floatingElem: floatingToolbarRef.current,\n        horizontalPosition: 'center',\n        targetRect: rangeRect,\n      })\n\n      // Position caret\n      if (caretRef.current) {\n        setFloatingElemPosition({\n          anchorElem: floatingToolbarRef.current,\n          anchorFlippedOffset: offsetIfFlipped,\n          floatingElem: caretRef.current,\n          horizontalOffset: 5,\n          horizontalPosition: 'center',\n          specialHandlingForCaret: true,\n          targetRect: rangeRect,\n          verticalGap: 8,\n        })\n      }\n    } else {\n      closeFloatingToolbar()\n    }\n  }, [editor, closeFloatingToolbar, 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      {editorConfig?.features &&\n        editorConfig.features?.toolbarInline?.groups.map((group, i) => {\n          return (\n            <ToolbarGroupComponent\n              anchorElem={anchorElem}\n              editor={editor}\n              group={group}\n              index={i}\n              key={group.key}\n            />\n          )\n        })}\n    </div>\n  )\n}\n\nfunction useInlineToolbar(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n): null | React.ReactElement {\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 || !editor.isEditable()) {\n    return null\n  }\n\n  return createPortal(<InlineToolbar anchorElem={anchorElem} editor={editor} />, anchorElem)\n}\n\nexport const InlineToolbarPlugin: PluginComponentWithAnchor<undefined> = ({ anchorElem }) => {\n  const [editor] = useLexicalComposerContext()\n\n  return useInlineToolbar(editor, anchorElem)\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/toolbars/inline/client/index.d.ts

@@ -0,0 +1,2 @@
+export declare const InlineToolbarFeatureClient: import("../../../typesClient.js").FeatureProviderProviderClient<undefined, undefined>;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/toolbars/inline/client/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/inline/client/index.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,0BAA0B,uFAOrC,CAAA"}

package/dist/features/toolbars/inline/client/index.js

@@ -0,0 +1,11 @@
+'use client';
+
+import { createClientFeature } from '../../../../utilities/createClientFeature.js';
+import { InlineToolbarPlugin } from './Toolbar/index.js';
+export const InlineToolbarFeatureClient = createClientFeature({
+  plugins: [{
+    Component: InlineToolbarPlugin,
+    position: 'floatingAnchorElem'
+  }]
+});
+//# sourceMappingURL=index.js.map

package/dist/features/toolbars/inline/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["createClientFeature","InlineToolbarPlugin","InlineToolbarFeatureClient","plugins","Component","position"],"sources":["../../../../../src/features/toolbars/inline/client/index.tsx"],"sourcesContent":["'use client'\n\nimport { createClientFeature } from '../../../../utilities/createClientFeature.js'\nimport { InlineToolbarPlugin } from './Toolbar/index.js'\n\nexport const InlineToolbarFeatureClient = createClientFeature({\n  plugins: [\n    {\n      Component: InlineToolbarPlugin,\n      position: 'floatingAnchorElem',\n    },\n  ],\n})\n"],"mappings":"AAAA;;AAEA,SAASA,mBAAmB,QAAQ;AACpC,SAASC,mBAAmB,QAAQ;AAEpC,OAAO,MAAMC,0BAAA,GAA6BF,mBAAA,CAAoB;EAC5DG,OAAA,EAAS,CACP;IACEC,SAAA,EAAWH,mBAAA;IACXI,QAAA,EAAU;EACZ;AAEJ","ignoreList":[]}

package/dist/features/toolbars/inline/server/index.d.ts

@@ -0,0 +1,2 @@
+export declare const InlineToolbarFeature: import("../../../typesServer.js").FeatureProviderProviderServer<undefined, undefined, undefined>;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/toolbars/inline/server/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/inline/server/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,kGAK/B,CAAA"}

package/dist/features/toolbars/inline/server/index.js

@@ -0,0 +1,8 @@
+import { createServerFeature } from '../../../../utilities/createServerFeature.js';
+export const InlineToolbarFeature = createServerFeature({
+  feature: {
+    ClientFeature: '@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient'
+  },
+  key: 'toolbarInline'
+});
+//# sourceMappingURL=index.js.map

package/dist/features/toolbars/inline/server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["createServerFeature","InlineToolbarFeature","feature","ClientFeature","key"],"sources":["../../../../../src/features/toolbars/inline/server/index.ts"],"sourcesContent":["import { createServerFeature } from '../../../../utilities/createServerFeature.js'\n\nexport const InlineToolbarFeature = createServerFeature({\n  feature: {\n    ClientFeature: '@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient',\n  },\n  key: 'toolbarInline',\n})\n"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ;AAEpC,OAAO,MAAMC,oBAAA,GAAuBD,mBAAA,CAAoB;EACtDE,OAAA,EAAS;IACPC,aAAA,EAAe;EACjB;EACAC,GAAA,EAAK;AACP","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/toolbars/shared/ToolbarButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGtD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,aAAa,gCAIvB;IACD,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;IAC3B,MAAM,EAAE,aAAa,CAAA;IACrB,IAAI,EAAE,gBAAgB,CAAA;CACvB,sBAwFA,CAAA"}

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

@@ -0,0 +1,89 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection } from 'lexical';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+const baseClass = 'toolbar-popup__button';
+export const ToolbarButton = ({
+  children,
+  editor,
+  item
+}) => {
+  const [enabled, setEnabled] = useState(true);
+  const [active, setActive] = useState(false);
+  const [className, setClassName] = useState(baseClass);
+  const editorConfigContext = useEditorConfigContext();
+  const updateStates = useCallback(() => {
+    editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!selection) {
+        return;
+      }
+      if (item.isActive) {
+        const isActive = item.isActive({
+          editor,
+          editorConfigContext,
+          selection
+        });
+        if (active !== isActive) {
+          setActive(isActive);
+        }
+      }
+      if (item.isEnabled) {
+        const isEnabled = item.isEnabled({
+          editor,
+          editorConfigContext,
+          selection
+        });
+        if (enabled !== isEnabled) {
+          setEnabled(isEnabled);
+        }
+      }
+    });
+  }, [active, editor, editorConfigContext, enabled, item]);
+  useEffect(() => {
+    updateStates();
+  }, [updateStates]);
+  useEffect(() => {
+    document.addEventListener('mouseup', updateStates);
+    return () => {
+      document.removeEventListener('mouseup', updateStates);
+    };
+  }, [updateStates]);
+  useEffect(() => {
+    return mergeRegister(editor.registerUpdateListener(() => {
+      updateStates();
+    }));
+  }, [editor, updateStates]);
+  useEffect(() => {
+    setClassName([baseClass, enabled === false ? 'disabled' : '', active ? 'active' : '', item?.key ? `${baseClass}-` + item.key : ''].filter(Boolean).join(' '));
+  }, [enabled, active, className, item.key]);
+  return /*#__PURE__*/_jsx("button", {
+    className: className,
+    onClick: () => {
+      if (enabled !== false) {
+        editor._updateTags = new Set(['toolbar', ...editor._updateTags]) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.
+        ;
+        editor.focus(() => {
+          // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.
+          item.onSelect?.({
+            editor,
+            isActive: active
+          });
+        });
+        return true;
+      }
+    },
+    onMouseDown: e => {
+      // 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).
+      // 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
+      // 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.
+      e.preventDefault();
+    },
+    type: "button",
+    children: children
+  });
+};
+//# sourceMappingURL=index.js.map