@octanejs/tiptap 0.0.1 → 0.0.4

package/src/ReactNodeViewRenderer.ts

@@ -0,0 +1,353 @@
+import type {
+	DecorationWithType,
+	Editor,
+	NodeViewProps as CoreNodeViewProps,
+	NodeViewRenderer,
+	NodeViewRendererOptions,
+	NodeViewRendererProps,
+} from '@tiptap/core';
+import { getRenderedAttributes, isNodeViewSelected, NodeView } from '@tiptap/core';
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import type {
+	Decoration,
+	DecorationSource,
+	NodeView as ProseMirrorNodeView,
+} from '@tiptap/pm/view';
+import { createElement, memo, type ComponentBody } from 'octane';
+
+import type { EditorWithContentComponent } from './Editor';
+import { ReactRenderer } from './ReactRenderer';
+import { ReactNodeViewContext, type ReactNodeViewContextProps } from './useReactNodeView';
+
+export type ReactNodeViewRef<T> = {
+	current: T | null;
+};
+
+export type ReactNodeViewProps<T = HTMLElement> = CoreNodeViewProps & {
+	ref: ReactNodeViewRef<T>;
+};
+
+export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
+	/** Decide whether and when a custom update should republish component props. */
+	update:
+		| ((props: {
+				oldNode: ProseMirrorNode;
+				oldDecorations: readonly Decoration[];
+				oldInnerDecorations: DecorationSource;
+				newNode: ProseMirrorNode;
+				newDecorations: readonly Decoration[];
+				innerDecorations: DecorationSource;
+				updateProps: () => void;
+		  }) => boolean)
+		| null;
+	/** Wrapper element tag. */
+	as?: string;
+	/** Additional wrapper classes. */
+	className?: string;
+	/** Static wrapper attributes or attributes derived from the current node. */
+	attrs?:
+		| Record<string, string>
+		| ((props: {
+				node: ProseMirrorNode;
+				HTMLAttributes: Record<string, any>;
+		  }) => Record<string, string>);
+}
+
+export class ReactNodeView<
+	T = HTMLElement,
+	Component extends ComponentBody<ReactNodeViewProps<T>> = ComponentBody<ReactNodeViewProps<T>>,
+	NodeEditor extends Editor = Editor,
+	Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions,
+> extends NodeView<Component, NodeEditor, Options> {
+	// Core NodeView invokes mount() from its constructor. These fields are therefore
+	// assigned before derived class field initializers run and must remain type-only,
+	// otherwise native class-field initialization would overwrite the mounted renderer.
+	declare renderer: ReactRenderer<unknown, ReactNodeViewProps<T>>;
+	declare contentDOMElement: HTMLElement | null;
+	selectionRafId: number | null = null;
+	declare private currentPos: number | undefined;
+	declare private cachedExtensionWithSyncedStorage: NodeViewRendererProps['extension'] | null;
+
+	private handlePositionUpdate = () => {
+		const newPos = this.getPos();
+		if (typeof newPos !== 'number' || newPos === this.currentPos) {
+			return;
+		}
+
+		this.currentPos = newPos;
+		this.renderer.updateProps({ getPos: () => this.getPos() });
+
+		if (typeof this.options.attrs === 'function') {
+			this.updateElementAttributes();
+		}
+	};
+
+	constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>) {
+		super(component, props, options);
+
+		if (!this.node.isLeaf) {
+			this.contentDOMElement = document.createElement(
+				this.options.contentDOMElementTag || (this.node.isInline ? 'span' : 'div'),
+			);
+			this.contentDOMElement.dataset.nodeViewContentReact = '';
+			this.contentDOMElement.dataset.nodeViewWrapper = '';
+			this.contentDOMElement.style.whiteSpace = 'inherit';
+
+			// Covers the synchronous portal path. The context ref installed in mount()
+			// covers a portal that commits after this constructor returns.
+			const contentTarget = this.dom.querySelector('[data-node-view-content]');
+			contentTarget?.appendChild(this.contentDOMElement);
+		}
+
+		if (this.options.trackNodeViewPosition) {
+			this.editor.on('update', this.handlePositionUpdate);
+		}
+	}
+
+	/** Expose the editor's current mutable extension storage through the original extension. */
+	get extensionWithSyncedStorage(): NodeViewRendererProps['extension'] {
+		if (!this.cachedExtensionWithSyncedStorage) {
+			const editor = this.editor;
+			const extension = this.extension;
+
+			this.cachedExtensionWithSyncedStorage = new Proxy(extension, {
+				get(target, property, receiver) {
+					if (property === 'storage') {
+						return editor.storage[extension.name as keyof typeof editor.storage] ?? {};
+					}
+					return Reflect.get(target, property, receiver);
+				},
+			});
+		}
+
+		return this.cachedExtensionWithSyncedStorage;
+	}
+
+	/** Create the context-wrapped component renderer. Called by core NodeView. */
+	mount(): void {
+		const componentProps = {
+			editor: this.editor,
+			node: this.node,
+			decorations: this.decorations as DecorationWithType[],
+			innerDecorations: this.innerDecorations,
+			view: this.view,
+			selected: false,
+			extension: this.extensionWithSyncedStorage,
+			HTMLAttributes: this.HTMLAttributes,
+			getPos: () => this.getPos(),
+			updateAttributes: (attributes: Record<string, any> = {}) => this.updateAttributes(attributes),
+			deleteNode: () => this.deleteNode(),
+			ref: { current: null } as ReactNodeViewRef<T>,
+		} satisfies ReactNodeViewProps<T>;
+
+		if (!(this.component as any).displayName) {
+			(this.component as any).displayName =
+				this.extension.name.charAt(0).toUpperCase() + this.extension.name.substring(1);
+		}
+
+		const context: ReactNodeViewContextProps = {
+			onDragStart: this.onDragStart.bind(this),
+			nodeViewContentRef: (element) => {
+				if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
+					element.removeAttribute('data-node-view-wrapper');
+					element.appendChild(this.contentDOMElement);
+				}
+			},
+		};
+		const Component = this.component;
+		const providerBody: ComponentBody<ReactNodeViewProps<T>> = (props) =>
+			createElement(ReactNodeViewContext.Provider, {
+				value: context,
+				children: createElement(Component, props),
+			});
+		const ReactNodeViewProvider = memo(providerBody);
+		(ReactNodeViewProvider as any).displayName = 'ReactNodeView';
+
+		const as = this.options.as || (this.node.isInline ? 'span' : 'div');
+		const { className = '' } = this.options;
+
+		this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
+		this.renderer = new ReactRenderer(ReactNodeViewProvider, {
+			editor: this.editor,
+			props: componentProps,
+			as,
+			className: `node-${this.node.type.name} ${className}`.trim(),
+		});
+
+		this.editor.on('selectionUpdate', this.handleSelectionUpdate);
+		this.updateElementAttributes();
+		this.currentPos = this.getPos();
+	}
+
+	get dom(): HTMLElement {
+		if (
+			this.renderer.element.firstElementChild &&
+			!this.renderer.element.firstElementChild.hasAttribute('data-node-view-wrapper')
+		) {
+			throw new Error('Please use the NodeViewWrapper component for your node view.');
+		}
+
+		return this.renderer.element;
+	}
+
+	get contentDOM(): HTMLElement | null {
+		return this.node.isLeaf ? null : this.contentDOMElement;
+	}
+
+	handleSelectionUpdate(): void {
+		if (this.selectionRafId) {
+			cancelAnimationFrame(this.selectionRafId);
+			this.selectionRafId = null;
+		}
+
+		this.selectionRafId = requestAnimationFrame(() => {
+			this.selectionRafId = null;
+			const pos = this.currentPos;
+			if (typeof pos !== 'number') {
+				return;
+			}
+
+			const selected = isNodeViewSelected({
+				selection: this.editor.state.selection,
+				pos,
+				nodeSize: this.node.nodeSize,
+				selectedOnTextSelection: this.options.selectedOnTextSelection,
+			});
+
+			if (selected) {
+				if (!this.renderer.props.selected) {
+					this.selectNode();
+				}
+			} else if (this.renderer.props.selected) {
+				this.deselectNode();
+			}
+		});
+	}
+
+	update(
+		node: ProseMirrorNode,
+		decorations: readonly Decoration[],
+		innerDecorations: DecorationSource,
+	): boolean {
+		const rerenderComponent = (props?: Record<string, any>) => {
+			this.renderer.updateProps(props);
+			if (typeof this.options.attrs === 'function') {
+				this.updateElementAttributes();
+			}
+		};
+
+		if (node.type !== this.node.type) {
+			return false;
+		}
+
+		if (typeof this.options.update === 'function') {
+			const oldNode = this.node;
+			const oldDecorations = this.decorations;
+			const oldInnerDecorations = this.innerDecorations;
+
+			this.node = node;
+			this.decorations = decorations;
+			this.innerDecorations = innerDecorations;
+			this.currentPos = this.getPos();
+
+			return this.options.update({
+				oldNode,
+				oldDecorations,
+				newNode: node,
+				newDecorations: decorations,
+				oldInnerDecorations,
+				innerDecorations,
+				updateProps: () =>
+					rerenderComponent({
+						node,
+						decorations,
+						innerDecorations,
+						extension: this.extensionWithSyncedStorage,
+					}),
+			});
+		}
+
+		if (node === this.node) {
+			this.node = node;
+			this.decorations = decorations;
+			this.innerDecorations = innerDecorations;
+			return true;
+		}
+
+		this.node = node;
+		this.decorations = decorations;
+		this.innerDecorations = innerDecorations;
+		this.currentPos = this.getPos();
+
+		const extraProps: Record<string, any> = {
+			node,
+			decorations,
+			innerDecorations,
+			extension: this.extensionWithSyncedStorage,
+		};
+
+		if (this.options.trackNodeViewPosition) {
+			extraProps.getPos = () => this.getPos();
+		}
+
+		rerenderComponent(extraProps);
+		return true;
+	}
+
+	selectNode(): void {
+		this.renderer.updateProps({ selected: true });
+		this.renderer.element.classList.add('ProseMirror-selectednode');
+	}
+
+	deselectNode(): void {
+		this.renderer.updateProps({ selected: false });
+		this.renderer.element.classList.remove('ProseMirror-selectednode');
+	}
+
+	destroy(): void {
+		this.renderer.destroy();
+		this.editor.off('selectionUpdate', this.handleSelectionUpdate);
+
+		if (this.options.trackNodeViewPosition) {
+			this.editor.off('update', this.handlePositionUpdate);
+		}
+
+		this.contentDOMElement = null;
+		if (this.selectionRafId) {
+			cancelAnimationFrame(this.selectionRafId);
+			this.selectionRafId = null;
+		}
+	}
+
+	updateElementAttributes(): void {
+		if (!this.options.attrs) {
+			return;
+		}
+
+		let attributes: Record<string, string>;
+		if (typeof this.options.attrs === 'function') {
+			attributes = this.options.attrs({
+				node: this.node,
+				HTMLAttributes: getRenderedAttributes(this.node, this.editor.extensionManager.attributes),
+			});
+		} else {
+			attributes = this.options.attrs;
+		}
+
+		this.renderer.updateAttributes(attributes);
+	}
+}
+
+/** Create a TipTap node-view renderer backed by an Octane portal. */
+export function ReactNodeViewRenderer<T = HTMLElement>(
+	component: ComponentBody<ReactNodeViewProps<T>>,
+	options?: Partial<ReactNodeViewRendererOptions>,
+): NodeViewRenderer {
+	return (props) => {
+		if (!(props.editor as EditorWithContentComponent).contentComponent) {
+			return {} as ProseMirrorNodeView;
+		}
+
+		return new ReactNodeView<T>(component, props, options);
+	};
+}

package/src/ReactRenderer.ts

@@ -0,0 +1,128 @@
+import type { Editor } from '@tiptap/core';
+import { createElement, flushSync, type ComponentBody, type ElementDescriptor } from 'octane';
+
+import type { EditorWithContentComponent } from './Editor';
+
+export interface ReactRendererOptions {
+	/** The editor instance that owns this renderer. */
+	editor: Editor;
+	/** Initial component props. */
+	props?: Record<string, any>;
+	/** Wrapper element tag. @default 'div' */
+	as?: string;
+	/** Additional wrapper classes. */
+	className?: string;
+}
+
+type RendererProps<R> = Record<string, any> & {
+	ref?: ((value: R | null) => void) | { current: R | null } | null;
+};
+
+/**
+ * Renders an Octane component into a ProseMirror-owned wrapper through the
+ * EditorContent portal registry. The React-prefixed name is retained for
+ * compatibility with TipTap extensions that only swap their binding import.
+ */
+export class ReactRenderer<R = unknown, P extends Record<string, any> = object> {
+	id: string;
+	editor: EditorWithContentComponent;
+	component: ComponentBody<P>;
+	element: HTMLElement;
+	props: P;
+	reactElement!: ElementDescriptor<P>;
+	ref: R | null = null;
+	destroyed = false;
+
+	constructor(
+		component: ComponentBody<P>,
+		{ editor, props = {}, as = 'div', className = '' }: ReactRendererOptions,
+	) {
+		this.id = Math.floor(Math.random() * 0xffffffff).toString();
+		this.component = component;
+		this.editor = editor as EditorWithContentComponent;
+		this.props = props as P;
+		this.element = document.createElement(as);
+		this.element.classList.add('react-renderer');
+
+		if (className) {
+			this.element.classList.add(...className.split(' '));
+		}
+
+		if (this.editor.isEditorContentInitialized) {
+			flushSync(() => this.render());
+		} else {
+			queueMicrotask(() => {
+				if (!this.destroyed) {
+					this.render();
+				}
+			});
+		}
+	}
+
+	/** Publish the current component descriptor to EditorContent. */
+	render(): void {
+		if (this.destroyed) {
+			return;
+		}
+
+		const elementProps = { ...this.props } as P & RendererProps<R>;
+
+		// Octane follows React 19's ordinary-ref-prop model. Components that receive
+		// a caller-owned ref keep it; otherwise expose their forwarded value here.
+		if (!elementProps.ref) {
+			elementProps.ref = (value: R | null) => {
+				this.ref = value;
+			};
+		}
+
+		this.reactElement = createElement(this.component, elementProps as P);
+		this.editor.contentComponent?.setRenderer(this.id, this);
+	}
+
+	/** Merge changed props and publish a fresh descriptor. */
+	updateProps(props: Record<string, any> = {}): void {
+		if (this.destroyed) {
+			return;
+		}
+
+		let changed = false;
+		const keys = Object.keys(props);
+
+		for (let index = 0; index < keys.length; index += 1) {
+			const key = keys[index];
+			if (props[key] !== this.props[key]) {
+				changed = true;
+				break;
+			}
+		}
+
+		if (!changed) {
+			return;
+		}
+
+		this.props = {
+			...this.props,
+			...props,
+		};
+		this.render();
+	}
+
+	/** Unregister the portal and release any ProseMirror-mounted wrapper. */
+	destroy(): void {
+		this.destroyed = true;
+		this.editor.contentComponent?.removeRenderer(this.id);
+
+		try {
+			this.element.parentNode?.removeChild(this.element);
+		} catch {
+			// ProseMirror may already have detached the wrapper.
+		}
+	}
+
+	/** Apply attributes to the ProseMirror-facing wrapper element. */
+	updateAttributes(attributes: Record<string, string>): void {
+		Object.keys(attributes).forEach((key) => {
+			this.element.setAttribute(key, attributes[key]);
+		});
+	}
+}

package/src/index.ts

@@ -3,7 +3,13 @@
 export * from './Context';
 export * from './Context.tsrx';
 export * from './EditorContent.tsrx';
+export * from './NodeViewContent';
+export * from './NodeViewWrapper';
+export * from './ReactMarkViewRenderer';
+export * from './ReactNodeViewRenderer';
+export * from './ReactRenderer';
 export * from './Tiptap.tsrx';
 export * from './useEditor';
 export * from './useEditorState';
+export * from './useReactNodeView';
 export * from '@tiptap/core';

package/src/menus/BubbleMenu.ts

@@ -0,0 +1,207 @@
+import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
+import type { Editor } from '@tiptap/core';
+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 BubbleMenuProps = Optional<
+	Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>,
+	'editor'
+> &
+	MenuElementProps;
+
+const BUBBLE_MENU_SLOT = Symbol.for('@octanejs/tiptap:menus:BubbleMenu');
+
+function areBubbleMenuPluginPropsEqual(
+	previous: Omit<BubbleMenuPluginProps, 'editor' | 'element'>,
+	next: Omit<BubbleMenuPluginProps, '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.getReferencedVirtualElement === next.getReferencedVirtualElement &&
+		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 BubbleMenu(props: BubbleMenuProps): unknown {
+	const {
+		pluginKey,
+		editor,
+		updateDelay,
+		resizeDelay,
+		appendTo,
+		shouldShow = null,
+		getReferencedVirtualElement,
+		options,
+		children,
+		ref,
+		...restProps
+	} = props;
+	const [menuElement, setMenuElement] = useState<HTMLDivElement | null>(
+		null,
+		subSlot(BUBBLE_MENU_SLOT, 'element'),
+	);
+	const resolvedPluginKeyRef = useRef<PluginKey | string | null>(
+		null,
+		subSlot(BUBBLE_MENU_SLOT, 'plugin-key'),
+	);
+	const registrationRef = useRef(0, subSlot(BUBBLE_MENU_SLOT, 'registration'));
+	const [pluginInitialized, setPluginInitialized] = useState(
+		false,
+		subSlot(BUBBLE_MENU_SLOT, 'initialized'),
+	);
+	const lastAppliedPluginPropsRef = useRef<Omit<
+		BubbleMenuPluginProps,
+		'editor' | 'element'
+	> | null>(null, subSlot(BUBBLE_MENU_SLOT, 'last-applied-plugin-props'));
+
+	if (resolvedPluginKeyRef.current === null) {
+		resolvedPluginKeyRef.current = getAutoPluginKey(pluginKey, 'bubbleMenu');
+	}
+	const resolvedPluginKey = resolvedPluginKeyRef.current;
+
+	useLayoutEffect(
+		() => {
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			setMenuElement(document.createElement('div'));
+		},
+		[],
+		subSlot(BUBBLE_MENU_SLOT, 'mount'),
+	);
+
+	useMenuElementProps(menuElement, restProps, subSlot(BUBBLE_MENU_SLOT, 'element-props'));
+	useMenuElementRef(menuElement, ref, subSlot(BUBBLE_MENU_SLOT, 'element-ref'));
+
+	const { editor: currentEditor } = useCurrentEditor();
+	const pluginEditor: Editor | null = editor || currentEditor;
+	const bubbleMenuPluginProps: Omit<BubbleMenuPluginProps, 'editor' | 'element'> = {
+		updateDelay,
+		resizeDelay,
+		appendTo,
+		pluginKey: resolvedPluginKey,
+		shouldShow,
+		getReferencedVirtualElement,
+		options,
+	};
+	const bubbleMenuPluginPropsRef = useRef(
+		bubbleMenuPluginProps,
+		subSlot(BUBBLE_MENU_SLOT, 'plugin-props'),
+	);
+	bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps;
+
+	useEffect(
+		() => {
+			if (!menuElement || pluginEditor?.isDestroyed) {
+				return;
+			}
+
+			if (!pluginEditor) {
+				console.warn(
+					'BubbleMenu 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 = bubbleMenuPluginPropsRef.current;
+			const plugin = BubbleMenuPlugin({
+				...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(BUBBLE_MENU_SLOT, 'plugin'),
+	);
+
+	useEffect(
+		() => {
+			if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {
+				return;
+			}
+
+			const nextPluginProps = bubbleMenuPluginPropsRef.current;
+			const lastAppliedPluginProps = lastAppliedPluginPropsRef.current;
+
+			if (
+				lastAppliedPluginProps &&
+				areBubbleMenuPluginPropsEqual(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,
+			getReferencedVirtualElement,
+			resolvedPluginKey,
+		],
+		subSlot(BUBBLE_MENU_SLOT, 'options'),
+	);
+
+	return menuElement ? createPortal(children, menuElement) : null;
+}