@octanejs/lexical 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# @octanejs/lexical
+
+[Lexical](https://lexical.dev) for the [octane](https://github.com/octanejs/octane) renderer.
+
+Lexical is an extensible rich-text editor framework. This package reuses Lexical's
+framework-agnostic core (`lexical`, `@lexical/rich-text`, `@lexical/history`,
+`@lexical/list`, …) and reimplements the [`@lexical/react`](https://www.npmjs.com/package/@lexical/react)
+binding layer on octane's hooks. It mirrors `@lexical/react`'s **per-subpath module
+layout** (that package has no root barrel), so existing Lexical code ports by changing
+only the scope:
+
+```tsx
+// before
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+// after
+import { useLexicalComposerContext } from '@octanejs/lexical/LexicalComposerContext';
+
+function MyPlugin() {
+  const [editor] = useLexicalComposerContext();
+  // …
+}
+```
+
+A convenience root barrel (`@octanejs/lexical`) re-exporting everything is also
+provided, but the per-subpath paths above are the drop-in form.
+
+Pinned to **Lexical 0.46.0**.
+
+## Status
+
+Near-complete `@lexical/react` parity — **35 of 39 modules ported** (Lexical 0.46.0).
+Parity is verified two ways: **differential** tests (the same `.tsrx` fixture run on
+octane *and* the real `@lexical/react`, asserting byte-identical DOM) plus ports of
+Lexical's own unit tests onto octane's harness.
+
+Landed: the composer + context (`LexicalComposer`, `LexicalComposerContext`,
+`LexicalNestedComposer`), the editable surface (`LexicalContentEditable`,
+`LexicalErrorBoundary`), the text bindings (`LexicalPlainTextPlugin`,
+`LexicalRichTextPlugin`), and the full plugin/menu set — history, list + check-list,
+link + clickable-link, hashtag, tab-indentation, markdown shortcuts, horizontal-rule,
+table, table-of-contents, auto-focus / -link / -embed, clear-editor, character-limit,
+draggable-block, node-event, on-change, selection-always-on-display, and the
+typeahead / node-menu / node-context-menu family — plus the `useLexical*` hooks and
+`LexicalCollaborationContext`.
+
+The 4 not-yet-ported modules are each deferred for a specific reason, not merely
+undone:
+
+- `LexicalCollaborationPlugin` — real-time Yjs collaboration. A genuine binding-layer
+  port (it wraps the framework-agnostic `@lexical/yjs`), deferred until there's a
+  two-peer Yjs harness to verify sync: the differential DOM-parity suite the other
+  modules rely on can't meaningfully exercise live collaboration.
+- `LexicalExtensionComposer` + `LexicalExtensionEditorComposer` — the newer
+  extension-builder composer API. Thin wrappers over a separate React-only subsystem
+  (`@lexical/react/ReactExtension` + `ReactProviderExtension`); the classic
+  `LexicalComposer` path here is fully supported.
+- `LexicalTreeView` — the debug tree viewer. A thin wrapper over
+  `@lexical/devtools-core`'s `TreeView`, which is itself a React component (React is
+  its peer dependency) — porting it means porting that separate devtools UI.
+
+## How it works
+
+The agnostic `@lexical/*` packages contain no React code, so they're consumed
+directly. Only `@lexical/react`'s components/hooks are reimplemented — translating
+React hooks to octane's (1:1 in nearly all cases), `forwardRef` to octane's
+ref-as-prop, `@floating-ui/react` to `@floating-ui/dom`, and the class-based
+`LexicalErrorBoundary` to octane's `<ErrorBoundary>`.

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@octanejs/lexical",
+  "version": "0.1.2",
+  "license": "MIT",
+  "type": "module",
+  "description": "Lexical bindings for the octane renderer — reuses the framework-agnostic @lexical/* core and reimplements the @lexical/react layer on octane's hooks.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/lexical"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./LexicalComposerContext": "./src/LexicalComposerContext.ts",
+    "./LexicalComposer": "./src/LexicalComposer.tsrx",
+    "./LexicalContentEditable": "./src/LexicalContentEditable.tsrx",
+    "./LexicalRichTextPlugin": "./src/LexicalRichTextPlugin.tsrx",
+    "./LexicalPlainTextPlugin": "./src/LexicalPlainTextPlugin.tsrx",
+    "./LexicalErrorBoundary": "./src/LexicalErrorBoundary.tsrx",
+    "./LexicalHistoryPlugin": "./src/LexicalHistoryPlugin.tsrx",
+    "./LexicalOnChangePlugin": "./src/LexicalOnChangePlugin.tsrx",
+    "./LexicalAutoFocusPlugin": "./src/LexicalAutoFocusPlugin.tsrx",
+    "./LexicalClearEditorPlugin": "./src/LexicalClearEditorPlugin.tsrx",
+    "./LexicalListPlugin": "./src/LexicalListPlugin.tsrx",
+    "./LexicalCheckListPlugin": "./src/LexicalCheckListPlugin.tsrx",
+    "./LexicalLinkPlugin": "./src/LexicalLinkPlugin.tsrx",
+    "./LexicalAutoLinkPlugin": "./src/LexicalAutoLinkPlugin.tsrx",
+    "./LexicalHashtagPlugin": "./src/LexicalHashtagPlugin.tsrx",
+    "./LexicalTabIndentationPlugin": "./src/LexicalTabIndentationPlugin.tsrx",
+    "./LexicalMarkdownShortcutPlugin": "./src/LexicalMarkdownShortcutPlugin.tsrx",
+    "./LexicalTablePlugin": "./src/LexicalTablePlugin.tsrx",
+    "./LexicalNodeEventPlugin": "./src/LexicalNodeEventPlugin.tsrx",
+    "./LexicalEditorRefPlugin": "./src/LexicalEditorRefPlugin.tsrx",
+    "./LexicalHorizontalRulePlugin": "./src/LexicalHorizontalRulePlugin.tsrx",
+    "./LexicalHorizontalRuleNode": "./src/LexicalHorizontalRuleNode.tsrx",
+    "./LexicalTypeaheadMenuPlugin": "./src/LexicalTypeaheadMenuPlugin.tsrx",
+    "./LexicalNodeMenuPlugin": "./src/LexicalNodeMenuPlugin.tsrx",
+    "./LexicalClickableLinkPlugin": "./src/LexicalClickableLinkPlugin.tsrx",
+    "./LexicalSelectionAlwaysOnDisplay": "./src/LexicalSelectionAlwaysOnDisplay.tsrx",
+    "./useLexicalEditable": "./src/useLexicalEditable.ts",
+    "./useLexicalSubscription": "./src/useLexicalSubscription.ts",
+    "./useLexicalNodeSelection": "./src/useLexicalNodeSelection.ts",
+    "./useLexicalTextEntity": "./src/useLexicalTextEntity.ts",
+    "./useLexicalIsTextContentEmpty": "./src/useLexicalIsTextContentEmpty.ts",
+    "./useLexicalSlotRef": "./src/useLexicalSlotRef.ts",
+    "./LexicalNestedComposer": "./src/LexicalNestedComposer.tsrx",
+    "./LexicalDecoratorBlockNode": "./src/LexicalDecoratorBlockNode.ts",
+    "./LexicalBlockWithAlignableContents": "./src/LexicalBlockWithAlignableContents.tsrx",
+    "./LexicalCollaborationContext": "./src/LexicalCollaborationContext.ts",
+    "./LexicalCharacterLimitPlugin": "./src/LexicalCharacterLimitPlugin.tsrx",
+    "./LexicalTableOfContentsPlugin": "./src/LexicalTableOfContentsPlugin.tsrx",
+    "./LexicalAutoEmbedPlugin": "./src/LexicalAutoEmbedPlugin.tsrx",
+    "./LexicalDraggableBlockPlugin": "./src/LexicalDraggableBlockPlugin.tsrx",
+    "./LexicalNodeContextMenuPlugin": "./src/LexicalNodeContextMenuPlugin.tsrx"
+  },
+  "dependencies": {
+    "@lexical/devtools-core": "0.46.0",
+    "@lexical/dragon": "0.46.0",
+    "@lexical/extension": "0.46.0",
+    "@lexical/hashtag": "0.46.0",
+    "@lexical/history": "0.46.0",
+    "@lexical/internal": "0.46.0",
+    "@lexical/link": "0.46.0",
+    "@lexical/list": "0.46.0",
+    "@lexical/mark": "0.46.0",
+    "@lexical/markdown": "0.46.0",
+    "@lexical/overflow": "0.46.0",
+    "@lexical/plain-text": "0.46.0",
+    "@lexical/rich-text": "0.46.0",
+    "@lexical/table": "0.46.0",
+    "@lexical/text": "0.46.0",
+    "@lexical/utils": "0.46.0",
+    "@lexical/yjs": "0.46.0",
+    "lexical": "0.46.0",
+    "yjs": "^13.6.0",
+    "@octanejs/floating-ui": "0.1.2",
+    "octane": "0.1.3"
+  },
+  "devDependencies": {
+    "@lexical/react": "0.46.0",
+    "@tsrx/react": "^0.2.33",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "vitest": "^4.1.9"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/LexicalAutoEmbedPlugin.tsrx

@@ -0,0 +1,144 @@
+// Ported from @lexical/react/src/LexicalAutoEmbedPlugin.tsx. Watches pasted
+// AutoLink/Link nodes that match an embed config (YouTube, tweet, …) and shows a
+// 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 { useLexicalComposerContext } from './LexicalComposerContext';
+import { LexicalNodeMenuPlugin } from './LexicalNodeMenuPlugin.tsrx';
+import {
+	$getNodeByKey,
+	$getSelection,
+	COMMAND_PRIORITY_EDITOR,
+	COMMAND_PRIORITY_LOW,
+	mergeRegister,
+	PASTE_TAG,
+} from 'lexical';
+import { useCallback, useEffect, useMemo, useState } from 'octane';
+
+export { URL_MATCHER, INSERT_EMBED_COMMAND, AutoEmbedOption } from './autoEmbedShared';
+
+export function LexicalAutoEmbedPlugin(props) {
+	const embedConfigs = props.embedConfigs;
+	const onOpenEmbedModalForConfig = props.onOpenEmbedModalForConfig;
+	const getMenuOptions = props.getMenuOptions;
+	const menuRenderFn = props.menuRenderFn;
+	const menuCommandPriority =
+		props.menuCommandPriority != null ? props.menuCommandPriority : COMMAND_PRIORITY_LOW;
+
+	const [editor] = useLexicalComposerContext();
+
+	const [nodeKey, setNodeKey] = useState(null);
+	const [activeEmbedConfig, setActiveEmbedConfig] = useState(null);
+
+	const reset = useCallback(() => {
+		setNodeKey(null);
+		setActiveEmbedConfig(null);
+	}, []);
+
+	const checkIfLinkNodeIsEmbeddable = useCallback(async (key) => {
+		const url = editor.read('latest', function () {
+			const linkNode = $getNodeByKey(key);
+			if ($isLinkNode(linkNode)) {
+				return linkNode.getURL();
+			}
+		});
+		if (url === undefined) {
+			return;
+		}
+		for (const embedConfig of embedConfigs) {
+			const urlMatch = await Promise.resolve(embedConfig.parseUrl(url));
+			if (urlMatch != null) {
+				setActiveEmbedConfig(embedConfig);
+				setNodeKey(key);
+			}
+		}
+	}, [editor, embedConfigs]);
+
+	useEffect(() => {
+		const listener = (nodeMutations, { updateTags, dirtyLeaves }) => {
+			for (const [key, mutation] of nodeMutations) {
+				if (mutation === 'created' && updateTags.has(PASTE_TAG) && dirtyLeaves.size <= 3) {
+					checkIfLinkNodeIsEmbeddable(key);
+				} else if (key === nodeKey) {
+					reset();
+				}
+			}
+		};
+		return mergeRegister(
+			...[LinkNode, AutoLinkNode].map(
+				(Klass) => editor.registerMutationListener(Klass, (...args) => listener(...args), {
+					skipInitialization: true,
+				}),
+			),
+		);
+	}, [checkIfLinkNodeIsEmbeddable, editor, nodeKey, reset]);
+
+	useEffect(() => {
+		if (!onOpenEmbedModalForConfig) return;
+
+		return editor.registerCommand(
+			INSERT_EMBED_COMMAND,
+			(embedConfigType) => {
+				const embedConfig = embedConfigs.find(({ type }) => type === embedConfigType);
+				if (embedConfig) {
+					onOpenEmbedModalForConfig(embedConfig);
+					return true;
+				}
+				return false;
+			},
+			COMMAND_PRIORITY_EDITOR,
+		);
+	}, [editor, embedConfigs, onOpenEmbedModalForConfig]);
+
+	const embedLinkViaActiveEmbedConfig = useCallback(async function () {
+		if (activeEmbedConfig != null && nodeKey != null) {
+			const linkNode = editor.read('latest', () => {
+				const node = $getNodeByKey(nodeKey);
+				if ($isLinkNode(node)) {
+					return node;
+				}
+				return null;
+			});
+
+			if ($isLinkNode(linkNode)) {
+				const result = await Promise.resolve(activeEmbedConfig.parseUrl(linkNode.__url));
+				if (result != null) {
+					editor.update(() => {
+						if (!$getSelection()) {
+							linkNode.selectEnd();
+						}
+						activeEmbedConfig.insertNode(editor, result);
+						if (linkNode.isAttached()) {
+							linkNode.remove();
+						}
+					});
+				}
+			}
+		}
+	}, [activeEmbedConfig, editor, nodeKey]);
+
+	const options = useMemo(() => {
+		return activeEmbedConfig != null && nodeKey != null
+			? getMenuOptions(activeEmbedConfig, embedLinkViaActiveEmbedConfig, reset)
+			: [];
+	}, [activeEmbedConfig, embedLinkViaActiveEmbedConfig, getMenuOptions, nodeKey, reset]);
+
+	const onSelectOption = useCallback((selectedOption, targetNode, closeMenu) => {
+		editor.update(() => {
+			selectedOption.onSelect(targetNode);
+			closeMenu();
+		});
+	}, [editor]);
+
+	if (nodeKey == null) {
+		return null;
+	}
+	return <LexicalNodeMenuPlugin
+		nodeKey={nodeKey}
+		onClose={reset}
+		onSelectOption={onSelectOption}
+		options={options}
+		menuRenderFn={menuRenderFn}
+		commandPriority={menuCommandPriority}
+	/>;
+}

package/src/LexicalAutoFocusPlugin.tsrx

@@ -0,0 +1,25 @@
+// Ported from @lexical/react/src/LexicalAutoFocusPlugin.ts.
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { getActiveElement } from 'lexical';
+import { useEffect } from 'octane';
+
+export function AutoFocusPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const defaultSelection = props.defaultSelection;
+
+	useEffect(() => {
+		editor.focus(() => {
+			const rootElement = editor.getRootElement();
+			// getActiveElement rather than document.activeElement (shadow-root safe).
+			const activeElement =
+				rootElement !== null ? getActiveElement(rootElement) : null;
+			if (
+				rootElement !== null && (activeElement === null || !rootElement.contains(activeElement))
+			) {
+				rootElement.focus({ preventScroll: true });
+			}
+		}, { defaultSelection });
+	}, [defaultSelection, editor]);
+
+	return null;
+}

package/src/LexicalAutoLinkPlugin.tsrx

@@ -0,0 +1,32 @@
+// Ported from @lexical/react/src/LexicalAutoLinkPlugin.ts (useAutoLink inlined).
+import invariant from '@lexical/internal/invariant';
+import { AutoLinkNode, registerAutoLink } from '@lexical/link';
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { useEffect } from 'octane';
+
+export { createLinkMatcherWithRegExp } from '@lexical/link';
+
+export function AutoLinkPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const matchers = props.matchers;
+	const onChange = props.onChange;
+	const excludeParents = props.excludeParents;
+
+	// No deps — runs every render (matches @lexical/react).
+	useEffect(() => {
+		if (!editor.hasNodes([AutoLinkNode])) {
+			invariant(false, 'LexicalAutoLinkPlugin: AutoLinkNode not registered on editor');
+		}
+	});
+
+	useEffect(
+		() => registerAutoLink(editor, {
+			changeHandlers: onChange ? [onChange] : [],
+			excludeParents: excludeParents ?? [],
+			matchers,
+		}),
+		[editor, matchers, onChange, excludeParents],
+	);
+
+	return null;
+}

package/src/LexicalBlockWithAlignableContents.tsrx

@@ -0,0 +1,85 @@
+// Ported from @lexical/react/src/LexicalBlockWithAlignableContents.tsx. Wraps a
+// DecoratorBlockNode's contents, syncing node selection + element alignment:
+// reflects the node's `format` alignment, responds to FORMAT_ELEMENT_COMMAND, and
+// toggles selection on click.
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { $isDecoratorBlockNode } from './LexicalDecoratorBlockNode';
+import { useLexicalNodeSelection } from './useLexicalNodeSelection';
+import { $getNearestBlockElementAncestorOrThrow } from '@lexical/utils';
+import {
+	$getNodeByKey,
+	$getSelection,
+	$isNodeSelection,
+	$isRangeSelection,
+	CLICK_COMMAND,
+	COMMAND_PRIORITY_LOW,
+	FORMAT_ELEMENT_COMMAND,
+	getComposedEventTarget,
+	mergeRegister,
+} from 'lexical';
+import { useEffect, useRef } from 'octane';
+
+export function BlockWithAlignableContents(props) {
+	const nodeKey = props.nodeKey;
+	const format = props.format;
+	const className = props.className;
+
+	const [editor] = useLexicalComposerContext();
+	const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+	const ref = useRef(null);
+
+	useEffect(() => {
+		return mergeRegister(
+			editor.registerCommand(
+				FORMAT_ELEMENT_COMMAND,
+				(formatType) => {
+					if (isSelected) {
+						const selection = $getSelection();
+						if ($isNodeSelection(selection)) {
+							const node = $getNodeByKey(nodeKey);
+							if ($isDecoratorBlockNode(node)) {
+								node.setFormat(formatType);
+							}
+						} else if ($isRangeSelection(selection)) {
+							const nodes = selection.getNodes();
+							for (const node of nodes) {
+								if ($isDecoratorBlockNode(node)) {
+									node.setFormat(formatType);
+								} else {
+									const element = $getNearestBlockElementAncestorOrThrow(node);
+									element.setFormat(formatType);
+								}
+							}
+						}
+						return true;
+					}
+					return false;
+				},
+				COMMAND_PRIORITY_LOW,
+			),
+			editor.registerCommand(
+				CLICK_COMMAND,
+				(event) => {
+					if (getComposedEventTarget(event) === ref.current) {
+						event.preventDefault();
+						if (!event.shiftKey) {
+							clearSelection();
+						}
+						setSelected(!isSelected);
+						return true;
+					}
+					return false;
+				},
+				COMMAND_PRIORITY_LOW,
+			),
+		);
+	}, [clearSelection, editor, isSelected, nodeKey, setSelected]);
+
+	const cls = [className.base, isSelected ? className.focus : null].filter(Boolean).join(' ');
+
+	return <div
+		class={cls}
+		ref={ref}
+		style={{ textAlign: format ? format : undefined }}
+	>{props.children}</div>;
+}

package/src/LexicalCharacterLimitPlugin.tsrx

@@ -0,0 +1,66 @@
+// Ported from @lexical/react/src/LexicalCharacterLimitPlugin.tsx. Tracks text
+// length against maxLength, marks overflow, and renders remaining characters. The
+// renderer is rendered via createElement (octane renders the descriptor) rather
+// than called directly.
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { useCharacterLimit } from './shared/useCharacterLimit';
+import { createElement, useMemo, useState } from 'octane';
+
+const CHARACTER_LIMIT = 5;
+let textEncoderInstance = null;
+
+function textEncoder() {
+	if (window.TextEncoder === undefined) {
+		return null;
+	}
+	if (textEncoderInstance === null) {
+		textEncoderInstance = new window.TextEncoder();
+	}
+	return textEncoderInstance;
+}
+
+function utf8Length(text) {
+	const currentTextEncoder = textEncoder();
+	if (currentTextEncoder === null) {
+		const m = encodeURIComponent(text).match(/%[89ABab]/g);
+		return text.length + (m ? m.length : 0);
+	}
+	return currentTextEncoder.encode(text).length;
+}
+
+function DefaultRenderer(props) @{
+	<span
+		class={'characters-limit ' + (props.remainingCharacters < 0 ? 'characters-limit-exceeded' : '')}
+	>
+		{props.remainingCharacters as string}
+	</span>
+}
+
+export function CharacterLimitPlugin(props) {
+	const charset = props.charset ?? 'UTF-16';
+	const maxLength = props.maxLength ?? CHARACTER_LIMIT;
+	const renderer = props.renderer ?? DefaultRenderer;
+
+	const [editor] = useLexicalComposerContext();
+	const [remainingCharacters, setRemainingCharacters] = useState(maxLength);
+
+	const characterLimitProps = useMemo(
+		() => ({
+			remainingCharacters: setRemainingCharacters,
+			strlen: (text) => {
+				if (charset === 'UTF-8') {
+					return utf8Length(text);
+				} else if (charset === 'UTF-16') {
+					return text.length;
+				} else {
+					throw new Error('Unrecognized charset');
+				}
+			},
+		}),
+		[charset],
+	);
+
+	useCharacterLimit(editor, maxLength, characterLimitProps);
+
+	return createElement(renderer, { remainingCharacters });
+}

package/src/LexicalCheckListPlugin.tsrx

@@ -0,0 +1,16 @@
+// Ported from @lexical/react/src/LexicalCheckListPlugin.tsx.
+import { registerCheckList } from '@lexical/list';
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { useEffect } from 'octane';
+
+export function CheckListPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const disableTakeFocusOnClick =
+		props.disableTakeFocusOnClick === undefined ? false : props.disableTakeFocusOnClick;
+
+	useEffect(() => registerCheckList(editor, { disableTakeFocusOnClick }), [
+		editor,
+		disableTakeFocusOnClick,
+	]);
+	return null;
+}

package/src/LexicalClearEditorPlugin.tsrx

@@ -0,0 +1,12 @@
+// Ported from @lexical/react/src/LexicalClearEditorPlugin.ts. registerClearEditor
+// comes from @lexical/extension's framework-agnostic core.
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { registerClearEditor } from '@lexical/extension';
+import { useLayoutEffect } from 'octane';
+
+export function ClearEditorPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const onClear = props.onClear;
+	useLayoutEffect(() => registerClearEditor(editor, onClear), [editor, onClear]);
+	return null;
+}

package/src/LexicalClickableLinkPlugin.tsrx

@@ -0,0 +1,17 @@
+// Ported from @lexical/react/src/LexicalClickableLinkPlugin.tsx.
+import { namedSignals } from '@lexical/extension';
+import { registerClickableLink } from '@lexical/link';
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { useEffect } from 'octane';
+
+export function ClickableLinkPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const newTab = props.newTab !== false;
+	const disabled = props.disabled === true;
+	useEffect(() => registerClickableLink(editor, namedSignals({ disabled, newTab })), [
+		editor,
+		newTab,
+		disabled,
+	]);
+	return null;
+}

package/src/LexicalCollaborationContext.ts

@@ -0,0 +1,67 @@
+// Ported from @lexical/react/src/LexicalCollaborationContext.tsx — the context +
+// reader hook (both rely only on useContext, which octane keys by identity, so no
+// hook slot is needed and this stays plain `.ts`). The `LexicalCollaboration`
+// provider component lands with P5 (collaboration).
+import type { Doc } from 'yjs';
+
+import { createContext, useContext } from 'octane';
+
+export type CollaborationContextType = {
+	color: string;
+	isCollabActive: boolean;
+	name: string;
+	yjsDocMap: Map<string, Doc>;
+};
+
+const entries: [string, string][] = [
+	['Cat', 'rgb(125, 50, 0)'],
+	['Dog', 'rgb(100, 0, 0)'],
+	['Rabbit', 'rgb(150, 0, 0)'],
+	['Frog', 'rgb(200, 0, 0)'],
+	['Fox', 'rgb(200, 75, 0)'],
+	['Hedgehog', 'rgb(0, 75, 0)'],
+	['Pigeon', 'rgb(0, 125, 0)'],
+	['Squirrel', 'rgb(75, 100, 0)'],
+	['Bear', 'rgb(125, 100, 0)'],
+	['Tiger', 'rgb(0, 0, 150)'],
+	['Leopard', 'rgb(0, 0, 200)'],
+	['Zebra', 'rgb(0, 0, 250)'],
+	['Wolf', 'rgb(0, 100, 150)'],
+	['Owl', 'rgb(0, 100, 100)'],
+	['Gull', 'rgb(100, 0, 100)'],
+	['Squid', 'rgb(150, 0, 150)'],
+];
+
+const randomEntry = entries[Math.floor(Math.random() * entries.length)];
+
+export const CollaborationContext = createContext<CollaborationContextType | null>(null);
+
+function newContext(): CollaborationContextType {
+	return {
+		color: randomEntry[1],
+		isCollabActive: false,
+		name: randomEntry[0],
+		yjsDocMap: new Map(),
+	};
+}
+
+const UNSAFE_GLOBAL_CONTEXT = newContext();
+
+export function useCollaborationContext(
+	username?: string,
+	color?: string,
+): CollaborationContextType {
+	let collabContext = useContext(CollaborationContext);
+
+	collabContext = collabContext ?? UNSAFE_GLOBAL_CONTEXT;
+
+	if (username != null) {
+		collabContext.name = username;
+	}
+
+	if (color != null) {
+		collabContext.color = color;
+	}
+
+	return collabContext;
+}