@sanity/code-input 6.0.0 → 6.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/code-input",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "description": "Sanity input component for code, powered by CodeMirror",
   "keywords": [
     "sanity",
@@ -22,6 +22,7 @@
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -41,21 +42,8 @@
     "src",
     "v2-incompatible.js"
   ],
-  "sideEffects": false,
   "browserslist": "extends @sanity/browserslist-config",
-  "scripts": {
-    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
-    "clean": "rimraf lib",
-    "compile": "tsc --noEmit",
-    "dev": "sanity dev",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "link-watch": "plugin-kit link-watch",
-    "lint": "eslint .",
-    "prepare": "husky install",
-    "prepublishOnly": "npm run build",
-    "test": "jest",
-    "watch": "pkg-utils watch --strict"
-  },
+  "prettier": "@sanity/prettier-config",
   "dependencies": {
     "@codemirror/autocomplete": "^6.18.3",
     "@codemirror/commands": "^6.7.1",
@@ -83,40 +71,40 @@
     "@babel/core": "^7.23.6",
     "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
-    "@commitlint/cli": "^19.6.0",
-    "@commitlint/config-conventional": "^19.6.0",
-    "@sanity/pkg-utils": "^7.11.5",
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.29.7",
+    "@eslint/js": "^9.37.0",
+    "@sanity/browserslist-config": "^1.0.5",
+    "@sanity/pkg-utils": "^8.1.21",
     "@sanity/plugin-kit": "^4.0.19",
-    "@sanity/semantic-release-preset": "^5.0.0",
+    "@sanity/prettier-config": "^2.0.1",
+    "@sanity/vision": "^4.10.3",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.45",
-    "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "eslint": "^8.55.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-sanity": "^7.0.1",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "@types/react-dom": "^18.2.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-formatter-gha": "^1.6.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "globals": "^16.4.0",
     "husky": "^8.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.1",
-    "prettier-plugin-packagejson": "^2.4.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
+    "prettier": "^3.6.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "rimraf": "^5.0.5",
-    "sanity": "^4.3.0",
-    "semantic-release": "^24.2.0",
+    "sanity": "^4.10.3",
     "styled-components": "^6.1.19",
     "ts-jest": "^29.1.1",
-    "typescript": "5.9.2"
+    "typescript": "5.9.2",
+    "typescript-eslint": "^8.46.1"
   },
   "peerDependencies": {
     "react": "^18 || >=19.0.0-0",
@@ -125,16 +113,28 @@
     "styled-components": "^5.2 || ^6"
   },
   "engines": {
-    "node": ">=20.19 >=22.12.0"
+    "node": ">=20.19 <22 || >=22.12"
   },
   "sanityExchangeUrl": "https://www.sanity.io/plugins/code-input",
   "sanityPlugin": {
     "verifyPackage": {
       "babelConfig": false,
-      "nodeEngine": false
+      "tsconfig": false,
+      "tsc": false,
+      "nodeEngine": false,
+      "eslintImports": false
     }
   },
-  "overrides": {
-    "conventional-changelog-conventionalcommits": ">= 8.0.0"
+  "scripts": {
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
+    "clean": "rimraf lib",
+    "dev": "sanity dev",
+    "format": "prettier --write .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "release": "changeset publish",
+    "test": "jest",
+    "type-check": "tsc --noEmit",
+    "watch": "pkg-utils watch --strict"
   }
-}
+}

package/src/CodeInput.tsx

@@ -1,13 +1,20 @@
 import {Box, Card, Stack, Text} from '@sanity/ui'
 import {Suspense, useCallback} from 'react'
-import {MemberField, ObjectInputProps, RenderInputCallback, set, setIfMissing, unset} from 'sanity'
-import styled, {css} from 'styled-components'
-
-import {useCodeMirror} from './codemirror/useCodeMirror'
+import {
+  MemberField,
+  type ObjectInputProps,
+  type RenderInputCallback,
+  set,
+  setIfMissing,
+  unset,
+} from 'sanity'
+import {css, styled} from 'styled-components'
+
+import {CodeMirrorProxy, useMounted} from './codemirror/useCodeMirror'
 import {useLanguageMode} from './codemirror/useLanguageMode'
 import {PATH_CODE} from './config'
 import {LanguageField} from './LanguageField'
-import {CodeInputValue, CodeSchemaType} from './types'
+import type {CodeInputValue, CodeSchemaType} from './types'
 import {focusRingBorderStyle, focusRingStyle} from './ui/focusRingStyle'
 import {useFieldMember} from './useFieldMember'
 
@@ -53,7 +60,7 @@ const EditorContainer = styled(Card)(({theme}) => {
 })
 
 /** @public */
-export function CodeInput(props: CodeInputProps) {
+export function CodeInput(props: CodeInputProps): React.JSX.Element {
   const {
     members,
     elementProps,
@@ -95,13 +102,13 @@ export function CodeInput(props: CodeInputProps) {
   )
   const {languages, language, languageMode} = useLanguageMode(props.schemaType, props.value)
 
-  const CodeMirror = useCodeMirror()
+  const mounted = useMounted()
 
   const renderCodeInput: RenderInputCallback = useCallback(
     (inputProps) => {
       return (
         <EditorContainer border overflow="hidden" radius={1} sizing="border" readOnly={readOnly}>
-          {CodeMirror && (
+          {mounted && (
             <Suspense
               fallback={
                 <Box padding={3}>
@@ -109,7 +116,7 @@ export function CodeInput(props: CodeInputProps) {
                 </Box>
               }
             >
-              <CodeMirror
+              <CodeMirrorProxy
                 languageMode={languageMode}
                 onChange={handleCodeChange}
                 value={inputProps.value as string}
@@ -125,14 +132,14 @@ export function CodeInput(props: CodeInputProps) {
       )
     },
     [
-      CodeMirror,
+      readOnly,
+      mounted,
+      languageMode,
       handleCodeChange,
-      handleCodeFocus,
+      value?.highlightedLines,
       onHighlightChange,
-      languageMode,
+      handleCodeFocus,
       elementProps.onBlur,
-      readOnly,
-      value,
     ],
   )
 

package/src/LanguageField.tsx

@@ -1,6 +1,6 @@
 import {useCallback} from 'react'
 import {
-  FieldMember,
+  type FieldMember,
   type InputProps,
   MemberField,
   type MemberFieldProps,

package/src/LanguageInput.tsx

@@ -2,7 +2,7 @@ import {Select} from '@sanity/ui'
 import {type ChangeEvent, useCallback} from 'react'
 import {set, type StringInputProps, unset} from 'sanity'
 
-import {CodeInputLanguage} from './types'
+import type {CodeInputLanguage} from './types'
 
 export interface LanguageInputProps {
   language: string

package/src/PreviewCode.tsx

@@ -1,11 +1,11 @@
 import {Box, Card, Flex, Label, Text} from '@sanity/ui'
 import {Suspense} from 'react'
-import {PreviewProps} from 'sanity'
-import styled from 'styled-components'
+import type {PreviewProps} from 'sanity'
+import {styled} from 'styled-components'
 
-import {useCodeMirror} from './codemirror/useCodeMirror'
+import {CodeMirrorProxy, useMounted} from './codemirror/useCodeMirror'
 import {useLanguageMode} from './codemirror/useLanguageMode'
-import {CodeInputValue, CodeSchemaType} from './types'
+import type {CodeInputValue, CodeSchemaType} from './types'
 
 const PreviewContainer = styled(Box)`
   position: relative;
@@ -25,7 +25,7 @@ export function PreviewCode(props: PreviewCodeProps) {
   const {selection, schemaType: type} = props
   const {languageMode} = useLanguageMode(type as CodeSchemaType, props.selection)
 
-  const CodeMirror = useCodeMirror()
+  const mounted = useMounted()
   return (
     <PreviewContainer>
       <Card padding={4}>
@@ -47,9 +47,9 @@ export function PreviewCode(props: PreviewCodeProps) {
             </Flex>
           </Card>
         ) : null}
-        {CodeMirror && (
+        {mounted && (
           <Suspense fallback={<Card padding={2}>Loading code preview...</Card>}>
-            <CodeMirror
+            <CodeMirrorProxy
               readOnly
               editable={false}
               value={selection?.code || ''}

package/src/codemirror/CodeMirrorProxy.tsx

@@ -129,6 +129,7 @@ function useLanguageExtension(mode?: string) {
 
     const codeMode = modes.find((m) => m.name === mode)
     if (!codeMode?.loader) {
+      // eslint-disable-next-line no-console
       console.warn(
         `Found no codeMode for language mode ${mode}, syntax highlighting will be disabled.`,
       )
@@ -141,6 +142,7 @@ function useLanguageExtension(mode?: string) {
         }
       })
       .catch((e) => {
+        // eslint-disable-next-line no-console
         console.error(`Failed to load language mode ${mode}`, e)
         if (active) {
           setLanguageExtension(undefined)

package/src/codemirror/extensions/highlightLineExtension.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-param-reassign */
-
 import {type Extension, StateEffect, StateField} from '@codemirror/state'
 import {Decoration, type DecorationSet, EditorView, lineNumbers} from '@codemirror/view'
 import type {ThemeContextValue} from '@sanity/ui'
@@ -56,6 +54,7 @@ export const lineHighlightField = StateField.define({
         add: highlights,
       })
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.error(e)
       return Decoration.none
     }
@@ -130,7 +129,7 @@ export const highlightLine = (config: HighlightLineConfig): Extension => {
               let isHighlighted = false
               editorView.state
                 .field(lineHighlightField)
-                .between(line.from, line.to, (from, to, value) => {
+                .between(line.from, line.to, (_from, _to, value) => {
                   if (value) {
                     isHighlighted = true
                     return false // stop iteration
@@ -163,7 +162,7 @@ export function setHighlightedLines(view: EditorView, highlightLines: number[]):
   const doc = view.state.doc
   const lines = doc.lines
   //1-based line numbers
-  const allLineNumbers = Array.from({length: lines}, (x, i) => i + 1)
+  const allLineNumbers = Array.from({length: lines}, (_x, i) => i + 1)
   view.dispatch({
     effects: allLineNumbers.map((lineNumber) => {
       const line = doc.line(lineNumber)

package/src/codemirror/extensions/useFontSize.ts

@@ -9,7 +9,7 @@ export function useFontSizeExtension(props: {fontSize: number}): Extension {
 
   return useMemo(() => {
     const {code: codeFont} = theme.sanity.fonts
-    const {fontSize, lineHeight} = codeFont.sizes[fontSizeProp] || codeFont.sizes[2]
+    const {fontSize, lineHeight} = codeFont.sizes[fontSizeProp] || codeFont.sizes[2]!
 
     return EditorView.baseTheme({
       '&': {

package/src/codemirror/useCodeMirror-client.test.tsx

@@ -4,7 +4,7 @@ import {studioTheme, ThemeProvider} from '@sanity/ui'
 import {act, render} from '@testing-library/react'
 import {Suspense} from 'react'
 
-import {useCodeMirror} from './useCodeMirror'
+import {CodeMirrorProxy, useMounted} from './useCodeMirror'
 
 describe('useCodeMirror - client', () => {
   let rafMock: jest.SpyInstance<number, [FrameRequestCallback]>
@@ -14,9 +14,8 @@ describe('useCodeMirror - client', () => {
       .spyOn(window, 'requestAnimationFrame')
       .mockImplementation((callback: FrameRequestCallback): number => {
         try {
-          // eslint-disable-next-line callback-return
           callback(0)
-        } catch (e) {
+        } catch {
           // CodeMirror does some mesurement shenanigance that json dont support
           // we just let it crash silently
         }
@@ -30,12 +29,12 @@ describe('useCodeMirror - client', () => {
 
   it('should render suspended codemirror editor', async () => {
     const TestComponent = () => {
-      const CodeMirror = useCodeMirror()
+      const mounted = useMounted()
       return (
         <Suspense fallback={'loading'}>
-          {CodeMirror && (
+          {mounted && (
             <ThemeProvider theme={studioTheme}>
-              <CodeMirror languageMode={'tsx'} />
+              <CodeMirrorProxy languageMode={'tsx'} />
             </ThemeProvider>
           )}
         </Suspense>

package/src/codemirror/useCodeMirror-server.test.tsx

@@ -1,12 +1,12 @@
 import {renderToString} from 'react-dom/server'
 
-import {useCodeMirror} from './useCodeMirror'
+import {useMounted} from './useCodeMirror'
 
 describe('useCodeMirror - server', () => {
   it('should render null to string (and not throw and Error)', () => {
     const TestComponent = () => {
-      const Editor = useCodeMirror()
-      if (!Editor) {
+      const mounted = useMounted()
+      if (!mounted) {
         return null
       }
       throw new Error('editor should always be null in envs without window')

package/src/codemirror/useCodeMirror.tsx

@@ -1,12 +1,11 @@
-import {lazy, useEffect, useState} from 'react'
+import {lazy, startTransition, useEffect, useState} from 'react'
 
 export const CodeMirrorProxy = lazy(() => import('./CodeMirrorProxy'))
 
-export function useCodeMirror() {
+export function useMounted() {
   const [mounted, setMounted] = useState(false)
   useEffect(() => {
-    requestAnimationFrame(() => setMounted(true))
+    requestAnimationFrame(() => startTransition(() => setMounted(true)))
   }, [])
-
-  return mounted ? CodeMirrorProxy : null
+  return mounted
 }

package/src/config.ts

@@ -1,4 +1,4 @@
-import {CodeInputLanguage} from './types'
+import type {CodeInputLanguage} from './types'
 
 // NOTE: MAKE SURE THESE ALIGN WITH CODE MODES IN ./codemirror/defaultCodeModes.ts
 export const SUPPORTED_LANGUAGES: CodeInputLanguage[] = [

package/src/index.ts

@@ -1,4 +1,4 @@
-import {CodeDefinition, codeSchema, codeTypeName} from './schema'
+import {type CodeDefinition, codeSchema, codeTypeName} from './schema'
 export {type CodeInput, type CodeInputProps} from './CodeInput'
 export {PreviewCode, type PreviewCodeProps} from './PreviewCode'
 export type {CodeInputLanguage, CodeInputValue, CodeOptions, CodeSchemaType} from './types'

package/src/plugin.tsx

@@ -1,7 +1,7 @@
 import {definePlugin} from 'sanity'
 
 import {CodeInputConfigContext} from './codemirror/CodeModeContext'
-import {CodeMode} from './codemirror/defaultCodeModes'
+import type {CodeMode} from './codemirror/defaultCodeModes'
 import {codeSchema} from './schema'
 
 export interface CodeInputConfig {

package/src/sanity-ui.d.ts

@@ -1,6 +1,5 @@
 import {type Theme} from '@sanity/ui/theme'
 
 declare module 'styled-components' {
-  // eslint-disable-next-line no-unused-vars
   interface DefaultTheme extends Theme {}
 }

package/src/schema.tsx

@@ -1,10 +1,10 @@
 import {CodeBlockIcon} from '@sanity/icons'
-import {defineType, ObjectDefinition} from 'sanity'
+import {defineType, type ObjectDefinition} from 'sanity'
 
 import {CodeInput} from './CodeInput'
 import {getMedia} from './getMedia'
 import {PreviewCode} from './PreviewCode'
-import {CodeOptions} from './types'
+import type {CodeOptions} from './types'
 
 /**
  * @public
@@ -19,7 +19,7 @@ export interface CodeDefinition extends Omit<ObjectDefinition, 'type' | 'fields'
   options?: CodeOptions
 }
 
-declare module '@sanity/types' {
+declare module 'sanity' {
   // makes type: 'code' narrow correctly when using defineType/defineField/defineArrayMember
   export interface IntrinsicDefinitions {
     code: CodeDefinition

package/src/types.ts

@@ -1,4 +1,4 @@
-import {ObjectSchemaType} from 'sanity'
+import type {ObjectSchemaType} from 'sanity'
 
 export interface CodeInputLanguage {
   title: string

package/src/useFieldMember.ts

@@ -1,5 +1,5 @@
 import {useMemo} from 'react'
-import {FieldMember, ObjectMember} from 'sanity'
+import type {FieldMember, ObjectMember} from 'sanity'
 
 /** @internal */
 export function useFieldMember(