@tiptap/react 3.0.0-next.1 → 3.0.0-next.3

package/dist/index.d.ts

@@ -1,22 +1,25 @@
 import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import * as React from 'react';
-import React__default, { DependencyList, ReactNode, HTMLProps, ForwardedRef } from 'react';
-import { EditorOptions, Editor, NodeViewRendererOptions, NodeViewRenderer } from '@tiptap/core';
+import React__default, { DependencyList, ReactNode, HTMLAttributes, HTMLProps, ForwardedRef, ComponentType as ComponentType$1 } from 'react';
+import { EditorOptions, Editor, NodeViewRendererOptions, NodeViewProps, NodeView, NodeViewRenderer } from '@tiptap/core';
 export * from '@tiptap/core';
 import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
 import { Node } from '@tiptap/pm/model';
-import { Decoration } from '@tiptap/pm/view';
+import { Decoration, DecorationSource } from '@tiptap/pm/view';
 
 type Optional$1<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 type BubbleMenuProps = Omit<Optional$1<BubbleMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
     editor: BubbleMenuPluginProps['editor'] | null;
-    className?: string;
-    children: React__default.ReactNode;
     updateDelay?: number;
     resizeDelay?: number;
     options?: BubbleMenuPluginProps['options'];
-};
-declare const BubbleMenu: (props: BubbleMenuProps) => React__default.JSX.Element;
+} & React__default.HTMLAttributes<HTMLDivElement>;
+declare const BubbleMenu: React__default.ForwardRefExoticComponent<Omit<Optional$1<BubbleMenuPluginProps, "pluginKey">, "editor" | "element"> & {
+    editor: BubbleMenuPluginProps["editor"] | null;
+    updateDelay?: number;
+    resizeDelay?: number;
+    options?: BubbleMenuPluginProps["options"];
+} & React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
  * The options for the `useEditor` hook.
@@ -32,7 +35,7 @@ type UseEditorOptions = Partial<EditorOptions> & {
     /**
      * Whether to re-render the editor on each transaction.
      * This is legacy behavior that will be removed in future versions.
-     * @default true
+     * @default false
      */
     shouldRerenderOnTransaction?: boolean;
 };
@@ -44,8 +47,8 @@ type UseEditorOptions = Partial<EditorOptions> & {
  * @example const editor = useEditor({ extensions: [...] })
  */
 declare function useEditor(options: UseEditorOptions & {
-    immediatelyRender: true;
-}, deps?: DependencyList): Editor;
+    immediatelyRender: false;
+}, deps?: DependencyList): Editor | null;
 /**
  * This hook allows you to create an editor instance.
  * @param options The editor options
@@ -53,7 +56,7 @@ declare function useEditor(options: UseEditorOptions & {
  * @returns The editor instance
  * @example const editor = useEditor({ extensions: [...] })
  */
-declare function useEditor(options?: UseEditorOptions, deps?: DependencyList): Editor | null;
+declare function useEditor(options: UseEditorOptions, deps?: DependencyList): Editor;
 
 type EditorContextValue = {
     editor: Editor | null;
@@ -68,13 +71,14 @@ type EditorProviderProps = {
     children?: ReactNode;
     slotBefore?: ReactNode;
     slotAfter?: ReactNode;
+    editorContainerProps?: HTMLAttributes<HTMLDivElement>;
 } & UseEditorOptions;
 /**
  * This is the provider component for the editor.
  * It allows the editor to be accessible across the entire component tree
  * with `useCurrentEditor`.
  */
-declare function EditorProvider({ children, slotAfter, slotBefore, ...editorOptions }: EditorProviderProps): React__default.JSX.Element | null;
+declare function EditorProvider({ children, slotAfter, slotBefore, editorContainerProps, ...editorOptions }: EditorProviderProps): React__default.JSX.Element | null;
 
 interface EditorContentProps extends HTMLProps<HTMLDivElement> {
     editor: Editor | null;
@@ -98,11 +102,12 @@ declare const EditorContent: React__default.MemoExoticComponent<React__default.F
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
     editor: FloatingMenuPluginProps['editor'] | null;
-    className?: string;
-    children: React__default.ReactNode;
     options?: FloatingMenuPluginProps['options'];
-};
-declare const FloatingMenu: (props: FloatingMenuProps) => React__default.JSX.Element;
+} & React__default.HTMLAttributes<HTMLDivElement>;
+declare const FloatingMenu: React__default.ForwardRefExoticComponent<Omit<Optional<FloatingMenuPluginProps, "pluginKey">, "editor" | "element"> & {
+    editor: FloatingMenuPluginProps["editor"] | null;
+    options?: FloatingMenuPluginProps["options"];
+} & React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 
 interface NodeViewContentProps {
     [key: string]: any;
@@ -116,20 +121,6 @@ interface NodeViewWrapperProps {
 }
 declare const NodeViewWrapper: React__default.FC<NodeViewWrapperProps>;
 
-interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
-    update: ((props: {
-        oldNode: Node;
-        oldDecorations: Decoration[];
-        newNode: Node;
-        newDecorations: Decoration[];
-        updateProps: () => void;
-    }) => boolean) | null;
-    as?: string;
-    className?: string;
-    attrs?: Record<string, string>;
-}
-declare function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
-
 interface ReactRendererOptions {
     /**
      * The editor instance.
@@ -155,13 +146,6 @@ interface ReactRendererOptions {
      * @example 'foo bar'
      */
     className?: string;
-    /**
-     * The attributes of the element.
-     * @type {Record<string, string>}
-     * @default {}
-     * @example { 'data-foo': 'bar' }
-     */
-    attrs?: Record<string, string>;
 }
 type ComponentType<R, P> = React__default.ComponentClass<P> | React__default.FunctionComponent<P> | React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<P> & React__default.RefAttributes<R>>;
 /**
@@ -175,19 +159,126 @@ type ComponentType<R, P> = React__default.ComponentClass<P> | React__default.Fun
  *   as: 'span',
  * })
 */
-declare class ReactRenderer<R = unknown, P = unknown> {
+declare class ReactRenderer<R = unknown, P extends Record<string, any> = {}> {
     id: string;
     editor: Editor;
     component: any;
     element: Element;
-    props: Record<string, any>;
+    props: P;
     reactElement: React__default.ReactNode;
     ref: R | null;
-    constructor(component: ComponentType<R, P>, { editor, props, as, className, attrs, }: ReactRendererOptions);
+    /**
+     * Immediately creates element and renders the provided React component.
+     */
+    constructor(component: ComponentType<R, P>, { editor, props, as, className, }: ReactRendererOptions);
+    /**
+     * Render the React component.
+     */
     render(): void;
+    /**
+     * Re-renders the React component with new props.
+     */
     updateProps(props?: Record<string, any>): void;
+    /**
+     * Destroy the React component.
+     */
+    destroy(): void;
+    /**
+     * Update the attributes of the element that holds the React component.
+     */
+    updateAttributes(attributes: Record<string, string>): void;
+}
+
+interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
+    /**
+     * This function is called when the node view is updated.
+     * It allows you to compare the old node with the new node and decide if the component should update.
+     */
+    update: ((props: {
+        oldNode: Node;
+        oldDecorations: readonly Decoration[];
+        oldInnerDecorations: DecorationSource;
+        newNode: Node;
+        newDecorations: readonly Decoration[];
+        innerDecorations: DecorationSource;
+        updateProps: () => void;
+    }) => boolean) | null;
+    /**
+     * The tag name of the element wrapping the React component.
+     */
+    as?: string;
+    /**
+     * The class name of the element wrapping the React component.
+     */
+    className?: string;
+    /**
+     * Attributes that should be applied to the element wrapping the React component.
+     * If this is a function, it will be called each time the node view is updated.
+     * If this is an object, it will be applied once when the node view is mounted.
+     */
+    attrs?: Record<string, string> | ((props: {
+        node: Node;
+        HTMLAttributes: Record<string, any>;
+    }) => Record<string, string>);
+}
+declare class ReactNodeView<Component extends ComponentType$1<NodeViewProps> = ComponentType$1<NodeViewProps>, NodeEditor extends Editor = Editor, Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions> extends NodeView<Component, NodeEditor, Options> {
+    /**
+     * The renderer instance.
+     */
+    renderer: ReactRenderer<unknown, NodeViewProps>;
+    /**
+     * The element that holds the rich-text content of the node.
+     */
+    contentDOMElement: HTMLElement | null;
+    /**
+     * Setup the React component.
+     * Called on initialization.
+     */
+    mount(): void;
+    /**
+     * Return the DOM element.
+     * This is the element that will be used to display the node view.
+     */
+    get dom(): HTMLElement;
+    /**
+     * Return the content DOM element.
+     * This is the element that will be used to display the rich-text content of the node.
+     */
+    get contentDOM(): HTMLElement | null;
+    /**
+     * On editor selection update, check if the node is selected.
+     * If it is, call `selectNode`, otherwise call `deselectNode`.
+     */
+    handleSelectionUpdate(): void;
+    /**
+     * On update, update the React component.
+     * To prevent unnecessary updates, the `update` option can be used.
+     */
+    update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean;
+    /**
+     * Select the node.
+     * Add the `selected` prop and the `ProseMirror-selectednode` class.
+     */
+    selectNode(): void;
+    /**
+     * Deselect the node.
+     * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+     */
+    deselectNode(): void;
+    /**
+     * Destroy the React component instance.
+     */
     destroy(): void;
+    /**
+     * Update the attributes of the top-level element that holds the React component.
+     * Applying the attributes defined in the `attrs` option.
+     */
+    updateElementAttributes(): void;
 }
+/**
+ * Create a React node view renderer.
+ */
+declare function ReactNodeViewRenderer(component: ComponentType$1<NodeViewProps>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
 
 type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
     editor: TEditor;
@@ -204,11 +295,33 @@ type UseEditorStateOptions<TSelectorResult, TEditor extends Editor | null = Edit
     selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult;
     /**
      * A custom equality function to determine if the editor should re-render.
-     * @default `(a, b) => a === b`
+     * @default `deepEqual` from `fast-deep-equal`
      */
     equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean;
 };
+/**
+ * This hook allows you to watch for changes on the editor instance.
+ * It will allow you to select a part of the editor state and re-render the component when it changes.
+ * @example
+ * ```tsx
+ * const editor = useEditor({...options})
+ * const { currentSelection } = useEditorState({
+ *  editor,
+ *  selector: snapshot => ({ currentSelection: snapshot.editor.state.selection }),
+ * })
+ */
 declare function useEditorState<TSelectorResult>(options: UseEditorStateOptions<TSelectorResult, Editor>): TSelectorResult;
+/**
+ * This hook allows you to watch for changes on the editor instance.
+ * It will allow you to select a part of the editor state and re-render the component when it changes.
+ * @example
+ * ```tsx
+ * const editor = useEditor({...options})
+ * const { currentSelection } = useEditorState({
+ *  editor,
+ *  selector: snapshot => ({ currentSelection: snapshot.editor.state.selection }),
+ * })
+ */
 declare function useEditorState<TSelectorResult>(options: UseEditorStateOptions<TSelectorResult, Editor | null>): TSelectorResult | null;
 
 interface ReactNodeViewContextProps {
@@ -218,4 +331,4 @@ interface ReactNodeViewContextProps {
 declare const ReactNodeViewContext: React.Context<Partial<ReactNodeViewContextProps>>;
 declare const useReactNodeView: () => Partial<ReactNodeViewContextProps>;
 
-export { BubbleMenu, type BubbleMenuProps, EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, FloatingMenu, type FloatingMenuProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactNodeViewContext, type ReactNodeViewContextProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+export { BubbleMenu, type BubbleMenuProps, EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, FloatingMenu, type FloatingMenuProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactNodeView, ReactNodeViewContext, type ReactNodeViewContextProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };