@octanejs/lexical 0.1.2

package/src/LexicalComposer.tsrx

@@ -0,0 +1,100 @@
+// Ported from @lexical/react/src/LexicalComposer.tsx. Creates a LexicalEditor from
+// 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 {
+	$createParagraphNode,
+	$getRoot,
+	$getSelection,
+	CAN_USE_DOM,
+	createEditor,
+	getActiveElement,
+	HISTORY_MERGE_TAG,
+} from 'lexical';
+import { useMemo, useLayoutEffect } from 'octane';
+
+const HISTORY_MERGE_OPTIONS = { tag: HISTORY_MERGE_TAG };
+
+function initializeEditor(editor, initialEditorState) {
+	if (initialEditorState === null) {
+		return;
+	} else if (initialEditorState === undefined) {
+		editor.update(() => {
+			const root = $getRoot();
+			if (root.isEmpty()) {
+				const paragraph = $createParagraphNode();
+				root.append(paragraph);
+				const rootElement = editor.getRootElement();
+				// getActiveElement (not document.activeElement) reports the shadow host
+				// when the editor lives in a shadow root.
+				const activeElement =
+					CAN_USE_DOM && rootElement !== null ? getActiveElement(rootElement) : null;
+				if ($getSelection() !== null || activeElement !== null && activeElement === rootElement) {
+					paragraph.select();
+				}
+			}
+		}, HISTORY_MERGE_OPTIONS);
+	} else if (initialEditorState !== null) {
+		switch (typeof initialEditorState) {
+			case 'string': {
+				const parsedEditorState = editor.parseEditorState(initialEditorState);
+				editor.setEditorState(parsedEditorState, HISTORY_MERGE_OPTIONS);
+				break;
+			}
+			case 'object': {
+				editor.setEditorState(initialEditorState, HISTORY_MERGE_OPTIONS);
+				break;
+			}
+			case 'function': {
+				editor.update(() => {
+					const root = $getRoot();
+					if (root.isEmpty()) {
+						initialEditorState(editor);
+					}
+				}, HISTORY_MERGE_OPTIONS);
+				break;
+			}
+		}
+	}
+}
+
+export function LexicalComposer(props) @{
+	const initialConfig = props.initialConfig;
+
+	const composerContext = useMemo(() => {
+		const {
+			theme,
+			namespace,
+			nodes,
+			onError,
+			onWarn,
+			editorState: initialEditorState,
+			html,
+		} = initialConfig;
+
+		const context = createLexicalComposerContext(null, theme);
+
+		const editor = createEditor({
+			editable: initialConfig.editable,
+			html,
+			namespace,
+			nodes,
+			onError: (error) => onError(error, editor),
+			...(onWarn ? { onWarn: (error) => onWarn(error, editor) } : {}),
+			theme,
+		});
+		initializeEditor(editor, initialEditorState);
+
+		return [editor, context];
+	}, []);
+
+	useLayoutEffect(() => {
+		const isEditable = initialConfig.editable;
+		const [editor] = composerContext;
+		editor.setEditable(isEditable !== undefined ? isEditable : true);
+	}, []);
+
+	<LexicalComposerContext.Provider
+		value={composerContext}
+	>{props.children}</LexicalComposerContext.Provider>
+}

package/src/LexicalComposerContext.ts

@@ -0,0 +1,49 @@
+import type { EditorThemeClasses, LexicalEditor } from 'lexical';
+import { createContext, useContext } from 'octane';
+
+// Ported from @lexical/react/src/LexicalComposerContext.ts — pure context, no JSX,
+// so it's an exact translation with `react` → `octane` (octane's createContext /
+// useContext match React's: useContext is keyed by context identity, no hook slot).
+
+export type LexicalComposerContextType = {
+	getTheme: () => EditorThemeClasses | null | undefined;
+};
+
+export type LexicalComposerContextWithEditor = [LexicalEditor, LexicalComposerContextType];
+
+export const LexicalComposerContext = createContext<
+	LexicalComposerContextWithEditor | null | undefined
+>(null);
+
+export function createLexicalComposerContext(
+	parent: LexicalComposerContextWithEditor | null | undefined,
+	theme: EditorThemeClasses | null | undefined,
+): LexicalComposerContextType {
+	let parentContext: LexicalComposerContextType | null = null;
+
+	if (parent != null) {
+		parentContext = parent[1];
+	}
+
+	function getTheme(): EditorThemeClasses | null | undefined {
+		if (theme != null) {
+			return theme;
+		}
+
+		return parentContext != null ? parentContext.getTheme() : null;
+	}
+
+	return { getTheme };
+}
+
+export function useLexicalComposerContext(): LexicalComposerContextWithEditor {
+	const composerContext = useContext(LexicalComposerContext);
+
+	if (composerContext == null) {
+		throw new Error(
+			'LexicalComposerContext.useLexicalComposerContext: cannot find a LexicalComposerContext',
+		);
+	}
+
+	return composerContext;
+}

package/src/LexicalContentEditable.tsrx

@@ -0,0 +1,48 @@
+// Ported from @lexical/react/src/LexicalContentEditable.tsx. Reads the editor from
+// 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 { useLexicalComposerContext } from './LexicalComposerContext';
+import { useCanShowPlaceholder } from './shared/useCanShowPlaceholder';
+import { ContentEditableElement } from './shared/LexicalContentEditableElement.tsrx';
+import { useLayoutEffect, useState } from 'octane';
+
+// Re-export the lower-level element (matches @lexical/react/LexicalContentEditable).
+export { ContentEditableElement } from './shared/LexicalContentEditableElement.tsrx';
+
+function Placeholder(props) {
+	const editor = props.editor;
+	const showPlaceholder = useCanShowPlaceholder(editor);
+	const [isEditable, setEditable] = useState(editor.isEditable());
+
+	useLayoutEffect(() => {
+		setEditable(editor.isEditable());
+		return editor.registerEditableListener((currentIsEditable) => {
+			setEditable(currentIsEditable);
+		});
+	}, [editor]);
+
+	if (!showPlaceholder) {
+		return null;
+	}
+
+	const content = props.content;
+	let placeholder = null;
+	if (typeof content === 'function') {
+		placeholder = content(isEditable);
+	} else if (content !== null) {
+		placeholder = content;
+	}
+	if (placeholder === null) {
+		return null;
+	}
+	return <div aria-hidden="true">{placeholder}</div>;
+}
+
+export function ContentEditable(props) @{
+	const [editor] = useLexicalComposerContext();
+	<>
+		<ContentEditableElement editor={editor} {...props} />
+		{props.placeholder != null ? <Placeholder editor={editor} content={props.placeholder} /> : null}
+	</>
+}

package/src/LexicalDecoratorBlockNode.ts

@@ -0,0 +1,78 @@
+// Ported from @lexical/react/src/LexicalDecoratorBlockNode.ts. Framework-agnostic
+// apart from the decorate() return type — React typed it `JSX.Element`; octane's
+// decorate() returns a renderable, so the type parameter is left open (subclasses
+// pin it). Pair with BlockWithAlignableContents for selection + alignment.
+import type {
+	ElementFormatType,
+	LexicalNode,
+	LexicalUpdateJSON,
+	NodeKey,
+	SerializedLexicalNode,
+	Spread,
+} from 'lexical';
+
+import { DecoratorNode } from 'lexical';
+
+export type SerializedDecoratorBlockNode = Spread<
+	{
+		format: ElementFormatType;
+	},
+	SerializedLexicalNode
+>;
+
+export class DecoratorBlockNode extends DecoratorNode<unknown> {
+	__format: ElementFormatType;
+
+	constructor(format?: ElementFormatType, key?: NodeKey) {
+		super(key);
+		this.__format = format || '';
+	}
+
+	afterCloneFrom(prevNode: this): void {
+		super.afterCloneFrom(prevNode);
+		this.__format = prevNode.__format;
+	}
+
+	exportJSON(): SerializedDecoratorBlockNode {
+		return {
+			...super.exportJSON(),
+			format: this.__format || '',
+		};
+	}
+
+	updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedDecoratorBlockNode>): this {
+		return super.updateFromJSON(serializedNode).setFormat(serializedNode.format || '');
+	}
+
+	canIndent(): false {
+		return false;
+	}
+
+	createDOM(): HTMLElement {
+		return document.createElement('div');
+	}
+
+	updateDOM(): false {
+		return false;
+	}
+
+	setFormat(format: ElementFormatType): this {
+		const self = this.getWritable();
+		self.__format = format;
+		return self;
+	}
+
+	getFormat(): ElementFormatType {
+		return this.getLatest().__format;
+	}
+
+	isInline(): false {
+		return false;
+	}
+}
+
+export function $isDecoratorBlockNode(
+	node: LexicalNode | null | undefined,
+): node is DecoratorBlockNode {
+	return node instanceof DecoratorBlockNode;
+}