@sanity/code-input 4.1.1 → 4.1.3

package/lib/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var index = require('./_chunks/index-cttyJsiZ.cjs');
+exports.PreviewCode = index.PreviewCode;
+exports.codeInput = index.codeInput;
+exports.codeSchema = index.codeSchema;
+exports.codeTypeName = index.codeTypeName;
+//# sourceMappingURL=index.cjs.map

package/lib/index.cjs.js

@@ -0,0 +1,7 @@
+import cjs from './index.cjs';
+
+export const PreviewCode = cjs.PreviewCode;
+export const codeInput = cjs.codeInput;
+export const codeSchema = cjs.codeSchema;
+export const codeTypeName = cjs.codeTypeName;
+

package/lib/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/lib/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-
 import {Extension} from '@codemirror/state'
+import {JSX as JSX_2} from 'react/jsx-runtime'
 import {ObjectDefinition} from 'sanity'
 import {ObjectInputProps} from 'sanity'
 import {ObjectSchemaType} from 'sanity'
@@ -18,7 +17,7 @@ export declare interface CodeDefinition
 }
 
 /** @public */
-export declare function CodeInput(props: CodeInputProps): JSX.Element
+export declare function CodeInput(props: CodeInputProps): JSX_2.Element
 
 /**
  * @public
@@ -104,7 +103,7 @@ declare type ModeLoader = () => Promise<Extension | undefined> | Extension | und
 /**
  * @public
  */
-export declare function PreviewCode(props: PreviewCodeProps): JSX.Element
+export declare function PreviewCode(props: PreviewCodeProps): JSX_2.Element
 
 /**
  * @public

package/lib/index.js

@@ -1,11 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-var index = require('./_chunks/index-160c0f7b.js');
-exports.PreviewCode = index.PreviewCode;
-exports.codeInput = index.codeInput;
-exports.codeSchema = index.codeSchema;
-exports.codeTypeName = index.codeTypeName;
+export { PreviewCode, codeInput, codeSchema, codeTypeName } from './_chunks/index-KYa8fGra.js';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sanity/code-input",
-  "version": "4.1.1",
-  "description": "Ace editor for editing code",
+  "version": "4.1.3",
+  "description": "Sanity input component for code, powered by CodeMirror",
   "keywords": [
     "sanity",
     "cms",
@@ -22,18 +22,22 @@
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./lib/index.esm.js",
-      "require": "./lib/index.js",
-      "default": "./lib/index.esm.js"
+      "require": "./lib/index.cjs",
+      "node": {
+        "import": "./lib/index.cjs.js"
+      },
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./lib/index.js",
-  "module": "./lib/index.esm.js",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
   "source": "./src/index.ts",
   "types": "./lib/index.d.ts",
   "files": [
@@ -57,76 +61,76 @@
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.1.0",
-    "@codemirror/commands": "^6.0.1",
-    "@codemirror/lang-html": "^6.4.0",
+    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/commands": "^6.3.2",
+    "@codemirror/lang-html": "^6.4.7",
     "@codemirror/lang-java": "^6.0.1",
-    "@codemirror/lang-javascript": "^6.1.2",
+    "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.0.5",
+    "@codemirror/lang-markdown": "^6.2.3",
     "@codemirror/lang-php": "^6.0.1",
-    "@codemirror/lang-sql": "^6.3.3",
-    "@codemirror/language": "^6.2.1",
-    "@codemirror/legacy-modes": "^6.3.1",
-    "@codemirror/search": "^6.0.1",
-    "@codemirror/state": "^6.1.0",
-    "@codemirror/view": "^6.1.1",
+    "@codemirror/lang-sql": "^6.5.4",
+    "@codemirror/language": "^6.9.3",
+    "@codemirror/legacy-modes": "^6.3.3",
+    "@codemirror/search": "^6.5.5",
+    "@codemirror/state": "^6.3.3",
+    "@codemirror/view": "^6.22.3",
     "@juggle/resize-observer": "^3.3.1",
-    "@lezer/highlight": "^1.0.0",
-    "@sanity/icons": "^2.0.0",
+    "@lezer/highlight": "^1.2.0",
     "@sanity/incompatible-plugin": "^1.0.4",
     "@sanity/ui": "^1.0.0",
-    "@uiw/codemirror-themes": "^4.19.4",
-    "@uiw/react-codemirror": "^4.19.4"
+    "@uiw/codemirror-themes": "^4.21.21",
+    "@uiw/react-codemirror": "^4.21.21"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/icons": "^2.2.2",
-    "@sanity/pkg-utils": "^2.1.1",
-    "@sanity/plugin-kit": "^3.1.2",
-    "@sanity/semantic-release-preset": "^2.0.2",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@sanity/icons": "^2.8.0",
+    "@sanity/pkg-utils": "^3.3.5",
+    "@sanity/plugin-kit": "^3.1.10",
+    "@sanity/semantic-release-preset": "^4.1.6",
     "@sanity/ui-workshop": "^1.2.0",
     "@sanity/ui-workshop-plugin-sanity": "^1.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.1.2",
-    "@types/react": "^18.0.26",
-    "@types/styled-components": "^5.1.25",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "@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",
     "husky": "^8.0.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "lint-staged": "^13.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.1",
-    "prettier-plugin-packagejson": "^2.3.0",
+    "prettier": "^3.1.1",
+    "prettier-plugin-packagejson": "^2.4.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "sanity": "^3.2.3",
+    "rimraf": "^5.0.5",
+    "sanity": "^3.21.3",
     "sanity-extra": "^1.0.0",
     "sanity-testing-library": "^1.0.0",
-    "styled-components": "^5.3.6",
-    "ts-jest": "^28.0.7",
-    "typescript": "^4.9.4"
+    "semantic-release": "^22.0.0",
+    "styled-components": "^6.1.1",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
     "sanity": "^3",
-    "styled-components": "^5.2"
+    "styled-components": "^5.2 || ^6"
   },
   "engines": {
     "node": ">=14"

package/src/CodeInput.tsx

@@ -77,7 +77,7 @@ export function CodeInput(props: CodeInputProps) {
 
   const onHighlightChange = useCallback(
     (lines: number[]) => onChange(set(lines, ['highlightedLines'])),
-    [onChange]
+    [onChange],
   )
 
   const handleCodeChange = useCallback(
@@ -90,7 +90,7 @@ export function CodeInput(props: CodeInputProps) {
         code ? set(code, path) : unset(path),
       ])
     },
-    [onChange, type]
+    [onChange, type],
   )
   const {languages, language, languageMode} = useLanguageMode(props.schemaType, props.value)
 
@@ -132,7 +132,7 @@ export function CodeInput(props: CodeInputProps) {
       elementProps.onBlur,
       readOnly,
       value,
-    ]
+    ],
   )
 
   return (

package/src/LanguageField.tsx

@@ -4,7 +4,7 @@ import {CodeInputLanguage} from './types'
 import {LanguageInput} from './LanguageInput'
 
 export function LanguageField(
-  props: MemberFieldProps & {member: FieldMember; language: string; languages: CodeInputLanguage[]}
+  props: MemberFieldProps & {member: FieldMember; language: string; languages: CodeInputLanguage[]},
 ) {
   const {member, languages, language, renderItem, renderField, renderPreview} = props
 
@@ -18,7 +18,7 @@ export function LanguageField(
         />
       )
     },
-    [languages, language]
+    [languages, language],
   )
 
   return (

package/src/LanguageInput.tsx

@@ -17,7 +17,7 @@ export function LanguageInput(props: LanguageInputProps) {
       const newValue = e.currentTarget.value
       onChange(newValue ? set(newValue) : unset())
     },
-    [onChange]
+    [onChange],
   )
 
   return (

package/src/codemirror/CodeMirrorProxy.tsx

@@ -25,98 +25,97 @@ export interface CodeMirrorProps extends ReactCodeMirrorProps {
  *
  * It is also responsible for integrating any CodeMirror extensions.
  */
-const CodeMirrorProxy = forwardRef<ReactCodeMirrorRef, CodeMirrorProps>(function CodeMirrorProxy(
-  props,
-  ref
-) {
-  const {
-    basicSetup: basicSetupProp,
-    highlightLines,
-    languageMode,
-    onHighlightChange,
-    readOnly,
-    value,
-    ...codeMirrorProps
-  } = props
-
-  const themeCtx = useRootTheme()
-  const codeMirrorTheme = useCodeMirrorTheme()
-  const [editorView, setEditorView] = useState<EditorView | undefined>(undefined)
-
-  // Resolve extensions
-  const themeExtension = useThemeExtension()
-  const fontSizeExtension = useFontSizeExtension({fontSize: 1})
-  const languageExtension = useLanguageExtension(languageMode)
-  const highlightLineExtension = useMemo(
-    () =>
-      highlightLine({
-        onHighlightChange,
-        readOnly,
-        theme: themeCtx,
-      }),
-    [onHighlightChange, readOnly, themeCtx]
-  )
-
-  const extensions = useMemo(() => {
-    const baseExtensions = [
-      themeExtension,
-      fontSizeExtension,
-      highlightLineExtension,
-      EditorView.lineWrapping,
-    ]
-    if (languageExtension) {
-      return [...baseExtensions, languageExtension]
-    }
-    return baseExtensions
-  }, [fontSizeExtension, highlightLineExtension, languageExtension, themeExtension])
-
-  useEffect(() => {
-    if (editorView) {
-      setHighlightedLines(editorView, highlightLines ?? [])
-    }
-  }, [editorView, highlightLines, value])
-
-  const initialState = useMemo(() => {
-    return {
-      json: {
-        doc: value ?? '',
-        selection: {
-          main: 0,
-          ranges: [{anchor: 0, head: 0}],
+const CodeMirrorProxy = forwardRef<ReactCodeMirrorRef, CodeMirrorProps>(
+  function CodeMirrorProxy(props, ref) {
+    const {
+      basicSetup: basicSetupProp,
+      highlightLines,
+      languageMode,
+      onHighlightChange,
+      readOnly,
+      value,
+      ...codeMirrorProps
+    } = props
+
+    const themeCtx = useRootTheme()
+    const codeMirrorTheme = useCodeMirrorTheme()
+    const [editorView, setEditorView] = useState<EditorView | undefined>(undefined)
+
+    // Resolve extensions
+    const themeExtension = useThemeExtension()
+    const fontSizeExtension = useFontSizeExtension({fontSize: 1})
+    const languageExtension = useLanguageExtension(languageMode)
+    const highlightLineExtension = useMemo(
+      () =>
+        highlightLine({
+          onHighlightChange,
+          readOnly,
+          theme: themeCtx,
+        }),
+      [onHighlightChange, readOnly, themeCtx],
+    )
+
+    const extensions = useMemo(() => {
+      const baseExtensions = [
+        themeExtension,
+        fontSizeExtension,
+        highlightLineExtension,
+        EditorView.lineWrapping,
+      ]
+      if (languageExtension) {
+        return [...baseExtensions, languageExtension]
+      }
+      return baseExtensions
+    }, [fontSizeExtension, highlightLineExtension, languageExtension, themeExtension])
+
+    useEffect(() => {
+      if (editorView) {
+        setHighlightedLines(editorView, highlightLines ?? [])
+      }
+    }, [editorView, highlightLines, value])
+
+    const initialState = useMemo(() => {
+      return {
+        json: {
+          doc: value ?? '',
+          selection: {
+            main: 0,
+            ranges: [{anchor: 0, head: 0}],
+          },
+          highlight: highlightLines ?? [],
         },
-        highlight: highlightLines ?? [],
-      },
-      fields: highlightState,
-    }
-    // only need to calculate this on initial render
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const handleCreateEditor = useCallback((view: EditorView) => {
-    setEditorView(view)
-  }, [])
-
-  const basicSetup = useMemo(
-    () =>
-      basicSetupProp ?? {
-        highlightActiveLine: false,
-      },
-    [basicSetupProp]
-  )
-
-  return (
-    <CodeMirror
-      {...codeMirrorProps}
-      value={value}
-      ref={ref}
-      extensions={extensions}
-      theme={codeMirrorTheme}
-      onCreateEditor={handleCreateEditor}
-      initialState={initialState}
-      basicSetup={basicSetup}
-    />
-  )
-})
+        fields: highlightState,
+      }
+      // only need to calculate this on initial render
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    const handleCreateEditor = useCallback((view: EditorView) => {
+      setEditorView(view)
+    }, [])
+
+    const basicSetup = useMemo(
+      () =>
+        basicSetupProp ?? {
+          highlightActiveLine: false,
+        },
+      [basicSetupProp],
+    )
+
+    return (
+      <CodeMirror
+        {...codeMirrorProps}
+        value={value}
+        ref={ref}
+        extensions={extensions}
+        theme={codeMirrorTheme}
+        onCreateEditor={handleCreateEditor}
+        initialState={initialState}
+        basicSetup={basicSetup}
+      />
+    )
+  },
+)
 
 function useLanguageExtension(mode?: string) {
   const codeConfig = useContext(CodeInputConfigContext)
@@ -130,7 +129,7 @@ function useLanguageExtension(mode?: string) {
     const codeMode = modes.find((m) => m.name === mode)
     if (!codeMode?.loader) {
       console.warn(
-        `Found no codeMode for language mode ${mode}, syntax highlighting will be disabled.`
+        `Found no codeMode for language mode ${mode}, syntax highlighting will be disabled.`,
       )
     }
     let active = true

package/src/codemirror/defaultCodeModes.ts

@@ -27,14 +27,14 @@ export const defaultCodeModes: CodeMode[] = [
     name: 'typescript',
     loader: () =>
       import('@codemirror/lang-javascript').then(({javascript}) =>
-        javascript({jsx: false, typescript: true})
+        javascript({jsx: false, typescript: true}),
       ),
   },
   {
     name: 'tsx',
     loader: () =>
       import('@codemirror/lang-javascript').then(({javascript}) =>
-        javascript({jsx: true, typescript: true})
+        javascript({jsx: true, typescript: true}),
       ),
   },
   {name: 'php', loader: () => import('@codemirror/lang-php').then(({php}) => php())},
@@ -54,7 +54,7 @@ export const defaultCodeModes: CodeMode[] = [
     name: 'csharp',
     loader: () =>
       import('@codemirror/legacy-modes/mode/clike').then(({csharp}) =>
-        StreamLanguage.define(csharp)
+        StreamLanguage.define(csharp),
       ),
   },
   {
@@ -86,7 +86,7 @@ export const defaultCodeModes: CodeMode[] = [
     name: 'python',
     loader: () =>
       import('@codemirror/legacy-modes/mode/python').then(({python}) =>
-        StreamLanguage.define(python)
+        StreamLanguage.define(python),
       ),
   },
   {

package/src/codemirror/useLanguageMode.tsx

@@ -29,7 +29,7 @@ function useLanguageAlternatives(type: CodeSchemaType) {
 
     if (!Array.isArray(languageAlternatives)) {
       throw new Error(
-        `'options.languageAlternatives' should be an array, got ${typeof languageAlternatives}`
+        `'options.languageAlternatives' should be an array, got ${typeof languageAlternatives}`,
       )
     }
 
@@ -41,7 +41,7 @@ function useLanguageAlternatives(type: CodeSchemaType) {
           `'options.languageAlternatives' lists a language with value "%s", which is an alias of "%s" - please replace the value to read "%s"`,
           val,
           alias,
-          alias
+          alias,
         )
 
         return acc.concat({title, value: alias, mode: mode})

package/src/useFieldMember.ts

@@ -4,13 +4,13 @@ import {FieldMember, ObjectMember} from 'sanity'
 /** @internal */
 export function useFieldMember(
   members: ObjectMember[],
-  fieldName: string
+  fieldName: string,
 ): FieldMember | undefined {
   return useMemo(
     () =>
       members.find(
-        (member): member is FieldMember => member.kind === 'field' && member.name === fieldName
+        (member): member is FieldMember => member.kind === 'field' && member.name === fieldName,
       ),
-    [members, fieldName]
+    [members, fieldName],
   )
 }