@prosekit/react 0.4.13 → 0.5.0

package/dist/{create-component-DATBjvTG.js → create-component-CBvs05W1.js}

@@ -1,12 +1,38 @@
 import { useEditorContext } from "./editor-context-Cci4uqN_.js";
-import { createElement, forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { mergeRefs } from "react-merge-refs";
+import { createElement, forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
+//#region src/components/merge-refs.ts
+/**
+* Assigns a value to a ref.
+* @returns The ref cleanup callback, if any.
+*/
+function assignRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	else if (ref) ref.current = value;
+}
+/**
+* Merges multiple refs into a single one.
+*/
+function mergeRefs(refs) {
+	return (value) => {
+		const cleanups = [];
+		for (const ref of refs) {
+			const cleanup = assignRef(ref, value);
+			const isCleanup = typeof cleanup === "function";
+			cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null));
+		}
+		return () => {
+			for (const cleanup of cleanups) cleanup();
+		};
+	};
+}
+
+//#endregion
 //#region src/components/create-component.ts
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function createComponent(tagName, displayName, propNames, eventNames) {
 	const hasEditor = propNames.includes("editor");
-	const lowerCaseEventNameMap = Object.fromEntries(eventNames.map((name) => [name.toLowerCase(), name]));
+	const lowerCaseEventNameMap = new Map(eventNames.map((name) => [name.toLowerCase(), name]));
 	const Component = forwardRef((props, ref) => {
 		const [el, setEl] = useState(null);
 		const properties = {};
@@ -21,14 +47,14 @@ function createComponent(tagName, displayName, propNames, eventNames) {
 			}
 			if (name.startsWith("on")) {
 				const lowerCaseEventName = name.slice(2).toLowerCase();
-				const eventName = lowerCaseEventNameMap[lowerCaseEventName];
-				const handler = value;
-				if (eventName && handler) {
+				const eventName = lowerCaseEventNameMap.get(lowerCaseEventName);
+				if (eventName) {
 					const extractDetail = eventName.endsWith("Change");
-					const normalizedHandler = extractDetail ? (event) => {
-						handler(event.detail);
-					} : handler;
-					eventHandlers[eventName] = normalizedHandler;
+					eventHandlers[eventName] = (event) => {
+						const handler = value;
+						if (typeof handler === "function") handler(extractDetail ? event.detail : event);
+					};
+					continue;
 				}
 			}
 			if (name === "className") attributes["class"] = value;
@@ -54,9 +80,10 @@ function createComponent(tagName, displayName, propNames, eventNames) {
 				for (const [name, handler] of Object.entries(fixedEventHandlers)) el.removeEventListener(name, handler);
 			};
 		}, [el]);
+		const mergedRef = useMemo(() => mergeRefs([ref, setEl]), [ref]);
 		return createElement(tagName, {
 			...attributes,
-			ref: mergeRefs([ref, setEl])
+			ref: mergedRef
 		});
 	});
 	Component.displayName = displayName;

package/dist/{create-props-B_K0wKYy.d.ts → create-props-CkTwd_m_.d.ts}

@@ -1,6 +1,5 @@
 //#region src/components/create-props.d.ts
 type CreateProps<Props extends { [PropName in keyof Props]: unknown }, Events extends { [EventName in keyof Events]: CustomEvent }> = Props & CreateEventProps<Events>;
 type CreateEventProps<Events extends { [EventName in keyof Events]: CustomEvent }> = { [EventName in keyof Events as `on${Capitalize<string & EventName>}`]: (event: EventName extends `${string}Change` ? Events[EventName]["detail"] : Events[EventName]) => void };
-
 //#endregion
 export { CreateProps };

package/dist/prosekit-react-autocomplete.d.ts

@@ -1,17 +1,14 @@
-import { CreateProps } from "./create-props-B_K0wKYy.js";
+import { CreateProps } from "./create-props-CkTwd_m_.js";
 import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from "react";
 import { AutocompleteEmptyElement, AutocompleteEmptyEvents, AutocompleteEmptyProps as AutocompleteEmptyProps$1, AutocompleteItemElement, AutocompleteItemEvents, AutocompleteItemProps as AutocompleteItemProps$1, AutocompleteListElement, AutocompleteListEvents, AutocompleteListProps as AutocompleteListProps$1, AutocompletePopoverElement, AutocompletePopoverEvents, AutocompletePopoverProps as AutocompletePopoverProps$1 } from "@prosekit/web/autocomplete";
 
 //#region src/components/autocomplete/autocomplete-empty.gen.d.ts
-/**
-* Props for the {@link AutocompleteEmpty} component.
-*/
+
 /**
 * Props for the {@link AutocompleteEmpty} component.
 */
 interface AutocompleteEmptyProps extends Partial<CreateProps<AutocompleteEmptyProps$1, AutocompleteEmptyEvents>> {}
 declare const AutocompleteEmpty: ForwardRefExoticComponent<AutocompleteEmptyProps & RefAttributes<AutocompleteEmptyElement> & HTMLAttributes<AutocompleteEmptyElement>>;
-
 //#endregion
 //#region src/components/autocomplete/autocomplete-item.gen.d.ts
 /**
@@ -19,7 +16,6 @@ declare const AutocompleteEmpty: ForwardRefExoticComponent<AutocompleteEmptyProp
 */
 interface AutocompleteItemProps extends Partial<CreateProps<AutocompleteItemProps$1, AutocompleteItemEvents>> {}
 declare const AutocompleteItem: ForwardRefExoticComponent<AutocompleteItemProps & RefAttributes<AutocompleteItemElement> & HTMLAttributes<AutocompleteItemElement>>;
-
 //#endregion
 //#region src/components/autocomplete/autocomplete-list.gen.d.ts
 /**
@@ -27,7 +23,6 @@ declare const AutocompleteItem: ForwardRefExoticComponent<AutocompleteItemProps
 */
 interface AutocompleteListProps extends Partial<CreateProps<AutocompleteListProps$1, AutocompleteListEvents>> {}
 declare const AutocompleteList: ForwardRefExoticComponent<AutocompleteListProps & RefAttributes<AutocompleteListElement> & HTMLAttributes<AutocompleteListElement>>;
-
 //#endregion
 //#region src/components/autocomplete/autocomplete-popover.gen.d.ts
 /**
@@ -35,6 +30,5 @@ declare const AutocompleteList: ForwardRefExoticComponent<AutocompleteListProps
 */
 interface AutocompletePopoverProps extends Partial<CreateProps<AutocompletePopoverProps$1, AutocompletePopoverEvents>> {}
 declare const AutocompletePopover: ForwardRefExoticComponent<AutocompletePopoverProps & RefAttributes<AutocompletePopoverElement> & HTMLAttributes<AutocompletePopoverElement>>;
-
 //#endregion
 export { AutocompleteEmpty, AutocompleteEmptyProps, AutocompleteItem, AutocompleteItemProps, AutocompleteList, AutocompleteListProps, AutocompletePopover, AutocompletePopoverProps };

package/dist/prosekit-react-autocomplete.js

@@ -1,5 +1,5 @@
 import "./editor-context-Cci4uqN_.js";
-import { createComponent } from "./create-component-DATBjvTG.js";
+import { createComponent } from "./create-component-CBvs05W1.js";
 import { autocompleteEmptyEvents, autocompleteEmptyProps, autocompleteItemEvents, autocompleteItemProps, autocompleteListEvents, autocompleteListProps, autocompletePopoverEvents, autocompletePopoverProps } from "@prosekit/web/autocomplete";
 
 //#region src/components/autocomplete/autocomplete-empty.gen.ts

package/dist/prosekit-react-block-handle.d.ts

@@ -1,17 +1,14 @@
-import { CreateProps } from "./create-props-B_K0wKYy.js";
+import { CreateProps } from "./create-props-CkTwd_m_.js";
 import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from "react";
 import { BlockHandleAddElement, BlockHandleAddEvents, BlockHandleAddProps as BlockHandleAddProps$1, BlockHandleDraggableElement, BlockHandleDraggableEvents, BlockHandleDraggableProps as BlockHandleDraggableProps$1, BlockHandlePopoverElement, BlockHandlePopoverEvents, BlockHandlePopoverProps as BlockHandlePopoverProps$1 } from "@prosekit/web/block-handle";
 
 //#region src/components/block-handle/block-handle-add.gen.d.ts
-/**
-* Props for the {@link BlockHandleAdd} component.
-*/
+
 /**
 * Props for the {@link BlockHandleAdd} component.
 */
 interface BlockHandleAddProps extends Partial<CreateProps<BlockHandleAddProps$1, BlockHandleAddEvents>> {}
 declare const BlockHandleAdd: ForwardRefExoticComponent<BlockHandleAddProps & RefAttributes<BlockHandleAddElement> & HTMLAttributes<BlockHandleAddElement>>;
-
 //#endregion
 //#region src/components/block-handle/block-handle-draggable.gen.d.ts
 /**
@@ -19,7 +16,6 @@ declare const BlockHandleAdd: ForwardRefExoticComponent<BlockHandleAddProps & Re
 */
 interface BlockHandleDraggableProps extends Partial<CreateProps<BlockHandleDraggableProps$1, BlockHandleDraggableEvents>> {}
 declare const BlockHandleDraggable: ForwardRefExoticComponent<BlockHandleDraggableProps & RefAttributes<BlockHandleDraggableElement> & HTMLAttributes<BlockHandleDraggableElement>>;
-
 //#endregion
 //#region src/components/block-handle/block-handle-popover.gen.d.ts
 /**
@@ -27,6 +23,5 @@ declare const BlockHandleDraggable: ForwardRefExoticComponent<BlockHandleDraggab
 */
 interface BlockHandlePopoverProps extends Partial<CreateProps<BlockHandlePopoverProps$1, BlockHandlePopoverEvents>> {}
 declare const BlockHandlePopover: ForwardRefExoticComponent<BlockHandlePopoverProps & RefAttributes<BlockHandlePopoverElement> & HTMLAttributes<BlockHandlePopoverElement>>;
-
 //#endregion
 export { BlockHandleAdd, BlockHandleAddProps, BlockHandleDraggable, BlockHandleDraggableProps, BlockHandlePopover, BlockHandlePopoverProps };

package/dist/prosekit-react-block-handle.js

@@ -1,5 +1,5 @@
 import "./editor-context-Cci4uqN_.js";
-import { createComponent } from "./create-component-DATBjvTG.js";
+import { createComponent } from "./create-component-CBvs05W1.js";
 import { blockHandleAddEvents, blockHandleAddProps, blockHandleDraggableEvents, blockHandleDraggableProps, blockHandlePopoverEvents, blockHandlePopoverProps } from "@prosekit/web/block-handle";
 
 //#region src/components/block-handle/block-handle-add.gen.ts

package/dist/prosekit-react-inline-popover.d.ts

@@ -1,16 +1,13 @@
-import { CreateProps } from "./create-props-B_K0wKYy.js";
+import { CreateProps } from "./create-props-CkTwd_m_.js";
 import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from "react";
 import { InlinePopoverElement, InlinePopoverEvents, InlinePopoverProps as InlinePopoverProps$1 } from "@prosekit/web/inline-popover";
 
 //#region src/components/inline-popover/inline-popover.gen.d.ts
-/**
-* Props for the {@link InlinePopover} component.
-*/
+
 /**
 * Props for the {@link InlinePopover} component.
 */
 interface InlinePopoverProps extends Partial<CreateProps<InlinePopoverProps$1, InlinePopoverEvents>> {}
 declare const InlinePopover: ForwardRefExoticComponent<InlinePopoverProps & RefAttributes<InlinePopoverElement> & HTMLAttributes<InlinePopoverElement>>;
-
 //#endregion
 export { InlinePopover, InlinePopoverProps };

package/dist/prosekit-react-inline-popover.js

@@ -1,5 +1,5 @@
 import "./editor-context-Cci4uqN_.js";
-import { createComponent } from "./create-component-DATBjvTG.js";
+import { createComponent } from "./create-component-CBvs05W1.js";
 import { inlinePopoverEvents, inlinePopoverProps } from "@prosekit/web/inline-popover";
 
 //#region src/components/inline-popover/inline-popover.gen.ts

package/dist/prosekit-react-popover.d.ts

@@ -1,17 +1,14 @@
-import { CreateProps } from "./create-props-B_K0wKYy.js";
+import { CreateProps } from "./create-props-CkTwd_m_.js";
 import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from "react";
 import { PopoverContentElement, PopoverContentEvents, PopoverContentProps as PopoverContentProps$1, PopoverRootElement, PopoverRootEvents, PopoverRootProps as PopoverRootProps$1, PopoverTriggerElement, PopoverTriggerEvents, PopoverTriggerProps as PopoverTriggerProps$1 } from "@prosekit/web/popover";
 
 //#region src/components/popover/popover-content.gen.d.ts
-/**
-* Props for the {@link PopoverContent} component.
-*/
+
 /**
 * Props for the {@link PopoverContent} component.
 */
 interface PopoverContentProps extends Partial<CreateProps<PopoverContentProps$1, PopoverContentEvents>> {}
 declare const PopoverContent: ForwardRefExoticComponent<PopoverContentProps & RefAttributes<PopoverContentElement> & HTMLAttributes<PopoverContentElement>>;
-
 //#endregion
 //#region src/components/popover/popover-root.gen.d.ts
 /**
@@ -19,7 +16,6 @@ declare const PopoverContent: ForwardRefExoticComponent<PopoverContentProps & Re
 */
 interface PopoverRootProps extends Partial<CreateProps<PopoverRootProps$1, PopoverRootEvents>> {}
 declare const PopoverRoot: ForwardRefExoticComponent<PopoverRootProps & RefAttributes<PopoverRootElement> & HTMLAttributes<PopoverRootElement>>;
-
 //#endregion
 //#region src/components/popover/popover-trigger.gen.d.ts
 /**
@@ -27,6 +23,5 @@ declare const PopoverRoot: ForwardRefExoticComponent<PopoverRootProps & RefAttri
 */
 interface PopoverTriggerProps extends Partial<CreateProps<PopoverTriggerProps$1, PopoverTriggerEvents>> {}
 declare const PopoverTrigger: ForwardRefExoticComponent<PopoverTriggerProps & RefAttributes<PopoverTriggerElement> & HTMLAttributes<PopoverTriggerElement>>;
-
 //#endregion
 export { PopoverContent, PopoverContentProps, PopoverRoot, PopoverRootProps, PopoverTrigger, PopoverTriggerProps };

package/dist/prosekit-react-popover.js

@@ -1,5 +1,5 @@
 import "./editor-context-Cci4uqN_.js";
-import { createComponent } from "./create-component-DATBjvTG.js";
+import { createComponent } from "./create-component-CBvs05W1.js";
 import { popoverContentEvents, popoverContentProps, popoverRootEvents, popoverRootProps, popoverTriggerEvents, popoverTriggerProps } from "@prosekit/web/popover";
 
 //#region src/components/popover/popover-content.gen.ts

package/dist/prosekit-react-resizable.d.ts

@@ -1,17 +1,14 @@
-import { CreateProps } from "./create-props-B_K0wKYy.js";
+import { CreateProps } from "./create-props-CkTwd_m_.js";
 import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from "react";
 import { ResizableHandleElement, ResizableHandleEvents, ResizableHandleProps as ResizableHandleProps$1, ResizableRootElement, ResizableRootEvents, ResizableRootProps as ResizableRootProps$1 } from "@prosekit/web/resizable";
 
 //#region src/components/resizable/resizable-handle.gen.d.ts
-/**
-* Props for the {@link ResizableHandle} component.
-*/
+
 /**
 * Props for the {@link ResizableHandle} component.
 */
 interface ResizableHandleProps extends Partial<CreateProps<ResizableHandleProps$1, ResizableHandleEvents>> {}
 declare const ResizableHandle: ForwardRefExoticComponent<ResizableHandleProps & RefAttributes<ResizableHandleElement> & HTMLAttributes<ResizableHandleElement>>;
-
 //#endregion
 //#region src/components/resizable/resizable-root.gen.d.ts
 /**
@@ -19,6 +16,5 @@ declare const ResizableHandle: ForwardRefExoticComponent<ResizableHandleProps &
 */
 interface ResizableRootProps extends Partial<CreateProps<ResizableRootProps$1, ResizableRootEvents>> {}
 declare const ResizableRoot: ForwardRefExoticComponent<ResizableRootProps & RefAttributes<ResizableRootElement> & HTMLAttributes<ResizableRootElement>>;
-
 //#endregion
 export { ResizableHandle, ResizableHandleProps, ResizableRoot, ResizableRootProps };

package/dist/prosekit-react-resizable.js

@@ -1,5 +1,5 @@
 import "./editor-context-Cci4uqN_.js";
-import { createComponent } from "./create-component-DATBjvTG.js";
+import { createComponent } from "./create-component-CBvs05W1.js";
 import { resizableHandleEvents, resizableHandleProps, resizableRootEvents, resizableRootProps } from "@prosekit/web/resizable";
 
 //#region src/components/resizable/resizable-handle.gen.ts

package/dist/prosekit-react-table-handle.d.ts

@@ -1,17 +1,14 @@
-import { CreateProps } from "./create-props-B_K0wKYy.js";
+import { CreateProps } from "./create-props-CkTwd_m_.js";
 import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from "react";
 import { TableHandleColumnRootElement, TableHandleColumnRootEvents, TableHandleColumnRootProps as TableHandleColumnRootProps$1, TableHandleColumnTriggerElement, TableHandleColumnTriggerEvents, TableHandleColumnTriggerProps as TableHandleColumnTriggerProps$1, TableHandlePopoverContentElement, TableHandlePopoverContentEvents, TableHandlePopoverContentProps as TableHandlePopoverContentProps$1, TableHandlePopoverItemElement, TableHandlePopoverItemEvents, TableHandlePopoverItemProps as TableHandlePopoverItemProps$1, TableHandleRootElement, TableHandleRootEvents, TableHandleRootProps as TableHandleRootProps$1, TableHandleRowRootElement, TableHandleRowRootEvents, TableHandleRowRootProps as TableHandleRowRootProps$1, TableHandleRowTriggerElement, TableHandleRowTriggerEvents, TableHandleRowTriggerProps as TableHandleRowTriggerProps$1 } from "@prosekit/web/table-handle";
 
 //#region src/components/table-handle/table-handle-column-root.gen.d.ts
-/**
-* Props for the {@link TableHandleColumnRoot} component.
-*/
+
 /**
 * Props for the {@link TableHandleColumnRoot} component.
 */
 interface TableHandleColumnRootProps extends Partial<CreateProps<TableHandleColumnRootProps$1, TableHandleColumnRootEvents>> {}
 declare const TableHandleColumnRoot: ForwardRefExoticComponent<TableHandleColumnRootProps & RefAttributes<TableHandleColumnRootElement> & HTMLAttributes<TableHandleColumnRootElement>>;
-
 //#endregion
 //#region src/components/table-handle/table-handle-column-trigger.gen.d.ts
 /**
@@ -19,7 +16,6 @@ declare const TableHandleColumnRoot: ForwardRefExoticComponent<TableHandleColumn
 */
 interface TableHandleColumnTriggerProps extends Partial<CreateProps<TableHandleColumnTriggerProps$1, TableHandleColumnTriggerEvents>> {}
 declare const TableHandleColumnTrigger: ForwardRefExoticComponent<TableHandleColumnTriggerProps & RefAttributes<TableHandleColumnTriggerElement> & HTMLAttributes<TableHandleColumnTriggerElement>>;
-
 //#endregion
 //#region src/components/table-handle/table-handle-popover-content.gen.d.ts
 /**
@@ -27,7 +23,6 @@ declare const TableHandleColumnTrigger: ForwardRefExoticComponent<TableHandleCol
 */
 interface TableHandlePopoverContentProps extends Partial<CreateProps<TableHandlePopoverContentProps$1, TableHandlePopoverContentEvents>> {}
 declare const TableHandlePopoverContent: ForwardRefExoticComponent<TableHandlePopoverContentProps & RefAttributes<TableHandlePopoverContentElement> & HTMLAttributes<TableHandlePopoverContentElement>>;
-
 //#endregion
 //#region src/components/table-handle/table-handle-popover-item.gen.d.ts
 /**
@@ -35,7 +30,6 @@ declare const TableHandlePopoverContent: ForwardRefExoticComponent<TableHandlePo
 */
 interface TableHandlePopoverItemProps extends Partial<CreateProps<TableHandlePopoverItemProps$1, TableHandlePopoverItemEvents>> {}
 declare const TableHandlePopoverItem: ForwardRefExoticComponent<TableHandlePopoverItemProps & RefAttributes<TableHandlePopoverItemElement> & HTMLAttributes<TableHandlePopoverItemElement>>;
-
 //#endregion
 //#region src/components/table-handle/table-handle-root.gen.d.ts
 /**
@@ -43,7 +37,6 @@ declare const TableHandlePopoverItem: ForwardRefExoticComponent<TableHandlePopov
 */
 interface TableHandleRootProps extends Partial<CreateProps<TableHandleRootProps$1, TableHandleRootEvents>> {}
 declare const TableHandleRoot: ForwardRefExoticComponent<TableHandleRootProps & RefAttributes<TableHandleRootElement> & HTMLAttributes<TableHandleRootElement>>;
-
 //#endregion
 //#region src/components/table-handle/table-handle-row-root.gen.d.ts
 /**
@@ -51,7 +44,6 @@ declare const TableHandleRoot: ForwardRefExoticComponent<TableHandleRootProps &
 */
 interface TableHandleRowRootProps extends Partial<CreateProps<TableHandleRowRootProps$1, TableHandleRowRootEvents>> {}
 declare const TableHandleRowRoot: ForwardRefExoticComponent<TableHandleRowRootProps & RefAttributes<TableHandleRowRootElement> & HTMLAttributes<TableHandleRowRootElement>>;
-
 //#endregion
 //#region src/components/table-handle/table-handle-row-trigger.gen.d.ts
 /**
@@ -59,6 +51,5 @@ declare const TableHandleRowRoot: ForwardRefExoticComponent<TableHandleRowRootPr
 */
 interface TableHandleRowTriggerProps extends Partial<CreateProps<TableHandleRowTriggerProps$1, TableHandleRowTriggerEvents>> {}
 declare const TableHandleRowTrigger: ForwardRefExoticComponent<TableHandleRowTriggerProps & RefAttributes<TableHandleRowTriggerElement> & HTMLAttributes<TableHandleRowTriggerElement>>;
-
 //#endregion
 export { TableHandleColumnRoot, TableHandleColumnRootProps, TableHandleColumnTrigger, TableHandleColumnTriggerProps, TableHandlePopoverContent, TableHandlePopoverContentProps, TableHandlePopoverItem, TableHandlePopoverItemProps, TableHandleRoot, TableHandleRootProps, TableHandleRowRoot, TableHandleRowRootProps, TableHandleRowTrigger, TableHandleRowTriggerProps };

package/dist/prosekit-react-table-handle.js

@@ -1,5 +1,5 @@
 import "./editor-context-Cci4uqN_.js";
-import { createComponent } from "./create-component-DATBjvTG.js";
+import { createComponent } from "./create-component-CBvs05W1.js";
 import { tableHandleColumnRootEvents, tableHandleColumnRootProps, tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, tableHandlePopoverContentEvents, tableHandlePopoverContentProps, tableHandlePopoverItemEvents, tableHandlePopoverItemProps, tableHandleRootEvents, tableHandleRootProps, tableHandleRowRootEvents, tableHandleRowRootProps, tableHandleRowTriggerEvents, tableHandleRowTriggerProps } from "@prosekit/web/table-handle";
 
 //#region src/components/table-handle/table-handle-column-root.gen.ts

package/dist/prosekit-react-tooltip.d.ts

@@ -1,17 +1,14 @@
-import { CreateProps } from "./create-props-B_K0wKYy.js";
+import { CreateProps } from "./create-props-CkTwd_m_.js";
 import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from "react";
 import { TooltipContentElement, TooltipContentEvents, TooltipContentProps as TooltipContentProps$1, TooltipRootElement, TooltipRootEvents, TooltipRootProps as TooltipRootProps$1, TooltipTriggerElement, TooltipTriggerEvents, TooltipTriggerProps as TooltipTriggerProps$1 } from "@prosekit/web/tooltip";
 
 //#region src/components/tooltip/tooltip-content.gen.d.ts
-/**
-* Props for the {@link TooltipContent} component.
-*/
+
 /**
 * Props for the {@link TooltipContent} component.
 */
 interface TooltipContentProps extends Partial<CreateProps<TooltipContentProps$1, TooltipContentEvents>> {}
 declare const TooltipContent: ForwardRefExoticComponent<TooltipContentProps & RefAttributes<TooltipContentElement> & HTMLAttributes<TooltipContentElement>>;
-
 //#endregion
 //#region src/components/tooltip/tooltip-root.gen.d.ts
 /**
@@ -19,7 +16,6 @@ declare const TooltipContent: ForwardRefExoticComponent<TooltipContentProps & Re
 */
 interface TooltipRootProps extends Partial<CreateProps<TooltipRootProps$1, TooltipRootEvents>> {}
 declare const TooltipRoot: ForwardRefExoticComponent<TooltipRootProps & RefAttributes<TooltipRootElement> & HTMLAttributes<TooltipRootElement>>;
-
 //#endregion
 //#region src/components/tooltip/tooltip-trigger.gen.d.ts
 /**
@@ -27,6 +23,5 @@ declare const TooltipRoot: ForwardRefExoticComponent<TooltipRootProps & RefAttri
 */
 interface TooltipTriggerProps extends Partial<CreateProps<TooltipTriggerProps$1, TooltipTriggerEvents>> {}
 declare const TooltipTrigger: ForwardRefExoticComponent<TooltipTriggerProps & RefAttributes<TooltipTriggerElement> & HTMLAttributes<TooltipTriggerElement>>;
-
 //#endregion
 export { TooltipContent, TooltipContentProps, TooltipRoot, TooltipRootProps, TooltipTrigger, TooltipTriggerProps };

package/dist/prosekit-react-tooltip.js

@@ -1,5 +1,5 @@
 import "./editor-context-Cci4uqN_.js";
-import { createComponent } from "./create-component-DATBjvTG.js";
+import { createComponent } from "./create-component-CBvs05W1.js";
 import { tooltipContentEvents, tooltipContentProps, tooltipRootEvents, tooltipRootProps, tooltipTriggerEvents, tooltipTriggerProps } from "@prosekit/web/tooltip";
 
 //#region src/components/tooltip/tooltip-content.gen.ts

package/dist/prosekit-react.d.ts

@@ -16,7 +16,6 @@ interface ProseKitProps {
 * @public
 */
 declare const ProseKit: ComponentType<ProseKitProps>;
-
 //#endregion
 //#region src/extensions/react-mark-view.d.ts
 /**
@@ -48,7 +47,6 @@ interface ReactMarkViewOptions extends CoreMarkViewUserOptions<ReactMarkViewComp
 * @public
 */
 declare function defineReactMarkView(options: ReactMarkViewOptions): Extension;
-
 //#endregion
 //#region src/extensions/react-node-view.d.ts
 /**
@@ -80,7 +78,6 @@ interface ReactNodeViewOptions extends CoreNodeViewUserOptions<ReactNodeViewComp
 * @public
 */
 declare function defineReactNodeView(options: ReactNodeViewOptions): Extension;
-
 //#endregion
 //#region src/hooks/use-extension.d.ts
 interface UseExtensionOptions {
@@ -98,7 +95,6 @@ interface UseExtensionOptions {
 * Add an extension to the editor.
 */
 declare function useExtension(extension: Extension | null, options?: UseExtensionOptions): void;
-
 //#endregion
 //#region src/hooks/use-doc-change.d.ts
 /**
@@ -107,7 +103,6 @@ declare function useExtension(extension: Extension | null, options?: UseExtensio
 * @public
 */
 declare function useDocChange(handler: (doc: ProseMirrorNode) => void, options?: UseExtensionOptions): void;
-
 //#endregion
 //#region src/hooks/use-editor.d.ts
 /**
@@ -120,15 +115,37 @@ declare function useEditor<E extends Extension = any>(options?: {
   * Whether to update the component when the editor is mounted or editor state
   * is updated.
   *
+  * Note this this option doesn't work with [React
+  * compiler](https://react.dev/learn/react-compiler) because the returned
+  * editor will be the same instance after state updates. If you're using React
+  * compiler, you should use {@link useEditorDerivedValue} instead.
+  *
   * @default false
   */
   update?: boolean;
 }): Editor<E>;
-
+//#endregion
+//#region src/hooks/use-editor-derived-value.d.ts
+interface UseEditorDerivedOptions<E extends Extension = any> {
+  /**
+  * The editor to add the extension to. If not provided, it will use the
+  * editor from the nearest `ProseKit` component.
+  */
+  editor?: Editor<E>;
+}
+/**
+* A hook that runs a function to derive a value from the editor instance after
+* editor state changes.
+*
+* This is useful when you need to render something based on the editor state,
+* for example, whether the selected text is wrapped in an italic mark.
+*
+* @public
+*/
+declare function useEditorDerivedValue<E extends Extension, Derived>(derive: (editor: Editor<E>) => Derived, options?: UseEditorDerivedOptions<E>): Derived;
 //#endregion
 //#region src/hooks/use-keymap.d.ts
 declare function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void;
-
 //#endregion
 //#region src/hooks/use-state-update.d.ts
 /**
@@ -137,7 +154,6 @@ declare function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void;
 * @public
 */
 declare function useStateUpdate(handler: (state: EditorState) => void, options?: UseExtensionOptions): void;
-
 //#endregion
 //#region src/types.d.ts
 /**
@@ -146,6 +162,5 @@ declare function useStateUpdate(handler: (state: EditorState) => void, options?:
 type PropsWithClassName<P = unknown> = P & {
   className?: string | undefined;
 };
-
 //#endregion
-export { PropsWithClassName, ProseKit, ProseKitProps, ReactMarkViewComponent, ReactMarkViewOptions, ReactMarkViewProps, ReactNodeViewComponent, ReactNodeViewOptions, ReactNodeViewProps, UseExtensionOptions, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useExtension, useKeymap, useStateUpdate };
+export { PropsWithClassName, ProseKit, ProseKitProps, ReactMarkViewComponent, ReactMarkViewOptions, ReactMarkViewProps, ReactNodeViewComponent, ReactNodeViewOptions, ReactNodeViewProps, UseEditorDerivedOptions, UseExtensionOptions, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };

package/dist/prosekit-react.js

@@ -1,6 +1,6 @@
 import { EditorContextProvider, useEditorContext } from "./editor-context-Cci4uqN_.js";
 import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/react";
-import { createElement, useEffect, useMemo, useReducer } from "react";
+import { createElement, useEffect, useMemo, useReducer, useSyncExternalStore } from "react";
 import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
 
 //#region src/hooks/use-editor-extension.ts
@@ -170,6 +170,47 @@ function useForceUpdate() {
 	return dispatch;
 }
 
+//#endregion
+//#region src/hooks/use-editor-derived-value.ts
+/**
+* A hook that runs a function to derive a value from the editor instance after
+* editor state changes.
+*
+* This is useful when you need to render something based on the editor state,
+* for example, whether the selected text is wrapped in an italic mark.
+*
+* @public
+*/
+function useEditorDerivedValue(derive, options) {
+	const editorContext = useEditorContext();
+	const editor = options?.editor ?? editorContext;
+	if (!editor) throw new EditorNotFoundError();
+	const [subscribe, getSnapshot] = useMemo(() => {
+		return createEditorStore(editor, derive);
+	}, [editor, derive]);
+	return useSyncExternalStore(subscribe, getSnapshot);
+}
+function createEditorStore(editor, derive) {
+	let dirty = true;
+	let derived;
+	const subscribe = (onChange) => {
+		const handleChange = () => {
+			dirty = true;
+			onChange();
+		};
+		const extension = union(defineUpdateHandler(handleChange), defineMountHandler(handleChange));
+		return editor.use(extension);
+	};
+	const getSnapshot = () => {
+		if (dirty) {
+			dirty = false;
+			derived = derive(editor);
+		}
+		return derived;
+	};
+	return [subscribe, getSnapshot];
+}
+
 //#endregion
 //#region src/hooks/use-keymap.ts
 function useKeymap(keymap, options) {
@@ -190,4 +231,4 @@ function useStateUpdate(handler, options) {
 }
 
 //#endregion
-export { ProseKit, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useExtension, useKeymap, useStateUpdate };
+export { ProseKit, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.4.13",
+  "version": "0.5.0",
   "private": false,
   "description": "React components and utilities for ProseKit",
   "author": {
@@ -65,10 +65,9 @@
   "dependencies": {
     "@prosemirror-adapter/core": "^0.4.0",
     "@prosemirror-adapter/react": "^0.4.1",
-    "react-merge-refs": "^3.0.1",
     "@prosekit/core": "^0.8.1",
     "@prosekit/pm": "^0.1.10",
-    "@prosekit/web": "^0.5.8"
+    "@prosekit/web": "^0.5.9"
   },
   "peerDependencies": {
     "react": ">= 18.2.0",
@@ -83,13 +82,13 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "tsdown": "^0.11.1",
+    "tsdown": "^0.12.5",
     "typescript": "~5.8.3",
-    "vitest": "^3.1.3",
+    "vitest": "^3.1.4",
     "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/config-vitest": "0.0.0"
   },