@octanejs/lexical 0.1.2

package/src/typeaheadShared.ts

@@ -0,0 +1,132 @@
+import type { LexicalEditor, RangeSelection } from 'lexical';
+import type { MenuTextMatch, TriggerFn } from './shared/menuShared';
+
+import {
+	$getSelection,
+	$isRangeSelection,
+	$isTextNode,
+	getDOMSelection,
+	getDOMSelectionPoints,
+} from 'lexical';
+import { useCallback } from 'octane';
+
+// Non-component helpers + the trigger hook from LexicalTypeaheadMenuPlugin.tsx.
+
+export const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+
+export function getTextUpToAnchor(selection: RangeSelection): string | null {
+	const anchor = selection.anchor;
+	if (anchor.type !== 'text') {
+		return null;
+	}
+	const anchorNode = anchor.getNode();
+	if (!anchorNode.isSimpleText()) {
+		return null;
+	}
+	const anchorOffset = anchor.offset;
+	return anchorNode.getTextContent().slice(0, anchorOffset);
+}
+
+export function tryToPositionRange(
+	leadOffset: number,
+	range: Range,
+	editorWindow: Window,
+	rootElement: HTMLElement | null,
+): boolean {
+	const domSelection = getDOMSelection(editorWindow);
+	if (domSelection === null || !domSelection.isCollapsed) {
+		return false;
+	}
+	const points = getDOMSelectionPoints(domSelection, rootElement);
+	const anchorNode = points.anchorNode;
+	const startOffset = leadOffset;
+	const endOffset = points.anchorOffset;
+	if (anchorNode == null || endOffset == null) {
+		return false;
+	}
+	try {
+		range.setStart(anchorNode, startOffset);
+		range.setEnd(anchorNode, endOffset);
+	} catch (_error) {
+		return false;
+	}
+	return true;
+}
+
+export function getQueryTextForSearch(editor: LexicalEditor): string | null {
+	let text = null;
+	editor.read('latest', () => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) {
+			return;
+		}
+		text = getTextUpToAnchor(selection);
+	});
+	return text;
+}
+
+export function isSelectionOnEntityBoundary(editor: LexicalEditor, offset: number): boolean {
+	if (offset !== 0) {
+		return false;
+	}
+	return editor.read('latest', () => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection)) {
+			const anchor = selection.anchor;
+			const anchorNode = anchor.getNode();
+			const prevSibling = anchorNode.getPreviousSibling();
+			return $isTextNode(prevSibling) && prevSibling.isTextEntity();
+		}
+		return false;
+	});
+}
+
+// Two required user args (trigger, options), so the trailing slot is positional.
+export function useBasicTypeaheadTriggerMatch(
+	trigger: string,
+	options: {
+		minLength?: number;
+		maxLength?: number;
+		punctuation?: string;
+		allowWhitespace?: boolean;
+	},
+	slot?: symbol,
+): TriggerFn {
+	const minLength = options.minLength ?? 1;
+	const maxLength = options.maxLength ?? 75;
+	const punctuation = options.punctuation ?? PUNCTUATION;
+	const allowWhitespace = options.allowWhitespace ?? false;
+	return useCallback(
+		(text: string) => {
+			const validCharsSuffix = allowWhitespace ? '' : '\\s';
+			const validChars = '[^' + trigger + punctuation + validCharsSuffix + ']';
+			const TypeaheadTriggerRegex = new RegExp(
+				'(^|\\s|\\()(' +
+					'[' +
+					trigger +
+					']' +
+					'((?:' +
+					validChars +
+					'){0,' +
+					maxLength +
+					'})' +
+					')$',
+			);
+			const match = TypeaheadTriggerRegex.exec(text);
+			if (match !== null) {
+				const maybeLeadingWhitespace = match[1];
+				const matchingString = match[3];
+				if (matchingString.length >= minLength) {
+					return {
+						leadOffset: match.index + maybeLeadingWhitespace.length,
+						matchingString,
+						replaceableString: match[2],
+					};
+				}
+			}
+			return null;
+		},
+		[allowWhitespace, trigger, punctuation, maxLength, minLength],
+		slot,
+	);
+}

package/src/types.ts

@@ -0,0 +1,29 @@
+import type {
+	EditorState,
+	EditorThemeClasses,
+	HTMLConfig,
+	Klass,
+	LexicalEditor,
+	LexicalNode,
+	LexicalNodeReplacement,
+} from 'lexical';
+
+// Real types for LexicalComposer's config (its component lives in a `.tsrx`, which
+// tsgo treats as `any` via the ambient module — so the typed surface lives here).
+
+export type InitialEditorStateType =
+	| null
+	| string
+	| EditorState
+	| ((editor: LexicalEditor) => void);
+
+export type InitialConfigType = Readonly<{
+	namespace: string;
+	nodes?: readonly (Klass<LexicalNode> | LexicalNodeReplacement)[];
+	onError: (error: Error, editor: LexicalEditor) => void;
+	onWarn?: (error: Error, editor: LexicalEditor) => void;
+	editable?: boolean;
+	theme?: EditorThemeClasses;
+	editorState?: InitialEditorStateType;
+	html?: HTMLConfig;
+}>;

package/src/useLexicalEditable.ts

@@ -0,0 +1,22 @@
+import type { LexicalEditor } from 'lexical';
+
+import { useLexicalSubscription, type LexicalSubscription } from './useLexicalSubscription';
+
+// Ported from @lexical/react/src/useLexicalEditable.ts. Composes exactly one base
+// hook (useLexicalSubscription), so it forwards the caller's slot straight through.
+
+function subscription(editor: LexicalEditor): LexicalSubscription<boolean> {
+	return {
+		initialValueFn: () => editor.isEditable(),
+		subscribe: (callback) => editor.registerEditableListener(callback),
+	};
+}
+
+/**
+ * Get the current value for {@link LexicalEditor.isEditable} via
+ * {@link useLexicalSubscription}. Prefer this over observing
+ * {@link LexicalEditor.registerEditableListener} manually.
+ */
+export function useLexicalEditable(slot?: symbol): boolean {
+	return useLexicalSubscription(subscription, slot);
+}

package/src/useLexicalIsTextContentEmpty.ts

@@ -0,0 +1,35 @@
+import type { LexicalEditor } from 'lexical';
+
+import { $isRootTextContentEmptyCurry } from '@lexical/text';
+import { useState, useLayoutEffect } from 'octane';
+
+import { splitSlot, subSlot } from './shared/internal';
+
+// Ported from @lexical/react/src/useLexicalIsTextContentEmpty.ts. `trim` is an
+// OPTIONAL user arg, so the trailing compiler-injected slot is found with
+// splitSlot (positional resolution would mistake the slot for `trim`). Public
+// signature is `(editor: LexicalEditor, trim?: boolean)`.
+export function useLexicalIsTextContentEmpty(...args: any[]): boolean {
+	const [user, slot] = splitSlot(args);
+	const editor = user[0] as LexicalEditor;
+	const trim = user[1] as boolean | undefined;
+
+	const [isEmpty, setIsEmpty] = useState(
+		editor.read('latest', $isRootTextContentEmptyCurry(editor.isComposing(), trim)),
+		subSlot(slot, 'ultce:state'),
+	);
+
+	useLayoutEffect(
+		() => {
+			return editor.registerUpdateListener(({ editorState }) => {
+				const isComposing = editor.isComposing();
+				const currentIsEmpty = editorState.read($isRootTextContentEmptyCurry(isComposing, trim));
+				setIsEmpty(currentIsEmpty);
+			});
+		},
+		[editor, trim],
+		subSlot(slot, 'ultce:le'),
+	);
+
+	return isEmpty;
+}

package/src/useLexicalNodeSelection.ts

@@ -0,0 +1,91 @@
+import type { LexicalEditor, NodeKey } from 'lexical';
+
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import {
+	$createNodeSelection,
+	$getNodeByKey,
+	$getSelection,
+	$isNodeSelection,
+	$setSelection,
+} from 'lexical';
+import { useCallback, useEffect, useState } from 'octane';
+
+import { subSlot } from './shared/internal';
+
+// Ported from @lexical/react/src/useLexicalNodeSelection.ts. Plain `.ts` hook;
+// composes four base hooks, each given a distinct sub-slot.
+
+function isNodeSelected(editor: LexicalEditor, key: NodeKey): boolean {
+	return editor.read('latest', () => {
+		const node = $getNodeByKey(key);
+		if (node === null) {
+			return false;
+		}
+		return node.isSelected();
+	});
+}
+
+export function useLexicalNodeSelection(
+	key: NodeKey,
+	slot?: symbol,
+): [boolean, (selected: boolean) => void, () => void] {
+	const [editor] = useLexicalComposerContext();
+
+	const [isSelected, setIsSelected] = useState(
+		() => isNodeSelected(editor, key),
+		subSlot(slot, 'ulns:state'),
+	);
+
+	useEffect(
+		() => {
+			let isMounted = true;
+			const unregister = editor.registerUpdateListener(() => {
+				if (isMounted) {
+					setIsSelected(isNodeSelected(editor, key));
+				}
+			});
+			return () => {
+				isMounted = false;
+				unregister();
+			};
+		},
+		[editor, key],
+		subSlot(slot, 'ulns:le'),
+	);
+
+	const setSelected = useCallback(
+		(selected: boolean) => {
+			editor.update(() => {
+				let selection = $getSelection();
+				if (!$isNodeSelection(selection)) {
+					selection = $createNodeSelection();
+					$setSelection(selection);
+				}
+				if ($isNodeSelection(selection)) {
+					if (selected) {
+						selection.add(key);
+					} else {
+						selection.delete(key);
+					}
+				}
+			});
+		},
+		[editor, key],
+		subSlot(slot, 'ulns:set'),
+	);
+
+	const clearSelected = useCallback(
+		() => {
+			editor.update(() => {
+				const selection = $getSelection();
+				if ($isNodeSelection(selection)) {
+					selection.clear();
+				}
+			});
+		},
+		[editor],
+		subSlot(slot, 'ulns:clear'),
+	);
+
+	return [isSelected, setSelected, clearSelected];
+}

package/src/useLexicalSlotRef.ts

@@ -0,0 +1,26 @@
+import type { LexicalEditor, NodeKey } from 'lexical';
+
+import { mountSlotContainer, unmountSlotContainer } from 'lexical';
+import { useCallback } from 'octane';
+
+// Ported from @lexical/react/src/useLexicalSlotRef.ts. Three required user args, so
+// the trailing slot is positional.
+export function useLexicalSlotRef<T extends HTMLElement = HTMLElement>(
+	editor: LexicalEditor,
+	nodeKey: NodeKey,
+	slotName: string,
+	slot?: symbol,
+): (target: T | null) => (() => void) | void {
+	return useCallback(
+		(target: T | null) => {
+			if (target) {
+				const container = mountSlotContainer(editor, nodeKey, slotName, target);
+				if (container) {
+					return unmountSlotContainer.bind(null, editor, nodeKey, container);
+				}
+			}
+		},
+		[editor, nodeKey, slotName],
+		slot,
+	);
+}

package/src/useLexicalSubscription.ts

@@ -0,0 +1,55 @@
+import type { LexicalEditor } from 'lexical';
+import { useMemo, useRef, useState, useLayoutEffect } from 'octane';
+
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { subSlot } from './shared/internal';
+
+// Ported from @lexical/react/src/useLexicalSubscription.tsx. A plain `.ts` hook:
+// the caller's compiled call site injects `slot` as the trailing arg, and each
+// composed base hook gets a distinct sub-slot (per-call-site identity).
+
+export type LexicalSubscription<T> = {
+	initialValueFn: () => T;
+	subscribe: (callback: (value: T) => void) => () => void;
+};
+
+/**
+ * Shortcut to Lexical subscriptions when values are used for render.
+ * @param subscription - Creates the {@link LexicalSubscription}. Its identity must
+ *   be stable (module scope or `useCallback`).
+ */
+export function useLexicalSubscription<T>(
+	subscription: (editor: LexicalEditor) => LexicalSubscription<T>,
+	slot?: symbol,
+): T {
+	const [editor] = useLexicalComposerContext();
+	const initializedSubscription = useMemo(
+		() => subscription(editor),
+		[editor, subscription],
+		subSlot(slot, 'uls:memo'),
+	);
+	const [value, setValue] = useState<T>(
+		() => initializedSubscription.initialValueFn(),
+		subSlot(slot, 'uls:state'),
+	);
+	const valueRef = useRef<T>(value, subSlot(slot, 'uls:ref'));
+	useLayoutEffect(
+		() => {
+			const { initialValueFn, subscribe } = initializedSubscription;
+			const currentValue = initialValueFn();
+			if (valueRef.current !== currentValue) {
+				valueRef.current = currentValue;
+				setValue(currentValue);
+			}
+
+			return subscribe((newValue: T) => {
+				valueRef.current = newValue;
+				setValue(newValue);
+			});
+		},
+		[initializedSubscription, subscription],
+		subSlot(slot, 'uls:le'),
+	);
+
+	return value;
+}

package/src/useLexicalTextEntity.ts

@@ -0,0 +1,24 @@
+import type { EntityMatch } from '@lexical/text';
+import type { Klass, TextNode } from 'lexical';
+
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { registerLexicalTextEntity } from '@lexical/text';
+import { mergeRegister } from 'lexical';
+import { useEffect } from 'octane';
+
+// Ported from @lexical/react/src/useLexicalTextEntity.ts. Three required user args,
+// so the trailing slot is positional (4th).
+export function useLexicalTextEntity<T extends TextNode>(
+	getMatch: (text: string) => null | EntityMatch,
+	targetNode: Klass<T>,
+	createNode: (textNode: TextNode) => T,
+	slot?: symbol,
+): void {
+	const [editor] = useLexicalComposerContext();
+
+	useEffect(
+		() => mergeRegister(...registerLexicalTextEntity(editor, getMatch, targetNode, createNode)),
+		[createNode, editor, getMatch, targetNode],
+		slot,
+	);
+}