@tiptap/react 3.0.0-next.0 → 3.0.0-next.2

package/src/useEditor.ts

@@ -1,10 +1,14 @@
-import { EditorOptions } from '@tiptap/core'
+import { type EditorOptions, Editor } 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'
 
 const isDev = process.env.NODE_ENV !== 'production'
@@ -25,69 +29,83 @@ export 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;
 };
 
 /**
- * Create a new editor instance. And attach event listeners.
+ * This class handles the creation, destruction, and re-creation of the editor instance.
  */
-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))
+class EditorInstanceManager {
+  /**
+   * The current editor instance.
+   */
+  private editor: Editor | null = null
 
-  return editor
-}
+  /**
+   * The most recent options to apply to the editor.
+   */
+  private options: MutableRefObject<UseEditorOptions>
 
-/**
- * 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;
+  /**
+   * The subscriptions to notify when the editor instance
+   * has been created or destroyed.
+   */
+  private subscriptions = new Set<() => void>()
 
-/**
- * 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;
+  /**
+   * A timeout to destroy the editor if it was not mounted within a time frame.
+   */
+  private scheduledDestructionTimeout: ReturnType<typeof setTimeout> | undefined
 
-export function useEditor(
-  options: UseEditorOptions = {},
-  deps: DependencyList = [],
-): Editor | null {
-  const mostRecentOptions = useRef(options)
-  const [editor, setEditor] = useState(() => {
-    if (options.immediatelyRender === 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())
+    this.scheduleDestroy()
+
+    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)
+  }
+
+  private setEditor(editor: Editor | null) {
+    this.editor = editor
+    this.instanceId = Math.random().toString(36).slice(2, 9)
+
+    // Notify all subscribers that the editor instance has been created
+    this.subscriptions.forEach(cb => cb())
+  }
+
+  private getInitialEditor() {
+    if (this.options.current.immediatelyRender === undefined) {
       if (isSSR || isNext) {
-        // TODO in the next major release, we should throw an error here
         if (isDev) {
           /**
            * Throw an error in development, to make sure the developer is aware that tiptap cannot be SSR'd
            * and that they need to set `immediatelyRender` to `false` to avoid hydration mismatches.
            */
-          console.warn(
+          throw new Error(
             'Tiptap Error: SSR has been detected, please set `immediatelyRender` explicitly to `false` to avoid hydration mismatches.',
           )
         }
@@ -97,77 +115,220 @@ export function useEditor(
       }
 
       // Default to immediately rendering when client-side rendering
-      return createEditor(mostRecentOptions)
+      return this.createEditor()
     }
 
-    if (options.immediatelyRender && isSSR && isDev) {
+    if (this.options.current.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 (options.immediatelyRender) {
-      return createEditor(mostRecentOptions)
+    if (this.options.current.immediatelyRender) {
+      return this.createEditor()
     }
 
     return null
-  })
-  const mostRecentEditor = useRef<Editor | null>(editor)
+  }
+
+  /**
+   * Create a new editor instance. And attach event listeners.
+   */
+  private createEditor(): Editor {
+    const optionsToApply: Partial<EditorOptions> = {
+      ...this.options.current,
+      // Always call the most recent version of the callback function by default
+      onBeforeCreate: (...args) => this.options.current.onBeforeCreate?.(...args),
+      onBlur: (...args) => this.options.current.onBlur?.(...args),
+      onCreate: (...args) => this.options.current.onCreate?.(...args),
+      onDestroy: (...args) => this.options.current.onDestroy?.(...args),
+      onFocus: (...args) => this.options.current.onFocus?.(...args),
+      onSelectionUpdate: (...args) => this.options.current.onSelectionUpdate?.(...args),
+      onTransaction: (...args) => this.options.current.onTransaction?.(...args),
+      onUpdate: (...args) => this.options.current.onUpdate?.(...args),
+      onContentError: (...args) => this.options.current.onContentError?.(...args),
+      onDrop: (...args) => this.options.current.onDrop?.(...args),
+      onPaste: (...args) => this.options.current.onPaste?.(...args),
+    }
+    const editor = new Editor(optionsToApply)
 
-  mostRecentEditor.current = editor
+    // no need to keep track of the event listeners, they will be removed when the editor is destroyed
 
-  useDebugValue(editor)
+    return editor
+  }
 
-  // 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()
-          }
+  /**
+   * 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)
+
+    return () => {
+      this.subscriptions.delete(onStoreChange)
+    }
+  }
+
+  /**
+   * 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,
+          editable: this.editor.isEditable,
         })
+      } 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)
+      }
+
+      return () => {
+        this.isComponentMounted = false
+        this.scheduleDestroy()
       }
     }
+  }
+
+  /**
+   * 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])
 
-    let editorInstance = mostRecentEditor.current
+      if (depsAreEqual) {
+        // deps exist and are equal, no need to recreate
+        return
+      }
+    }
 
-    if (!editorInstance) {
-      editorInstance = createEditor(mostRecentOptions)
-      setEditor(editorInstance)
-      return () => destroyUnusedEditor(editorInstance)
+    if (this.editor && !this.editor.isDestroyed) {
+      // Destroy the editor instance if it exists
+      this.editor.destroy()
     }
 
-    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)
+    this.setEditor(this.createEditor())
 
-      return () => destroyUnusedEditor(editorInstance)
-    }
+    // Update the lastDeps to the current deps
+    this.previousDeps = deps
+  }
 
-    // We need to destroy the editor instance and re-initialize it
-    // when the deps array changes
-    editorInstance.destroy()
+  /**
+   * 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
 
-    // the deps array is used to re-initialize the editor instance
-    editorInstance = createEditor(mostRecentOptions)
-    setEditor(editorInstance)
-    return () => destroyUnusedEditor(editorInstance)
-  }, deps)
+    // Wait two ticks to see if the component is still mounted
+    this.scheduledDestructionTimeout = setTimeout(() => {
+      if (this.isComponentMounted && this.instanceId === currentInstanceId) {
+        // If still mounted on the following 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)
+        }
+      }
+      // This allows the effect to run again between ticks
+      // which may save us from having to re-create the editor
+    }, 1)
+  }
+}
+
+/**
+ * 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: false },
+  deps?: DependencyList
+): Editor | null;
+
+/**
+ * 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;
+
+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,
+  )
+
+  useDebugValue(editor)
+
+  // This effect will handle creating/updating the editor instance
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(instanceManager.onRender(deps))
 
   // The default behavior is to re-render on each transaction
   // This is legacy behavior that will be removed in future versions
   useEditorState({
     editor,
     selector: ({ transactionNumber }) => {
-      if (options.shouldRerenderOnTransaction === false) {
+      if (options.shouldRerenderOnTransaction === false || options.shouldRerenderOnTransaction === undefined) {
         // This will prevent the editor from re-rendering on each transaction
         return null
       }

package/src/useEditorState.ts

@@ -1,12 +1,17 @@
-import { useDebugValue, useEffect, useState } from 'react'
+import type { Editor } from '@tiptap/core'
+import deepEqual from 'fast-deep-equal/es6/react'
+import {
+  useDebugValue, useEffect, useLayoutEffect, useState,
+} from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 
-import type { Editor } from './Editor.js'
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
 export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
   editor: TEditor;
   transactionNumber: number;
 };
+
 export type UseEditorStateOptions<
   TSelectorResult,
   TEditor extends Editor | null = Editor | null,
@@ -21,7 +26,7 @@ export type UseEditorStateOptions<
   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;
 };
@@ -30,94 +35,142 @@ export type UseEditorStateOptions<
  * To synchronize the editor instance with the component state,
  * we need to create a separate instance that is not affected by the component re-renders.
  */
-function makeEditorStateInstance<TEditor extends Editor | null = Editor | null>(initialEditor: TEditor) {
-  let transactionNumber = 0
-  let lastTransactionNumber = 0
-  let lastSnapshot: EditorStateSnapshot<TEditor> = { editor: initialEditor, transactionNumber: 0 }
-  let editor = initialEditor
-  const subscribers = new Set<() => void>()
-
-  const editorInstance = {
-    /**
-     * Get the current editor instance.
-     */
-    getSnapshot(): EditorStateSnapshot<TEditor> {
-      if (transactionNumber === lastTransactionNumber) {
-        return lastSnapshot
+class EditorStateManager<TEditor extends Editor | null = Editor | null> {
+  private transactionNumber = 0
+
+  private lastTransactionNumber = 0
+
+  private lastSnapshot: EditorStateSnapshot<TEditor>
+
+  private editor: TEditor
+
+  private subscribers = new Set<() => void>()
+
+  constructor(initialEditor: TEditor) {
+    this.editor = initialEditor
+    this.lastSnapshot = { editor: initialEditor, transactionNumber: 0 }
+
+    this.getSnapshot = this.getSnapshot.bind(this)
+    this.getServerSnapshot = this.getServerSnapshot.bind(this)
+    this.watch = this.watch.bind(this)
+    this.subscribe = this.subscribe.bind(this)
+  }
+
+  /**
+   * Get the current editor instance.
+   */
+  getSnapshot(): EditorStateSnapshot<TEditor> {
+    if (this.transactionNumber === this.lastTransactionNumber) {
+      return this.lastSnapshot
+    }
+    this.lastTransactionNumber = this.transactionNumber
+    this.lastSnapshot = { editor: this.editor, transactionNumber: this.transactionNumber }
+    return this.lastSnapshot
+  }
+
+  /**
+   * Always disable the editor on the server-side.
+   */
+  getServerSnapshot(): EditorStateSnapshot<null> {
+    return { editor: null, transactionNumber: 0 }
+  }
+
+  /**
+   * Subscribe to the editor instance's changes.
+   */
+  subscribe(callback: () => void): () => void {
+    this.subscribers.add(callback)
+    return () => {
+      this.subscribers.delete(callback)
+    }
+  }
+
+  /**
+   * Watch the editor instance for changes.
+   */
+  watch(nextEditor: Editor | null): undefined | (() => void) {
+    this.editor = nextEditor as TEditor
+
+    if (this.editor) {
+      /**
+       * This will force a re-render when the editor state changes.
+       * This is to support things like `editor.can().toggleBold()` in components that `useEditor`.
+       * This could be more efficient, but it's a good trade-off for now.
+       */
+      const fn = () => {
+        this.transactionNumber += 1
+        this.subscribers.forEach(callback => callback())
       }
-      lastTransactionNumber = transactionNumber
-      lastSnapshot = { editor, transactionNumber }
-      return lastSnapshot
-    },
-    /**
-     * Always disable the editor on the server-side.
-     */
-    getServerSnapshot(): EditorStateSnapshot<null> {
-      return { editor: null, transactionNumber: 0 }
-    },
-    /**
-     * Subscribe to the editor instance's changes.
-     */
-    subscribe(callback: () => void) {
-      subscribers.add(callback)
+
+      const currentEditor = this.editor
+
+      currentEditor.on('transaction', fn)
       return () => {
-        subscribers.delete(callback)
-      }
-    },
-    /**
-     * Watch the editor instance for changes.
-     */
-    watch(nextEditor: Editor | null) {
-      editor = nextEditor as TEditor
-
-      if (editor) {
-        /**
-         * This will force a re-render when the editor state changes.
-         * This is to support things like `editor.can().toggleBold()` in components that `useEditor`.
-         * This could be more efficient, but it's a good trade-off for now.
-         */
-        const fn = () => {
-          transactionNumber += 1
-          subscribers.forEach(callback => callback())
-        }
-
-        const currentEditor = editor
-
-        currentEditor.on('transaction', fn)
-        return () => {
-          currentEditor.off('transaction', fn)
-        }
+        currentEditor.off('transaction', fn)
       }
-    },
-  }
+    }
 
-  return editorInstance
+    return undefined
+  }
 }
 
+/**
+ * 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 }),
+ * })
+ */
 export 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 }),
+ * })
+ */
 export function useEditorState<TSelectorResult>(
   options: UseEditorStateOptions<TSelectorResult, Editor | null>
 ): TSelectorResult | null;
 
+/**
+ * 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 }),
+ * })
+ */
 export function useEditorState<TSelectorResult>(
   options: UseEditorStateOptions<TSelectorResult, Editor> | UseEditorStateOptions<TSelectorResult, Editor | null>,
 ): TSelectorResult | null {
-  const [editorInstance] = useState(() => makeEditorStateInstance(options.editor))
+  const [editorStateManager] = useState(() => new EditorStateManager(options.editor))
 
   // Using the `useSyncExternalStore` hook to sync the editor instance with the component state
   const selectedState = useSyncExternalStoreWithSelector(
-    editorInstance.subscribe,
-    editorInstance.getSnapshot,
-    editorInstance.getServerSnapshot,
+    editorStateManager.subscribe,
+    editorStateManager.getSnapshot,
+    editorStateManager.getServerSnapshot,
     options.selector as UseEditorStateOptions<TSelectorResult, Editor | null>['selector'],
-    options.equalityFn,
+    options.equalityFn ?? deepEqual,
   )
 
-  useEffect(() => {
-    return editorInstance.watch(options.editor)
-  }, [options.editor])
+  useIsomorphicLayoutEffect(() => {
+    return editorStateManager.watch(options.editor)
+  }, [options.editor, editorStateManager])
 
   useDebugValue(selectedState)