@payloadcms/richtext-lexical 3.0.0-canary.a0b06af → 3.0.0-canary.a5aaf21

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

@@ -0,0 +1,366 @@
+'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);
+  }
+  return /*#__PURE__*/_jsx(ToolbarButton, {
+    editor: editor,
+    item: item,
+    children: item?.ChildComponent && /*#__PURE__*/_jsx(item.ChildComponent, {})
+  }, item.key);
+}
+function ToolbarGroupComponent(t0) {
+  const $ = _c(24);
+  const {
+    anchorElem,
+    editor,
+    group,
+    index
+  } = t0;
+  const {
+    editorConfig
+  } = useEditorConfigContext();
+  const [DropdownIcon, setDropdownIcon] = React.useState(null);
+  let t1;
+  let t2;
+  if ($[0] !== group) {
+    t1 = () => {
+      if (group?.type === "dropdown" && group.items.length && group.ChildComponent) {
+        setDropdownIcon(() => group.ChildComponent);
+      } else {
+        setDropdownIcon(null);
+      }
+    };
+    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(null);
+        }
+        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.type || $[6] !== group.items || $[7] !== group.key || $[8] !== DropdownIcon || $[9] !== anchorElem || $[10] !== editor || $[11] !== onActiveChange) {
+    t5 = group.type === "dropdown" && group.items.length && (DropdownIcon ? _jsx(ToolbarDropdown, {
+      anchorElem,
+      editor,
+      groupKey: group.key,
+      Icon: DropdownIcon,
+      items: group.items,
+      maxActiveItems: 1,
+      onActiveChange
+    }) : _jsx(ToolbarDropdown, {
+      anchorElem,
+      editor,
+      groupKey: group.key,
+      items: group.items,
+      maxActiveItems: 1,
+      onActiveChange
+    }));
+    $[5] = group.type;
+    $[6] = group.items;
+    $[7] = group.key;
+    $[8] = DropdownIcon;
+    $[9] = anchorElem;
+    $[10] = editor;
+    $[11] = onActiveChange;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== group || $[14] !== anchorElem || $[15] !== editor) {
+    t6 = group.type === "buttons" && group.items.length && group.items.map(item_0 => _jsx(ButtonGroupItem, {
+      anchorElem,
+      editor,
+      item: item_0
+    }, item_0.key));
+    $[13] = group;
+    $[14] = anchorElem;
+    $[15] = editor;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== editorConfig.features.toolbarInline || $[18] !== index || $[19] !== t5 || $[20] !== t6 || $[21] !== t4 || $[22] !== group.key) {
+    t7 = _jsxs("div", {
+      className: t4,
+      children: [t5, t6, index < editorConfig.features.toolbarInline?.groups.length - 1 && _jsx("div", {
+        className: "divider"
+      })]
+    }, group.key);
+    $[17] = editorConfig.features.toolbarInline;
+    $[18] = index;
+    $[19] = t5;
+    $[20] = t6;
+    $[21] = t4;
+    $[22] = group.key;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  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
+    }), editor.isEditable() && /*#__PURE__*/_jsx(React.Fragment, {
+      children: 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 [isText, setIsText] = useState(false);
+  const updatePopup = useCallback(() => {
+    editor.getEditorState().read(() => {
+      // Should not to pop up the floating toolbar when using IME input
+      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;
+      }
+    });
+  }, [editor]);
+  useEffect(() => {
+    document.addEventListener('selectionchange', updatePopup);
+    document.addEventListener('mouseup', updatePopup);
+    return () => {
+      document.removeEventListener('selectionchange', updatePopup);
+      document.removeEventListener('mouseup', updatePopup);
+    };
+  }, [updatePopup]);
+  useEffect(() => {
+    return mergeRegister(editor.registerUpdateListener(() => {
+      updatePopup();
+    }), editor.registerRootListener(() => {
+      if (editor.getRootElement() === null) {
+        setIsText(false);
+      }
+    }));
+  }, [editor, updatePopup]);
+  if (!isText) {
+    return null;
+  }
+  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(InlineToolbar, {
+    anchorElem: anchorElem,
+    editor: editor
+  }), anchorElem);
+}
+export const InlineToolbarPlugin = ({
+  anchorElem
+}) => {
+  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","t3","t4","activeItems","onActiveChange","t5","groupKey","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","isEditable","Fragment","i","useInlineToolbar","isText","setIsText","updatePopup","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","registerRootListener","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\n  return (\n    <ToolbarButton editor={editor} item={item} key={item.key}>\n      {item?.ChildComponent && <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<null | React.FC>(null)\n\n  React.useEffect(() => {\n    if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n      setDropdownIcon(() => group.ChildComponent)\n    } else {\n      setDropdownIcon(null)\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(null)\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            groupKey={group.key}\n            Icon={DropdownIcon}\n            items={group.items}\n            maxActiveItems={1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            groupKey={group.key}\n            items={group.items}\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      {editor.isEditable() && (\n        <React.Fragment>\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        </React.Fragment>\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) {\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

@@ -6,5 +6,5 @@ export declare const ToolbarButton: ({ children, editor, item, }: {
     children: React.JSX.Element;
     editor: LexicalEditor;
     item: ToolbarGroupItem;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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,4CAqFA,CAAA"}
+{"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,sBAqFA,CAAA"}

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

@@ -1,108 +1,86 @@
 '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 (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);
-                }
-            }
+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 (item.isActive) {
+        const isActive = item.isActive({
+          editor,
+          editorConfigContext,
+          selection
+        });
+        if (active !== isActive) {
+          setActive(isActive);
+        }
+      }
+      if (item.isEnabled) {
+        const isEnabled = item.isEnabled({
+          editor,
+          editorConfigContext,
+          selection
         });
-    }, [
-        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([
-                    ...editor._updateTags,
-                    'toolbar'
-                ]) // 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
+        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([...editor._updateTags, 'toolbar']) // 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