@octanejs/lexical 0.1.2

package/src/LexicalHorizontalRulePlugin.tsrx

@@ -0,0 +1,34 @@
+// Ported from @lexical/react/src/LexicalHorizontalRulePlugin.ts.
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import {
+	$createHorizontalRuleNode,
+	INSERT_HORIZONTAL_RULE_COMMAND,
+} from './LexicalHorizontalRuleNode.tsrx';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { useEffect } from 'octane';
+
+export function HorizontalRulePlugin() {
+	const [editor] = useLexicalComposerContext();
+
+	useEffect(() => {
+		return editor.registerCommand(
+			INSERT_HORIZONTAL_RULE_COMMAND,
+			(type) => {
+				const selection = $getSelection();
+				if (!$isRangeSelection(selection)) {
+					return false;
+				}
+				const focusNode = selection.focus.getNode();
+				if (focusNode !== null) {
+					const horizontalRuleNode = $createHorizontalRuleNode();
+					$insertNodeToNearestRoot(horizontalRuleNode);
+				}
+				return true;
+			},
+			COMMAND_PRIORITY_EDITOR,
+		);
+	}, [editor]);
+
+	return null;
+}

package/src/LexicalLinkPlugin.tsrx

@@ -0,0 +1,27 @@
+// Ported from @lexical/react/src/LexicalLinkPlugin.ts. namedSignals is from
+// @lexical/extension's framework-agnostic core.
+import { namedSignals } from '@lexical/extension';
+import { LinkNode, registerLink } from '@lexical/link';
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { useEffect } from 'octane';
+
+export function LinkPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const validateUrl = props.validateUrl;
+	const attributes = props.attributes;
+
+	// No deps — runs every render (matches @lexical/react).
+	useEffect(() => {
+		if (!editor.hasNodes([LinkNode])) {
+			throw new Error('LinkPlugin: LinkNode not registered on editor');
+		}
+	});
+
+	useEffect(() => registerLink(editor, namedSignals({ attributes, validateUrl })), [
+		editor,
+		validateUrl,
+		attributes,
+	]);
+
+	return null;
+}

package/src/LexicalListPlugin.tsrx

@@ -0,0 +1,37 @@
+// Ported from @lexical/react/src/LexicalListPlugin.ts (+ shared/useList.ts inlined
+// as the third useEffect, matching @lexical/react which registers list twice).
+import {
+	ListItemNode,
+	ListNode,
+	registerList,
+	registerListStrictIndentTransform,
+} from '@lexical/list';
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { mergeRegister } from 'lexical';
+import { useEffect } from 'octane';
+
+export function ListPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const hasStrictIndent =
+		props.hasStrictIndent === undefined ? false : props.hasStrictIndent;
+	const shouldPreserveNumbering =
+		props.shouldPreserveNumbering === undefined ? false : props.shouldPreserveNumbering;
+
+	useEffect(() => {
+		if (!editor.hasNodes([ListNode, ListItemNode])) {
+			throw new Error('ListPlugin: ListNode and/or ListItemNode not registered on editor');
+		}
+	}, [editor]);
+
+	useEffect(() => {
+		return mergeRegister(
+			registerList(editor, { restoreNumbering: shouldPreserveNumbering }),
+			hasStrictIndent ? registerListStrictIndentTransform(editor) : () => {},
+		);
+	}, [editor, hasStrictIndent, shouldPreserveNumbering]);
+
+	// useList(editor) — inlined.
+	useEffect(() => registerList(editor), [editor]);
+
+	return null;
+}

package/src/LexicalMarkdownShortcutPlugin.tsrx

@@ -0,0 +1,39 @@
+// Ported from @lexical/react/src/LexicalMarkdownShortcutPlugin.tsx. The HR
+// transformer + node come from @lexical/extension's agnostic core.
+import {
+	$createHorizontalRuleNode,
+	$isHorizontalRuleNode,
+	HorizontalRuleNode,
+} from '@lexical/extension';
+import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { useEffect } from 'octane';
+
+const HR = {
+	dependencies: [HorizontalRuleNode],
+	export: (node) => ($isHorizontalRuleNode(node) ? '***' : null),
+	regExp: /^(---|\*\*\*|___)\s?$/,
+	replace: (parentNode, _1, _2, isImport) => {
+		const line = $createHorizontalRuleNode();
+		if (isImport || parentNode.getNextSibling() != null) {
+			parentNode.replace(line);
+		} else {
+			parentNode.insertBefore(line);
+		}
+		line.selectNext();
+	},
+	triggerOnEnter: true,
+	type: 'element',
+};
+
+export const DEFAULT_TRANSFORMERS = [HR, ...TRANSFORMERS];
+
+export function MarkdownShortcutPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const transformers =
+		props.transformers === undefined ? DEFAULT_TRANSFORMERS : props.transformers;
+
+	useEffect(() => registerMarkdownShortcuts(editor, transformers), [editor, transformers]);
+
+	return null;
+}

package/src/LexicalNestedComposer.tsrx

@@ -0,0 +1,124 @@
+// Ported from @lexical/react/src/LexicalNestedComposer.tsx. Provides a nested
+// LexicalEditor (e.g. the editor backing an image caption or table cell) to its
+// children via context, inheriting the parent's theme/nodes/namespace/editable
+// state by default. The nested editor is created ahead of time and passed in.
+import { createLexicalComposerContext, LexicalComposerContext } from './LexicalComposerContext';
+import { CollaborationContext } from './LexicalCollaborationContext';
+import invariant from '@lexical/internal/invariant';
+import warnOnlyOnce from '@lexical/internal/warnOnlyOnce';
+import { createSharedNodeState, getRegisteredNode, getTransformSetFromKlass } from 'lexical';
+import { useContext, useEffect, useMemo, useRef } from 'octane';
+
+const initialNodesWarning = warnOnlyOnce(
+	`LexicalNestedComposer initialNodes is deprecated and will be removed in v0.32.0, it has never worked correctly.\nYou can configure your editor's nodes with createEditor({nodes: [], parentEditor: $getEditor()})`,
+);
+const explicitNamespaceWarning = warnOnlyOnce(
+	`LexicalNestedComposer initialEditor should explicitly initialize its namespace when the node configuration differs from the parentEditor. For backwards compatibility, the namespace will be initialized from parentEditor until v0.32.0, but this has always had incorrect copy/paste behavior when the configuration differed.\nYou can configure your editor's namespace with createEditor({namespace: 'nested-editor-namespace', nodes: [], parentEditor: $getEditor()}).`,
+);
+
+export function LexicalNestedComposer(props) {
+	const initialEditor = props.initialEditor;
+	const initialNodes = props.initialNodes;
+	const initialTheme = props.initialTheme;
+	const skipCollabChecks = props.skipCollabChecks;
+	const skipEditableListener = props.skipEditableListener;
+
+	const wasCollabPreviouslyReadyRef = useRef(false);
+	const parentContext = useContext(LexicalComposerContext);
+
+	if (parentContext == null) {
+		invariant(false, 'Unexpected parent context null on a nested composer');
+	}
+
+	const [parentEditor, { getTheme: getParentTheme }] = parentContext;
+
+	const composerContext = useMemo(() => {
+		const composerTheme = initialTheme || getParentTheme() || undefined;
+		const context = createLexicalComposerContext(parentContext, composerTheme);
+
+		if (composerTheme !== undefined) {
+			initialEditor._config.theme = composerTheme;
+		}
+
+		initialEditor._parentEditor = initialEditor._parentEditor || parentEditor;
+		const createEditorArgs = initialEditor._createEditorArgs;
+		const explicitNamespace = createEditorArgs && createEditorArgs.namespace;
+
+		if (!initialNodes) {
+			if (!(createEditorArgs && createEditorArgs.nodes)) {
+				const parentNodes = initialEditor._nodes = new Map(parentEditor._nodes);
+				if (!explicitNamespace) {
+					initialEditor._config.namespace = parentEditor._config.namespace;
+				}
+				for (const [type, entry] of parentNodes) {
+					initialEditor._nodes.set(type, {
+						exportDOM: entry.exportDOM,
+						klass: entry.klass,
+						replace: entry.replace,
+						replaceWithKlass: entry.replaceWithKlass,
+						sharedNodeState: createSharedNodeState(entry.klass),
+						transforms: getTransformSetFromKlass(entry.klass),
+					});
+				}
+			} else if (!explicitNamespace) {
+				explicitNamespaceWarning();
+				initialEditor._config.namespace = parentEditor._config.namespace;
+			}
+		} else {
+			initialNodesWarning();
+			if (!explicitNamespace) {
+				explicitNamespaceWarning();
+				initialEditor._config.namespace = parentEditor._config.namespace;
+			}
+			for (let klass of initialNodes) {
+				let replace = null;
+				let replaceWithKlass = null;
+
+				if (typeof klass !== 'function') {
+					const options = klass;
+					klass = options.replace;
+					replace = options.with;
+					replaceWithKlass = options.withKlass || null;
+				}
+				const registeredKlass = getRegisteredNode(initialEditor, klass.getType());
+
+				initialEditor._nodes.set(klass.getType(), {
+					exportDOM: registeredKlass ? registeredKlass.exportDOM : undefined,
+					klass,
+					replace,
+					replaceWithKlass,
+					sharedNodeState: createSharedNodeState(klass),
+					transforms: getTransformSetFromKlass(klass),
+				});
+			}
+		}
+
+		return [initialEditor, context];
+	}, []);
+
+	const collabContext = useContext(CollaborationContext);
+	const isCollabActive = collabContext ? collabContext.isCollabActive : undefined;
+	const yjsDocMap = collabContext ? collabContext.yjsDocMap : undefined;
+
+	const isCollabReady =
+		skipCollabChecks || wasCollabPreviouslyReadyRef.current ||
+			yjsDocMap && yjsDocMap.has(initialEditor.getKey());
+
+	useEffect(() => {
+		if (isCollabReady) {
+			wasCollabPreviouslyReadyRef.current = true;
+		}
+	}, [isCollabReady]);
+
+	useEffect(() => {
+		if (!skipEditableListener) {
+			const editableListener = (editable) => initialEditor.setEditable(editable);
+			editableListener(parentEditor.isEditable());
+			return parentEditor.registerEditableListener(editableListener);
+		}
+	}, [initialEditor, parentEditor, skipEditableListener]);
+
+	return <LexicalComposerContext.Provider value={composerContext}>
+		{!isCollabActive || isCollabReady ? props.children : null}
+	</LexicalComposerContext.Provider>;
+}

package/src/LexicalNodeContextMenuPlugin.tsrx

@@ -0,0 +1,252 @@
+// Ported 1:1 from @lexical/react/src/LexicalNodeContextMenuPlugin.tsx (0.46.0). The
+// React version is built entirely on @floating-ui/REACT — useFloating, useRole,
+// useDismiss, useListNavigation, useTypeahead, useInteractions, and the
+// FloatingPortal/FloatingOverlay/FloatingFocusManager components. octane now has the
+// faithful binding (@octanejs/floating-ui), so this mirrors the original directly
+// instead of re-implementing positioning/keyboard/dismiss by hand. octane adaptations:
+// no forwardRef (refs are props), and the per-item `getItemProps()` is spread onto the
+// host <button>/<hr> (octane applies ref / on* / tabindex / role from a prop spread).
+import {
+	useFloating,
+	useRole,
+	useDismiss,
+	useListNavigation,
+	useTypeahead,
+	useInteractions,
+	offset,
+	flip,
+	shift,
+	autoUpdate,
+	FloatingPortal,
+	FloatingOverlay,
+	FloatingFocusManager,
+} from '@octanejs/floating-ui';
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { $getNearestNodeFromDOMNode, $getRoot } from 'lexical';
+import { useEffect, useRef, useState } from 'octane';
+
+class MenuOption {
+	key: string;
+	ref?: { current: HTMLElement | null };
+
+	constructor(key: string) {
+		this.key = key;
+		this.ref = { current: null };
+		this.setRefElement = this.setRefElement.bind(this);
+	}
+
+	setRefElement(element: HTMLElement | null) {
+		this.ref = { current: element };
+	}
+}
+
+export class NodeContextMenuOption extends MenuOption {
+	type: string;
+	title: string;
+	icon: unknown;
+	disabled: boolean;
+	$onSelect: () => void;
+	$showOn?: (node: unknown) => boolean;
+
+	constructor(title, options) {
+		super(title);
+		this.type = 'item';
+		this.title = title;
+		this.disabled = options.disabled ?? false;
+		this.icon = options.icon ?? null;
+		this.$onSelect = options.$onSelect;
+		if (options.$showOn) {
+			this.$showOn = options.$showOn;
+		}
+	}
+}
+
+export class NodeContextMenuSeparator extends MenuOption {
+	type: string;
+	$showOn?: (node: unknown) => boolean;
+
+	constructor(options) {
+		super('_separator');
+		this.type = 'separator';
+		if (options && options.$showOn) {
+			this.$showOn = options.$showOn;
+		}
+	}
+}
+
+// The floating menu container + its items. Mirrors the React render's inner <div>:
+// the resolved floating props are spread onto it, and each item spreads its own
+// getItemProps() onto a <button> (or <hr> for a separator).
+function ContextMenuList(props) @{
+	<div
+		class={props.className}
+		ref={props.setFloating}
+		style={props.floatingStyles}
+		role="menu"
+		{...props.floatingProps}
+	>
+		@for (const item of props.items; key item.key) {
+			@if (item.type === 'item') {
+				<button {...item.itemProps} class={item.className} role="menuitem" disabled={item.disabled}>
+					{item.icon}
+					<span>
+						{item.label as string}
+					</span>
+				</button>
+			} @else {
+				<hr {...item.itemProps} class={item.className} />
+			}
+		}
+	</div>
+}
+
+export function NodeContextMenuPlugin(props) @{
+	const items = props.items;
+	const className = props.className;
+	const itemClassName = props.itemClassName;
+	const separatorClassName = props.separatorClassName;
+
+	const [editor] = useLexicalComposerContext();
+	const [activeIndex, setActiveIndex] = useState(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const [renderItems, setRenderItems] = useState([]);
+
+	const listItemsRef = useRef([]);
+	const listContentRef = useRef([]);
+
+	const f = useFloating({
+		middleware: [
+			offset({ alignmentAxis: 4, mainAxis: 5 }),
+			flip({ fallbackPlacements: ['left-start'] }),
+			shift({ padding: 10 }),
+		],
+		onOpenChange: setIsOpen,
+		open: isOpen,
+		placement: 'right-start',
+		strategy: 'fixed',
+		whileElementsMounted: autoUpdate,
+	});
+
+	const role = useRole(f.context, { role: 'menu' });
+	const dismiss = useDismiss(f.context);
+	const listNavigation = useListNavigation(f.context, {
+		activeIndex,
+		listRef: listItemsRef,
+		onNavigate: setActiveIndex,
+	});
+	const typeahead = useTypeahead(f.context, {
+		activeIndex,
+		enabled: isOpen,
+		listRef: listContentRef,
+		onMatch: setActiveIndex,
+	});
+	const { getFloatingProps, getItemProps } = useInteractions([
+		role,
+		dismiss,
+		listNavigation,
+		typeahead,
+	]);
+
+	// Build the menu model on right-click and open the menu at the cursor.
+	useEffect(() => {
+		function onContextMenu(e) {
+			e.preventDefault();
+
+			f.refs.setPositionReference({
+				getBoundingClientRect() {
+					return {
+						bottom: e.clientY,
+						height: 0,
+						left: e.clientX,
+						right: e.clientX,
+						top: e.clientY,
+						width: 0,
+						x: e.clientX,
+						y: e.clientY,
+					};
+				},
+			});
+
+			let visibleItems = [];
+			if (items) {
+				editor.read(() => {
+					const node = $getNearestNodeFromDOMNode(e.target) ?? $getRoot();
+					if (node) {
+						visibleItems = items.filter((option) => (option.$showOn ? option.$showOn(node) : true));
+					}
+				});
+			}
+
+			const renderableItems = visibleItems.map((option, index) => {
+				if (option.type === 'separator') {
+					return {
+						className: separatorClassName,
+						key: option.key + '-' + index,
+						type: option.type,
+					};
+				}
+				return {
+					className: itemClassName,
+					disabled: option.disabled,
+					icon: option.icon,
+					key: option.key,
+					label: option.title,
+					onSelect: () => editor.update(() => option.$onSelect()),
+					title: option.title,
+					type: option.type,
+				};
+			});
+
+			listContentRef.current = renderableItems.map((item) => item.key);
+			setRenderItems(renderableItems);
+			setIsOpen(true);
+		}
+
+		return editor.registerRootListener((rootElement) => {
+			if (rootElement !== null) {
+				rootElement.addEventListener('contextmenu', onContextMenu);
+				return () => rootElement.removeEventListener('contextmenu', onContextMenu);
+			}
+		});
+	}, [items, itemClassName, separatorClassName, editor]);
+
+	// Attach per-item refs + handlers via getItemProps, mirroring the React render.
+	// (Computed every render; `renderItems` is empty while closed, so this is a no-op
+	// until the menu opens.)
+	listItemsRef.current = [];
+	const itemsForRender = renderItems.map((item, index) => {
+		const onSelect = () => {
+			if (item.onSelect) {
+				item.onSelect();
+			}
+			setIsOpen(false);
+		};
+		return {
+			...item,
+			itemProps: getItemProps({
+				onClick: onSelect,
+				onMouseUp: onSelect,
+				ref: (node) => {
+					listItemsRef.current[index] = node;
+				},
+				tabIndex: activeIndex === index ? 0 : -1,
+			}),
+		};
+	});
+
+	@if (isOpen) {
+		<FloatingPortal>
+			<FloatingOverlay lockScroll={true}>
+				<FloatingFocusManager context={f.context} initialFocus={f.refs.floating}>
+					<ContextMenuList
+						className={className}
+						setFloating={f.refs.setFloating}
+						floatingStyles={f.floatingStyles}
+						floatingProps={getFloatingProps()}
+						items={itemsForRender}
+					/>
+				</FloatingFocusManager>
+			</FloatingOverlay>
+		</FloatingPortal>
+	}
+}

package/src/LexicalNodeEventPlugin.tsrx

@@ -0,0 +1,48 @@
+// Ported from @lexical/react/src/LexicalNodeEventPlugin.ts.
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { $findMatchingParent, $getNearestNodeFromDOMNode } from 'lexical';
+import { useEffect, useRef } from 'octane';
+
+const capturedEvents = new Set(['mouseenter', 'mouseleave']);
+
+export function NodeEventPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const nodeType = props.nodeType;
+	const eventType = props.eventType;
+	const eventListener = props.eventListener;
+
+	const listenerRef = useRef(eventListener);
+	listenerRef.current = eventListener;
+
+	useEffect(() => {
+		const isCaptured = capturedEvents.has(eventType);
+
+		const onEvent = (event) => {
+			editor.update(() => {
+				const nearestNode = $getNearestNodeFromDOMNode(event.target);
+				if (nearestNode !== null) {
+					const targetNode =
+						isCaptured
+							? nearestNode instanceof nodeType
+								? nearestNode
+								: null
+							: $findMatchingParent(nearestNode, (node) => node instanceof nodeType);
+					if (targetNode !== null) {
+						listenerRef.current(event, editor, targetNode.getKey());
+						return;
+					}
+				}
+			});
+		};
+
+		return editor.registerRootListener((rootElement) => {
+			if (rootElement) {
+				rootElement.addEventListener(eventType, onEvent, isCaptured);
+				return () => rootElement.removeEventListener(eventType, onEvent, isCaptured);
+			}
+		});
+		// We intentionally don't respect changes to eventType.
+	}, [editor, nodeType]);
+
+	return null;
+}

package/src/LexicalNodeMenuPlugin.tsrx

@@ -0,0 +1,84 @@
+// Ported from @lexical/react/src/LexicalNodeMenuPlugin.tsx — a floating menu
+// anchored to a specific node (the node-anchored counterpart of the typeahead).
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { LexicalMenu } from './shared/LexicalMenu.tsrx';
+import { useMenuAnchorRef } from './shared/useMenuAnchorRef';
+import { $getNodeByKey, COMMAND_PRIORITY_LOW } from 'lexical';
+import { startTransition, useCallback, useEffect, useState } from 'octane';
+
+export function LexicalNodeMenuPlugin(props) {
+	const options = props.options;
+	const nodeKey = props.nodeKey;
+	const onClose = props.onClose;
+	const onOpen = props.onOpen;
+	const onSelectOption = props.onSelectOption;
+	const menuRenderFn = props.menuRenderFn;
+	const anchorClassName = props.anchorClassName;
+	const commandPriority =
+		props.commandPriority != null ? props.commandPriority : COMMAND_PRIORITY_LOW;
+	const parent = props.parent;
+
+	const [editor] = useLexicalComposerContext();
+	const [resolution, setResolution] = useState(null);
+	const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName, parent);
+
+	const closeNodeMenu = useCallback(() => {
+		setResolution(null);
+		if (onClose != null && resolution !== null) {
+			onClose();
+		}
+	}, [onClose, resolution]);
+
+	const openNodeMenu = useCallback((res) => {
+		setResolution(res);
+		if (onOpen != null && resolution === null) {
+			onOpen(res);
+		}
+	}, [onOpen, resolution]);
+
+	const positionOrCloseMenu = useCallback(() => {
+		if (nodeKey) {
+			editor.update(() => {
+				const node = $getNodeByKey(nodeKey);
+				const domElement = editor.getElementByKey(nodeKey);
+				if (node != null && domElement != null) {
+					if (resolution == null) {
+						startTransition(
+							() => openNodeMenu({ getRect: () => domElement.getBoundingClientRect() }),
+						);
+					}
+				}
+			});
+		} else if (nodeKey == null && resolution != null) {
+			closeNodeMenu();
+		}
+	}, [closeNodeMenu, editor, nodeKey, openNodeMenu, resolution]);
+
+	useEffect(() => {
+		positionOrCloseMenu();
+	}, [positionOrCloseMenu, nodeKey]);
+
+	useEffect(() => {
+		if (nodeKey != null) {
+			return editor.registerUpdateListener(({ dirtyElements }) => {
+				if (dirtyElements.get(nodeKey)) {
+					positionOrCloseMenu();
+				}
+			});
+		}
+	}, [editor, positionOrCloseMenu, nodeKey]);
+
+	if (anchorElementRef.current === null || resolution === null || editor === null) {
+		return null;
+	}
+	return <LexicalMenu
+		close={closeNodeMenu}
+		resolution={resolution}
+		editor={editor}
+		anchorElementRef={anchorElementRef}
+		options={options}
+		menuRenderFn={menuRenderFn}
+		onSelectOption={onSelectOption}
+		commandPriority={commandPriority}
+	/>;
+}

package/src/LexicalOnChangePlugin.tsrx

@@ -0,0 +1,36 @@
+// Ported from @lexical/react/src/LexicalOnChangePlugin.ts.
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { HISTORY_MERGE_TAG } from 'lexical';
+import { useLayoutEffect } from 'octane';
+
+export function OnChangePlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const ignoreHistoryMergeTagChange =
+		props.ignoreHistoryMergeTagChange === undefined ? true : props.ignoreHistoryMergeTagChange;
+	const ignoreSelectionChange =
+		props.ignoreSelectionChange === undefined ? false : props.ignoreSelectionChange;
+	const onChange = props.onChange;
+
+	useLayoutEffect(() => {
+		if (onChange) {
+			return editor.registerUpdateListener(({
+				editorState,
+				dirtyElements,
+				dirtyLeaves,
+				prevEditorState,
+				tags,
+			}) => {
+				if (
+					ignoreSelectionChange && dirtyElements.size === 0 && dirtyLeaves.size === 0 ||
+						ignoreHistoryMergeTagChange && tags.has(HISTORY_MERGE_TAG) ||
+						prevEditorState.isEmpty()
+				) {
+					return;
+				}
+				onChange(editorState, editor, tags);
+			});
+		}
+	}, [editor, ignoreHistoryMergeTagChange, ignoreSelectionChange, onChange]);
+
+	return null;
+}