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

package/src/useEditorState.ts

@@ -1,11 +1,17 @@
 import type { Editor } from '@tiptap/core'
-import { useDebugValue, useEffect, useState } from 'react'
+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'
 
+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,
@@ -20,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;
 };
@@ -108,30 +114,63 @@ class EditorStateManager<TEditor extends Editor | null = Editor | 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>
 ): 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(() => new EditorStateManager(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, editorInstance])
+  useIsomorphicLayoutEffect(() => {
+    return editorStateManager.watch(options.editor)
+  }, [options.editor, editorStateManager])
 
   useDebugValue(selectedState)