@octanejs/tiptap 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/tiptap",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -55,21 +55,21 @@
     "@tiptap/extension-floating-menu": "3.28.0"
   },
   "peerDependencies": {
-    "octane": "0.1.16"
+    "octane": "0.1.18"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@tiptap/react": "3.28.0",
     "@tiptap/starter-kit": "3.28.0",
-    "@tsrx/react": "^0.2.50",
+    "@tsrx/react": "^0.2.54",
     "esbuild": "^0.28.1",
     "playwright": "^1.61.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "vite": "^8.1.5",
     "vitest": "^4.1.10",
-    "@octanejs/testing-library": "0.1.13",
-    "octane": "0.1.16"
+    "@octanejs/testing-library": "0.1.15",
+    "octane": "0.1.18"
   },
   "scripts": {
     "test": "vitest run"

package/src/Context.tsrx

@@ -1,13 +1,32 @@
 // Ported from @tiptap/react 3.28.0 Context.tsx. Octane contexts intentionally
 // have no `.Consumer`; the compatibility component below implements the same
 // render-prop contract with useContext instead.
-import { isChildrenBlock, useMemo } from 'octane';
+import { isChildrenBlock, useMemo, type OctaneNode } from 'octane';
 
-import { EditorContext, useCurrentEditor } from './Context';
-import { EditorContent } from './EditorContent.tsrx';
-import { useEditor } from './useEditor';
+import { EditorContext, useCurrentEditor, type EditorContextValue } from './Context';
+import { EditorContent, type EditorContentProps } from './EditorContent.tsrx';
+import { useEditor, type UseEditorOptions } from './useEditor';
 
-export function EditorConsumer(props) {
+export interface EditorConsumerProps {
+	children: (value: EditorContextValue) => OctaneNode;
+}
+
+export type EditorContainerProps =
+	Omit<EditorContentProps, 'editor' | 'innerRef' | 'ref'> & {
+		editor?: never;
+		innerRef?: never;
+		ref?: never;
+	};
+
+export type EditorProviderProps =
+	UseEditorOptions & {
+		children?: OctaneNode;
+		slotBefore?: OctaneNode;
+		slotAfter?: OctaneNode;
+		editorContainerProps?: EditorContainerProps;
+	};
+
+export function EditorConsumer(props: EditorConsumerProps): OctaneNode {
 	const value = useCurrentEditor();
 	const children = props.children;
 
@@ -21,7 +40,7 @@ export function EditorConsumer(props) {
 /**
  * Create an editor and expose it to descendants through the legacy context.
  */
-export function EditorProvider(props) @{
+export function EditorProvider(props: EditorProviderProps) @{
 	const { children, slotAfter, slotBefore, editorContainerProps = {}, ...editorOptions } = props;
 	const editor = useEditor(editorOptions);
 	const contextValue = useMemo(() => ({ editor }), [editor]);
@@ -33,8 +52,8 @@ export function EditorProvider(props) @{
 	<EditorContext.Provider value={contextValue}>
 		{slotBefore}
 		<EditorConsumer>
-			{({ editor: currentEditor }) =>
-				<EditorContent editor={currentEditor} {...editorContainerProps} />}
+			{({ editor: currentEditor }: EditorContextValue) =>
+				<EditorContent {...editorContainerProps} editor={currentEditor} />}
 		</EditorConsumer>
 		{children}
 		{slotAfter}

package/src/Context.tsrx.d.ts

@@ -1,9 +1,12 @@
+import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
+
 import type { EditorContentProps } from './EditorContent.tsrx';
 import type { EditorContextValue } from './Context';
 import type { UseEditorOptions } from './useEditor';
 
 export interface EditorConsumerProps {
-	children: (value: EditorContextValue) => unknown;
+	children: (value: EditorContextValue) => OctaneNode;
 }
 
 export type EditorContainerProps = Omit<EditorContentProps, 'editor' | 'innerRef' | 'ref'> & {
@@ -13,11 +16,11 @@ export type EditorContainerProps = Omit<EditorContentProps, 'editor' | 'innerRef
 };
 
 export type EditorProviderProps = UseEditorOptions & {
-	children?: unknown;
-	slotBefore?: unknown;
-	slotAfter?: unknown;
+	children?: OctaneNode;
+	slotBefore?: OctaneNode;
+	slotAfter?: OctaneNode;
 	editorContainerProps?: EditorContainerProps;
 };
 
-export declare function EditorConsumer(props: EditorConsumerProps): unknown;
-export declare function EditorProvider(props: EditorProviderProps): unknown;
+export declare function EditorConsumer(props: EditorConsumerProps): OctaneNode;
+export declare function EditorProvider(props: EditorProviderProps): Octane.JSX.Element | null;

package/src/EditorContent.tsrx

@@ -1,7 +1,9 @@
 // DOM lifecycle and portal-registry bridge ported from @tiptap/react 3.28.0.
+import type { Editor } from '@tiptap/core';
 import {
 	createPortal,
 	memo,
+	type OctaneNode,
 	useLayoutEffect,
 	useMemo,
 	useRef,
@@ -9,12 +11,30 @@ import {
 	useSyncExternalStore,
 } from 'octane';
 
-function PortalEntry({ entry }) {
+import type {
+	ContentComponent,
+	EditorWithContentComponent,
+	RendererPortalEntry,
+	RendererPortalSnapshot,
+} from './Editor';
+
+export type EditorContentRef<T> =
+	{ current: T | null } | ((value: T | null) => void | (() => void)) | null;
+
+export interface EditorContentProps {
+	editor: Editor | null;
+	ref?: EditorContentRef<HTMLDivElement>;
+	innerRef?: EditorContentRef<HTMLDivElement>;
+	children?: OctaneNode;
+	[key: string]: unknown;
+}
+
+function PortalEntry({ entry }: { entry: RendererPortalEntry }) {
 	return entry.portal;
 }
 
 /** Render every custom view in this EditorContent's logical Octane tree. */
-function Portals({ contentComponent }) @{
+function Portals({ contentComponent }: { contentComponent: ContentComponent }) @{
 	const renderers = useSyncExternalStore(
 		contentComponent.subscribe,
 		contentComponent.getSnapshot,
@@ -30,9 +50,9 @@ function Portals({ contentComponent }) @{
 }
 
 /** Create the immutable external-store registry consumed by Portals. */
-export function createContentComponent() {
-	const subscribers = new Set();
-	let renderers = {};
+export function createContentComponent(): ContentComponent {
+	const subscribers = new Set<() => void>();
+	let renderers: RendererPortalSnapshot = {};
 	let isNotificationQueued = false;
 
 	const notifySubscribers = () => {
@@ -48,17 +68,17 @@ export function createContentComponent() {
 	};
 
 	return {
-		subscribe(callback) {
+		subscribe(callback: () => void): () => void {
 			subscribers.add(callback);
 			return () => subscribers.delete(callback);
 		},
-		getSnapshot() {
+		getSnapshot(): RendererPortalSnapshot {
 			return renderers;
 		},
-		getServerSnapshot() {
+		getServerSnapshot(): RendererPortalSnapshot {
 			return renderers;
 		},
-		setRenderer(id, renderer) {
+		setRenderer(id: string, renderer: Parameters<ContentComponent['setRenderer']>[1]): void {
 			renderers = {
 				...renderers,
 				[id]: {
@@ -68,8 +88,8 @@ export function createContentComponent() {
 			};
 			notifySubscribers();
 		},
-		removeRenderer(id) {
-			const nextRenderers = { ...renderers };
+		removeRenderer(id: string): void {
+			const nextRenderers: Record<string, RendererPortalEntry> = { ...renderers };
 			delete nextRenderers[id];
 			renderers = nextRenderers;
 			notifySubscribers();
@@ -77,10 +97,11 @@ export function createContentComponent() {
 	};
 }
 
-export function PureEditorContent(props) @{
-	const { editor, innerRef, ref, ...rest } = props;
-	const editorContentRef = useRef(null);
-	const [contentComponent, setContentComponent] = useState(null);
+export function PureEditorContent(props: EditorContentProps) @{
+	const { editor: providedEditor, innerRef, ref, ...rest } = props;
+	const editor = providedEditor as EditorWithContentComponent | null;
+	const editorContentRef = useRef<HTMLDivElement | null>(null);
+	const [contentComponent, setContentComponent] = useState<ContentComponent | null>(null);
 
 	useLayoutEffect(() => {
 		if (!editor || editor.isDestroyed || editor.isEditorContentInitialized) {
@@ -139,14 +160,14 @@ export function PureEditorContent(props) @{
 	}, [editor]);
 
 	<>
-		<div {...rest} ref={[ref, innerRef, editorContentRef]} />
+		<div {...rest} ref={[ref ?? null, innerRef ?? null, editorContentRef]} />
 		@if (contentComponent) {
 			<Portals contentComponent={contentComponent} />
 		}
 	</>
 }
 
-function EditorContentWithKey(props) @{
+function EditorContentWithKey(props: EditorContentProps) @{
 	// Remount the host whenever the Editor identity changes, matching the keyed
 	// wrapper in @tiptap/react and preventing one editor from retaining another
 	// editor's managed DOM.

package/src/EditorContent.tsrx.d.ts

@@ -1,4 +1,6 @@
 import type { Editor } from '@tiptap/core';
+import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 
 import type { ContentComponent } from './Editor';
 
@@ -13,10 +15,10 @@ export interface EditorContentProps {
 	editor: Editor | null;
 	ref?: EditorContentRef<HTMLDivElement>;
 	innerRef?: EditorContentRef<HTMLDivElement>;
-	children?: unknown;
+	children?: OctaneNode;
 	[key: string]: unknown;
 }
 
 export declare function createContentComponent(): ContentComponent;
-export declare function PureEditorContent(props: EditorContentProps): unknown;
-export declare const EditorContent: (props: EditorContentProps) => unknown;
+export declare function PureEditorContent(props: EditorContentProps): Octane.JSX.Element;
+export declare const EditorContent: (props: EditorContentProps) => Octane.JSX.Element;

package/src/Tiptap.tsrx

@@ -1,14 +1,43 @@
 // Ported from @tiptap/react 3.28.0 Tiptap.tsx. Refs remain ordinary props in
 // Octane, and the compound Tiptap.Content component needs no forwardRef layer.
-import { createContext, useContext, useMemo } from 'octane';
+import type { Editor } from '@tiptap/core';
+import { createContext, useContext, useMemo, type Context, type OctaneNode } from 'octane';
 
 import { EditorContext } from './Context';
-import { EditorContent } from './EditorContent.tsrx';
+import { EditorContent, type EditorContentProps } from './EditorContent.tsrx';
 import { splitSlot, subSlot } from './internal';
-import { useEditorState } from './useEditorState';
-
-export const TiptapContext = createContext({
-	get editor() {
+import {
+	useEditorState,
+	type EditorStateSnapshot,
+	type UseEditorStateOptions,
+} from './useEditorState';
+
+export type TiptapContextType = {
+	editor: Editor;
+};
+
+export type TiptapWrapperEditorInstanceProps =
+	| {
+			editor: Editor;
+	  }
+	| {
+			/** @deprecated Use `editor` instead. */
+			instance: Editor;
+	  };
+
+export type TiptapWrapperProps =
+	TiptapWrapperEditorInstanceProps & {
+		children: OctaneNode;
+	};
+
+export type TiptapContentProps =
+	Omit<EditorContentProps, 'editor' | 'ref'> & {
+		editor?: never;
+		ref?: never;
+	};
+
+export const TiptapContext: Context<TiptapContextType> & { displayName?: string } = createContext({
+	get editor(): Editor {
 		throw new Error('useTiptap must be used within a <Tiptap> provider');
 	},
 });
@@ -16,19 +45,26 @@ export const TiptapContext = createContext({
 TiptapContext.displayName = 'TiptapContext';
 
 /** Read the editor instance provided by the nearest `Tiptap` component. */
-export function useTiptap() {
+export function useTiptap(): TiptapContextType {
 	return useContext(TiptapContext);
 }
 
 /** Select a reactive slice of editor state from the context editor. */
-export function useTiptapState(selector, ...args) {
+export function useTiptapState<TSelectorResult>(
+	selector: (context: EditorStateSnapshot<Editor>) => TSelectorResult,
+	...args: [equalityFn?: (left: TSelectorResult, right: TSelectorResult | null) => boolean]
+): TSelectorResult {
 	const [userArgs, slot] = splitSlot(args);
-	const equalityFn = userArgs[0];
+	const equalityFn = userArgs[0] as ((left: TSelectorResult, right: | TSelectorResult
+	| null) => boolean) | undefined;
 	const { editor } = useTiptap();
 
 	// Call through a non-hook-named alias because this source is itself compiled:
 	// the public call site's slot is already being forwarded explicitly here.
-	const selectEditorState = useEditorState;
+	const selectEditorState = useEditorState as (options: UseEditorStateOptions<
+		TSelectorResult,
+		Editor
+	>, slot: symbol) => TSelectorResult;
 	return selectEditorState(
 		{
 			editor,
@@ -39,7 +75,7 @@ export function useTiptapState(selector, ...args) {
 	);
 }
 
-export function TiptapWrapper({ children, ...props }) @{
+export function TiptapWrapper({ children, ...props }: TiptapWrapperProps) @{
 	const resolvedEditor =
 		'editor' in props ? props.editor : props.instance;
 
@@ -58,10 +94,10 @@ export function TiptapWrapper({ children, ...props }) @{
 TiptapWrapper.displayName = 'Tiptap';
 
 /** Render EditorContent using the editor supplied by the nearest Tiptap root. */
-export function TiptapContent(props) @{
+export function TiptapContent(props: TiptapContentProps) @{
 	const { editor } = useTiptap();
 
-	<EditorContent editor={editor} {...props} />
+	<EditorContent {...props} editor={editor} />
 }
 
 TiptapContent.displayName = 'Tiptap.Content';

package/src/Tiptap.tsrx.d.ts

@@ -1,5 +1,6 @@
 import type { Editor } from '@tiptap/core';
-import type { Context } from 'octane';
+import type { Context, OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 
 import type { EditorContentProps } from './EditorContent.tsrx';
 import type { EditorStateSnapshot } from './useEditorState';
@@ -30,7 +31,7 @@ export type TiptapWrapperEditorInstanceProps =
 	  };
 
 export type TiptapWrapperProps = TiptapWrapperEditorInstanceProps & {
-	children: unknown;
+	children: OctaneNode;
 };
 
 export type TiptapContentProps = Omit<EditorContentProps, 'editor' | 'ref'> & {
@@ -38,8 +39,8 @@ export type TiptapContentProps = Omit<EditorContentProps, 'editor' | 'ref'> & {
 	ref?: never;
 };
 
-export declare function TiptapWrapper(props: TiptapWrapperProps): unknown;
-export declare function TiptapContent(props: TiptapContentProps): unknown;
+export declare function TiptapWrapper(props: TiptapWrapperProps): Octane.JSX.Element;
+export declare function TiptapContent(props: TiptapContentProps): Octane.JSX.Element;
 
 export declare const Tiptap: typeof TiptapWrapper & {
 	Content: typeof TiptapContent;