@tiptap/react 2.5.9 → 3.0.0-next.0

package/dist/packages/extension-floating-menu/src/floating-menu-plugin.d.ts

@@ -1,7 +1,7 @@
+import { type ArrowOptions, type AutoPlacementOptions, type FlipOptions, type HideOptions, type InlineOptions, type OffsetOptions, type Placement, type ShiftOptions, type SizeOptions, type Strategy } from '@floating-ui/dom';
 import { Editor } from '@tiptap/core';
 import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
-import { Instance, Props } from 'tippy.js';
 export interface FloatingMenuPluginProps {
     /**
      * The plugin key for the floating menu.
@@ -18,23 +18,33 @@ export interface FloatingMenuPluginProps {
      * @default null
      */
     element: HTMLElement;
-    /**
-     * The options for the tippy instance.
-     * @default {}
-     * @see https://atomiks.github.io/tippyjs/v6/all-props/
-     */
-    tippyOptions?: Partial<Props>;
     /**
      * A function that determines whether the menu should be shown or not.
      * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
-     * @default null
      */
-    shouldShow?: ((props: {
+    shouldShow: ((props: {
         editor: Editor;
         view: EditorView;
         state: EditorState;
         oldState?: EditorState;
+        from: number;
+        to: number;
     }) => boolean) | null;
+    /**
+   * FloatingUI options.
+   */
+    options?: {
+        strategy?: Strategy;
+        placement?: Placement;
+        offset?: OffsetOptions | boolean;
+        flip?: FlipOptions | boolean;
+        shift?: ShiftOptions | boolean;
+        arrow?: ArrowOptions | false;
+        size?: SizeOptions | boolean;
+        autoPlacement?: AutoPlacementOptions | boolean;
+        hide?: HideOptions | boolean;
+        inline?: InlineOptions | boolean;
+    };
 }
 export type FloatingMenuViewProps = FloatingMenuPluginProps & {
     /**
@@ -47,17 +57,22 @@ export declare class FloatingMenuView {
     element: HTMLElement;
     view: EditorView;
     preventHide: boolean;
-    tippy: Instance | undefined;
-    tippyOptions?: Partial<Props>;
     shouldShow: Exclude<FloatingMenuPluginProps['shouldShow'], null>;
-    constructor({ editor, element, view, tippyOptions, shouldShow, }: FloatingMenuViewProps);
+    private floatingUIOptions;
+    get middlewares(): {
+        name: string;
+        options?: any;
+        fn: (state: import("@floating-ui/dom").MiddlewareState) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
+    }[];
+    constructor({ editor, element, view, options, shouldShow, }: FloatingMenuViewProps);
+    getShouldShow(oldState?: EditorState): boolean;
+    updateHandler: (view: EditorView, selectionChanged: boolean, docChanged: boolean, oldState?: EditorState) => void;
     mousedownHandler: () => void;
     focusHandler: () => void;
     blurHandler: ({ event }: {
         event: FocusEvent;
     }) => void;
-    tippyBlurHandler: (event: FocusEvent) => void;
-    createTooltip(): void;
+    updatePosition(): void;
     update(view: EditorView, oldState?: EditorState): void;
     show(): void;
     hide(): void;

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

@@ -6,6 +6,8 @@ export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>,
     className?: string;
     children: React.ReactNode;
     updateDelay?: number;
+    resizeDelay?: number;
+    options?: BubbleMenuPluginProps['options'];
 };
 export declare const BubbleMenu: (props: BubbleMenuProps) => React.JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKe
     editor: FloatingMenuPluginProps['editor'] | null;
     className?: string;
     children: React.ReactNode;
+    options?: FloatingMenuPluginProps['options'];
 };
 export declare const FloatingMenu: (props: FloatingMenuProps) => React.JSX.Element;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "2.5.9",
+  "version": "3.0.0-next.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -29,22 +29,22 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.5.9",
-    "@tiptap/extension-floating-menu": "^2.5.9",
+    "@tiptap/extension-bubble-menu": "^3.0.0-next.0",
+    "@tiptap/extension-floating-menu": "^3.0.0-next.0",
     "@types/use-sync-external-store": "^0.0.6",
     "use-sync-external-store": "^1.2.2"
   },
   "devDependencies": {
-    "@tiptap/core": "^2.5.9",
-    "@tiptap/pm": "^2.5.9",
+    "@tiptap/core": "^3.0.0-next.0",
+    "@tiptap/pm": "^3.0.0-next.0",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "peerDependencies": {
-    "@tiptap/core": "^2.5.9",
-    "@tiptap/pm": "^2.5.9",
+    "@tiptap/core": "^3.0.0-next.0",
+    "@tiptap/pm": "^3.0.0-next.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

package/src/BubbleMenu.tsx

@@ -1,5 +1,6 @@
 import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 
 import { useCurrentEditor } from './Context.js'
 
@@ -10,23 +11,24 @@ export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>,
   className?: string;
   children: React.ReactNode;
   updateDelay?: number;
+  resizeDelay?: number;
+  options?: BubbleMenuPluginProps['options'];
 };
 
 export const BubbleMenu = (props: BubbleMenuProps) => {
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const menuEl = useRef(document.createElement('div'))
   const { editor: currentEditor } = useCurrentEditor()
 
   useEffect(() => {
-    if (!element) {
-      return
-    }
+    menuEl.current.style.visibility = 'hidden'
+    menuEl.current.style.position = 'absolute'
 
     if (props.editor?.isDestroyed || currentEditor?.isDestroyed) {
       return
     }
 
     const {
-      pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null,
+      pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null,
     } = props
 
     const menuEditor = editor || currentEditor
@@ -38,20 +40,35 @@ export const BubbleMenu = (props: BubbleMenuProps) => {
 
     const plugin = BubbleMenuPlugin({
       updateDelay,
+      resizeDelay,
       editor: menuEditor,
-      element,
+      element: menuEl.current,
       pluginKey,
       shouldShow,
-      tippyOptions,
+      options: props.options,
     })
 
     menuEditor.registerPlugin(plugin)
-    return () => menuEditor.unregisterPlugin(pluginKey)
-  }, [props.editor, currentEditor, element])
 
-  return (
-    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
+    return () => {
+      menuEditor.unregisterPlugin(pluginKey)
+      window.requestAnimationFrame(() => {
+        if (menuEl.current.parentNode) {
+          menuEl.current.parentNode.removeChild(menuEl.current)
+        }
+      })
+    }
+  }, [props.editor, currentEditor])
+
+  const portal = createPortal(
+    (
+    <div className={props.className}>
       {props.children}
     </div>
+    ), menuEl.current,
+  )
+
+  return (
+    <>{portal}</>
   )
 }

package/src/FloatingMenu.tsx

@@ -1,7 +1,8 @@
 import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 import React, {
-  useEffect, useState,
+  useEffect, useRef,
 } from 'react'
+import { createPortal } from 'react-dom'
 
 import { useCurrentEditor } from './Context.js'
 
@@ -11,16 +12,16 @@ export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKe
   editor: FloatingMenuPluginProps['editor'] | null;
   className?: string,
   children: React.ReactNode
+  options?: FloatingMenuPluginProps['options']
 }
 
 export const FloatingMenu = (props: FloatingMenuProps) => {
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const menuEl = useRef(document.createElement('div'))
   const { editor: currentEditor } = useCurrentEditor()
 
   useEffect(() => {
-    if (!element) {
-      return
-    }
+    menuEl.current.style.visibility = 'hidden'
+    menuEl.current.style.position = 'absolute'
 
     if (props.editor?.isDestroyed || currentEditor?.isDestroyed) {
       return
@@ -29,7 +30,7 @@ export const FloatingMenu = (props: FloatingMenuProps) => {
     const {
       pluginKey = 'floatingMenu',
       editor,
-      tippyOptions = {},
+      options,
       shouldShow = null,
     } = props
 
@@ -43,22 +44,34 @@ export const FloatingMenu = (props: FloatingMenuProps) => {
     const plugin = FloatingMenuPlugin({
       pluginKey,
       editor: menuEditor,
-      element,
-      tippyOptions,
+      element: menuEl.current,
+      options,
       shouldShow,
     })
 
     menuEditor.registerPlugin(plugin)
-    return () => menuEditor.unregisterPlugin(pluginKey)
+    return () => {
+      menuEditor.unregisterPlugin(pluginKey)
+      window.requestAnimationFrame(() => {
+        if (menuEl.current.parentNode) {
+          menuEl.current.parentNode.removeChild(menuEl.current)
+        }
+      })
+    }
   }, [
     props.editor,
     currentEditor,
-    element,
   ])
 
-  return (
-    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
+  const portal = createPortal(
+    (
+    <div className={props.className}>
       {props.children}
     </div>
+    ), menuEl.current,
+  )
+
+  return (
+    <>{portal}</>
   )
 }

package/src/useEditor.ts

@@ -1,13 +1,8 @@
 import { EditorOptions } from '@tiptap/core'
 import {
-  DependencyList,
-  MutableRefObject,
-  useDebugValue,
-  useEffect,
-  useRef,
-  useState,
+  DependencyList, MutableRefObject,
+  useDebugValue, useEffect, useRef, useState,
 } from 'react'
-import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
 import { Editor } from './Editor.js'
 import { useEditorState } from './useEditorState.js'
@@ -36,69 +31,55 @@ export type UseEditorOptions = Partial<EditorOptions> & {
 };
 
 /**
- * This class handles the creation, destruction, and re-creation of the editor instance.
+ * Create a new editor instance. And attach event listeners.
  */
-class EditorInstanceManager {
-  /**
-   * The current editor instance.
-   */
-  private editor: Editor | null = null
-
-  /**
-   * The most recent options to apply to the editor.
-   */
-  private options: MutableRefObject<UseEditorOptions>
-
-  /**
-   * The subscriptions to notify when the editor instance
-   * has been created or destroyed.
-   */
-  private subscriptions = new Set<() => void>()
-
-  /**
-   * A timeout to destroy the editor if it was not mounted within a time frame.
-   */
-  private scheduledDestructionTimeout: ReturnType<typeof setTimeout> | undefined
-
-  /**
-   * Whether the editor has been mounted.
-   */
-  private isComponentMounted = false
-
-  /**
-   * The most recent dependencies array.
-   */
-  private previousDeps: DependencyList | null = null
-
-  /**
-   * The unique instance ID. This is used to identify the editor instance. And will be re-generated for each new instance.
-   */
-  public instanceId = ''
-
-  constructor(options: MutableRefObject<UseEditorOptions>) {
-    this.options = options
-    this.subscriptions = new Set<() => void>()
-    this.setEditor(this.getInitialEditor())
+function createEditor(options: MutableRefObject<UseEditorOptions>): Editor {
+  const editor = new Editor(options.current)
+
+  editor.on('beforeCreate', (...args) => options.current.onBeforeCreate?.(...args))
+  editor.on('blur', (...args) => options.current.onBlur?.(...args))
+  editor.on('create', (...args) => options.current.onCreate?.(...args))
+  editor.on('destroy', (...args) => options.current.onDestroy?.(...args))
+  editor.on('focus', (...args) => options.current.onFocus?.(...args))
+  editor.on('selectionUpdate', (...args) => options.current.onSelectionUpdate?.(...args))
+  editor.on('transaction', (...args) => options.current.onTransaction?.(...args))
+  editor.on('update', (...args) => options.current.onUpdate?.(...args))
+  editor.on('contentError', (...args) => options.current.onContentError?.(...args))
 
-    this.getEditor = this.getEditor.bind(this)
-    this.getServerSnapshot = this.getServerSnapshot.bind(this)
-    this.subscribe = this.subscribe.bind(this)
-    this.refreshEditorInstance = this.refreshEditorInstance.bind(this)
-    this.scheduleDestroy = this.scheduleDestroy.bind(this)
-    this.onRender = this.onRender.bind(this)
-    this.createEditor = this.createEditor.bind(this)
-  }
+  return editor
+}
 
-  private setEditor(editor: Editor | null) {
-    this.editor = editor
-    this.instanceId = Math.random().toString(36).slice(2, 9)
+/**
+ * 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 function useEditor(
+  options: UseEditorOptions & { immediatelyRender: true },
+  deps?: DependencyList
+): Editor;
 
-    // Notify all subscribers that the editor instance has been created
-    this.subscriptions.forEach(cb => cb())
-  }
+/**
+ * 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 function useEditor(
+  options?: UseEditorOptions,
+  deps?: DependencyList
+): Editor | null;
 
-  private getInitialEditor() {
-    if (this.options.current.immediatelyRender === undefined) {
+export function useEditor(
+  options: UseEditorOptions = {},
+  deps: DependencyList = [],
+): Editor | null {
+  const mostRecentOptions = useRef(options)
+  const [editor, setEditor] = useState(() => {
+    if (options.immediatelyRender === undefined) {
       if (isSSR || isNext) {
         // TODO in the next major release, we should throw an error here
         if (isDev) {
@@ -116,205 +97,70 @@ class EditorInstanceManager {
       }
 
       // Default to immediately rendering when client-side rendering
-      return this.createEditor()
+      return createEditor(mostRecentOptions)
     }
 
-    if (this.options.current.immediatelyRender && isSSR && isDev) {
+    if (options.immediatelyRender && isSSR && isDev) {
       // Warn in development, to make sure the developer is aware that tiptap cannot be SSR'd, set `immediatelyRender` to `false` to avoid hydration mismatches.
       throw new Error(
         'Tiptap Error: SSR has been detected, and `immediatelyRender` has been set to `true` this is an unsupported configuration that may result in errors, explicitly set `immediatelyRender` to `false` to avoid hydration mismatches.',
       )
     }
 
-    if (this.options.current.immediatelyRender) {
-      return this.createEditor()
+    if (options.immediatelyRender) {
+      return createEditor(mostRecentOptions)
     }
 
     return null
-  }
-
-  /**
-   * Create a new editor instance. And attach event listeners.
-   */
-  private createEditor(): Editor {
-    const editor = new Editor(this.options.current)
-
-    // Always call the most recent version of the callback function by default
-    editor.on('beforeCreate', (...args) => this.options.current.onBeforeCreate?.(...args))
-    editor.on('blur', (...args) => this.options.current.onBlur?.(...args))
-    editor.on('create', (...args) => this.options.current.onCreate?.(...args))
-    editor.on('destroy', (...args) => this.options.current.onDestroy?.(...args))
-    editor.on('focus', (...args) => this.options.current.onFocus?.(...args))
-    editor.on('selectionUpdate', (...args) => this.options.current.onSelectionUpdate?.(...args))
-    editor.on('transaction', (...args) => this.options.current.onTransaction?.(...args))
-    editor.on('update', (...args) => this.options.current.onUpdate?.(...args))
-    editor.on('contentError', (...args) => this.options.current.onContentError?.(...args))
-
-    // no need to keep track of the event listeners, they will be removed when the editor is destroyed
-
-    return editor
-  }
-
-  /**
-   * Get the current editor instance.
-   */
-  getEditor(): Editor | null {
-    return this.editor
-  }
-
-  /**
-   * Always disable the editor on the server-side.
-   */
-  getServerSnapshot(): null {
-    return null
-  }
-
-  /**
-   * Subscribe to the editor instance's changes.
-   */
-  subscribe(onStoreChange: () => void) {
-    this.subscriptions.add(onStoreChange)
+  })
+  const mostRecentEditor = useRef<Editor | null>(editor)
 
-    return () => {
-      this.subscriptions.delete(onStoreChange)
-    }
-  }
+  mostRecentEditor.current = editor
 
-  /**
-   * On each render, we will create, update, or destroy the editor instance.
-   * @param deps The dependencies to watch for changes
-   * @returns A cleanup function
-   */
-  onRender(deps: DependencyList) {
-    // The returned callback will run on each render
-    return () => {
-      this.isComponentMounted = true
-      // Cleanup any scheduled destructions, since we are currently rendering
-      clearTimeout(this.scheduledDestructionTimeout)
-
-      if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
-        // if the editor does exist & deps are empty, we don't need to re-initialize the editor
-        // we can fast-path to update the editor options on the existing instance
-        this.editor.setOptions(this.options.current)
-      } else {
-        // When the editor:
-        // - does not yet exist
-        // - is destroyed
-        // - the deps array changes
-        // We need to destroy the editor instance and re-initialize it
-        this.refreshEditorInstance(deps)
-      }
+  useDebugValue(editor)
 
-      return () => {
-        this.isComponentMounted = false
-        this.scheduleDestroy()
+  // This effect will handle creating/updating the editor instance
+  useEffect(() => {
+    const destroyUnusedEditor = (editorInstance: Editor | null) => {
+      if (editorInstance) {
+        // We need to destroy the editor asynchronously to avoid memory leaks
+        // because the editor instance is still being used in the component.
+
+        setTimeout(() => {
+          // re-use the editor instance if it hasn't been replaced yet
+          // otherwise, asynchronously destroy the old editor instance
+          if (editorInstance !== mostRecentEditor.current && !editorInstance.isDestroyed) {
+            editorInstance.destroy()
+          }
+        })
       }
     }
-  }
-
-  /**
-   * Recreate the editor instance if the dependencies have changed.
-   */
-  private refreshEditorInstance(deps: DependencyList) {
 
-    if (this.editor && !this.editor.isDestroyed) {
-      // Editor instance already exists
-      if (this.previousDeps === null) {
-        // If lastDeps has not yet been initialized, reuse the current editor instance
-        this.previousDeps = deps
-        return
-      }
-      const depsAreEqual = this.previousDeps.length === deps.length
-        && this.previousDeps.every((dep, index) => dep === deps[index])
-
-      if (depsAreEqual) {
-        // deps exist and are equal, no need to recreate
-        return
-      }
-    }
+    let editorInstance = mostRecentEditor.current
 
-    if (this.editor && !this.editor.isDestroyed) {
-      // Destroy the editor instance if it exists
-      this.editor.destroy()
+    if (!editorInstance) {
+      editorInstance = createEditor(mostRecentOptions)
+      setEditor(editorInstance)
+      return () => destroyUnusedEditor(editorInstance)
     }
 
-    this.setEditor(this.createEditor())
-
-    // Update the lastDeps to the current deps
-    this.previousDeps = deps
-  }
-
-  /**
-   * Schedule the destruction of the editor instance.
-   * This will only destroy the editor if it was not mounted on the next tick.
-   * This is to avoid destroying the editor instance when it's actually still mounted.
-   */
-  private scheduleDestroy() {
-    const currentInstanceId = this.instanceId
-    const currentEditor = this.editor
-
-    // Wait a tick to see if the component is still mounted
-    this.scheduledDestructionTimeout = setTimeout(() => {
-      if (this.isComponentMounted && this.instanceId === currentInstanceId) {
-        // If still mounted on the next tick, with the same instanceId, do not destroy the editor
-        if (currentEditor) {
-          // just re-apply options as they might have changed
-          currentEditor.setOptions(this.options.current)
-        }
-        return
-      }
-      if (currentEditor && !currentEditor.isDestroyed) {
-        currentEditor.destroy()
-        if (this.instanceId === currentInstanceId) {
-          this.setEditor(null)
-        }
-      }
-    }, 0)
-  }
-}
-
-/**
- * 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 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 function useEditor(options?: UseEditorOptions, deps?: DependencyList): Editor | null;
+    if (!Array.isArray(deps) || deps.length === 0) {
+      // if the editor does exist & deps are empty, we don't need to re-initialize the editor
+      // we can fast-path to update the editor options on the existing instance
+      editorInstance.setOptions(options)
 
-export function useEditor(
-  options: UseEditorOptions = {},
-  deps: DependencyList = [],
-): Editor | null {
-  const mostRecentOptions = useRef(options)
-
-  mostRecentOptions.current = options
-
-  const [instanceManager] = useState(() => new EditorInstanceManager(mostRecentOptions))
-
-  const editor = useSyncExternalStore(
-    instanceManager.subscribe,
-    instanceManager.getEditor,
-    instanceManager.getServerSnapshot,
-  )
+      return () => destroyUnusedEditor(editorInstance)
+    }
 
-  useDebugValue(editor)
+    // We need to destroy the editor instance and re-initialize it
+    // when the deps array changes
+    editorInstance.destroy()
 
-  // This effect will handle creating/updating the editor instance
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(instanceManager.onRender(deps))
+    // the deps array is used to re-initialize the editor instance
+    editorInstance = createEditor(mostRecentOptions)
+    setEditor(editorInstance)
+    return () => destroyUnusedEditor(editorInstance)
+  }, deps)
 
   // The default behavior is to re-render on each transaction
   // This is legacy behavior that will be removed in future versions