@tiptap/react 3.0.0 → 3.0.2-beta.0

package/src/useEditorState.ts

@@ -1,123 +1,171 @@
-import { useDebugValue, useEffect, useState } from 'react'
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
+import type { Editor } from '@tiptap/core'
+import deepEqual from 'fast-deep-equal/es6/react.js'
+import { useDebugValue, useEffect, useLayoutEffect, useState } from 'react'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js'
 
-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,
-> = {
+  editor: TEditor
+  transactionNumber: number
+}
+
+export type UseEditorStateOptions<TSelectorResult, TEditor extends Editor | null = Editor | null> = {
   /**
    * The editor instance.
    */
-  editor: TEditor;
+  editor: TEditor
   /**
    * A selector function to determine the value to compare for re-rendering.
    */
-  selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult;
+  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;
-};
+  equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean
+}
 
 /**
  * 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)
+        currentEditor.off('transaction', fn)
       }
-    },
-    /**
-     * 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)
-        }
-      }
-    },
-  }
+    }
 
-  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;
+  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;
+  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)
 

package/src/useReactNodeView.ts

@@ -1,12 +1,28 @@
-import { createContext, useContext } from 'react'
+import type { ReactNode } from 'react'
+import { createContext, createElement, useContext } from 'react'
 
 export interface ReactNodeViewContextProps {
-  onDragStart: (event: DragEvent) => void,
-  nodeViewContentRef: (element: HTMLElement | null) => void,
+  onDragStart?: (event: DragEvent) => void
+  nodeViewContentRef?: (element: HTMLElement | null) => void
+  /**
+   * This allows you to add children into the NodeViewContent component.
+   * This is useful when statically rendering the content of a node view.
+   */
+  nodeViewContentChildren?: ReactNode
 }
 
-export const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({
-  onDragStart: undefined,
+export const ReactNodeViewContext = createContext<ReactNodeViewContextProps>({
+  onDragStart: () => {
+    // no-op
+  },
+  nodeViewContentChildren: undefined,
+  nodeViewContentRef: () => {
+    // no-op
+  },
 })
 
+export const ReactNodeViewContentProvider = ({ children, content }: { children: ReactNode; content: ReactNode }) => {
+  return createElement(ReactNodeViewContext.Provider, { value: { nodeViewContentChildren: content } }, children)
+}
+
 export const useReactNodeView = () => useContext(ReactNodeViewContext)