fix: make useEditorState run before layout

ueberdosis · Nov 11, 2024 · e6ce7b6 · e6ce7b6
1 parent 05e1755
commit e6ce7b6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/demos/src/Extensions/History/React/index.spec.js b/demos/src/Extensions/History/React/index.spec.js
@@ -2,9 +2,7 @@ context('/src/Extensions/History/React/', () => {
   beforeEach(() => {
     cy.visit('/src/Extensions/History/React/')
     cy.get('.tiptap').then(([{ editor }]) => {
-      setTimeout(() => {
-        editor.commands.setContent('<p>Mistake</p>')
-      }, 0)
+      editor.commands.setContent('<p>Mistake</p>')
     })
   })
 

diff --git a/packages/react/src/useEditorState.ts b/packages/react/src/useEditorState.ts
@@ -1,6 +1,8 @@
 import type { Editor } from '@tiptap/core'
 import deepEqual from 'fast-deep-equal/es6/react'
-import { useDebugValue, useEffect, useState } from 'react'
+import {
+  useDebugValue, useLayoutEffect, useState,
+} from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 
 export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
@@ -164,7 +166,7 @@ export function useEditorState<TSelectorResult>(
     options.equalityFn ?? deepEqual,
   )
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     return editorStateManager.watch(options.editor)
   }, [options.editor, editorStateManager])