@tiptap/react 3.0.0 → 3.0.1

package/dist/packages/react/src/ReactNodeViewRenderer.d.ts

@@ -1,16 +0,0 @@
-import { NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core';
-import { Node as ProseMirrorNode } from '@tiptap/pm/model';
-import { Decoration } from '@tiptap/pm/view';
-export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
-    update: ((props: {
-        oldNode: ProseMirrorNode;
-        oldDecorations: Decoration[];
-        newNode: ProseMirrorNode;
-        newDecorations: Decoration[];
-        updateProps: () => void;
-    }) => boolean) | null;
-    as?: string;
-    className?: string;
-    attrs?: Record<string, string>;
-}
-export declare function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;

package/dist/packages/react/src/ReactRenderer.d.ts

@@ -1,62 +0,0 @@
-import { Editor } from '@tiptap/core';
-import React from 'react';
-import { Editor as ExtendedEditor } from './Editor.js';
-export interface ReactRendererOptions {
-    /**
-     * The editor instance.
-     * @type {Editor}
-     */
-    editor: Editor;
-    /**
-     * The props for the component.
-     * @type {Record<string, any>}
-     * @default {}
-     */
-    props?: Record<string, any>;
-    /**
-     * The tag name of the element.
-     * @type {string}
-     * @default 'div'
-     */
-    as?: string;
-    /**
-     * The class name of the element.
-     * @type {string}
-     * @default ''
-     * @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.ComponentClass<P> | React.FunctionComponent<P> | React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
-/**
- * The ReactRenderer class. It's responsible for rendering React components inside the editor.
- * @example
- * new ReactRenderer(MyComponent, {
- *   editor,
- *   props: {
- *     foo: 'bar',
- *   },
- *   as: 'span',
- * })
-*/
-export declare class ReactRenderer<R = unknown, P = unknown> {
-    id: string;
-    editor: ExtendedEditor;
-    component: any;
-    element: Element;
-    props: Record<string, any>;
-    reactElement: React.ReactNode;
-    ref: R | null;
-    constructor(component: ComponentType<R, P>, { editor, props, as, className, attrs, }: ReactRendererOptions);
-    render(): void;
-    updateProps(props?: Record<string, any>): void;
-    destroy(): void;
-}
-export {};

package/dist/packages/react/src/index.d.ts

@@ -1,13 +0,0 @@
-export * from './BubbleMenu.js';
-export * from './Context.js';
-export { Editor } from './Editor.js';
-export * from './EditorContent.js';
-export * from './FloatingMenu.js';
-export * from './NodeViewContent.js';
-export * from './NodeViewWrapper.js';
-export * from './ReactNodeViewRenderer.js';
-export * from './ReactRenderer.js';
-export * from './useEditor.js';
-export * from './useEditorState.js';
-export * from './useReactNodeView.js';
-export * from '@tiptap/core';

package/dist/packages/react/src/useEditor.d.ts

@@ -1,39 +0,0 @@
-import { EditorOptions } from '@tiptap/core';
-import { DependencyList } from 'react';
-import { Editor } from './Editor.js';
-/**
- * The options for the `useEditor` hook.
- */
-export type UseEditorOptions = Partial<EditorOptions> & {
-    /**
-     * Whether to render the editor on the first render.
-     * If client-side rendering, set this to `true`.
-     * If server-side rendering, set this to `false`.
-     * @default true
-     */
-    immediatelyRender?: boolean;
-    /**
-     * Whether to re-render the editor on each transaction.
-     * This is legacy behavior that will be removed in future versions.
-     * @default true
-     */
-    shouldRerenderOnTransaction?: boolean;
-};
-/**
- * This hook allows you to create an editor instance.
- * @param options The editor options
- * @param deps The dependencies to watch for changes
- * @returns The editor instance
- * @example const editor = useEditor({ extensions: [...] })
- */
-export declare function useEditor(options: UseEditorOptions & {
-    immediatelyRender: true;
-}, deps?: DependencyList): Editor;
-/**
- * This hook allows you to create an editor instance.
- * @param options The editor options
- * @param deps The dependencies to watch for changes
- * @returns The editor instance
- * @example const editor = useEditor({ extensions: [...] })
- */
-export declare function useEditor(options?: UseEditorOptions, deps?: DependencyList): Editor | null;

package/dist/packages/react/src/useEditorState.d.ts

@@ -1,22 +0,0 @@
-import type { Editor } from './Editor.js';
-export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
-    editor: TEditor;
-    transactionNumber: number;
-};
-export type UseEditorStateOptions<TSelectorResult, TEditor extends Editor | null = Editor | null> = {
-    /**
-     * The editor instance.
-     */
-    editor: TEditor;
-    /**
-     * A selector function to determine the value to compare for re-rendering.
-     */
-    selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult;
-    /**
-     * A custom equality function to determine if the editor should re-render.
-     * @default `(a, b) => a === b`
-     */
-    equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean;
-};
-export declare function useEditorState<TSelectorResult>(options: UseEditorStateOptions<TSelectorResult, Editor>): TSelectorResult;
-export declare function useEditorState<TSelectorResult>(options: UseEditorStateOptions<TSelectorResult, Editor | null>): TSelectorResult | null;

package/dist/packages/react/src/useReactNodeView.d.ts

@@ -1,6 +0,0 @@
-export interface ReactNodeViewContextProps {
-    onDragStart: (event: DragEvent) => void;
-    nodeViewContentRef: (element: HTMLElement | null) => void;
-}
-export declare const ReactNodeViewContext: import("react").Context<Partial<ReactNodeViewContextProps>>;
-export declare const useReactNodeView: () => Partial<ReactNodeViewContextProps>;

package/src/BubbleMenu.tsx

@@ -1,57 +0,0 @@
-import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
-import React, { useEffect, useState } from 'react'
-
-import { useCurrentEditor } from './Context.js'
-
-type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-
-export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
-  editor: BubbleMenuPluginProps['editor'] | null;
-  className?: string;
-  children: React.ReactNode;
-  updateDelay?: number;
-};
-
-export const BubbleMenu = (props: BubbleMenuProps) => {
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const { editor: currentEditor } = useCurrentEditor()
-
-  useEffect(() => {
-    if (!element) {
-      return
-    }
-
-    if (props.editor?.isDestroyed || currentEditor?.isDestroyed) {
-      return
-    }
-
-    const {
-      pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null,
-    } = props
-
-    const menuEditor = editor || currentEditor
-
-    if (!menuEditor) {
-      console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')
-      return
-    }
-
-    const plugin = BubbleMenuPlugin({
-      updateDelay,
-      editor: menuEditor,
-      element,
-      pluginKey,
-      shouldShow,
-      tippyOptions,
-    })
-
-    menuEditor.registerPlugin(plugin)
-    return () => menuEditor.unregisterPlugin(pluginKey)
-  }, [props.editor, currentEditor, element])
-
-  return (
-    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
-      {props.children}
-    </div>
-  )
-}

package/src/FloatingMenu.tsx

@@ -1,64 +0,0 @@
-import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
-import React, {
-  useEffect, useState,
-} from 'react'
-
-import { useCurrentEditor } from './Context.js'
-
-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;
-  className?: string,
-  children: React.ReactNode
-}
-
-export const FloatingMenu = (props: FloatingMenuProps) => {
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const { editor: currentEditor } = useCurrentEditor()
-
-  useEffect(() => {
-    if (!element) {
-      return
-    }
-
-    if (props.editor?.isDestroyed || currentEditor?.isDestroyed) {
-      return
-    }
-
-    const {
-      pluginKey = 'floatingMenu',
-      editor,
-      tippyOptions = {},
-      shouldShow = null,
-    } = props
-
-    const menuEditor = editor || currentEditor
-
-    if (!menuEditor) {
-      console.warn('FloatingMenu component is not rendered inside of an editor component or does not have editor prop.')
-      return
-    }
-
-    const plugin = FloatingMenuPlugin({
-      pluginKey,
-      editor: menuEditor,
-      element,
-      tippyOptions,
-      shouldShow,
-    })
-
-    menuEditor.registerPlugin(plugin)
-    return () => menuEditor.unregisterPlugin(pluginKey)
-  }, [
-    props.editor,
-    currentEditor,
-    element,
-  ])
-
-  return (
-    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
-      {props.children}
-    </div>
-  )
-}