@octanejs/lexical 0.1.2

package/src/LexicalDraggableBlockPlugin.tsrx

@@ -0,0 +1,499 @@
+// Ported from @lexical/react/src/LexicalDraggableBlockPlugin.tsx. Renders a drag
+// handle + drop-target line (portaled into anchorElem) to reorder top-level blocks.
+// The DOM math helpers are framework-agnostic and copied as-is; the portal body is a
+// component (DraggableContainer) so its <div> events wire through the template path.
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { eventFiles } from '@lexical/rich-text';
+import { calculateZoomLevel } from '@lexical/utils';
+import {
+	$getNearestNodeFromDOMNode,
+	$getNodeByKey,
+	$getRoot,
+	$getSelection,
+	$onUpdate,
+	BLUR_COMMAND,
+	COMMAND_PRIORITY_HIGH,
+	COMMAND_PRIORITY_LOW,
+	DRAGOVER_COMMAND,
+	DROP_COMMAND,
+	getActiveElement,
+	getActiveElementDeep,
+	getComposedEventTarget,
+	getParentElement,
+	getRootOwnerDocument,
+	IS_FIREFOX,
+	isHTMLElement,
+	mergeRegister,
+} from 'lexical';
+import { createPortal, useCallback, useEffect, useRef, useState } from 'octane';
+
+import { Point } from './shared/point';
+import { Rectangle } from './shared/rect';
+
+const SPACE = 4;
+const TARGET_LINE_HALF_HEIGHT = 2;
+const DRAG_DATA_FORMAT = 'application/x-lexical-drag-block';
+const TEXT_BOX_HORIZONTAL_PADDING = 28;
+
+const Downward = 1;
+const Upward = -1;
+const Indeterminate = 0;
+
+let prevIndex = Infinity;
+
+function getCurrentIndex(keysLength) {
+	if (keysLength === 0) {
+		return Infinity;
+	}
+	if (prevIndex >= 0 && prevIndex < keysLength) {
+		return prevIndex;
+	}
+	return Math.floor(keysLength / 2);
+}
+
+function getTopLevelNodeKeys(editor) {
+	return editor.read('latest', () => $getRoot().getChildrenKeys());
+}
+
+function getCollapsedMargins(elem) {
+	const getMargin = (element, margin) => element
+		? parseFloat(window.getComputedStyle(element)[margin])
+		: 0;
+
+	const { marginTop, marginBottom } = window.getComputedStyle(elem);
+	const prevElemSiblingMarginBottom = getMargin(elem.previousElementSibling, 'marginBottom');
+	const nextElemSiblingMarginTop = getMargin(elem.nextElementSibling, 'marginTop');
+	const collapsedTopMargin = Math.max(parseFloat(marginTop), prevElemSiblingMarginBottom);
+	const collapsedBottomMargin = Math.max(parseFloat(marginBottom), nextElemSiblingMarginTop);
+
+	return { marginBottom: collapsedBottomMargin, marginTop: collapsedTopMargin };
+}
+
+function getBlockElement(anchorElem, editor, event, useEdgeAsDefault = false) {
+	const anchorElementRect = anchorElem.getBoundingClientRect();
+	const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+
+	let blockElem = null;
+
+	editor.read('latest', () => {
+		if (useEdgeAsDefault) {
+			const [firstNode, lastNode] = [
+				editor.getElementByKey(topLevelNodeKeys[0]),
+				editor.getElementByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1]),
+			];
+
+			const [firstNodeRect, lastNodeRect] = [
+				firstNode != null ? firstNode.getBoundingClientRect() : undefined,
+				lastNode != null ? lastNode.getBoundingClientRect() : undefined,
+			];
+
+			if (firstNodeRect && lastNodeRect) {
+				const firstNodeZoom = calculateZoomLevel(firstNode);
+				const lastNodeZoom = calculateZoomLevel(lastNode);
+				if (event.y / firstNodeZoom < firstNodeRect.top) {
+					blockElem = firstNode;
+				} else if (event.y / lastNodeZoom > lastNodeRect.bottom) {
+					blockElem = lastNode;
+				}
+
+				if (blockElem) {
+					return;
+				}
+			}
+		}
+
+		let index = getCurrentIndex(topLevelNodeKeys.length);
+		let direction = Indeterminate;
+
+		while (index >= 0 && index < topLevelNodeKeys.length) {
+			const key = topLevelNodeKeys[index];
+			const elem = editor.getElementByKey(key);
+			if (elem === null) {
+				break;
+			}
+			const zoom = calculateZoomLevel(elem);
+			const point = new Point(event.x / zoom, event.y / zoom);
+			const domRect = Rectangle.fromDOM(elem);
+			const { marginTop, marginBottom } = getCollapsedMargins(elem);
+			const rect = domRect.generateNewRect({
+				bottom: domRect.bottom + marginBottom,
+				left: anchorElementRect.left,
+				right: anchorElementRect.right,
+				top: domRect.top - marginTop,
+			});
+
+			const { result, reason: { isOnTopSide, isOnBottomSide } } = rect.contains(point);
+
+			if (result) {
+				blockElem = elem;
+				prevIndex = index;
+				break;
+			}
+
+			if (direction === Indeterminate) {
+				if (isOnTopSide) {
+					direction = Upward;
+				} else if (isOnBottomSide) {
+					direction = Downward;
+				} else {
+					direction = Infinity;
+				}
+			}
+
+			index += direction;
+		}
+	});
+
+	return blockElem;
+}
+
+function setMenuPosition(targetElem, floatingElem, anchorElem, zoomLevel) {
+	if (!targetElem) {
+		floatingElem.style.display = 'none';
+		return;
+	}
+
+	const targetRect = targetElem.getBoundingClientRect();
+	const targetStyle = window.getComputedStyle(targetElem);
+	const floatingElemRect = floatingElem.getBoundingClientRect();
+	const anchorElementRect = anchorElem.getBoundingClientRect();
+
+	let targetCalculateHeight = parseInt(targetStyle.lineHeight, 10);
+	if (isNaN(targetCalculateHeight)) {
+		targetCalculateHeight = targetRect.bottom - targetRect.top;
+	}
+	const top =
+		(targetRect.top +
+			(targetCalculateHeight - (floatingElemRect.height || targetCalculateHeight)) / 2 -
+			anchorElementRect.top +
+			anchorElem.scrollTop) /
+		zoomLevel;
+
+	const left = SPACE;
+
+	floatingElem.style.display = 'flex';
+	floatingElem.style.opacity = '1';
+	floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
+
+function setDragImage(dataTransfer, draggableBlockElem) {
+	const { transform } = draggableBlockElem.style;
+
+	draggableBlockElem.style.transform = 'translateZ(0)';
+	dataTransfer.setDragImage(draggableBlockElem, 0, 0);
+
+	setTimeout(() => {
+		draggableBlockElem.style.transform = transform;
+	});
+}
+
+function setTargetLine(targetLineElem, targetBlockElem, mouseY, anchorElem) {
+	const { top: targetBlockElemTop, height: targetBlockElemHeight } =
+		targetBlockElem.getBoundingClientRect();
+	const { top: anchorTop, width: anchorWidth } = anchorElem.getBoundingClientRect();
+	const { marginTop, marginBottom } = getCollapsedMargins(targetBlockElem);
+	let lineTop = targetBlockElemTop;
+	if (mouseY >= targetBlockElemTop) {
+		lineTop += targetBlockElemHeight + marginBottom / 2;
+	} else {
+		lineTop -= marginTop / 2;
+	}
+
+	const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT + anchorElem.scrollTop;
+	const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
+
+	targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
+	targetLineElem.style.width = `${anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2}px`;
+	targetLineElem.style.opacity = '.4';
+}
+
+function hideTargetLine(targetLineElem) {
+	if (targetLineElem) {
+		targetLineElem.style.opacity = '0';
+		targetLineElem.style.transform = 'translate(-10000px, -10000px)';
+	}
+}
+
+function DraggableContainer(props) @{
+	<>
+		<div draggable={true} onDragStart={props.onDragStart} onDragEnd={props.onDragEnd}>
+			{props.isEditable ? props.menuComponent : null}
+		</div>
+		{props.targetLineComponent}
+	</>
+}
+
+function useDraggableBlockMenu(
+	editor,
+	anchorElem,
+	menuRef,
+	targetLineRef,
+	isEditable,
+	menuComponent,
+	targetLineComponent,
+	isOnMenu,
+	onElementChanged,
+) {
+	const scrollerElem = getParentElement(anchorElem);
+
+	const isDraggingBlockRef = useRef(false);
+	const [draggableBlockElem, setDraggableBlockElemState] = useState(null);
+
+	const setDraggableBlockElem = useCallback((elem) => {
+		setDraggableBlockElemState(elem);
+		if (onElementChanged) {
+			onElementChanged(elem);
+		}
+	}, [onElementChanged]);
+
+	useEffect(() => {
+		function onMouseMove(event) {
+			const target = getComposedEventTarget(event);
+			if (!isHTMLElement(target)) {
+				setDraggableBlockElem(null);
+				return;
+			}
+
+			if (isOnMenu(target)) {
+				return;
+			}
+
+			const _draggableBlockElem = getBlockElement(anchorElem, editor, event);
+			setDraggableBlockElem(_draggableBlockElem);
+		}
+
+		function onMouseLeave() {
+			setDraggableBlockElem(null);
+		}
+
+		if (scrollerElem != null) {
+			scrollerElem.addEventListener('mousemove', onMouseMove);
+			scrollerElem.addEventListener('mouseleave', onMouseLeave);
+		}
+
+		return () => {
+			if (scrollerElem != null) {
+				scrollerElem.removeEventListener('mousemove', onMouseMove);
+				scrollerElem.removeEventListener('mouseleave', onMouseLeave);
+			}
+		};
+	}, [scrollerElem, anchorElem, editor, isOnMenu, setDraggableBlockElem]);
+
+	useEffect(() => {
+		const zoomLevel = calculateZoomLevel(editor.getRootElement(), true);
+		if (menuRef.current) {
+			setMenuPosition(draggableBlockElem, menuRef.current, anchorElem, zoomLevel);
+		}
+	}, [editor, anchorElem, draggableBlockElem, menuRef]);
+
+	useEffect(() => {
+		function onDragover(event) {
+			if (!isDraggingBlockRef.current) {
+				return false;
+			}
+			const [isFileTransfer] = eventFiles(event);
+			if (isFileTransfer) {
+				return false;
+			}
+			const pageY = event.pageY;
+			const target = getComposedEventTarget(event);
+			if (!isHTMLElement(target)) {
+				return false;
+			}
+			const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
+			const targetLineElem = targetLineRef.current;
+			if (targetBlockElem === null || targetLineElem === null) {
+				return false;
+			}
+			setTargetLine(
+				targetLineElem,
+				targetBlockElem,
+				pageY / calculateZoomLevel(target),
+				anchorElem,
+			);
+			event.preventDefault();
+			return true;
+		}
+
+		function $onDrop(event) {
+			if (!isDraggingBlockRef.current) {
+				return false;
+			}
+			const [isFileTransfer] = eventFiles(event);
+			if (isFileTransfer) {
+				return false;
+			}
+			const { dataTransfer, pageY } = event;
+			const target = getComposedEventTarget(event);
+			const dragData =
+				dataTransfer != null ? dataTransfer.getData(DRAG_DATA_FORMAT) : '';
+			const draggedNode = $getNodeByKey(dragData);
+			if (!draggedNode) {
+				return false;
+			}
+			if (!isHTMLElement(target)) {
+				return false;
+			}
+			const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
+			if (!targetBlockElem) {
+				return false;
+			}
+			const targetNode = $getNearestNodeFromDOMNode(targetBlockElem);
+			if (!targetNode) {
+				return false;
+			}
+			if (targetNode === draggedNode) {
+				if (IS_FIREFOX) {
+					editor.focus();
+				}
+				return true;
+			}
+			const targetBlockElemTop = targetBlockElem.getBoundingClientRect().top;
+			if (pageY / calculateZoomLevel(target) >= targetBlockElemTop) {
+				targetNode.insertAfter(draggedNode);
+			} else {
+				targetNode.insertBefore(draggedNode);
+			}
+			setDraggableBlockElem(null);
+
+			if (IS_FIREFOX) {
+				$onUpdate(() => {
+					editor.focus();
+				});
+			}
+
+			return true;
+		}
+
+		return mergeRegister(
+			editor.registerCommand(
+				DRAGOVER_COMMAND,
+				(event) => {
+					return onDragover(event);
+				},
+				COMMAND_PRIORITY_LOW,
+			),
+			editor.registerCommand(
+				DROP_COMMAND,
+				(event) => {
+					return $onDrop(event);
+				},
+				COMMAND_PRIORITY_HIGH,
+			),
+		);
+	}, [anchorElem, editor, targetLineRef, setDraggableBlockElem]);
+
+	useEffect(() => {
+		if (!IS_FIREFOX || !isEditable) {
+			return;
+		}
+
+		return mergeRegister(
+			editor.registerRootListener((rootElement) => {
+				function onBlur(event) {
+					const relatedTarget = event.relatedTarget;
+					if (isHTMLElement(relatedTarget) && isOnMenu(relatedTarget)) {
+						if (rootElement) {
+							rootElement.focus({ preventScroll: true });
+							editor.update(() => {
+								const selection = $getSelection();
+								if (selection !== null && !selection.dirty) {
+									selection.dirty = true;
+								}
+							});
+						}
+						event.stopImmediatePropagation();
+					}
+				}
+
+				if (rootElement) {
+					rootElement.addEventListener('blur', onBlur, true);
+					return () => rootElement.removeEventListener('blur', onBlur, true);
+				}
+			}),
+			editor.registerCommand(
+				BLUR_COMMAND,
+				() => {
+					const rootElement = editor.getRootElement();
+					const activeElement = getActiveElementDeep(getRootOwnerDocument(rootElement));
+					if (rootElement && isHTMLElement(activeElement) && isOnMenu(activeElement)) {
+						rootElement.focus({ preventScroll: true });
+						editor.update(() => {
+							const selection = $getSelection();
+							if (selection !== null && !selection.dirty) {
+								selection.dirty = true;
+							}
+						});
+						return true;
+					}
+					return false;
+				},
+				COMMAND_PRIORITY_HIGH,
+			),
+		);
+	}, [editor, isEditable, isOnMenu]);
+
+	function onDragStart(event) {
+		const dataTransfer = event.dataTransfer;
+		if (!dataTransfer || !draggableBlockElem) {
+			return;
+		}
+
+		setDragImage(dataTransfer, draggableBlockElem);
+		let nodeKey = '';
+		editor.update(() => {
+			const node = $getNearestNodeFromDOMNode(draggableBlockElem);
+			if (node) {
+				nodeKey = node.getKey();
+			}
+		});
+		isDraggingBlockRef.current = true;
+		dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey);
+
+		if (IS_FIREFOX) {
+			const rootElement = editor.getRootElement();
+			if (rootElement !== null && getActiveElement(rootElement) !== rootElement) {
+				rootElement.focus({ preventScroll: true });
+				editor.update(() => {
+					const selection = $getSelection();
+					if (selection !== null && !selection.dirty) {
+						selection.dirty = true;
+					}
+				});
+			}
+		}
+	}
+
+	function onDragEnd() {
+		isDraggingBlockRef.current = false;
+		hideTargetLine(targetLineRef.current);
+
+		if (IS_FIREFOX) {
+			editor.focus();
+		}
+	}
+
+	return createPortal(DraggableContainer, anchorElem, {
+		onDragStart,
+		onDragEnd,
+		isEditable,
+		menuComponent,
+		targetLineComponent,
+	});
+}
+
+export function DraggableBlockPlugin_EXPERIMENTAL(props) {
+	const anchorElem = props.anchorElem ?? document.body;
+	const [editor] = useLexicalComposerContext();
+	return useDraggableBlockMenu(
+		editor,
+		anchorElem,
+		props.menuRef,
+		props.targetLineRef,
+		editor._editable,
+		props.menuComponent,
+		props.targetLineComponent,
+		props.isOnMenu,
+		props.onElementChanged,
+	);
+}

package/src/LexicalEditorRefPlugin.tsrx

@@ -0,0 +1,19 @@
+// 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 { useEffect } from 'octane';
+
+export function EditorRefPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const editorRef = props.editorRef;
+
+	useEffect(() => {
+		if (typeof editorRef === 'function') {
+			editorRef(editor);
+		} else if (typeof editorRef === 'object' && editorRef !== null) {
+			editorRef.current = editor;
+		}
+	}, [editor]);
+
+	return null;
+}

package/src/LexicalErrorBoundary.tsrx

@@ -0,0 +1,23 @@
+// Ported from @lexical/react/src/LexicalErrorBoundary.tsx. React's class-based
+// boundary becomes octane's <ErrorBoundary> primitive. octane's ErrorBoundary has
+// no `onError` prop, so we route it through the fallback render-prop (invoked with
+// the caught error) — preserving the (error, info) callback Rich/PlainTextPlugin
+// pass for decorator-render failures.
+import { ErrorBoundary } from 'octane';
+
+export function LexicalErrorBoundary(props) @{
+	<ErrorBoundary
+		fallback={(error, _reset) => {
+			if (props.onError) {
+				props.onError(error instanceof Error ? error : new Error(String(error), { cause: error }), {
+					componentStack: '',
+				});
+			}
+			return props.fallback === undefined
+				? <div style={{ border: '1px solid #f00', color: '#f00', padding: '8px' }}>
+						An error was thrown.
+					</div>
+				: (props.fallback);
+		}}
+	>{props.children}</ErrorBoundary>
+}

package/src/LexicalHashtagPlugin.tsrx

@@ -0,0 +1,17 @@
+// Ported from @lexical/react/src/LexicalHashtagPlugin.ts.
+import { HashtagNode, registerLexicalHashtag } from '@lexical/hashtag';
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { useEffect } from 'octane';
+
+export function HashtagPlugin() {
+	const [editor] = useLexicalComposerContext();
+
+	useEffect(() => {
+		if (!editor.hasNodes([HashtagNode])) {
+			throw new Error('HashtagPlugin: HashtagNode not registered on editor');
+		}
+		return registerLexicalHashtag(editor);
+	}, [editor]);
+
+	return null;
+}

package/src/LexicalHistoryPlugin.tsrx

@@ -0,0 +1,23 @@
+// Ported from @lexical/react/src/LexicalHistoryPlugin.ts (+ shared/useHistory.ts
+// inlined — it was a single-use internal hook, so the component's auto-slotted
+// useMemo/useEffect cover it directly).
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { createEmptyHistoryState, registerHistory } from '@lexical/history';
+import { useEffect, useMemo } from 'octane';
+
+export { createEmptyHistoryState } from '@lexical/history';
+
+export function HistoryPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	const externalHistoryState = props.externalHistoryState;
+	const delay =
+		props.delay === undefined ? 1000 : props.delay;
+
+	const historyState = useMemo(() => externalHistoryState || createEmptyHistoryState(), [
+		externalHistoryState,
+	]);
+
+	useEffect(() => registerHistory(editor, historyState, delay), [delay, editor, historyState]);
+
+	return null;
+}

package/src/LexicalHorizontalRuleNode.tsrx

@@ -0,0 +1,99 @@
+// Ported from @lexical/react/src/LexicalHorizontalRuleNode.tsx. The node's
+// decorate() returns a `<HorizontalRuleComponent/>` — at octane value position
+// that lowers to an element descriptor, which the Decorators portal renders into
+// the <hr> element Lexical created. This is the first decorator node, so it
+// exercises the full decorator portal-map.
+import {
+	$isHorizontalRuleNode,
+	HorizontalRuleNode as BaseHorizontalRuleNode,
+	INSERT_HORIZONTAL_RULE_COMMAND,
+} from '@lexical/extension';
+import { useLexicalComposerContext } from './LexicalComposerContext';
+import { useLexicalNodeSelection } from './useLexicalNodeSelection';
+import {
+	$applyNodeReplacement,
+	addClassNamesToElement,
+	CLICK_COMMAND,
+	COMMAND_PRIORITY_LOW,
+	getComposedEventTarget,
+	mergeRegister,
+	removeClassNamesFromElement,
+} from 'lexical';
+import { useEffect } from 'octane';
+
+export { $isHorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/extension';
+
+function HorizontalRuleComponent(props) {
+	const nodeKey = props.nodeKey;
+	const [editor] = useLexicalComposerContext();
+	const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+
+	useEffect(() => {
+		return mergeRegister(
+			editor.registerCommand(
+				CLICK_COMMAND,
+				(event) => {
+					const hrElem = editor.getElementByKey(nodeKey);
+					if (getComposedEventTarget(event) === hrElem) {
+						if (!event.shiftKey) {
+							clearSelection();
+						}
+						setSelected(!isSelected);
+						return true;
+					}
+					return false;
+				},
+				COMMAND_PRIORITY_LOW,
+			),
+		);
+	}, [clearSelection, editor, isSelected, nodeKey, setSelected]);
+
+	useEffect(() => {
+		const hrElem = editor.getElementByKey(nodeKey);
+		const isSelectedClassName = editor._config.theme.hrSelected ?? 'selected';
+		if (hrElem !== null) {
+			if (isSelected) {
+				addClassNamesToElement(hrElem, isSelectedClassName);
+			} else {
+				removeClassNamesFromElement(hrElem, isSelectedClassName);
+			}
+		}
+	}, [editor, isSelected, nodeKey]);
+
+	return null;
+}
+
+export class HorizontalRuleNode extends BaseHorizontalRuleNode {
+	static getType() {
+		return 'horizontalrule';
+	}
+
+	static clone(node) {
+		return new HorizontalRuleNode(node.__key);
+	}
+
+	static importJSON(serializedNode) {
+		return $createHorizontalRuleNode().updateFromJSON(serializedNode);
+	}
+
+	static importDOM() {
+		return {
+			hr: () => ({
+				conversion: $convertHorizontalRuleElement,
+				priority: 0,
+			}),
+		};
+	}
+
+	decorate() {
+		return <HorizontalRuleComponent nodeKey={this.__key} />;
+	}
+}
+
+function $convertHorizontalRuleElement() {
+	return { node: $createHorizontalRuleNode() };
+}
+
+export function $createHorizontalRuleNode() {
+	return $applyNodeReplacement(new HorizontalRuleNode());
+}