@liveblocks/react-lexical 2.16.0-toolbars2 → 2.16.0-toolbars4

package/dist/{get-selected-block-element.js → get-active-block-element.js}

@@ -7,7 +7,7 @@ function isParentRootOrShadowRoot(node) {
   const parent = node.getParent();
   return parent !== null && lexical.$isRootOrShadowRoot(parent);
 }
-function getSelectedBlockElement(editor) {
+function getActiveBlockElement(editor) {
   return editor.getEditorState().read(() => {
     const selection = lexical.$getSelection();
     if (!lexical.$isRangeSelection(selection))
@@ -22,5 +22,5 @@ function getSelectedBlockElement(editor) {
   });
 }
 
-exports.getSelectedBlockElement = getSelectedBlockElement;
-//# sourceMappingURL=get-selected-block-element.js.map
+exports.getActiveBlockElement = getActiveBlockElement;
+//# sourceMappingURL=get-active-block-element.js.map

package/dist/get-active-block-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-active-block-element.js","sources":["../src/get-active-block-element.ts"],"sourcesContent":["import { $findMatchingParent } from \"@lexical/utils\";\nimport type { LexicalEditor, LexicalNode } from \"lexical\";\nimport { $getSelection, $isRangeSelection, $isRootOrShadowRoot } from \"lexical\";\n\nfunction isParentRootOrShadowRoot(node: LexicalNode) {\n  const parent = node.getParent();\n\n  return parent !== null && $isRootOrShadowRoot(parent);\n}\n\nexport function getActiveBlockElement(editor: LexicalEditor) {\n  return editor.getEditorState().read(() => {\n    const selection = $getSelection();\n\n    if (!$isRangeSelection(selection)) return null;\n\n    const anchor = selection.anchor.getNode();\n    const focus = selection.focus.getNode();\n\n    const commonAncestor = anchor.getCommonAncestor(focus);\n\n    if (!commonAncestor || $isRootOrShadowRoot(commonAncestor)) return null;\n\n    const element = isParentRootOrShadowRoot(commonAncestor)\n      ? commonAncestor\n      : $findMatchingParent(commonAncestor, isParentRootOrShadowRoot);\n\n    return element;\n  });\n}\n"],"names":["$isRootOrShadowRoot","$getSelection","$isRangeSelection","$findMatchingParent"],"mappings":";;;;;AAIA,SAAS,yBAAyB,IAAmB,EAAA;AACnD,EAAM,MAAA,MAAA,GAAS,KAAK,SAAU,EAAA,CAAA;AAE9B,EAAO,OAAA,MAAA,KAAW,IAAQ,IAAAA,2BAAA,CAAoB,MAAM,CAAA,CAAA;AACtD,CAAA;AAEO,SAAS,sBAAsB,MAAuB,EAAA;AAC3D,EAAA,OAAO,MAAO,CAAA,cAAA,EAAiB,CAAA,IAAA,CAAK,MAAM;AACxC,IAAA,MAAM,YAAYC,qBAAc,EAAA,CAAA;AAEhC,IAAI,IAAA,CAACC,0BAAkB,SAAS,CAAA;AAAG,MAAO,OAAA,IAAA,CAAA;AAE1C,IAAM,MAAA,MAAA,GAAS,SAAU,CAAA,MAAA,CAAO,OAAQ,EAAA,CAAA;AACxC,IAAM,MAAA,KAAA,GAAQ,SAAU,CAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AAEtC,IAAM,MAAA,cAAA,GAAiB,MAAO,CAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAErD,IAAI,IAAA,CAAC,cAAkB,IAAAF,2BAAA,CAAoB,cAAc,CAAA;AAAG,MAAO,OAAA,IAAA,CAAA;AAEnE,IAAA,MAAM,UAAU,wBAAyB,CAAA,cAAc,IACnD,cACA,GAAAG,yBAAA,CAAoB,gBAAgB,wBAAwB,CAAA,CAAA;AAEhE,IAAO,OAAA,OAAA,CAAA;AAAA,GACR,CAAA,CAAA;AACH;;;;"}

package/dist/{get-selected-block-element.mjs → get-active-block-element.mjs}

@@ -5,7 +5,7 @@ function isParentRootOrShadowRoot(node) {
   const parent = node.getParent();
   return parent !== null && $isRootOrShadowRoot(parent);
 }
-function getSelectedBlockElement(editor) {
+function getActiveBlockElement(editor) {
   return editor.getEditorState().read(() => {
     const selection = $getSelection();
     if (!$isRangeSelection(selection))
@@ -20,5 +20,5 @@ function getSelectedBlockElement(editor) {
   });
 }
 
-export { getSelectedBlockElement };
-//# sourceMappingURL=get-selected-block-element.mjs.map
+export { getActiveBlockElement };
+//# sourceMappingURL=get-active-block-element.mjs.map

package/dist/get-active-block-element.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-active-block-element.mjs","sources":["../src/get-active-block-element.ts"],"sourcesContent":["import { $findMatchingParent } from \"@lexical/utils\";\nimport type { LexicalEditor, LexicalNode } from \"lexical\";\nimport { $getSelection, $isRangeSelection, $isRootOrShadowRoot } from \"lexical\";\n\nfunction isParentRootOrShadowRoot(node: LexicalNode) {\n  const parent = node.getParent();\n\n  return parent !== null && $isRootOrShadowRoot(parent);\n}\n\nexport function getActiveBlockElement(editor: LexicalEditor) {\n  return editor.getEditorState().read(() => {\n    const selection = $getSelection();\n\n    if (!$isRangeSelection(selection)) return null;\n\n    const anchor = selection.anchor.getNode();\n    const focus = selection.focus.getNode();\n\n    const commonAncestor = anchor.getCommonAncestor(focus);\n\n    if (!commonAncestor || $isRootOrShadowRoot(commonAncestor)) return null;\n\n    const element = isParentRootOrShadowRoot(commonAncestor)\n      ? commonAncestor\n      : $findMatchingParent(commonAncestor, isParentRootOrShadowRoot);\n\n    return element;\n  });\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,yBAAyB,IAAmB,EAAA;AACnD,EAAM,MAAA,MAAA,GAAS,KAAK,SAAU,EAAA,CAAA;AAE9B,EAAO,OAAA,MAAA,KAAW,IAAQ,IAAA,mBAAA,CAAoB,MAAM,CAAA,CAAA;AACtD,CAAA;AAEO,SAAS,sBAAsB,MAAuB,EAAA;AAC3D,EAAA,OAAO,MAAO,CAAA,cAAA,EAAiB,CAAA,IAAA,CAAK,MAAM;AACxC,IAAA,MAAM,YAAY,aAAc,EAAA,CAAA;AAEhC,IAAI,IAAA,CAAC,kBAAkB,SAAS,CAAA;AAAG,MAAO,OAAA,IAAA,CAAA;AAE1C,IAAM,MAAA,MAAA,GAAS,SAAU,CAAA,MAAA,CAAO,OAAQ,EAAA,CAAA;AACxC,IAAM,MAAA,KAAA,GAAQ,SAAU,CAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AAEtC,IAAM,MAAA,cAAA,GAAiB,MAAO,CAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAErD,IAAI,IAAA,CAAC,cAAkB,IAAA,mBAAA,CAAoB,cAAc,CAAA;AAAG,MAAO,OAAA,IAAA,CAAA;AAEnE,IAAA,MAAM,UAAU,wBAAyB,CAAA,cAAc,IACnD,cACA,GAAA,mBAAA,CAAoB,gBAAgB,wBAAwB,CAAA,CAAA;AAEhE,IAAO,OAAA,OAAA,CAAA;AAAA,GACR,CAAA,CAAA;AACH;;;;"}

package/dist/index.d.mts

@@ -4,7 +4,7 @@ import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ReactNode, ComponentProps } from 'react';
 import * as lexical from 'lexical';
-import { LexicalCommand, LexicalEditor, LexicalNode } from 'lexical';
+import { LexicalCommand, LexicalEditor, LexicalNode, TextFormatType } from 'lexical';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 
 type AnchoredThreadsComponents = {
@@ -77,6 +77,10 @@ interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAtt
 }
 declare function FloatingThreads({ threads, components, ...props }: FloatingThreadsProps): react_jsx_runtime.JSX.Element | null;
 
+declare function getActiveBlockElement(editor: LexicalEditor): LexicalNode | null;
+
+declare function isTextFormatActive(editor: LexicalEditor, format: TextFormatType): boolean;
+
 /**
  * Function that takes a Lexical editor config and modifies it to add the necessary
  * `nodes` and `theme` to make `LiveblocksPlugin` works correctly.
@@ -186,47 +190,228 @@ interface ToolbarSlotProps {
 }
 type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;
 interface ToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * The content of the toolbar, overriding the default content.
+     * Use the `before` and `after` props if you want to keep and extend the default content.
+     */
     children?: ToolbarSlot;
+    /**
+     * The content to display at the start of the toolbar.
+     */
     before?: ToolbarSlot;
+    /**
+     * The content to display at the end of the toolbar.
+     */
     after?: ToolbarSlot;
 }
 interface ToolbarButtonProps extends ComponentProps<"button"> {
-    icon?: ReactNode;
+    /**
+     * The name of this button displayed in its tooltip.
+     */
     name: string;
+    /**
+     * An optional icon displayed in this button.
+     */
+    icon?: ReactNode;
+    /**
+     * An optional keyboard shortcut displayed in this button's tooltip.
+     *
+     * @example
+     * "Mod-Alt-B" → "⌘⌥B" in Apple environments, "⌃⌥B" otherwise
+     * "Ctrl-Shift-Escape" → "⌃⇧⎋"
+     * "Space" → "␣"
+     */
     shortcut?: string;
 }
 interface ToolbarToggleProps extends ToolbarButtonProps {
+    /**
+     * Whether the button is toggled.
+     */
     active: boolean;
 }
+type ToolbarSeparatorProps = ComponentProps<"div">;
 interface ToolbarBlockSelectorItem {
+    /**
+     * The name of this block element, displayed as the label of this item.
+     */
     name: string;
-    isActive: (selectedBlockElement: LexicalNode | null, editor: LexicalEditor) => boolean;
+    /**
+     * Optionally replace the name used as the label of this item by any content.
+     */
+    label?: ReactNode;
+    /**
+     * An optional icon displayed in this item.
+     */
+    icon?: ReactNode;
+    /**
+     * Whether this block element is currently active.
+     * Set to `"default"` to display this item when no other item is active.
+     */
+    isActive: ((element: LexicalNode | null, editor: LexicalEditor) => boolean) | "default";
+    /**
+     * A callback invoked when this item is selected.
+     */
     setActive: (editor: LexicalEditor) => void;
 }
 interface ToolbarBlockSelectorProps extends ComponentProps<"button"> {
-    items?: ToolbarBlockSelectorItem[];
+    /**
+     * The items displayed in this block selector.
+     * When provided as an array, the default items are overridden. To avoid this,
+     * a function can be provided instead and it will receive the default items.
+     *
+     * @example
+     * <Toolbar.BlockSelector
+     *   items={[
+     *     {
+     *       name: "Text",
+     *       isActive: "default",
+     *       setActive: () => { ... },
+     *     },
+     *     {
+     *       name: "Heading 1",
+     *       isActive: () => { ... },
+     *       setActive: () => { ... },
+     *     },
+     *   ]}
+     * />
+     *
+     * @example
+     * <Toolbar.BlockSelector
+     *   items={(defaultItems) => [
+     *     ...defaultItems,
+     *     {
+     *       name: "Custom block",
+     *       isActive: () => { ... },
+     *       setActive: () => { ... },
+     *     },
+     *   ]}
+     * />
+     */
+    items?: ToolbarBlockSelectorItem[] | ((defaultItems: ToolbarBlockSelectorItem[]) => ToolbarBlockSelectorItem[]);
 }
 declare function ToolbarSectionHistory(): react_jsx_runtime.JSX.Element;
 declare function ToolbarSectionInline(): react_jsx_runtime.JSX.Element | null;
 declare function ToolbarSectionCollaboration(): react_jsx_runtime.JSX.Element;
+/**
+ * A static toolbar containing actions and values related to the editor.
+ *
+ * @example
+ * <Toolbar  />
+ *
+ * @example
+ * <Toolbar >
+ *   <Toolbar.BlockSelector />
+ *   <Toolbar.Separator />
+ *   <Toolbar.SectionInline />
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
+ * </Toolbar>
+ */
 declare const Toolbar: react.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    /**
+     * A button for triggering actions.
+     *
+     * @example
+     * <Toolbar.Button name="Comment" shortcut="Mod-Shift-E" onClick={() => { ... }}>Comment</Toolbar.Button>
+     *
+     * @example
+     * <Toolbar.Button name="Mention someone" icon={<Icon.Mention />} onClick={() => { ... }} />
+     */
     Button: react.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A toggle button for values that can be active or inactive.
+     *
+     * @example
+     * <Toolbar.Toggle name="Bold" active={isBold}>Bold</Toolbar.Toggle>
+     *
+     * @example
+     * <Toolbar.Toggle name="Italic" icon={<Icon.Italic />} shortcut="Mod-I" active={isItalic} onClick={() => { ... }} />
+     */
     Toggle: react.ForwardRefExoticComponent<Omit<ToolbarToggleProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A dropdown selector to switch between different block types.
+     *
+     * @example
+     * <Toolbar.BlockSelector />
+     */
+    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A visual (and accessible) separator to separate sections in a toolbar.
+     */
     Separator: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A section containing history actions. (e.g. undo, redo)
+     */
     SectionHistory: typeof ToolbarSectionHistory;
+    /**
+     * A section containing inline formatting actions. (e.g. bold, italic, underline, ...)
+     */
     SectionInline: typeof ToolbarSectionInline;
+    /**
+     * A section containing collaborative actions. (e.g. adding a comment)
+     */
     SectionCollaboration: typeof ToolbarSectionCollaboration;
-    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 };
 
 interface FloatingToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * The vertical position of the floating toolbar.
+     */
     position?: FloatingPosition;
+    /**
+     * The vertical offset of the floating toolbar from the selection.
+     */
     offset?: number;
+    /**
+     * The content of the floating toolbar, overriding the default content.
+     * Use the `before` and `after` props if you want to keep and extend the default content.
+     */
     children?: ToolbarSlot;
+    /**
+     * The content to display at the start of the floating toolbar.
+     */
     before?: ToolbarSlot;
+    /**
+     * The content to display at the end of the floating toolbar.
+     */
     after?: ToolbarSlot;
 }
+/**
+ * A floating toolbar attached to the selection and containing actions and values related to the editor.
+ *
+ * @example
+ * <FloatingToolbar />
+ *
+ * @example
+ * <FloatingToolbar>
+ *   <Toolbar.BlockSelector />
+ *   <Toolbar.Separator />
+ *   <Toolbar.SectionInline />
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
+ * </FloatingToolbar>
+ */
 declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    /**
+     * A component that can be wrapped around elements which are rendered outside of the floating
+     * toolbar (e.g. portals) to prevent the toolbar from closing when clicking/focusing within them.
+     *
+     * @example
+     * <FloatingToolbar>
+     *   <Popover.Root>
+     *     <Popover.Trigger asChild>
+     *       <Toolbar.Button>Open popover</Toolbar.Button>
+     *     </Popover.Trigger>
+     *     <Popover.Portal>
+     *       <FloatingToolbar.External>
+     *         <Popover.Content>
+     *           This popover is rendered outside of the floating toolbar, but the toolbar will not close when clicking/focusing within it.
+     *         </Popover.Content>
+     *       </FloatingToolbar.External>
+     *     </Popover.Portal>
+     *   </Popover.Root>
+     * </FloatingToolbar>
+     */
     External: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 };
 
@@ -242,4 +427,4 @@ interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
  */
 declare const HistoryVersionPreview: react.ForwardRefExoticComponent<HistoryVersionPreviewProps & react.RefAttributes<HTMLDivElement>>;
 
-export { AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, LiveblocksPlugin, OPEN_FLOATING_COMPOSER_COMMAND, Toolbar, ToolbarProps, liveblocksConfig, useEditorStatus, useIsEditorReady, useIsThreadActive };
+export { AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, LiveblocksPlugin, OPEN_FLOATING_COMPOSER_COMMAND, Toolbar, ToolbarBlockSelectorItem, ToolbarBlockSelectorProps, ToolbarButtonProps, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps, getActiveBlockElement, isTextFormatActive, liveblocksConfig, useEditorStatus, useIsEditorReady, useIsThreadActive };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ReactNode, ComponentProps } from 'react';
 import * as lexical from 'lexical';
-import { LexicalCommand, LexicalEditor, LexicalNode } from 'lexical';
+import { LexicalCommand, LexicalEditor, LexicalNode, TextFormatType } from 'lexical';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 
 type AnchoredThreadsComponents = {
@@ -77,6 +77,10 @@ interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAtt
 }
 declare function FloatingThreads({ threads, components, ...props }: FloatingThreadsProps): react_jsx_runtime.JSX.Element | null;
 
+declare function getActiveBlockElement(editor: LexicalEditor): LexicalNode | null;
+
+declare function isTextFormatActive(editor: LexicalEditor, format: TextFormatType): boolean;
+
 /**
  * Function that takes a Lexical editor config and modifies it to add the necessary
  * `nodes` and `theme` to make `LiveblocksPlugin` works correctly.
@@ -186,47 +190,228 @@ interface ToolbarSlotProps {
 }
 type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;
 interface ToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * The content of the toolbar, overriding the default content.
+     * Use the `before` and `after` props if you want to keep and extend the default content.
+     */
     children?: ToolbarSlot;
+    /**
+     * The content to display at the start of the toolbar.
+     */
     before?: ToolbarSlot;
+    /**
+     * The content to display at the end of the toolbar.
+     */
     after?: ToolbarSlot;
 }
 interface ToolbarButtonProps extends ComponentProps<"button"> {
-    icon?: ReactNode;
+    /**
+     * The name of this button displayed in its tooltip.
+     */
     name: string;
+    /**
+     * An optional icon displayed in this button.
+     */
+    icon?: ReactNode;
+    /**
+     * An optional keyboard shortcut displayed in this button's tooltip.
+     *
+     * @example
+     * "Mod-Alt-B" → "⌘⌥B" in Apple environments, "⌃⌥B" otherwise
+     * "Ctrl-Shift-Escape" → "⌃⇧⎋"
+     * "Space" → "␣"
+     */
     shortcut?: string;
 }
 interface ToolbarToggleProps extends ToolbarButtonProps {
+    /**
+     * Whether the button is toggled.
+     */
     active: boolean;
 }
+type ToolbarSeparatorProps = ComponentProps<"div">;
 interface ToolbarBlockSelectorItem {
+    /**
+     * The name of this block element, displayed as the label of this item.
+     */
     name: string;
-    isActive: (selectedBlockElement: LexicalNode | null, editor: LexicalEditor) => boolean;
+    /**
+     * Optionally replace the name used as the label of this item by any content.
+     */
+    label?: ReactNode;
+    /**
+     * An optional icon displayed in this item.
+     */
+    icon?: ReactNode;
+    /**
+     * Whether this block element is currently active.
+     * Set to `"default"` to display this item when no other item is active.
+     */
+    isActive: ((element: LexicalNode | null, editor: LexicalEditor) => boolean) | "default";
+    /**
+     * A callback invoked when this item is selected.
+     */
     setActive: (editor: LexicalEditor) => void;
 }
 interface ToolbarBlockSelectorProps extends ComponentProps<"button"> {
-    items?: ToolbarBlockSelectorItem[];
+    /**
+     * The items displayed in this block selector.
+     * When provided as an array, the default items are overridden. To avoid this,
+     * a function can be provided instead and it will receive the default items.
+     *
+     * @example
+     * <Toolbar.BlockSelector
+     *   items={[
+     *     {
+     *       name: "Text",
+     *       isActive: "default",
+     *       setActive: () => { ... },
+     *     },
+     *     {
+     *       name: "Heading 1",
+     *       isActive: () => { ... },
+     *       setActive: () => { ... },
+     *     },
+     *   ]}
+     * />
+     *
+     * @example
+     * <Toolbar.BlockSelector
+     *   items={(defaultItems) => [
+     *     ...defaultItems,
+     *     {
+     *       name: "Custom block",
+     *       isActive: () => { ... },
+     *       setActive: () => { ... },
+     *     },
+     *   ]}
+     * />
+     */
+    items?: ToolbarBlockSelectorItem[] | ((defaultItems: ToolbarBlockSelectorItem[]) => ToolbarBlockSelectorItem[]);
 }
 declare function ToolbarSectionHistory(): react_jsx_runtime.JSX.Element;
 declare function ToolbarSectionInline(): react_jsx_runtime.JSX.Element | null;
 declare function ToolbarSectionCollaboration(): react_jsx_runtime.JSX.Element;
+/**
+ * A static toolbar containing actions and values related to the editor.
+ *
+ * @example
+ * <Toolbar  />
+ *
+ * @example
+ * <Toolbar >
+ *   <Toolbar.BlockSelector />
+ *   <Toolbar.Separator />
+ *   <Toolbar.SectionInline />
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
+ * </Toolbar>
+ */
 declare const Toolbar: react.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    /**
+     * A button for triggering actions.
+     *
+     * @example
+     * <Toolbar.Button name="Comment" shortcut="Mod-Shift-E" onClick={() => { ... }}>Comment</Toolbar.Button>
+     *
+     * @example
+     * <Toolbar.Button name="Mention someone" icon={<Icon.Mention />} onClick={() => { ... }} />
+     */
     Button: react.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A toggle button for values that can be active or inactive.
+     *
+     * @example
+     * <Toolbar.Toggle name="Bold" active={isBold}>Bold</Toolbar.Toggle>
+     *
+     * @example
+     * <Toolbar.Toggle name="Italic" icon={<Icon.Italic />} shortcut="Mod-I" active={isItalic} onClick={() => { ... }} />
+     */
     Toggle: react.ForwardRefExoticComponent<Omit<ToolbarToggleProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A dropdown selector to switch between different block types.
+     *
+     * @example
+     * <Toolbar.BlockSelector />
+     */
+    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A visual (and accessible) separator to separate sections in a toolbar.
+     */
     Separator: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A section containing history actions. (e.g. undo, redo)
+     */
     SectionHistory: typeof ToolbarSectionHistory;
+    /**
+     * A section containing inline formatting actions. (e.g. bold, italic, underline, ...)
+     */
     SectionInline: typeof ToolbarSectionInline;
+    /**
+     * A section containing collaborative actions. (e.g. adding a comment)
+     */
     SectionCollaboration: typeof ToolbarSectionCollaboration;
-    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 };
 
 interface FloatingToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * The vertical position of the floating toolbar.
+     */
     position?: FloatingPosition;
+    /**
+     * The vertical offset of the floating toolbar from the selection.
+     */
     offset?: number;
+    /**
+     * The content of the floating toolbar, overriding the default content.
+     * Use the `before` and `after` props if you want to keep and extend the default content.
+     */
     children?: ToolbarSlot;
+    /**
+     * The content to display at the start of the floating toolbar.
+     */
     before?: ToolbarSlot;
+    /**
+     * The content to display at the end of the floating toolbar.
+     */
     after?: ToolbarSlot;
 }
+/**
+ * A floating toolbar attached to the selection and containing actions and values related to the editor.
+ *
+ * @example
+ * <FloatingToolbar />
+ *
+ * @example
+ * <FloatingToolbar>
+ *   <Toolbar.BlockSelector />
+ *   <Toolbar.Separator />
+ *   <Toolbar.SectionInline />
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
+ * </FloatingToolbar>
+ */
 declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    /**
+     * A component that can be wrapped around elements which are rendered outside of the floating
+     * toolbar (e.g. portals) to prevent the toolbar from closing when clicking/focusing within them.
+     *
+     * @example
+     * <FloatingToolbar>
+     *   <Popover.Root>
+     *     <Popover.Trigger asChild>
+     *       <Toolbar.Button>Open popover</Toolbar.Button>
+     *     </Popover.Trigger>
+     *     <Popover.Portal>
+     *       <FloatingToolbar.External>
+     *         <Popover.Content>
+     *           This popover is rendered outside of the floating toolbar, but the toolbar will not close when clicking/focusing within it.
+     *         </Popover.Content>
+     *       </FloatingToolbar.External>
+     *     </Popover.Portal>
+     *   </Popover.Root>
+     * </FloatingToolbar>
+     */
     External: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 };
 
@@ -242,4 +427,4 @@ interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
  */
 declare const HistoryVersionPreview: react.ForwardRefExoticComponent<HistoryVersionPreviewProps & react.RefAttributes<HTMLDivElement>>;
 
-export { AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, LiveblocksPlugin, OPEN_FLOATING_COMPOSER_COMMAND, Toolbar, ToolbarProps, liveblocksConfig, useEditorStatus, useIsEditorReady, useIsThreadActive };
+export { AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, LiveblocksPlugin, OPEN_FLOATING_COMPOSER_COMMAND, Toolbar, ToolbarBlockSelectorItem, ToolbarBlockSelectorProps, ToolbarButtonProps, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps, getActiveBlockElement, isTextFormatActive, liveblocksConfig, useEditorStatus, useIsEditorReady, useIsThreadActive };

package/dist/index.js

@@ -6,6 +6,8 @@ var anchoredThreads = require('./comments/anchored-threads.js');
 var commentPluginProvider = require('./comments/comment-plugin-provider.js');
 var floatingComposer = require('./comments/floating-composer.js');
 var floatingThreads = require('./comments/floating-threads.js');
+var getActiveBlockElement = require('./get-active-block-element.js');
+var isTextFormatActive = require('./is-text-format-active.js');
 var liveblocksConfig = require('./liveblocks-config.js');
 var liveblocksPluginProvider = require('./liveblocks-plugin-provider.js');
 var floatingToolbar = require('./toolbar/floating-toolbar.js');
@@ -19,6 +21,8 @@ exports.useIsThreadActive = commentPluginProvider.useIsThreadActive;
 exports.FloatingComposer = floatingComposer.FloatingComposer;
 exports.OPEN_FLOATING_COMPOSER_COMMAND = floatingComposer.OPEN_FLOATING_COMPOSER_COMMAND;
 exports.FloatingThreads = floatingThreads.FloatingThreads;
+exports.getActiveBlockElement = getActiveBlockElement.getActiveBlockElement;
+exports.isTextFormatActive = isTextFormatActive.isTextFormatActive;
 exports.liveblocksConfig = liveblocksConfig.liveblocksConfig;
 exports.LiveblocksPlugin = liveblocksPluginProvider.LiveblocksPlugin;
 exports.useEditorStatus = liveblocksPluginProvider.useEditorStatus;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { AnchoredThreadsProps } from \"./comments/anchored-threads\";\nexport { AnchoredThreads } from \"./comments/anchored-threads\";\nexport { useIsThreadActive } from \"./comments/comment-plugin-provider\";\nexport type { FloatingComposerProps } from \"./comments/floating-composer\";\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport type { FloatingThreadsProps } from \"./comments/floating-threads\";\nexport { FloatingThreads } from \"./comments/floating-threads\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport {\n  LiveblocksPlugin,\n  useEditorStatus,\n  useIsEditorReady,\n} from \"./liveblocks-plugin-provider\";\nexport type { FloatingToolbarProps } from \"./toolbar/floating-toolbar\";\nexport { FloatingToolbar } from \"./toolbar/floating-toolbar\";\nexport type { ToolbarProps } from \"./toolbar/toolbar\";\nexport { Toolbar } from \"./toolbar/toolbar\";\nexport type { HistoryVersionPreviewProps } from \"./version-history/history-version-preview\";\nexport { HistoryVersionPreview } from \"./version-history/history-version-preview\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { AnchoredThreadsProps } from \"./comments/anchored-threads\";\nexport { AnchoredThreads } from \"./comments/anchored-threads\";\nexport { useIsThreadActive } from \"./comments/comment-plugin-provider\";\nexport type { FloatingComposerProps } from \"./comments/floating-composer\";\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport type { FloatingThreadsProps } from \"./comments/floating-threads\";\nexport { FloatingThreads } from \"./comments/floating-threads\";\nexport { getActiveBlockElement } from \"./get-active-block-element\";\nexport { isTextFormatActive } from \"./is-text-format-active\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport {\n  LiveblocksPlugin,\n  useEditorStatus,\n  useIsEditorReady,\n} from \"./liveblocks-plugin-provider\";\nexport type { FloatingToolbarProps } from \"./toolbar/floating-toolbar\";\nexport { FloatingToolbar } from \"./toolbar/floating-toolbar\";\nexport type {\n  ToolbarBlockSelectorItem,\n  ToolbarBlockSelectorProps,\n  ToolbarButtonProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleProps,\n} from \"./toolbar/toolbar\";\nexport { Toolbar } from \"./toolbar/toolbar\";\nexport type { HistoryVersionPreviewProps } from \"./version-history/history-version-preview\";\nexport { HistoryVersionPreview } from \"./version-history/history-version-preview\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -4,6 +4,8 @@ export { AnchoredThreads } from './comments/anchored-threads.mjs';
 export { useIsThreadActive } from './comments/comment-plugin-provider.mjs';
 export { FloatingComposer, OPEN_FLOATING_COMPOSER_COMMAND } from './comments/floating-composer.mjs';
 export { FloatingThreads } from './comments/floating-threads.mjs';
+export { getActiveBlockElement } from './get-active-block-element.mjs';
+export { isTextFormatActive } from './is-text-format-active.mjs';
 export { liveblocksConfig } from './liveblocks-config.mjs';
 export { LiveblocksPlugin, useEditorStatus, useIsEditorReady } from './liveblocks-plugin-provider.mjs';
 export { FloatingToolbar } from './toolbar/floating-toolbar.mjs';

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { AnchoredThreadsProps } from \"./comments/anchored-threads\";\nexport { AnchoredThreads } from \"./comments/anchored-threads\";\nexport { useIsThreadActive } from \"./comments/comment-plugin-provider\";\nexport type { FloatingComposerProps } from \"./comments/floating-composer\";\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport type { FloatingThreadsProps } from \"./comments/floating-threads\";\nexport { FloatingThreads } from \"./comments/floating-threads\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport {\n  LiveblocksPlugin,\n  useEditorStatus,\n  useIsEditorReady,\n} from \"./liveblocks-plugin-provider\";\nexport type { FloatingToolbarProps } from \"./toolbar/floating-toolbar\";\nexport { FloatingToolbar } from \"./toolbar/floating-toolbar\";\nexport type { ToolbarProps } from \"./toolbar/toolbar\";\nexport { Toolbar } from \"./toolbar/toolbar\";\nexport type { HistoryVersionPreviewProps } from \"./version-history/history-version-preview\";\nexport { HistoryVersionPreview } from \"./version-history/history-version-preview\";\n"],"names":[],"mappings":";;;;;;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { AnchoredThreadsProps } from \"./comments/anchored-threads\";\nexport { AnchoredThreads } from \"./comments/anchored-threads\";\nexport { useIsThreadActive } from \"./comments/comment-plugin-provider\";\nexport type { FloatingComposerProps } from \"./comments/floating-composer\";\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport type { FloatingThreadsProps } from \"./comments/floating-threads\";\nexport { FloatingThreads } from \"./comments/floating-threads\";\nexport { getActiveBlockElement } from \"./get-active-block-element\";\nexport { isTextFormatActive } from \"./is-text-format-active\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport {\n  LiveblocksPlugin,\n  useEditorStatus,\n  useIsEditorReady,\n} from \"./liveblocks-plugin-provider\";\nexport type { FloatingToolbarProps } from \"./toolbar/floating-toolbar\";\nexport { FloatingToolbar } from \"./toolbar/floating-toolbar\";\nexport type {\n  ToolbarBlockSelectorItem,\n  ToolbarBlockSelectorProps,\n  ToolbarButtonProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleProps,\n} from \"./toolbar/toolbar\";\nexport { Toolbar } from \"./toolbar/toolbar\";\nexport type { HistoryVersionPreviewProps } from \"./version-history/history-version-preview\";\nexport { HistoryVersionPreview } from \"./version-history/history-version-preview\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/toolbar/floating-toolbar.js

@@ -56,7 +56,6 @@ const FloatingToolbar = Object.assign(
       const [editor] = LexicalComposerContext.useLexicalComposerContext();
       const [isFocused, setFocused] = react.useState(false);
       const [isManuallyClosed, setManuallyClosed] = react.useState(false);
-      const isEditable = editor.isEditable();
       const [hasSelectionRange, setHasSelectionRange] = react.useState(false);
       const isOpen = isFocused && !isPointerDown && hasSelectionRange && !isManuallyClosed;
       const [delayedIsOpen, setDelayedIsOpen] = react.useState(isOpen);
@@ -181,7 +180,7 @@ const FloatingToolbar = Object.assign(
         [onPointerDown]
       );
       react.useEffect(() => {
-        if (!editor || !isEditable) {
+        if (!editor) {
           return;
         }
         const handlePointerDown2 = () => {
@@ -190,15 +189,19 @@ const FloatingToolbar = Object.assign(
         const handlePointerUp = () => {
           setPointerDown(false);
         };
-        document.addEventListener("pointerdown", handlePointerDown2);
-        document.addEventListener("pointercancel", handlePointerUp);
-        document.addEventListener("pointerup", handlePointerUp);
+        const root = editor.getRootElement();
+        if (!root) {
+          return;
+        }
+        root.addEventListener("pointerdown", handlePointerDown2);
+        root.addEventListener("pointercancel", handlePointerUp);
+        root.addEventListener("pointerup", handlePointerUp);
         return () => {
-          document.removeEventListener("pointerdown", handlePointerDown2);
-          document.removeEventListener("pointercancel", handlePointerUp);
-          document.removeEventListener("pointerup", handlePointerUp);
+          root.removeEventListener("pointerdown", handlePointerDown2);
+          root.removeEventListener("pointercancel", handlePointerUp);
+          root.removeEventListener("pointerup", handlePointerUp);
         };
-      }, [editor, isEditable]);
+      }, [editor]);
       react.useEffect(() => {
         const unregister = editor.registerUpdateListener(({ tags }) => {
           return editor.getEditorState().read(() => {