refactor(react): default to using deep equal comparisons (#5512)

This commit is contained in:
Nick Perez 2024-08-17 15:27:11 +02:00 committed by GitHub
parent 5333119b8c
commit c99627d7ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 10 additions and 3 deletions

View File

@ -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

2
package-lock.json generated
View File

@ -10142,7 +10142,6 @@
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/fast-glob": { "node_modules/fast-glob": {
@ -19812,6 +19811,7 @@
"@tiptap/extension-bubble-menu": "^2.6.4", "@tiptap/extension-bubble-menu": "^2.6.4",
"@tiptap/extension-floating-menu": "^2.6.4", "@tiptap/extension-floating-menu": "^2.6.4",
"@types/use-sync-external-store": "^0.0.6", "@types/use-sync-external-store": "^0.0.6",
"fast-deep-equal": "^3",
"use-sync-external-store": "^1.2.2" "use-sync-external-store": "^1.2.2"
}, },
"devDependencies": { "devDependencies": {

View File

@ -32,6 +32,7 @@
"@tiptap/extension-bubble-menu": "^2.6.4", "@tiptap/extension-bubble-menu": "^2.6.4",
"@tiptap/extension-floating-menu": "^2.6.4", "@tiptap/extension-floating-menu": "^2.6.4",
"@types/use-sync-external-store": "^0.0.6", "@types/use-sync-external-store": "^0.0.6",
"fast-deep-equal": "^3",
"use-sync-external-store": "^1.2.2" "use-sync-external-store": "^1.2.2"
}, },
"devDependencies": { "devDependencies": {

View File

@ -1,4 +1,5 @@
import type { Editor } from '@tiptap/core' import type { Editor } from '@tiptap/core'
import deepEqual from 'fast-deep-equal/es6/react'
import { useDebugValue, useEffect, useState } from 'react' import { useDebugValue, useEffect, useState } from 'react'
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector' import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
@ -20,7 +21,7 @@ export type UseEditorStateOptions<
selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult; selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult;
/** /**
* A custom equality function to determine if the editor should re-render. * 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;
}; };
@ -126,7 +127,7 @@ export function useEditorState<TSelectorResult>(
editorInstance.getSnapshot, editorInstance.getSnapshot,
editorInstance.getServerSnapshot, editorInstance.getServerSnapshot,
options.selector as UseEditorStateOptions<TSelectorResult, Editor | null>['selector'], options.selector as UseEditorStateOptions<TSelectorResult, Editor | null>['selector'],
options.equalityFn, options.equalityFn ?? deepEqual,
) )
useEffect(() => { useEffect(() => {