@octanejs/lexical 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/lexical",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -105,19 +105,19 @@
     "@lexical/yjs": "0.46.0",
     "lexical": "0.46.0",
     "yjs": "^13.6.0",
-    "@octanejs/floating-ui": "0.1.9"
+    "@octanejs/floating-ui": "0.1.10"
   },
   "peerDependencies": {
-    "octane": "0.1.10"
+    "octane": "0.1.11"
   },
   "devDependencies": {
     "@lexical/react": "0.46.0",
-    "@tsrx/react": "^0.2.37",
+    "@tsrx/react": "^0.2.44",
     "esbuild": "^0.28.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "vitest": "^4.1.9",
-    "octane": "0.1.10"
+    "octane": "0.1.11"
   },
   "scripts": {
     "test": "vitest run"

package/src/LexicalAutoEmbedPlugin.tsrx

@@ -3,8 +3,12 @@
 // node menu offering to replace the link with an embed node. Built on the ported
 // LexicalNodeMenuPlugin. Typed surface + AutoEmbedOption live in autoEmbedShared.ts.
 import { $isLinkNode, AutoLinkNode, LinkNode } from '@lexical/link';
+import type { AutoEmbedOption, EmbedConfig } from './autoEmbedShared';
+import { INSERT_EMBED_COMMAND } from './autoEmbedShared';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { LexicalNodeMenuPlugin } from './LexicalNodeMenuPlugin.tsrx';
+import type { MenuRenderFn } from './shared/menuShared';
+import type { CommandListenerPriority, LexicalNode, NodeKey, NodeMutation } from 'lexical';
 import {
 	$getNodeByKey,
 	$getSelection,
@@ -17,7 +21,15 @@ import { useCallback, useEffect, useMemo, useState } from 'octane';
 
 export { URL_MATCHER, INSERT_EMBED_COMMAND, AutoEmbedOption } from './autoEmbedShared';
 
-export function LexicalAutoEmbedPlugin(props) {
+type LexicalAutoEmbedPluginProps<TEmbedConfig extends EmbedConfig> = {
+	embedConfigs: TEmbedConfig[];
+	onOpenEmbedModalForConfig?: (embedConfig: TEmbedConfig) => void;
+	getMenuOptions: (activeEmbedConfig: TEmbedConfig, embedFn: () => void, dismissFn: () => void) => AutoEmbedOption[];
+	menuRenderFn?: MenuRenderFn<AutoEmbedOption>;
+	menuCommandPriority?: CommandListenerPriority;
+};
+
+export function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>(props: LexicalAutoEmbedPluginProps<TEmbedConfig>) {
 	const embedConfigs = props.embedConfigs;
 	const onOpenEmbedModalForConfig = props.onOpenEmbedModalForConfig;
 	const getMenuOptions = props.getMenuOptions;
@@ -27,15 +39,15 @@ export function LexicalAutoEmbedPlugin(props) {
 
 	const [editor] = useLexicalComposerContext();
 
-	const [nodeKey, setNodeKey] = useState(null);
-	const [activeEmbedConfig, setActiveEmbedConfig] = useState(null);
+	const [nodeKey, setNodeKey] = useState<NodeKey | null>(null);
+	const [activeEmbedConfig, setActiveEmbedConfig] = useState<TEmbedConfig | null>(null);
 
 	const reset = useCallback(() => {
 		setNodeKey(null);
 		setActiveEmbedConfig(null);
 	}, []);
 
-	const checkIfLinkNodeIsEmbeddable = useCallback(async (key) => {
+	const checkIfLinkNodeIsEmbeddable = useCallback(async (key: NodeKey) => {
 		const url = editor.read('latest', function () {
 			const linkNode = $getNodeByKey(key);
 			if ($isLinkNode(linkNode)) {
@@ -55,7 +67,16 @@ export function LexicalAutoEmbedPlugin(props) {
 	}, [editor, embedConfigs]);
 
 	useEffect(() => {
-		const listener = (nodeMutations, { updateTags, dirtyLeaves }) => {
+		const listener = (
+			nodeMutations: Map<NodeKey, NodeMutation>,
+			{
+				updateTags,
+				dirtyLeaves,
+			}: {
+				updateTags: Set<string>;
+				dirtyLeaves: Set<string>;
+			},
+		) => {
 			for (const [key, mutation] of nodeMutations) {
 				if (mutation === 'created' && updateTags.has(PASTE_TAG) && dirtyLeaves.size <= 3) {
 					checkIfLinkNodeIsEmbeddable(key);
@@ -123,7 +144,11 @@ export function LexicalAutoEmbedPlugin(props) {
 			: [];
 	}, [activeEmbedConfig, embedLinkViaActiveEmbedConfig, getMenuOptions, nodeKey, reset]);
 
-	const onSelectOption = useCallback((selectedOption, targetNode, closeMenu) => {
+	const onSelectOption = useCallback((
+		selectedOption: AutoEmbedOption,
+		targetNode: LexicalNode | null,
+		closeMenu: () => void,
+	) => {
 		editor.update(() => {
 			selectedOption.onSelect(targetNode);
 			closeMenu();

package/src/LexicalAutoFocusPlugin.tsrx

@@ -3,7 +3,11 @@ import { useLexicalComposerContext } from './LexicalComposerContext';
 import { getActiveElement } from 'lexical';
 import { useEffect } from 'octane';
 
-export function AutoFocusPlugin(props) {
+type Props = {
+	defaultSelection?: 'rootStart' | 'rootEnd';
+};
+
+export function AutoFocusPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const defaultSelection = props.defaultSelection;
 

package/src/LexicalAutoLinkPlugin.tsrx

@@ -1,12 +1,20 @@
 // Ported from @lexical/react/src/LexicalAutoLinkPlugin.ts (useAutoLink inlined).
 import invariant from '@lexical/internal/invariant';
 import { AutoLinkNode, registerAutoLink } from '@lexical/link';
+import type { ChangeHandler, LinkMatcher } from '@lexical/link';
+import type { ElementNode } from 'lexical';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useEffect } from 'octane';
 
 export { createLinkMatcherWithRegExp } from '@lexical/link';
 
-export function AutoLinkPlugin(props) {
+type Props = {
+	matchers: LinkMatcher[];
+	onChange?: ChangeHandler;
+	excludeParents?: ((parent: ElementNode) => boolean)[];
+};
+
+export function AutoLinkPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const matchers = props.matchers;
 	const onChange = props.onChange;

package/src/LexicalBlockWithAlignableContents.tsrx

@@ -17,9 +17,21 @@ import {
 	getComposedEventTarget,
 	mergeRegister,
 } from 'lexical';
+import type { ElementFormatType, NodeKey } from 'lexical';
 import { useEffect, useRef } from 'octane';
+import type { OctaneNode } from 'octane';
 
-export function BlockWithAlignableContents(props) {
+type Props = Readonly<{
+		children: OctaneNode;
+		format?: ElementFormatType | null;
+		nodeKey: NodeKey;
+		className: Readonly<{
+			base: string;
+			focus: string;
+		}>;
+	}>;
+
+export function BlockWithAlignableContents(props: Props) {
 	const nodeKey = props.nodeKey;
 	const format = props.format;
 	const className = props.className;

package/src/LexicalCharacterLimitPlugin.tsrx

@@ -4,12 +4,13 @@
 // than called directly.
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useCharacterLimit } from './shared/useCharacterLimit';
+import type { OctaneNode } from 'octane';
 import { createElement, useMemo, useState } from 'octane';
 
 const CHARACTER_LIMIT = 5;
-let textEncoderInstance = null;
+let textEncoderInstance: TextEncoder | null = null;
 
-function textEncoder() {
+function textEncoder(): TextEncoder | null {
 	if (window.TextEncoder === undefined) {
 		return null;
 	}
@@ -19,7 +20,7 @@ function textEncoder() {
 	return textEncoderInstance;
 }
 
-function utf8Length(text) {
+function utf8Length(text: string) {
 	const currentTextEncoder = textEncoder();
 	if (currentTextEncoder === null) {
 		const m = encodeURIComponent(text).match(/%[89ABab]/g);
@@ -28,15 +29,25 @@ function utf8Length(text) {
 	return currentTextEncoder.encode(text).length;
 }
 
-function DefaultRenderer(props) @{
+type RendererProps = {
+	remainingCharacters: number;
+};
+
+function DefaultRenderer(props: RendererProps) @{
 	<span
 		class={'characters-limit ' + (props.remainingCharacters < 0 ? 'characters-limit-exceeded' : '')}
 	>
-		{props.remainingCharacters as string}
+		{props.remainingCharacters as unknown as string}
 	</span>
 }
 
-export function CharacterLimitPlugin(props) {
+type Props = {
+	charset?: 'UTF-8' | 'UTF-16';
+	maxLength?: number;
+	renderer?: (props: RendererProps) => OctaneNode;
+};
+
+export function CharacterLimitPlugin(props: Props) {
 	const charset = props.charset ?? 'UTF-16';
 	const maxLength = props.maxLength ?? CHARACTER_LIMIT;
 	const renderer = props.renderer ?? DefaultRenderer;
@@ -47,7 +58,7 @@ export function CharacterLimitPlugin(props) {
 	const characterLimitProps = useMemo(
 		() => ({
 			remainingCharacters: setRemainingCharacters,
-			strlen: (text) => {
+			strlen: (text: string) => {
 				if (charset === 'UTF-8') {
 					return utf8Length(text);
 				} else if (charset === 'UTF-16') {

package/src/LexicalCheckListPlugin.tsrx

@@ -3,7 +3,11 @@ import { registerCheckList } from '@lexical/list';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useEffect } from 'octane';
 
-export function CheckListPlugin(props) {
+type Props = {
+	disableTakeFocusOnClick?: boolean;
+};
+
+export function CheckListPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const disableTakeFocusOnClick =
 		props.disableTakeFocusOnClick === undefined ? false : props.disableTakeFocusOnClick;

package/src/LexicalClearEditorPlugin.tsrx

@@ -4,7 +4,11 @@ import { useLexicalComposerContext } from './LexicalComposerContext';
 import { registerClearEditor } from '@lexical/extension';
 import { useLayoutEffect } from 'octane';
 
-export function ClearEditorPlugin(props) {
+type Props = Readonly<{
+		onClear?: () => void;
+	}>;
+
+export function ClearEditorPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const onClear = props.onClear;
 	useLayoutEffect(() => registerClearEditor(editor, onClear), [editor, onClear]);

package/src/LexicalClickableLinkPlugin.tsrx

@@ -4,7 +4,12 @@ import { registerClickableLink } from '@lexical/link';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useEffect } from 'octane';
 
-export function ClickableLinkPlugin(props) {
+type Props = {
+	newTab?: boolean;
+	disabled?: boolean;
+};
+
+export function ClickableLinkPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const newTab = props.newTab !== false;
 	const disabled = props.disabled === true;

package/src/LexicalComposer.tsrx

@@ -2,6 +2,9 @@
 // initialConfig once (useMemo), seeds its initial state, provides it via context,
 // and renders children. `useLayoutEffect` applies the editable flag on mount.
 import { createLexicalComposerContext, LexicalComposerContext } from './LexicalComposerContext';
+import type { LexicalComposerContextWithEditor } from './LexicalComposerContext';
+import type { InitialConfigType, InitialEditorStateType } from './types';
+import type { LexicalEditor } from 'lexical';
 import {
 	$createParagraphNode,
 	$getRoot,
@@ -11,11 +14,12 @@ import {
 	getActiveElement,
 	HISTORY_MERGE_TAG,
 } from 'lexical';
+import type { OctaneNode } from 'octane';
 import { useMemo, useLayoutEffect } from 'octane';
 
 const HISTORY_MERGE_OPTIONS = { tag: HISTORY_MERGE_TAG };
 
-function initializeEditor(editor, initialEditorState) {
+function initializeEditor(editor: LexicalEditor, initialEditorState?: InitialEditorStateType) {
 	if (initialEditorState === null) {
 		return;
 	} else if (initialEditorState === undefined) {
@@ -58,10 +62,15 @@ function initializeEditor(editor, initialEditorState) {
 	}
 }
 
-export function LexicalComposer(props) @{
+type Props = {
+	initialConfig: InitialConfigType;
+	children?: OctaneNode;
+};
+
+export function LexicalComposer(props: Props) @{
 	const initialConfig = props.initialConfig;
 
-	const composerContext = useMemo(() => {
+	const composerContext = useMemo<LexicalComposerContextWithEditor>(() => {
 		const {
 			theme,
 			namespace,
@@ -80,7 +89,7 @@ export function LexicalComposer(props) @{
 			namespace,
 			nodes,
 			onError: (error) => onError(error, editor),
-			...(onWarn ? { onWarn: (error) => onWarn(error, editor) } : {}),
+			...(onWarn ? { onWarn: (error: Error) => onWarn(error, editor) } : {}),
 			theme,
 		});
 		initializeEditor(editor, initialEditorState);

package/src/LexicalContentEditable.tsrx

@@ -2,15 +2,37 @@
 // context and renders the editable element; an optional `placeholder` is shown
 // while the editor can show one. React's `forwardRef` becomes a plain `ref` prop
 // (spread through to the element).
+import type { LexicalEditor } from 'lexical';
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { useCanShowPlaceholder } from './shared/useCanShowPlaceholder';
 import { ContentEditableElement } from './shared/LexicalContentEditableElement.tsrx';
+import type { ContentEditableElementProps } from './shared/LexicalContentEditableElement.tsrx';
 import { useLayoutEffect, useState } from 'octane';
+import type { OctaneNode } from 'octane';
 
 // Re-export the lower-level element (matches @lexical/react/LexicalContentEditable).
 export { ContentEditableElement } from './shared/LexicalContentEditableElement.tsrx';
 
-function Placeholder(props) {
+/**
+ * Props for the {@link ContentEditable} component. These are the
+ * {@link ContentEditableElementProps} (minus `editor`, which is read from
+ * context) plus an optional `placeholder`; when a `placeholder` is provided an
+ * `aria-placeholder` string is also required for accessibility.
+ */
+export type ContentEditableProps =
+	Omit<ContentEditableElementProps, 'editor'> & (| {
+			'aria-placeholder'?: void;
+			placeholder?: null;
+	  }
+	| {
+			'aria-placeholder': string;
+			placeholder: ((isEditable: boolean) => OctaneNode) | OctaneNode;
+	  });
+
+function Placeholder(props: {
+	editor: LexicalEditor;
+	content: ContentEditableProps['placeholder'];
+}) {
 	const editor = props.editor;
 	const showPlaceholder = useCanShowPlaceholder(editor);
 	const [isEditable, setEditable] = useState(editor.isEditable());
@@ -27,7 +49,7 @@ function Placeholder(props) {
 	}
 
 	const content = props.content;
-	let placeholder = null;
+	let placeholder: OctaneNode = null;
 	if (typeof content === 'function') {
 		placeholder = content(isEditable);
 	} else if (content !== null) {
@@ -39,7 +61,7 @@ function Placeholder(props) {
 	return <div aria-hidden="true">{placeholder}</div>;
 }
 
-export function ContentEditable(props) @{
+export function ContentEditable(props: ContentEditableProps) @{
 	const [editor] = useLexicalComposerContext();
 	<>
 		<ContentEditableElement editor={editor} {...props} />

package/src/LexicalDraggableBlockPlugin.tsrx

@@ -25,7 +25,9 @@ import {
 	isHTMLElement,
 	mergeRegister,
 } from 'lexical';
+import type { LexicalEditor } from 'lexical';
 import { createPortal, useCallback, useEffect, useRef, useState } from 'octane';
+import type { OctaneNode } from 'octane';
 
 import { Point } from './shared/point';
 import { Rectangle } from './shared/rect';
@@ -41,7 +43,7 @@ const Indeterminate = 0;
 
 let prevIndex = Infinity;
 
-function getCurrentIndex(keysLength) {
+function getCurrentIndex(keysLength: number): number {
 	if (keysLength === 0) {
 		return Infinity;
 	}
@@ -51,14 +53,16 @@ function getCurrentIndex(keysLength) {
 	return Math.floor(keysLength / 2);
 }
 
-function getTopLevelNodeKeys(editor) {
+function getTopLevelNodeKeys(editor: LexicalEditor): string[] {
 	return editor.read('latest', () => $getRoot().getChildrenKeys());
 }
 
-function getCollapsedMargins(elem) {
-	const getMargin = (element, margin) => element
-		? parseFloat(window.getComputedStyle(element)[margin])
-		: 0;
+function getCollapsedMargins(elem: HTMLElement): {
+	marginTop: number;
+	marginBottom: number;
+} {
+	const getMargin = (element: Element | null, margin: 'marginTop' | 'marginBottom'): number =>
+		element ? parseFloat(window.getComputedStyle(element)[margin]) : 0;
 
 	const { marginTop, marginBottom } = window.getComputedStyle(elem);
 	const prevElemSiblingMarginBottom = getMargin(elem.previousElementSibling, 'marginBottom');
@@ -69,11 +73,16 @@ function getCollapsedMargins(elem) {
 	return { marginBottom: collapsedBottomMargin, marginTop: collapsedTopMargin };
 }
 
-function getBlockElement(anchorElem, editor, event, useEdgeAsDefault = false) {
+function getBlockElement(
+	anchorElem: HTMLElement,
+	editor: LexicalEditor,
+	event: MouseEvent,
+	useEdgeAsDefault = false,
+): HTMLElement | null {
 	const anchorElementRect = anchorElem.getBoundingClientRect();
 	const topLevelNodeKeys = getTopLevelNodeKeys(editor);
 
-	let blockElem = null;
+	let blockElem: HTMLElement | null = null;
 
 	editor.read('latest', () => {
 		if (useEdgeAsDefault) {
@@ -147,7 +156,12 @@ function getBlockElement(anchorElem, editor, event, useEdgeAsDefault = false) {
 	return blockElem;
 }
 
-function setMenuPosition(targetElem, floatingElem, anchorElem, zoomLevel) {
+function setMenuPosition(
+	targetElem: HTMLElement | null,
+	floatingElem: HTMLElement,
+	anchorElem: HTMLElement,
+	zoomLevel: number,
+) {
 	if (!targetElem) {
 		floatingElem.style.display = 'none';
 		return;
@@ -176,7 +190,7 @@ function setMenuPosition(targetElem, floatingElem, anchorElem, zoomLevel) {
 	floatingElem.style.transform = `translate(${left}px, ${top}px)`;
 }
 
-function setDragImage(dataTransfer, draggableBlockElem) {
+function setDragImage(dataTransfer: DataTransfer, draggableBlockElem: HTMLElement) {
 	const { transform } = draggableBlockElem.style;
 
 	draggableBlockElem.style.transform = 'translateZ(0)';
@@ -187,7 +201,12 @@ function setDragImage(dataTransfer, draggableBlockElem) {
 	});
 }
 
-function setTargetLine(targetLineElem, targetBlockElem, mouseY, anchorElem) {
+function setTargetLine(
+	targetLineElem: HTMLElement,
+	targetBlockElem: HTMLElement,
+	mouseY: number,
+	anchorElem: HTMLElement,
+) {
 	const { top: targetBlockElemTop, height: targetBlockElemHeight } =
 		targetBlockElem.getBoundingClientRect();
 	const { top: anchorTop, width: anchorWidth } = anchorElem.getBoundingClientRect();
@@ -207,14 +226,22 @@ function setTargetLine(targetLineElem, targetBlockElem, mouseY, anchorElem) {
 	targetLineElem.style.opacity = '.4';
 }
 
-function hideTargetLine(targetLineElem) {
+function hideTargetLine(targetLineElem: HTMLElement | null) {
 	if (targetLineElem) {
 		targetLineElem.style.opacity = '0';
 		targetLineElem.style.transform = 'translate(-10000px, -10000px)';
 	}
 }
 
-function DraggableContainer(props) @{
+type DraggableContainerProps = {
+	onDragStart: (event: DragEvent) => void;
+	onDragEnd: () => void;
+	isEditable: boolean;
+	menuComponent: OctaneNode;
+	targetLineComponent: OctaneNode;
+};
+
+function DraggableContainer(props: DraggableContainerProps) @{
 	<>
 		<div draggable={true} onDragStart={props.onDragStart} onDragEnd={props.onDragEnd}>
 			{props.isEditable ? props.menuComponent : null}
@@ -224,22 +251,22 @@ function DraggableContainer(props) @{
 }
 
 function useDraggableBlockMenu(
-	editor,
-	anchorElem,
-	menuRef,
-	targetLineRef,
-	isEditable,
-	menuComponent,
-	targetLineComponent,
-	isOnMenu,
-	onElementChanged,
-) {
+	editor: LexicalEditor,
+	anchorElem: HTMLElement,
+	menuRef: { current: HTMLElement | null },
+	targetLineRef: { current: HTMLElement | null },
+	isEditable: boolean,
+	menuComponent: OctaneNode,
+	targetLineComponent: OctaneNode,
+	isOnMenu: (element: HTMLElement) => boolean,
+	onElementChanged: ((element: HTMLElement | null) => void) | undefined,
+): OctaneNode {
 	const scrollerElem = getParentElement(anchorElem);
 
 	const isDraggingBlockRef = useRef(false);
-	const [draggableBlockElem, setDraggableBlockElemState] = useState(null);
+	const [draggableBlockElem, setDraggableBlockElemState] = useState<HTMLElement | null>(null);
 
-	const setDraggableBlockElem = useCallback((elem) => {
+	const setDraggableBlockElem = useCallback((elem: HTMLElement | null) => {
 		setDraggableBlockElemState(elem);
 		if (onElementChanged) {
 			onElementChanged(elem);
@@ -247,7 +274,7 @@ function useDraggableBlockMenu(
 	}, [onElementChanged]);
 
 	useEffect(() => {
-		function onMouseMove(event) {
+		function onMouseMove(event: MouseEvent) {
 			const target = getComposedEventTarget(event);
 			if (!isHTMLElement(target)) {
 				setDraggableBlockElem(null);
@@ -287,7 +314,7 @@ function useDraggableBlockMenu(
 	}, [editor, anchorElem, draggableBlockElem, menuRef]);
 
 	useEffect(() => {
-		function onDragover(event) {
+		function onDragover(event: DragEvent): boolean {
 			if (!isDraggingBlockRef.current) {
 				return false;
 			}
@@ -315,7 +342,7 @@ function useDraggableBlockMenu(
 			return true;
 		}
 
-		function $onDrop(event) {
+		function $onDrop(event: DragEvent): boolean {
 			if (!isDraggingBlockRef.current) {
 				return false;
 			}
@@ -390,7 +417,7 @@ function useDraggableBlockMenu(
 
 		return mergeRegister(
 			editor.registerRootListener((rootElement) => {
-				function onBlur(event) {
+				function onBlur(event: FocusEvent) {
 					const relatedTarget = event.relatedTarget;
 					if (isHTMLElement(relatedTarget) && isOnMenu(relatedTarget)) {
 						if (rootElement) {
@@ -433,7 +460,7 @@ function useDraggableBlockMenu(
 		);
 	}, [editor, isEditable, isOnMenu]);
 
-	function onDragStart(event) {
+	function onDragStart(event: DragEvent) {
 		const dataTransfer = event.dataTransfer;
 		if (!dataTransfer || !draggableBlockElem) {
 			return;
@@ -482,7 +509,17 @@ function useDraggableBlockMenu(
 	});
 }
 
-export function DraggableBlockPlugin_EXPERIMENTAL(props) {
+type Props = {
+	anchorElem?: HTMLElement;
+	menuRef: { current: HTMLElement | null };
+	targetLineRef: { current: HTMLElement | null };
+	menuComponent: OctaneNode;
+	targetLineComponent: OctaneNode;
+	isOnMenu: (element: HTMLElement) => boolean;
+	onElementChanged?: (element: HTMLElement | null) => void;
+};
+
+export function DraggableBlockPlugin_EXPERIMENTAL(props: Props) {
 	const anchorElem = props.anchorElem ?? document.body;
 	const [editor] = useLexicalComposerContext();
 	return useDraggableBlockMenu(

package/src/LexicalEditorRefPlugin.tsrx

@@ -1,9 +1,15 @@
 // Ported from @lexical/react/src/LexicalEditorRefPlugin.tsx. Hands the editor to
 // a callback ref or object ref so UI outside the composer can reach it.
 import { useLexicalComposerContext } from './LexicalComposerContext';
+import type { LexicalEditor } from 'lexical';
 import { useEffect } from 'octane';
 
-export function EditorRefPlugin(props) {
+type Props = {
+	editorRef: | ((editor: LexicalEditor | null) => void)
+	| { current: LexicalEditor | null | undefined };
+};
+
+export function EditorRefPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const editorRef = props.editorRef;
 

package/src/LexicalErrorBoundary.tsrx

@@ -4,10 +4,26 @@
 // the caught error) — preserving the (error, info) callback Rich/PlainTextPlugin
 // pass for decorator-render failures.
 import { ErrorBoundary } from 'octane';
+import type { OctaneNode } from 'octane';
 
-export function LexicalErrorBoundary(props) @{
+// Octane analog of React's `ErrorInfo`.
+type ErrorInfo = {
+	componentStack?: string | null;
+	digest?: string | null;
+};
+
+/**
+ * Props for the {@link LexicalErrorBoundary} component.
+ */
+export type LexicalErrorBoundaryProps = {
+	children: OctaneNode;
+	fallback?: OctaneNode;
+	onError: (error: Error, info: ErrorInfo) => void;
+};
+
+export function LexicalErrorBoundary(props: LexicalErrorBoundaryProps) @{
 	<ErrorBoundary
-		fallback={(error, _reset) => {
+		fallback={(error: unknown, _reset: VoidFunction) => {
 			if (props.onError) {
 				props.onError(error instanceof Error ? error : new Error(String(error), { cause: error }), {
 					componentStack: '',

package/src/LexicalHistoryPlugin.tsrx

@@ -3,11 +3,17 @@
 // useMemo/useEffect cover it directly).
 import { useLexicalComposerContext } from './LexicalComposerContext';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
+import type { HistoryState } from '@lexical/history';
 import { useEffect, useMemo } from 'octane';
 
 export { createEmptyHistoryState } from '@lexical/history';
 
-export function HistoryPlugin(props) {
+type Props = {
+	delay?: number;
+	externalHistoryState?: HistoryState;
+};
+
+export function HistoryPlugin(props: Props) {
 	const [editor] = useLexicalComposerContext();
 	const externalHistoryState = props.externalHistoryState;
 	const delay =