@octanejs/tiptap 0.0.1 → 0.0.4

package/src/menus/FloatingMenu.ts

@@ -0,0 +1,205 @@
+import type { Editor } from '@tiptap/core';
+import { type FloatingMenuPluginProps, FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
+import type { PluginKey } from '@tiptap/pm/state';
+import { createPortal, useEffect, useLayoutEffect, useRef, useState } from 'octane';
+
+import { useCurrentEditor } from '../Context';
+import { subSlot } from '../internal';
+import { getAutoPluginKey } from './getAutoPluginKey';
+import {
+	type MenuElementProps,
+	useMenuElementProps,
+	useMenuElementRef,
+} from './useMenuElementProps';
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export type FloatingMenuProps = Omit<
+	Optional<FloatingMenuPluginProps, 'pluginKey'>,
+	'element' | 'editor'
+> & {
+	editor: FloatingMenuPluginProps['editor'] | null;
+	options?: FloatingMenuPluginProps['options'];
+} & MenuElementProps;
+
+const FLOATING_MENU_SLOT = Symbol.for('@octanejs/tiptap:menus:FloatingMenu');
+
+function areFloatingMenuPluginPropsEqual(
+	previous: Omit<FloatingMenuPluginProps, 'editor' | 'element'>,
+	next: Omit<FloatingMenuPluginProps, 'editor' | 'element'>,
+): boolean {
+	return (
+		previous.pluginKey === next.pluginKey &&
+		previous.updateDelay === next.updateDelay &&
+		previous.resizeDelay === next.resizeDelay &&
+		previous.appendTo === next.appendTo &&
+		previous.shouldShow === next.shouldShow &&
+		previous.options === next.options
+	);
+}
+
+function scheduleElementRemoval(
+	element: HTMLDivElement,
+	registrationRef: { current: number },
+	registration: number,
+): void {
+	const remove = () => {
+		if (registrationRef.current === registration && element.parentNode) {
+			element.parentNode.removeChild(element);
+		}
+	};
+
+	if (typeof window.requestAnimationFrame === 'function') {
+		window.requestAnimationFrame(remove);
+	} else {
+		setTimeout(remove, 0);
+	}
+}
+
+export function FloatingMenu(props: FloatingMenuProps): unknown {
+	const {
+		pluginKey,
+		editor,
+		updateDelay,
+		resizeDelay,
+		appendTo,
+		shouldShow = null,
+		options,
+		children,
+		ref,
+		...restProps
+	} = props;
+	const [menuElement, setMenuElement] = useState<HTMLDivElement | null>(
+		null,
+		subSlot(FLOATING_MENU_SLOT, 'element'),
+	);
+	const resolvedPluginKeyRef = useRef<PluginKey | string | null>(
+		null,
+		subSlot(FLOATING_MENU_SLOT, 'plugin-key'),
+	);
+	const registrationRef = useRef(0, subSlot(FLOATING_MENU_SLOT, 'registration'));
+	const [pluginInitialized, setPluginInitialized] = useState(
+		false,
+		subSlot(FLOATING_MENU_SLOT, 'initialized'),
+	);
+	const lastAppliedPluginPropsRef = useRef<Omit<
+		FloatingMenuPluginProps,
+		'editor' | 'element'
+	> | null>(null, subSlot(FLOATING_MENU_SLOT, 'last-applied-plugin-props'));
+
+	if (resolvedPluginKeyRef.current === null) {
+		resolvedPluginKeyRef.current = getAutoPluginKey(pluginKey, 'floatingMenu');
+	}
+	const resolvedPluginKey = resolvedPluginKeyRef.current;
+
+	useLayoutEffect(
+		() => {
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			setMenuElement(document.createElement('div'));
+		},
+		[],
+		subSlot(FLOATING_MENU_SLOT, 'mount'),
+	);
+
+	useMenuElementProps(menuElement, restProps, subSlot(FLOATING_MENU_SLOT, 'element-props'));
+	useMenuElementRef(menuElement, ref, subSlot(FLOATING_MENU_SLOT, 'element-ref'));
+
+	const { editor: currentEditor } = useCurrentEditor();
+	const pluginEditor: Editor | null = editor || currentEditor;
+	const floatingMenuPluginProps: Omit<FloatingMenuPluginProps, 'editor' | 'element'> = {
+		updateDelay,
+		resizeDelay,
+		appendTo,
+		pluginKey: resolvedPluginKey,
+		shouldShow,
+		options,
+	};
+	const floatingMenuPluginPropsRef = useRef(
+		floatingMenuPluginProps,
+		subSlot(FLOATING_MENU_SLOT, 'plugin-props'),
+	);
+	floatingMenuPluginPropsRef.current = floatingMenuPluginProps;
+
+	useEffect(
+		() => {
+			if (!menuElement || pluginEditor?.isDestroyed) {
+				return;
+			}
+
+			if (!pluginEditor) {
+				console.warn(
+					'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',
+				);
+				return;
+			}
+
+			menuElement.style.visibility = 'hidden';
+			menuElement.style.position = 'absolute';
+
+			const registeredPluginProps = floatingMenuPluginPropsRef.current;
+			const plugin = FloatingMenuPlugin({
+				...registeredPluginProps,
+				editor: pluginEditor,
+				element: menuElement,
+			});
+			lastAppliedPluginPropsRef.current = registeredPluginProps;
+			pluginEditor.registerPlugin(plugin);
+
+			const createdPluginKey = registeredPluginProps.pluginKey;
+			const registration = registrationRef.current + 1;
+			registrationRef.current = registration;
+			setPluginInitialized(true);
+
+			return () => {
+				setPluginInitialized(false);
+				lastAppliedPluginPropsRef.current = null;
+				pluginEditor.unregisterPlugin(createdPluginKey);
+				scheduleElementRemoval(menuElement, registrationRef, registration);
+			};
+		},
+		[menuElement, pluginEditor],
+		subSlot(FLOATING_MENU_SLOT, 'plugin'),
+	);
+
+	useEffect(
+		() => {
+			if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {
+				return;
+			}
+
+			const nextPluginProps = floatingMenuPluginPropsRef.current;
+			const lastAppliedPluginProps = lastAppliedPluginPropsRef.current;
+
+			if (
+				lastAppliedPluginProps &&
+				areFloatingMenuPluginPropsEqual(lastAppliedPluginProps, nextPluginProps)
+			) {
+				return;
+			}
+
+			pluginEditor.view.dispatch(
+				pluginEditor.state.tr.setMeta(resolvedPluginKey, {
+					type: 'updateOptions',
+					options: nextPluginProps,
+				}),
+			);
+			lastAppliedPluginPropsRef.current = nextPluginProps;
+		},
+		[
+			pluginInitialized,
+			pluginEditor,
+			updateDelay,
+			resizeDelay,
+			shouldShow,
+			options,
+			appendTo,
+			resolvedPluginKey,
+		],
+		subSlot(FLOATING_MENU_SLOT, 'options'),
+	);
+
+	return menuElement ? createPortal(children, menuElement) : null;
+}

package/src/menus/getAutoPluginKey.ts

@@ -0,0 +1,8 @@
+import { PluginKey } from '@tiptap/pm/state';
+
+export function getAutoPluginKey(
+	pluginKey: PluginKey | string | undefined,
+	defaultName: string,
+): PluginKey | string {
+	return pluginKey ?? new PluginKey(defaultName);
+}

package/src/menus/index.ts

@@ -0,0 +1,6 @@
+'use client';
+
+export { BubbleMenu } from './BubbleMenu';
+export type { BubbleMenuProps } from './BubbleMenu';
+export { FloatingMenu } from './FloatingMenu';
+export type { FloatingMenuProps } from './FloatingMenu';

package/src/menus/useMenuElementProps.ts

@@ -0,0 +1,441 @@
+import { normalizeClass, useEffect, useLayoutEffect, useRef } from 'octane';
+
+import { splitSlot, subSlot } from '../internal';
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+type MenuStyleValue = string | number | boolean | null | undefined;
+type MenuStyle = Record<string, MenuStyleValue>;
+type MenuEventHandler<E extends Event = Event> = (event: E) => unknown;
+
+export type MenuElementRef<T> =
+	| { current: T | null }
+	| ((value: T | null) => void | (() => void))
+	| null;
+
+export type MenuElementProps = {
+	children?: unknown;
+	ref?: MenuElementRef<HTMLDivElement>;
+	class?: unknown;
+	className?: unknown;
+	style?: MenuStyle;
+	tabIndex?: number;
+	onBlur?: MenuEventHandler<FocusEvent>;
+	onBlurCapture?: MenuEventHandler<FocusEvent>;
+	onChange?: MenuEventHandler;
+	onChangeCapture?: MenuEventHandler;
+	onClick?: MenuEventHandler<MouseEvent>;
+	onClickCapture?: MenuEventHandler<MouseEvent>;
+	onDoubleClick?: MenuEventHandler<MouseEvent>;
+	onDoubleClickCapture?: MenuEventHandler<MouseEvent>;
+	onFocus?: MenuEventHandler<FocusEvent>;
+	onFocusCapture?: MenuEventHandler<FocusEvent>;
+	onInput?: MenuEventHandler<InputEvent>;
+	onInputCapture?: MenuEventHandler<InputEvent>;
+	onKeyDown?: MenuEventHandler<KeyboardEvent>;
+	onKeyDownCapture?: MenuEventHandler<KeyboardEvent>;
+	onKeyUp?: MenuEventHandler<KeyboardEvent>;
+	onKeyUpCapture?: MenuEventHandler<KeyboardEvent>;
+	onMouseEnter?: MenuEventHandler<MouseEvent>;
+	onMouseLeave?: MenuEventHandler<MouseEvent>;
+	onPointerDown?: MenuEventHandler<PointerEvent>;
+	onPointerDownCapture?: MenuEventHandler<PointerEvent>;
+	[key: string]: unknown;
+};
+
+type MenuNativeListener = (event: Event) => void;
+type MenuEventListenerOptions = {
+	capture?: boolean;
+};
+
+type EventListenerEntry = {
+	eventName: string;
+	listener: MenuNativeListener;
+	options?: MenuEventListenerOptions;
+};
+
+const PLUGIN_MANAGED_STYLE_PROPERTIES = new Set([
+	'left',
+	'opacity',
+	'position',
+	'top',
+	'visibility',
+	'width',
+]);
+
+const UNITLESS_STYLE_PROPERTIES = new Set([
+	'animationIterationCount',
+	'aspectRatio',
+	'borderImageOutset',
+	'borderImageSlice',
+	'borderImageWidth',
+	'columnCount',
+	'columns',
+	'fillOpacity',
+	'flex',
+	'flexGrow',
+	'flexShrink',
+	'fontWeight',
+	'gridArea',
+	'gridColumn',
+	'gridColumnEnd',
+	'gridColumnStart',
+	'gridRow',
+	'gridRowEnd',
+	'gridRowStart',
+	'lineClamp',
+	'lineHeight',
+	'opacity',
+	'order',
+	'orphans',
+	'scale',
+	'stopOpacity',
+	'strokeDasharray',
+	'strokeDashoffset',
+	'strokeMiterlimit',
+	'strokeOpacity',
+	'strokeWidth',
+	'tabSize',
+	'widows',
+	'zIndex',
+	'zoom',
+]);
+
+const ATTRIBUTE_EXCLUSIONS = new Set(['children', 'class', 'className', 'ref', 'style']);
+const DIRECT_PROPERTY_KEYS = new Set(['tabIndex']);
+const FORWARDED_ATTRIBUTE_KEYS = new Set([
+	'accessKey',
+	'autoCapitalize',
+	'contentEditable',
+	'contextMenu',
+	'dir',
+	'draggable',
+	'enterKeyHint',
+	'hidden',
+	'id',
+	'lang',
+	'nonce',
+	'role',
+	'slot',
+	'spellCheck',
+	'tabIndex',
+	'title',
+	'translate',
+]);
+
+const SPECIAL_EVENT_NAMES: Record<string, string> = {
+	Blur: 'focusout',
+	DoubleClick: 'dblclick',
+	Focus: 'focusin',
+	MouseEnter: 'mouseenter',
+	MouseLeave: 'mouseleave',
+};
+
+function isEventProp(key: string, value: unknown): value is MenuEventHandler {
+	return /^on[A-Z]/.test(key) && typeof value === 'function';
+}
+
+function isForwardedAttributeKey(key: string): boolean {
+	return key.startsWith('aria-') || key.startsWith('data-') || FORWARDED_ATTRIBUTE_KEYS.has(key);
+}
+
+function toStylePropertyName(key: string): string {
+	if (key.startsWith('--')) {
+		return key;
+	}
+
+	return key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+function toEventConfig(key: string): {
+	eventName: string;
+	options: MenuEventListenerOptions | undefined;
+} {
+	const useCapture = key.endsWith('Capture');
+	const baseKey = useCapture ? key.slice(0, -7) : key;
+	const eventNameKey = baseKey.slice(2);
+	const eventName = SPECIAL_EVENT_NAMES[eventNameKey] ?? eventNameKey.toLowerCase();
+
+	return {
+		eventName,
+		options: useCapture ? { capture: true } : undefined,
+	};
+}
+
+function isDirectPropertyKey(key: string): boolean {
+	return DIRECT_PROPERTY_KEYS.has(key);
+}
+
+function setDirectProperty(element: HTMLDivElement, key: string, value: unknown): void {
+	if (key === 'tabIndex') {
+		element.tabIndex = Number(value);
+		return;
+	}
+
+	(element as unknown as Record<string, unknown>)[key] = value;
+}
+
+function clearDirectProperty(element: HTMLDivElement, key: string): void {
+	if (key === 'tabIndex') {
+		element.removeAttribute('tabindex');
+		return;
+	}
+
+	const propertyValue = (element as unknown as Record<string, unknown>)[key];
+
+	if (typeof propertyValue === 'boolean') {
+		(element as unknown as Record<string, unknown>)[key] = false;
+		return;
+	}
+
+	if (typeof propertyValue === 'number') {
+		(element as unknown as Record<string, unknown>)[key] = 0;
+		return;
+	}
+
+	(element as unknown as Record<string, unknown>)[key] = '';
+}
+
+function toStyleValue(styleName: string, value: string | number): string {
+	if (
+		typeof value !== 'number' ||
+		value === 0 ||
+		styleName.startsWith('--') ||
+		UNITLESS_STYLE_PROPERTIES.has(styleName)
+	) {
+		return String(value);
+	}
+
+	return `${value}px`;
+}
+
+function removeStyleProperty(element: HTMLDivElement, styleName: string): void {
+	if (PLUGIN_MANAGED_STYLE_PROPERTIES.has(styleName)) {
+		return;
+	}
+
+	element.style.removeProperty(toStylePropertyName(styleName));
+}
+
+function applyStyleProperty(
+	element: HTMLDivElement,
+	styleName: string,
+	value: string | number,
+): void {
+	if (PLUGIN_MANAGED_STYLE_PROPERTIES.has(styleName)) {
+		return;
+	}
+
+	element.style.setProperty(toStylePropertyName(styleName), toStyleValue(styleName, value));
+}
+
+function syncAttributes(
+	element: HTMLDivElement,
+	previousProps: MenuElementProps,
+	nextProps: MenuElementProps,
+): void {
+	const allKeys = new Set([...Object.keys(previousProps), ...Object.keys(nextProps)]);
+
+	allKeys.forEach((key) => {
+		if (
+			ATTRIBUTE_EXCLUSIONS.has(key) ||
+			!isForwardedAttributeKey(key) ||
+			isEventProp(key, previousProps[key]) ||
+			isEventProp(key, nextProps[key])
+		) {
+			return;
+		}
+
+		const previousValue = previousProps[key];
+		const nextValue = nextProps[key];
+
+		if (previousValue === nextValue) {
+			return;
+		}
+
+		if (nextValue == null || nextValue === false) {
+			if (isDirectPropertyKey(key)) {
+				clearDirectProperty(element, key);
+			}
+
+			element.removeAttribute(key);
+			return;
+		}
+
+		if (nextValue === true) {
+			if (isDirectPropertyKey(key)) {
+				setDirectProperty(element, key, true);
+			}
+
+			element.setAttribute(key, '');
+			return;
+		}
+
+		if (isDirectPropertyKey(key)) {
+			setDirectProperty(element, key, nextValue);
+			return;
+		}
+
+		element.setAttribute(key, String(nextValue));
+	});
+}
+
+function syncClassName(
+	element: HTMLDivElement,
+	previousProps: MenuElementProps,
+	nextProps: MenuElementProps,
+): void {
+	const previousClassName = normalizeClass([previousProps.class, previousProps.className]);
+	const nextClassName = normalizeClass([nextProps.class, nextProps.className]);
+
+	if (previousClassName === nextClassName) {
+		return;
+	}
+
+	if (nextClassName) {
+		element.className = nextClassName;
+		return;
+	}
+
+	element.removeAttribute('class');
+}
+
+function syncStyles(
+	element: HTMLDivElement,
+	previousStyle: MenuStyle | undefined,
+	nextStyle: MenuStyle | undefined,
+): void {
+	const oldStyle = previousStyle ?? {};
+	const newStyle = nextStyle ?? {};
+	const allStyleNames = new Set([...Object.keys(oldStyle), ...Object.keys(newStyle)]);
+
+	allStyleNames.forEach((styleName) => {
+		const previousValue = oldStyle[styleName];
+		const nextValue = newStyle[styleName];
+
+		if (previousValue === nextValue) {
+			return;
+		}
+
+		if (nextValue == null || typeof nextValue === 'boolean') {
+			removeStyleProperty(element, styleName);
+			return;
+		}
+
+		applyStyleProperty(element, styleName, nextValue);
+	});
+}
+
+function syncEventListeners(
+	element: HTMLDivElement,
+	previousListeners: EventListenerEntry[],
+	nextProps: MenuElementProps,
+): EventListenerEntry[] {
+	previousListeners.forEach(({ eventName, listener, options }) => {
+		element.removeEventListener(eventName, listener, options);
+	});
+
+	const nextListeners: EventListenerEntry[] = [];
+
+	Object.entries(nextProps).forEach(([key, value]) => {
+		if (!isEventProp(key, value)) {
+			return;
+		}
+
+		const { eventName, options } = toEventConfig(key);
+		const listener: MenuNativeListener = (event) => {
+			// Octane delegates portal-child handlers from this same target. Native
+			// stopPropagation() does not suppress later listeners on the current node,
+			// so honor the delegated child's cancellation before invoking the menu's
+			// logical ancestor handler. Direct events on the menu itself still fire.
+			if (!options?.capture && event.cancelBubble && event.target !== element) {
+				return;
+			}
+
+			value(event);
+		};
+
+		element.addEventListener(eventName, listener, options);
+		nextListeners.push({ eventName, listener, options });
+	});
+
+	return nextListeners;
+}
+
+export function useMenuElementProps(
+	element: HTMLDivElement | null,
+	props: MenuElementProps,
+	...args: unknown[]
+): void {
+	const [, slot] = splitSlot(args);
+	const previousPropsRef = useRef<MenuElementProps>({}, subSlot(slot, 'menu-props:previous'));
+	const previousElementRef = useRef<HTMLDivElement | null>(
+		null,
+		subSlot(slot, 'menu-props:element'),
+	);
+	const listenersRef = useRef<EventListenerEntry[]>([], subSlot(slot, 'menu-props:listeners'));
+
+	useIsomorphicLayoutEffect(
+		() => {
+			if (!element) {
+				return;
+			}
+
+			const previousProps = previousElementRef.current === element ? previousPropsRef.current : {};
+
+			syncClassName(element, previousProps, props);
+			syncStyles(element, previousProps.style, props.style);
+			syncAttributes(element, previousProps, props);
+			listenersRef.current = syncEventListeners(element, listenersRef.current, props);
+			previousPropsRef.current = props;
+			previousElementRef.current = element;
+
+			return () => {
+				listenersRef.current.forEach(({ eventName, listener, options }) => {
+					element.removeEventListener(eventName, listener, options);
+				});
+				listenersRef.current = [];
+			};
+		},
+		[element, props],
+		subSlot(slot, 'menu-props:effect'),
+	);
+}
+
+export function useMenuElementRef(
+	element: HTMLDivElement | null,
+	ref: MenuElementRef<HTMLDivElement> | undefined,
+	...args: unknown[]
+): void {
+	const [, slot] = splitSlot(args);
+
+	useIsomorphicLayoutEffect(
+		() => {
+			if (!element || !ref) {
+				return;
+			}
+
+			if (typeof ref === 'function') {
+				const cleanup = ref(element);
+
+				return () => {
+					if (typeof cleanup === 'function') {
+						cleanup();
+					} else {
+						ref(null);
+					}
+				};
+			}
+
+			ref.current = element;
+
+			return () => {
+				if (ref.current === element) {
+					ref.current = null;
+				}
+			};
+		},
+		[element, ref],
+		subSlot(slot, 'menu-ref:effect'),
+	);
+}

package/src/useEditor.ts

@@ -205,7 +205,20 @@ class EditorInstanceManager {
 		const currentInstanceId = this.instanceId;
 		const currentEditor = this.editor;
 
+		// Re-arming replaces any pending destruction timer so two can never race.
+		clearTimeout(this.scheduledDestructionTimeout);
 		this.scheduledDestructionTimeout = setTimeout(() => {
+			this.scheduledDestructionTimeout = undefined;
+
+			// This timer outlives the owning component by a tick, so it can fire
+			// after the DOM environment the editor lives in is gone (e.g. a test
+			// runner disposing jsdom between files). Touching the editor then would
+			// crash inside prosemirror-view's `window` access, and there is nothing
+			// left to release anyway.
+			if (typeof window === 'undefined') {
+				return;
+			}
+
 			if (this.isComponentMounted && this.instanceId === currentInstanceId) {
 				currentEditor?.setOptions(this.options.current);
 				return;

package/src/useReactNodeView.ts

@@ -0,0 +1,32 @@
+import { createContext, createElement, useContext } from 'octane';
+
+export interface ReactNodeViewContextProps {
+	onDragStart?: (event: DragEvent) => void;
+	nodeViewContentRef?: (element: HTMLElement | null) => void;
+	/** Static-rendered content exposed through NodeViewContent. */
+	nodeViewContentChildren?: unknown;
+}
+
+export const ReactNodeViewContext = createContext<ReactNodeViewContextProps>({
+	onDragStart: () => {},
+	nodeViewContentChildren: undefined,
+	nodeViewContentRef: () => {},
+});
+
+export interface ReactNodeViewContentProviderProps {
+	children: unknown;
+	content: unknown;
+}
+
+/** Supply static node content without creating a live ProseMirror content DOM. */
+export function ReactNodeViewContentProvider({
+	children,
+	content,
+}: ReactNodeViewContentProviderProps): unknown {
+	return createElement(ReactNodeViewContext.Provider, {
+		value: { nodeViewContentChildren: content },
+		children,
+	});
+}
+
+export const useReactNodeView = (): ReactNodeViewContextProps => useContext(ReactNodeViewContext);