diff --git a/.changeset/shaggy-readers-heal.md b/.changeset/shaggy-readers-heal.md new file mode 100644 index 000000000..1f1b17f36 --- /dev/null +++ b/.changeset/shaggy-readers-heal.md @@ -0,0 +1,5 @@ +--- +"@tiptap/react": patch +--- + +`useEditorState` now defaults to using a deep equal comparison for it's `equalityFn` option, which makes it more convenient to use diff --git a/package-lock.json b/package-lock.json index 933488839..5caa608d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10142,7 +10142,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true, "license": "MIT" }, "node_modules/fast-glob": { @@ -19812,6 +19811,7 @@ "@tiptap/extension-bubble-menu": "^2.6.4", "@tiptap/extension-floating-menu": "^2.6.4", "@types/use-sync-external-store": "^0.0.6", + "fast-deep-equal": "^3", "use-sync-external-store": "^1.2.2" }, "devDependencies": { diff --git a/packages/react/package.json b/packages/react/package.json index 28148feb1..cbd4fd452 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -32,6 +32,7 @@ "@tiptap/extension-bubble-menu": "^2.6.4", "@tiptap/extension-floating-menu": "^2.6.4", "@types/use-sync-external-store": "^0.0.6", + "fast-deep-equal": "^3", "use-sync-external-store": "^1.2.2" }, "devDependencies": { diff --git a/packages/react/src/useEditorState.ts b/packages/react/src/useEditorState.ts index 40b5ce4fa..3c5a70f26 100644 --- a/packages/react/src/useEditorState.ts +++ b/packages/react/src/useEditorState.ts @@ -1,4 +1,5 @@ import type { Editor } from '@tiptap/core' +import deepEqual from 'fast-deep-equal/es6/react' import { useDebugValue, useEffect, useState } from 'react' import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector' @@ -20,7 +21,7 @@ export type UseEditorStateOptions< selector: (context: EditorStateSnapshot) => 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; }; @@ -126,7 +127,7 @@ export function useEditorState( editorInstance.getSnapshot, editorInstance.getServerSnapshot, options.selector as UseEditorStateOptions['selector'], - options.equalityFn, + options.equalityFn ?? deepEqual, ) useEffect(() => {