fix: portable text editor crash on React 19

.eslintignore.react-compiler

@@ -27,3 +27,4 @@ perf/*
 scripts/*
 test/*
 **/__workshop__/*
+packages/sanity/playwright-ct/**

.eslintrc.cjs

@@ -253,6 +253,19 @@ const config = {
         'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
       },
     },
+
+    // Don't lint React Compiler rules on test code
+    {
+      files: [
+        `**/*/test/**/*`,
+        '**/*/__tests__/**/*',
+        '**/*.test.{js,ts,tsx}',
+        'packages/sanity/playwright-ct/**',
+      ],
+      rules: {
+        'react-compiler/react-compiler': 'off',
+      },
+    },
   ],
 }
 

dev/test-studio/components/workspaceLogos.tsx

@@ -1,7 +1,7 @@
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 
 export const VercelLogo = () => {
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
   const fill = scheme === 'dark' ? '#fff' : '#000'
 
   return (

dev/test-studio/workshop/WorkshopTool.tsx

@@ -1,5 +1,5 @@
 import {Workshop} from '@sanity/ui-workshop'
-import {type Tool, useColorScheme, useWorkspace} from 'sanity'
+import {type Tool, useColorSchemeSetValue, useColorSchemeValue, useWorkspace} from 'sanity'
 
 import {config} from './config'
 import {type WorkshopOptions} from './types'
@@ -9,7 +9,8 @@ export function WorkshopTool(props: {tool: Tool<WorkshopOptions>}) {
   const {tool} = props
   const toolName = tool.options?.name || 'workshop'
 
-  const {scheme, setScheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
+  const setScheme = useColorSchemeSetValue()
   const {basePath} = useWorkspace()
 
   const locationStore = useLocationStore({
@@ -20,7 +21,12 @@ export function WorkshopTool(props: {tool: Tool<WorkshopOptions>}) {
     <Workshop
       config={config}
       locationStore={locationStore}
-      onSchemeChange={setScheme}
+      onSchemeChange={
+        setScheme ||
+        (() => {
+          console.warn('Unable to change theme scheme')
+        })
+      }
       scheme={scheme}
     />
   )

package.json

@@ -18,7 +18,7 @@
     "check:format": "prettier . --check",
     "check:lint": "turbo run lint --continue -- --quiet",
     "check:react-exhaustive-deps": "turbo run lint --continue -- --quiet --rule 'react-hooks/exhaustive-deps: [error, {additionalHooks: \"(useAsync|useMemoObservable|useObservableCallback)\"}]'",
-    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 40 .",
+    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 38 .",
     "check:test": "run-s test -- --silent",
     "check:types": "tsc && turbo run check:types --filter='./packages/*' --filter='./packages/@sanity/*'",
     "chore:format:fix": "prettier --cache --write .",

packages/@sanity/portable-text-editor/src/editor/hooks/useSyncValue.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-nested-callbacks */
 import {type PortableTextBlock} from '@sanity/types'
 import {debounce, isEqual} from 'lodash'
-import {useMemo, useRef} from 'react'
+import {useCallback, useMemo, useRef} from 'react'
 import {type Descendant, Editor, type Node, Text, Transforms} from 'slate'
 import {useSlate} from 'slate-react'
 
@@ -50,20 +50,21 @@ export function useSyncValue(
   const slateEditor = useSlate()
   const updateValueFunctionRef = useRef<(value: PortableTextBlock[] | undefined) => void>()
 
-  const updateValueDebounced = useMemo(() => {
-    const updateFromCurrentValue = () => {
-      const currentValue = CURRENT_VALUE.get(portableTextEditor)
-      if (previousValue.current === currentValue) {
-        debug('Value is the same object as previous, not need to sync')
-        return
-      }
-      if (updateValueFunctionRef.current && currentValue) {
-        debug('Updating the value debounced')
-        updateValueFunctionRef.current(currentValue)
-      }
+  const updateFromCurrentValue = useCallback(() => {
+    const currentValue = CURRENT_VALUE.get(portableTextEditor)
+    if (previousValue.current === currentValue) {
+      debug('Value is the same object as previous, not need to sync')
+      return
+    }
+    if (updateValueFunctionRef.current && currentValue) {
+      debug('Updating the value debounced')
+      updateValueFunctionRef.current(currentValue)
     }
-    return debounce(updateFromCurrentValue, 1000, {trailing: true, leading: false})
   }, [portableTextEditor])
+  const updateValueDebounced = useMemo(
+    () => debounce(updateFromCurrentValue, 1000, {trailing: true, leading: false}),
+    [updateFromCurrentValue],
+  )
 
   return useMemo(() => {
     const updateFunction = (value: PortableTextBlock[] | undefined) => {