@octanejs/lexical 0.1.2

package/src/shared/rect.ts

@@ -0,0 +1,136 @@
+// Ported verbatim from @lexical/react/src/shared/rect.ts (framework-agnostic).
+import { isPoint, Point } from './point';
+
+type ContainsPointReturn = {
+	result: boolean;
+	reason: {
+		isOnTopSide: boolean;
+		isOnBottomSide: boolean;
+		isOnLeftSide: boolean;
+		isOnRightSide: boolean;
+	};
+};
+
+export class Rectangle {
+	private readonly _left: number;
+	private readonly _top: number;
+	private readonly _right: number;
+	private readonly _bottom: number;
+
+	constructor(left: number, top: number, right: number, bottom: number) {
+		const [physicTop, physicBottom] = top <= bottom ? [top, bottom] : [bottom, top];
+
+		const [physicLeft, physicRight] = left <= right ? [left, right] : [right, left];
+
+		this._top = physicTop;
+		this._right = physicRight;
+		this._left = physicLeft;
+		this._bottom = physicBottom;
+	}
+
+	get top(): number {
+		return this._top;
+	}
+
+	get right(): number {
+		return this._right;
+	}
+
+	get bottom(): number {
+		return this._bottom;
+	}
+
+	get left(): number {
+		return this._left;
+	}
+
+	get width(): number {
+		return Math.abs(this._left - this._right);
+	}
+
+	get height(): number {
+		return Math.abs(this._bottom - this._top);
+	}
+
+	public equals({ top, left, bottom, right }: Rectangle): boolean {
+		return (
+			top === this._top && bottom === this._bottom && left === this._left && right === this._right
+		);
+	}
+
+	public contains({ x, y }: Point): ContainsPointReturn;
+	public contains({ top, left, bottom, right }: Rectangle): boolean;
+	public contains(target: Point | Rectangle): boolean | ContainsPointReturn {
+		if (isPoint(target)) {
+			const { x, y } = target;
+
+			const isOnTopSide = y < this._top;
+			const isOnBottomSide = y > this._bottom;
+			const isOnLeftSide = x < this._left;
+			const isOnRightSide = x > this._right;
+
+			const result = !isOnTopSide && !isOnBottomSide && !isOnLeftSide && !isOnRightSide;
+
+			return {
+				reason: {
+					isOnBottomSide,
+					isOnLeftSide,
+					isOnRightSide,
+					isOnTopSide,
+				},
+				result,
+			};
+		} else {
+			const { top, left, bottom, right } = target;
+
+			return (
+				top >= this._top &&
+				top <= this._bottom &&
+				bottom >= this._top &&
+				bottom <= this._bottom &&
+				left >= this._left &&
+				left <= this._right &&
+				right >= this._left &&
+				right <= this._right
+			);
+		}
+	}
+
+	public intersectsWith(rect: Rectangle): boolean {
+		const { left: x1, top: y1, width: w1, height: h1 } = rect;
+		const { left: x2, top: y2, width: w2, height: h2 } = this;
+		const maxX = x1 + w1 >= x2 + w2 ? x1 + w1 : x2 + w2;
+		const maxY = y1 + h1 >= y2 + h2 ? y1 + h1 : y2 + h2;
+		const minX = x1 <= x2 ? x1 : x2;
+		const minY = y1 <= y2 ? y1 : y2;
+		return maxX - minX <= w1 + w2 && maxY - minY <= h1 + h2;
+	}
+
+	public generateNewRect({
+		left = this.left,
+		top = this.top,
+		right = this.right,
+		bottom = this.bottom,
+	}): Rectangle {
+		return new Rectangle(left, top, right, bottom);
+	}
+
+	static fromLTRB(left: number, top: number, right: number, bottom: number): Rectangle {
+		return new Rectangle(left, top, right, bottom);
+	}
+
+	static fromLWTH(left: number, width: number, top: number, height: number): Rectangle {
+		return new Rectangle(left, top, left + width, top + height);
+	}
+
+	static fromPoints(startPoint: Point, endPoint: Point): Rectangle {
+		const { y: top, x: left } = startPoint;
+		const { y: bottom, x: right } = endPoint;
+		return Rectangle.fromLTRB(left, top, right, bottom);
+	}
+
+	static fromDOM(dom: HTMLElement): Rectangle {
+		const { top, width, left, height } = dom.getBoundingClientRect();
+		return Rectangle.fromLWTH(left, width, top, height);
+	}
+}

package/src/shared/useCanShowPlaceholder.ts

@@ -0,0 +1,38 @@
+import type { LexicalEditor } from 'lexical';
+
+import { $canShowPlaceholderCurry } from '@lexical/text';
+import { mergeRegister } from 'lexical';
+import { useState, useLayoutEffect } from 'octane';
+
+import { subSlot } from './internal';
+
+// Ported from @lexical/react/src/shared/useCanShowPlaceholder.ts. Plain `.ts` hook:
+// the caller injects `slot`; each base hook gets its own sub-slot.
+
+function canShowPlaceholderFromCurrentEditorState(editor: LexicalEditor): boolean {
+	return editor.read('latest', $canShowPlaceholderCurry(editor.isComposing()));
+}
+
+export function useCanShowPlaceholder(editor: LexicalEditor, slot?: symbol): boolean {
+	const [canShowPlaceholder, setCanShowPlaceholder] = useState(
+		() => canShowPlaceholderFromCurrentEditorState(editor),
+		subSlot(slot, 'ucsp:state'),
+	);
+
+	useLayoutEffect(
+		() => {
+			function resetCanShowPlaceholder() {
+				setCanShowPlaceholder(canShowPlaceholderFromCurrentEditorState(editor));
+			}
+			resetCanShowPlaceholder();
+			return mergeRegister(
+				editor.registerUpdateListener(() => resetCanShowPlaceholder()),
+				editor.registerEditableListener(() => resetCanShowPlaceholder()),
+			);
+		},
+		[editor],
+		subSlot(slot, 'ucsp:le'),
+	);
+
+	return canShowPlaceholder;
+}

package/src/shared/useCharacterLimit.ts

@@ -0,0 +1,288 @@
+// Ported from @lexical/react/src/shared/useCharacterLimit.ts. The overflow-wrapping
+// logic ($wrapOverflowedNodes / $mergePrevious / findOffset) is framework-agnostic
+// and copied verbatim. Only the hook wrapper changes: `optional` is an OPTIONAL user
+// arg, so the trailing compiler-injected slot is found with splitSlot, and each of
+// the two useEffects gets a distinct sub-slot.
+import type { LexicalEditor, LexicalNode } from 'lexical';
+
+import invariant from '@lexical/internal/invariant';
+import { $createOverflowNode, $isOverflowNode, OverflowNode } from '@lexical/overflow';
+import { $rootTextContent } from '@lexical/text';
+import { $dfsWithSlots, $unwrapNode } from '@lexical/utils';
+import {
+	$findMatchingParent,
+	$getSelection,
+	$getSlotHost,
+	$isElementNode,
+	$isLeafNode,
+	$isRangeSelection,
+	$isTextNode,
+	$setSelection,
+	COMMAND_PRIORITY_LOW,
+	DELETE_CHARACTER_COMMAND,
+	HISTORY_MERGE_TAG,
+	mergeRegister,
+} from 'lexical';
+import { useEffect } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+
+type OptionalProps = {
+	remainingCharacters?: (characters: number) => void;
+	strlen?: (input: string) => number;
+};
+
+export function useCharacterLimit(...args: any[]): void {
+	const [user, slot] = splitSlot(args);
+	const editor = user[0] as LexicalEditor;
+	const maxCharacters = user[1] as number;
+	const optional = (user[2] as OptionalProps) ?? Object.freeze({});
+
+	const strlen = optional.strlen ?? ((input: string) => input.length);
+	const remainingCharacters =
+		optional.remainingCharacters ??
+		(() => {
+			return;
+		});
+
+	useEffect(
+		() => {
+			if (!editor.hasNodes([OverflowNode])) {
+				invariant(false, 'useCharacterLimit: OverflowNode not registered on editor');
+			}
+		},
+		[editor],
+		subSlot(slot, 'ucl:nodes'),
+	);
+
+	useEffect(
+		() => {
+			let text = editor.read('latest', $rootTextContent);
+			let lastComputedTextLength = 0;
+
+			return mergeRegister(
+				editor.registerTextContentListener((currentText: string) => {
+					text = currentText;
+				}),
+				editor.registerUpdateListener(({ dirtyLeaves, dirtyElements }) => {
+					const isComposing = editor.isComposing();
+					const hasContentChanges = dirtyLeaves.size > 0 || dirtyElements.size > 0;
+
+					if (isComposing || !hasContentChanges) {
+						return;
+					}
+
+					const textLength = strlen(text);
+					const textLengthAboveThreshold =
+						textLength > maxCharacters ||
+						(lastComputedTextLength !== null && lastComputedTextLength > maxCharacters);
+					const diff = maxCharacters - textLength;
+
+					remainingCharacters(diff);
+
+					if (lastComputedTextLength === null || textLengthAboveThreshold) {
+						const offset = findOffset(text, maxCharacters, strlen);
+						editor.update(
+							() => {
+								$wrapOverflowedNodes(offset);
+							},
+							{
+								tag: HISTORY_MERGE_TAG,
+							},
+						);
+					}
+
+					lastComputedTextLength = textLength;
+				}),
+				editor.registerCommand(
+					DELETE_CHARACTER_COMMAND,
+					(isBackward) => {
+						const selection = $getSelection();
+						if (!$isRangeSelection(selection)) {
+							return false;
+						}
+						const anchorNode = selection.anchor.getNode();
+						const overflow = anchorNode.getParent();
+						const overflowParent = overflow ? overflow.getParent() : null;
+						const parentNext = overflowParent ? overflowParent.getNextSibling() : null;
+						selection.deleteCharacter(isBackward);
+						if (overflowParent && overflowParent.isEmpty()) {
+							overflowParent.remove();
+						} else if ($isElementNode(parentNext) && parentNext.isEmpty()) {
+							parentNext.remove();
+						}
+						return true;
+					},
+					COMMAND_PRIORITY_LOW,
+				),
+			);
+		},
+		[editor, maxCharacters, remainingCharacters, strlen],
+		subSlot(slot, 'ucl:track'),
+	);
+}
+
+function findOffset(
+	text: string,
+	maxCharacters: number,
+	strlen: (input: string) => number,
+): number {
+	let offsetUtf16 = 0;
+	let offset = 0;
+
+	if (typeof Intl.Segmenter === 'function') {
+		const segmenter = new Intl.Segmenter();
+		const graphemes = segmenter.segment(text);
+
+		for (const { segment: grapheme } of graphemes) {
+			const nextOffset = offset + strlen(grapheme);
+
+			if (nextOffset > maxCharacters) {
+				break;
+			}
+
+			offset = nextOffset;
+			offsetUtf16 += grapheme.length;
+		}
+	} else {
+		const codepoints = Array.from(text);
+		const codepointsLength = codepoints.length;
+
+		for (let i = 0; i < codepointsLength; i++) {
+			const codepoint = codepoints[i];
+			const nextOffset = offset + strlen(codepoint);
+
+			if (nextOffset > maxCharacters) {
+				break;
+			}
+
+			offset = nextOffset;
+			offsetUtf16 += codepoint.length;
+		}
+	}
+
+	return offsetUtf16;
+}
+
+export function $wrapOverflowedNodes(offset: number): void {
+	const dfsNodes = $dfsWithSlots();
+	const dfsNodesLength = dfsNodes.length;
+	let accumulatedLength = 0;
+
+	for (let i = 0; i < dfsNodesLength; i += 1) {
+		const { node } = dfsNodes[i];
+
+		const isSlotValueLeaf = $isLeafNode(node) && $getSlotHost(node) !== null;
+		const needsOverflowParent =
+			$isLeafNode(node) && !isSlotValueLeaf && !$findMatchingParent(node, $isOverflowNode);
+
+		if ($isOverflowNode(node)) {
+			const previousLength = accumulatedLength;
+			const nextLength = accumulatedLength + node.getTextContentSize();
+
+			if (nextLength <= offset) {
+				const parent = node.getParent();
+				const previousSibling = node.getPreviousSibling();
+				const nextSibling = node.getNextSibling();
+				$unwrapNode(node);
+				const selection = $getSelection();
+
+				if (
+					$isRangeSelection(selection) &&
+					(!selection.anchor.getNode().isAttached() || !selection.focus.getNode().isAttached())
+				) {
+					if ($isTextNode(previousSibling)) {
+						previousSibling.select();
+					} else if ($isTextNode(nextSibling)) {
+						nextSibling.select();
+					} else if (parent !== null) {
+						parent.select();
+					}
+				}
+			} else if (previousLength < offset) {
+				const descendant = node.getFirstDescendant();
+				const descendantLength = descendant !== null ? descendant.getTextContentSize() : 0;
+				const previousPlusDescendantLength = previousLength + descendantLength;
+				const firstDescendantIsSimpleText = $isTextNode(descendant) && descendant.isSimpleText();
+				const firstDescendantDoesNotOverflow = previousPlusDescendantLength <= offset;
+
+				if (firstDescendantIsSimpleText || firstDescendantDoesNotOverflow) {
+					$unwrapNode(node);
+				}
+			}
+		} else if (isSlotValueLeaf) {
+			accumulatedLength += node.getTextContentSize();
+		} else if (needsOverflowParent) {
+			const previousAccumulatedLength = accumulatedLength;
+			accumulatedLength += node.getTextContentSize();
+
+			if (accumulatedLength > offset && !$isOverflowNode(node.getParent())) {
+				const previousSelection = $getSelection();
+				let overflowNode;
+
+				if (previousAccumulatedLength < offset && $isTextNode(node) && node.isSimpleText()) {
+					const [, overflowedText] = node.splitText(offset - previousAccumulatedLength);
+					overflowNode = $wrapNode(overflowedText);
+				} else {
+					overflowNode = $wrapNode(node);
+				}
+
+				if (previousSelection !== null) {
+					$setSelection(previousSelection);
+				}
+
+				$mergePrevious(overflowNode);
+			}
+		}
+	}
+}
+
+function $wrapNode(node: LexicalNode): OverflowNode {
+	const overflowNode = $createOverflowNode();
+	node.replace(overflowNode);
+	overflowNode.append(node);
+	return overflowNode;
+}
+
+export function $mergePrevious(overflowNode: OverflowNode): void {
+	const previousNode = overflowNode.getPreviousSibling();
+
+	if (!$isOverflowNode(previousNode)) {
+		return;
+	}
+
+	const firstChild = overflowNode.getFirstChild();
+	const previousNodeChildren = previousNode.getChildren();
+	const previousNodeChildrenLength = previousNodeChildren.length;
+
+	if (firstChild === null) {
+		overflowNode.append(...previousNodeChildren);
+	} else {
+		for (let i = 0; i < previousNodeChildrenLength; i++) {
+			firstChild.insertBefore(previousNodeChildren[i]);
+		}
+	}
+
+	const selection = $getSelection();
+
+	if ($isRangeSelection(selection)) {
+		const anchor = selection.anchor;
+		const anchorNode = anchor.getNode();
+		const focus = selection.focus;
+		const focusNode = anchor.getNode();
+
+		if (anchorNode.is(previousNode)) {
+			anchor.set(overflowNode.getKey(), anchor.offset, 'element');
+		} else if (anchorNode.is(overflowNode)) {
+			anchor.set(overflowNode.getKey(), previousNodeChildrenLength + anchor.offset, 'element');
+		}
+
+		if (focusNode.is(previousNode)) {
+			focus.set(overflowNode.getKey(), focus.offset, 'element');
+		} else if (focusNode.is(overflowNode)) {
+			focus.set(overflowNode.getKey(), previousNodeChildrenLength + focus.offset, 'element');
+		}
+	}
+
+	previousNode.remove();
+}

package/src/shared/useDynamicPositioning.ts

@@ -0,0 +1,72 @@
+import type { MenuResolution } from './menuShared';
+
+import { getScrollParent } from '@lexical/utils';
+import { getDOMShadowRoots } from 'lexical';
+import { useEffect } from 'octane';
+
+import { useLexicalComposerContext } from '../LexicalComposerContext';
+import { isTriggerVisibleInNearestScrollContainer } from './menuShared';
+
+// Ported from shared/LexicalMenu.tsx — repositions an open menu on scroll / resize.
+// A single base hook (useEffect), so the caller's slot is forwarded directly.
+export function useDynamicPositioning(
+	resolution: MenuResolution | null,
+	targetElement: HTMLElement | null,
+	onReposition: () => void,
+	onVisibilityChange?: (isInView: boolean) => void,
+	slot?: symbol,
+) {
+	const [editor] = useLexicalComposerContext();
+	useEffect(
+		() => {
+			if (targetElement != null && resolution != null) {
+				const rootElement = editor.getRootElement();
+				const rootScrollParent =
+					rootElement != null ? getScrollParent(rootElement, false) : document.body;
+				let ticking = false;
+				let previousIsInView = isTriggerVisibleInNearestScrollContainer(
+					targetElement,
+					rootScrollParent,
+				);
+				const handleScroll = function () {
+					if (!ticking) {
+						window.requestAnimationFrame(function () {
+							onReposition();
+							ticking = false;
+						});
+						ticking = true;
+					}
+					const isInView = isTriggerVisibleInNearestScrollContainer(
+						targetElement,
+						rootScrollParent,
+					);
+					if (isInView !== previousIsInView) {
+						previousIsInView = isInView;
+						if (onVisibilityChange != null) {
+							onVisibilityChange(isInView);
+						}
+					}
+				};
+				const resizeObserver = new ResizeObserver(onReposition);
+				window.addEventListener('resize', onReposition);
+				document.addEventListener('scroll', handleScroll, { capture: true, passive: true });
+				const shadowRootSource = rootElement ?? targetElement;
+				const enclosingShadowRoots = getDOMShadowRoots(shadowRootSource);
+				for (const root of enclosingShadowRoots) {
+					root.addEventListener('scroll', handleScroll, { capture: true, passive: true });
+				}
+				resizeObserver.observe(targetElement);
+				return () => {
+					resizeObserver.unobserve(targetElement);
+					window.removeEventListener('resize', onReposition);
+					document.removeEventListener('scroll', handleScroll, true);
+					for (const root of enclosingShadowRoots) {
+						root.removeEventListener('scroll', handleScroll, true);
+					}
+				};
+			}
+		},
+		[targetElement, editor, onVisibilityChange, onReposition, resolution],
+		slot,
+	);
+}

package/src/shared/useMenuAnchorRef.ts

@@ -0,0 +1,131 @@
+import type { MenuRef, MenuResolution } from './menuShared';
+
+import { CAN_USE_DOM } from 'lexical';
+import { useCallback, useEffect, useRef } from 'octane';
+
+import { useLexicalComposerContext } from '../LexicalComposerContext';
+import { resolveMenuParent, setContainerDivAttributes } from './menuShared';
+import { useDynamicPositioning } from './useDynamicPositioning';
+import { splitSlot, subSlot } from './internal';
+
+// Ported from shared/LexicalMenu.tsx. Composes several base hooks + a nested hook
+// (useDynamicPositioning); each gets a distinct sub-slot. `className`/`parent`/
+// `shouldIncludePageYOffset` are optional, so the trailing slot is found via
+// splitSlot (positional resolution would mistake it for an optional arg).
+export function useMenuAnchorRef(...args: any[]): MenuRef {
+	const [user, slot] = splitSlot(args);
+	const resolution = user[0] as MenuResolution | null;
+	const setResolution = user[1] as (r: MenuResolution | null) => void;
+	const className = user[2] as string | undefined;
+	const parent = user[3] as HTMLElement | undefined;
+	const shouldIncludePageYOffset = user[4] !== undefined ? (user[4] as boolean) : true;
+
+	const [editor] = useLexicalComposerContext();
+	const resolvedParent = parent ?? resolveMenuParent(editor);
+	const initialAnchorElement = CAN_USE_DOM ? document.createElement('div') : null;
+	const anchorElementRef = useRef<HTMLElement | null>(
+		initialAnchorElement,
+		subSlot(slot, 'uma:ref'),
+	);
+
+	const positionMenu = useCallback(
+		() => {
+			if (anchorElementRef.current === null || resolvedParent === undefined) {
+				return;
+			}
+			anchorElementRef.current.style.top = anchorElementRef.current.style.bottom;
+			const rootElement = editor.getRootElement();
+			const containerDiv = anchorElementRef.current;
+			// octane portals leave a `<!--portal-->` marker as firstChild, so reach for
+			// the first ELEMENT child (the rendered menu) to measure/position.
+			const menuEle = containerDiv.firstElementChild as HTMLElement;
+			if (rootElement !== null && resolution !== null) {
+				const { left, top, width, height } = resolution.getRect();
+				const anchorHeight = anchorElementRef.current.offsetHeight;
+				containerDiv.style.top = `${
+					top + anchorHeight + 3 + (shouldIncludePageYOffset ? window.pageYOffset : 0)
+				}px`;
+				containerDiv.style.left = `${left + window.pageXOffset}px`;
+				containerDiv.style.height = `${height}px`;
+				containerDiv.style.width = `${width}px`;
+				if (menuEle !== null) {
+					menuEle.style.top = `${top}`;
+					const menuRect = menuEle.getBoundingClientRect();
+					const menuHeight = menuRect.height;
+					const menuWidth = menuRect.width;
+					const rootElementRect = rootElement.getBoundingClientRect();
+					if (left + menuWidth > rootElementRect.right) {
+						containerDiv.style.left = `${rootElementRect.right - menuWidth + window.pageXOffset}px`;
+					}
+					if (
+						(top + menuHeight > window.innerHeight || top + menuHeight > rootElementRect.bottom) &&
+						top - rootElementRect.top > menuHeight + height
+					) {
+						containerDiv.style.top = `${
+							top - menuHeight - height + (shouldIncludePageYOffset ? window.pageYOffset : 0)
+						}px`;
+					}
+				}
+				if (!containerDiv.isConnected) {
+					setContainerDivAttributes(containerDiv, className);
+					resolvedParent.append(containerDiv);
+				}
+				containerDiv.setAttribute('id', 'typeahead-menu');
+				rootElement.setAttribute('aria-controls', 'typeahead-menu');
+			}
+		},
+		[editor, resolution, shouldIncludePageYOffset, className, resolvedParent],
+		subSlot(slot, 'uma:pos'),
+	);
+
+	useEffect(
+		() => {
+			const rootElement = editor.getRootElement();
+			if (resolution !== null) {
+				positionMenu();
+			}
+			return () => {
+				if (rootElement !== null) {
+					rootElement.removeAttribute('aria-controls');
+				}
+				const containerDiv = anchorElementRef.current;
+				if (containerDiv !== null && containerDiv.isConnected) {
+					containerDiv.remove();
+					containerDiv.removeAttribute('id');
+				}
+			};
+		},
+		[editor, positionMenu, resolution],
+		subSlot(slot, 'uma:eff'),
+	);
+
+	const onVisibilityChange = useCallback(
+		(isInView: boolean) => {
+			if (resolution !== null) {
+				if (!isInView) {
+					setResolution(null);
+				}
+			}
+		},
+		[resolution, setResolution],
+		subSlot(slot, 'uma:vis'),
+	);
+
+	useDynamicPositioning(
+		resolution,
+		anchorElementRef.current,
+		positionMenu,
+		onVisibilityChange,
+		subSlot(slot, 'uma:dyn'),
+	);
+
+	// Append the anchor container immediately (first render only).
+	if (initialAnchorElement != null && initialAnchorElement === anchorElementRef.current) {
+		setContainerDivAttributes(initialAnchorElement, className);
+		if (resolvedParent != null) {
+			resolvedParent.append(initialAnchorElement);
+		}
+	}
+
+	return anchorElementRef;
+}

package/src/shared/usePlainTextSetup.ts

@@ -0,0 +1,15 @@
+import type { LexicalEditor } from 'lexical';
+
+import { registerDragonSupport } from '@lexical/dragon';
+import { registerPlainText } from '@lexical/plain-text';
+import { mergeRegister } from 'lexical';
+import { useLayoutEffect } from 'octane';
+
+// Ported from @lexical/react/src/shared/usePlainTextSetup.ts.
+export function usePlainTextSetup(editor: LexicalEditor, slot?: symbol): void {
+	useLayoutEffect(
+		() => mergeRegister(registerPlainText(editor), registerDragonSupport(editor)),
+		[editor],
+		slot,
+	);
+}

package/src/shared/useRichTextSetup.ts

@@ -0,0 +1,16 @@
+import type { LexicalEditor } from 'lexical';
+
+import { registerDragonSupport } from '@lexical/dragon';
+import { registerRichText } from '@lexical/rich-text';
+import { mergeRegister } from 'lexical';
+import { useLayoutEffect } from 'octane';
+
+// Ported from @lexical/react/src/shared/useRichTextSetup.ts. Composes one base hook
+// (useLayoutEffect), so the caller's slot is forwarded directly.
+export function useRichTextSetup(editor: LexicalEditor, slot?: symbol): void {
+	useLayoutEffect(
+		() => mergeRegister(registerRichText(editor), registerDragonSupport(editor)),
+		[editor],
+		slot,
+	);
+}

package/src/tsrx-modules.d.ts

@@ -0,0 +1,4 @@
+// Ambient declaration so the `.ts` barrel + hooks can import this package's `.tsrx`
+// components/nodes. tsgo doesn't understand `.tsrx` (the octane compiler does), so a
+// single ambient module declares them all — no per-component `.d.ts` sidecar.
+declare module '*.tsrx';