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",
"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": {

View File

@ -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": {

View File

@ -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<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;
};
@ -126,7 +127,7 @@ export function useEditorState<TSelectorResult>(
editorInstance.getSnapshot,
editorInstance.getServerSnapshot,
options.selector as UseEditorStateOptions<TSelectorResult, Editor | null>['selector'],
options.equalityFn,
options.equalityFn ?? deepEqual,
)
useEffect(() => {