fix(perf): don't sync range decorations while setting up

packages/editor/src/editor/Editable.tsx

@@ -366,6 +366,7 @@ export const PortableTextEditable = forwardRef<
   // Restore selection from props when the editor has been initialized properly with it's value
   useEffect(() => {
     const onReady = editorActor.on('ready', () => {
+      syncRangeDecorations()
       restoreSelectionFromProps()
     })
     const onInvalidValue = editorActor.on('invalid value', () => {
@@ -380,7 +381,7 @@ export const PortableTextEditable = forwardRef<
       onInvalidValue.unsubscribe()
       onValueChanged.unsubscribe()
     }
-  }, [editorActor, restoreSelectionFromProps])
+  }, [editorActor, restoreSelectionFromProps, syncRangeDecorations])
 
   // Restore selection from props when it changes
   useEffect(() => {
@@ -407,9 +408,13 @@ export const PortableTextEditable = forwardRef<
 
   // Sync range decorations after an operation is applied
   useEffect(() => {
-    const teardown = withSyncRangeDecorations(slateEditor, syncRangeDecorations)
+    const teardown = withSyncRangeDecorations({
+      editorActor,
+      slateEditor,
+      syncRangeDecorations,
+    })
     return () => teardown()
-  }, [slateEditor, syncRangeDecorations])
+  }, [editorActor, slateEditor, syncRangeDecorations])
 
   // Handle from props onCopy function
   const handleCopy = useCallback(

packages/editor/src/editor/withSyncRangeDecorations.ts

@@ -1,19 +1,31 @@
 import type {BaseEditor, Operation} from 'slate'
 import type {ReactEditor} from 'slate-react'
 import type {PortableTextSlateEditor} from '../types/editor'
+import type {EditorActor} from './editor-machine'
 
 // React Compiler considers `slateEditor` as immutable, and opts-out if we do this inline in a useEffect, doing it in a function moves it out of the scope, and opts-in again for the rest of the component.
-export function withSyncRangeDecorations(
-  slateEditor: BaseEditor & ReactEditor & PortableTextSlateEditor,
-  syncRangeDecorations: (operation?: Operation) => void,
-) {
+export function withSyncRangeDecorations({
+  editorActor,
+  slateEditor,
+  syncRangeDecorations,
+}: {
+  editorActor: EditorActor
+  slateEditor: BaseEditor & ReactEditor & PortableTextSlateEditor
+  syncRangeDecorations: (operation?: Operation) => void
+}) {
   const originalApply = slateEditor.apply
+
   slateEditor.apply = (op: Operation) => {
     originalApply(op)
-    if (op.type !== 'set_selection') {
+
+    if (
+      !editorActor.getSnapshot().matches('setting up') &&
+      op.type !== 'set_selection'
+    ) {
       syncRangeDecorations(op)
     }
   }
+
   return () => {
     slateEditor.apply = originalApply
   }