@sanity/code-input 6.0.1 → 6.0.2

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(