@sanity/code-input 3.0.0-v3-studio.8 → 3.0.0-v3-studio.10

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@sanity/code-input",
-  "version": "3.0.0-v3-studio.8",
+  "version": "3.0.0-v3-studio.10",
   "description": "Ace editor for editing code",
   "source": "./src/index.ts",
   "exports": {
     ".": {
-      "require": "./lib/cjs/index.js",
-      "default": "./lib/esm/index.js"
+      "types": "./lib/src/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./lib/index.esm.js",
+      "require": "./lib/index.js",
+      "default": "./lib/index.esm.js"
     }
   },
-  "main": "./lib/cjs/index.js",
-  "module": "./lib/esm/index.js",
-  "types": "./lib/types/index.d.ts",
+  "main": "./lib/index.js",
+  "module": "./lib/index.esm.js",
+  "types": "./lib/src/index.d.ts",
   "files": [
     "src",
     "lib",
@@ -22,10 +25,10 @@
   "license": "MIT",
   "scripts": {
     "clean": "rimraf lib",
-    "prebuild": "npm run clean && plugin-kit verify-package --silent",
-    "build": "parcel build --no-cache",
+    "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
+    "build": "pkg-utils build",
+    "watch": "pkg-utils watch",
     "link-watch": "plugin-kit link-watch",
-    "watch": "parcel watch",
     "prepublishOnly": "npm run build",
     "compile": "tsc --noEmit",
     "lint": "eslint .",
@@ -45,7 +48,7 @@
   ],
   "dependencies": {
     "@sanity/icons": "^1.2.8",
-    "@sanity/incompatible-plugin": "^1.0.1",
+    "@sanity/incompatible-plugin": "^1.0.4",
     "@sanity/ui": "^0.38.2",
     "ace-builds": "^1.9.5",
     "react-ace": "^10.1.0"
@@ -55,13 +58,14 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@parcel/packager-ts": "^2.6.0",
-    "@parcel/transformer-typescript-types": "^2.6.0",
+    "@parcel/packager-ts": "2.6.2",
+    "@parcel/transformer-typescript-types": "2.6.2",
     "@sanity/plugin-kit": "^1.1.0-ecosystem-preset.5",
+    "@sanity/pkg-utils": "^1.11.0",
     "@sanity/semantic-release-preset": "^2.0.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.3",
-    "@types/jest": "^28.1.6",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.1.2",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.12.0",
     "@typescript-eslint/parser": "^5.12.0",
@@ -75,19 +79,19 @@
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "lint-staged": "^13.0.3",
-    "parcel": "^2.6.0",
+    "parcel": "2.6.2",
     "prettier": "^2.6.2",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
-    "sanity": "3.0.0-dev-preview.17",
+    "sanity": "3.0.0-dev-preview.21",
     "styled-components": "^5.2.0",
     "ts-jest": "^28.0.7",
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "sanity": "dev-preview",
     "styled-components": "^5.2.0"
   },
@@ -105,7 +109,8 @@
   },
   "sanityPlugin": {
     "verifyPackage": {
-      "babelConfig": false
+      "babelConfig": false,
+      "scripts": false
     }
   }
 }

package/src/CodeInput.tsx

@@ -1,7 +1,17 @@
 /* eslint-disable react/jsx-handler-names */
 import React, {Suspense, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
-import {FieldMember, MemberField, ObjectInputProps, set, setIfMissing, unset} from 'sanity/form'
-import {InputProps, ObjectSchemaType, StringInputProps, useColorScheme} from 'sanity'
+import {
+  InputProps,
+  ObjectSchemaType,
+  StringInputProps,
+  useColorScheme,
+  FieldMember,
+  MemberField,
+  ObjectInputProps,
+  set,
+  setIfMissing,
+  unset,
+} from 'sanity'
 import {Card, Select, Stack, ThemeColorSchemeKey} from '@sanity/ui'
 import styled from 'styled-components'
 import createHighlightMarkers, {highlightMarkersCSS} from './createHighlightMarkers'
@@ -44,16 +54,27 @@ const EditorContainer = styled(Card)`
   }
 `
 
+/**
+ * @public
+ */
+export interface CodeOptions {
+  theme?: string
+  darkTheme?: string
+  languageAlternatives?: CodeInputLanguage[]
+  language?: string
+  withFilename?: boolean
+}
+
+/**
+ * @public
+ */
 export type CodeSchemaType = Omit<ObjectSchemaType, 'options'> & {
-  options?: {
-    theme?: string
-    darkTheme?: string
-    languageAlternatives: CodeInputLanguage[]
-    language: string
-    withFilename?: boolean
-  }
+  options?: CodeOptions
 }
 
+/**
+ * @public
+ */
 export type CodeInputProps = ObjectInputProps<CodeInputValue, CodeSchemaType> & {
   /** @internal */
   colorScheme?: ThemeColorSchemeKey
@@ -247,7 +268,7 @@ export function CodeInput(props: CodeInputProps) {
   const mode = configured?.mode || (supported ? language : 'text')
 
   const renderLanguageInput = useCallback(
-    (inputProps: InputProps) => {
+    (inputProps: Omit<InputProps, 'renderDefault'>) => {
       return (
         <Select
           {...(inputProps as StringInputProps)}

package/src/PreviewCode.tsx

@@ -3,8 +3,9 @@ import styled from 'styled-components'
 import {Box} from '@sanity/ui'
 import {ACE_EDITOR_PROPS, ACE_SET_OPTIONS} from './config'
 import createHighlightMarkers from './createHighlightMarkers'
-import {CodeInputType, CodeInputValue} from './types'
+import {CodeInputValue} from './types'
 import {useAceEditor} from './ace-editor/AceEditorLazy'
+import {CodeSchemaType} from './CodeInput'
 
 const PreviewContainer = styled(Box)`
   position: relative;
@@ -25,11 +26,17 @@ const PreviewInner = styled(Box)`
   }
 `
 
+/**
+ * @public
+ */
 export interface PreviewCodeProps {
-  type?: CodeInputType
-  value?: CodeInputValue
+  type?: CodeSchemaType
+  value?: {selection?: CodeInputValue}
 }
 
+/**
+ * @public
+ */
 export default function PreviewCode(props: PreviewCodeProps) {
   const aceEditorRef = useRef<any>()
 
@@ -52,14 +59,15 @@ export default function PreviewCode(props: PreviewCodeProps) {
   const {value, type} = props
   const fixedLanguage = type?.options?.language
 
-  const mode = value?.language || fixedLanguage || 'text'
-  const AceEditor = useAceEditor()
+  const selection = value?.selection
+  const mode = selection?.language || fixedLanguage || 'text'
 
+  const AceEditor = useAceEditor()
   return (
     <PreviewContainer>
       <PreviewInner padding={4}>
         {AceEditor && (
-          <Suspense fallback={<div>Loading code editor...</div>}>
+          <Suspense fallback={<div>Loading code preview...</div>}>
             <AceEditor
               ref={aceEditorRef}
               focus={false}
@@ -73,10 +81,10 @@ export default function PreviewCode(props: PreviewCodeProps) {
               showPrintMargin={false}
               highlightActiveLine={false}
               cursorStart={-1}
-              value={(value && value.code) || ''}
+              value={selection?.code || ''}
               markers={
-                value && value.highlightedLines
-                  ? createHighlightMarkers(value.highlightedLines)
+                selection?.highlightedLines
+                  ? createHighlightMarkers(selection.highlightedLines)
                   : undefined
               }
               tabSize={2}

package/src/ace-editor/AceEditor-client.test.tsx

@@ -5,6 +5,19 @@ import {queryByText, render, waitForElementToBeRemoved} from '@testing-library/r
 import {useAceEditor} from './AceEditorLazy'
 
 describe('AceEditor - client', () => {
+  beforeEach(() => {
+    jest
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation((callback: FrameRequestCallback): number => {
+        callback(0)
+        return 0
+      })
+  })
+
+  afterEach(() => {
+    ;(window.requestAnimationFrame as any).mockRestore()
+  })
+
   it('should render suspended ace editor', async () => {
     const fallbackString = 'loading'
 

package/src/ace-editor/AceEditorLazy.tsx

@@ -12,7 +12,7 @@ export const AceEditorLazy = React.lazy(() => import('./editorSupport'))
 export function useAceEditor() {
   const [mounted, setMounted] = useState(false)
   useEffect(() => {
-    setMounted(true)
+    requestAnimationFrame(() => setMounted(true))
   }, [])
 
   return mounted ? AceEditorLazy : null

package/src/index.ts

@@ -1,12 +1,18 @@
 import {createPlugin} from 'sanity'
-import schema from './schema'
-import PreviewCode from './PreviewCode'
 
-export type {CodeInputProps, CodeSchemaType} from './CodeInput'
+import {codeSchema, codeTypeName, CodeDefinition} from './schema'
+import PreviewCode, {PreviewCodeProps} from './PreviewCode'
+export type {CodeInputProps, CodeSchemaType, CodeOptions} from './CodeInput'
+
 export type {CodeInputLanguage, CodeInputValue} from './types'
-export {PreviewCode}
 
+export {PreviewCode, type PreviewCodeProps}
+export {codeSchema, codeTypeName}
+export type {CodeDefinition}
+/**
+ * @public
+ */
 export const codeInput = createPlugin({
   name: '@sanity/code-input',
-  schema: {types: [schema]},
+  schema: {types: [codeSchema]},
 })

package/src/schema.tsx

@@ -1,15 +1,38 @@
 import {CodeBlockIcon} from '@sanity/icons'
-import {CodeInput} from './CodeInput'
+import {CodeInput, CodeOptions} from './CodeInput'
 import PreviewCode, {PreviewCodeProps} from './PreviewCode'
 import {getMedia} from './getMedia'
-import {defineType} from 'sanity'
+import {defineType, ObjectDefinition} from 'sanity'
 
 export type {CodeInputProps, CodeSchemaType} from './CodeInput'
 
 export type {CodeInputLanguage, CodeInputValue} from './types'
 export type {PreviewCode, PreviewCodeProps, CodeInput}
 
-export default defineType({
+/**
+ * @public
+ */
+export const codeTypeName = 'code' as const
+
+/**
+ * @public
+ */
+export interface CodeDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {
+  type: typeof codeTypeName
+  options?: CodeOptions
+}
+
+declare module '@sanity/types' {
+  // makes type: 'code' narrow correctly when using defineType/defineField/defineArrayMember
+  export interface IntrinsicDefinitions {
+    code: CodeDefinition
+  }
+}
+
+/**
+ * @public
+ */
+export const codeSchema = defineType({
   name: 'code',
   type: 'object',
   title: 'Code',
@@ -59,6 +82,7 @@ export default defineType({
       return {
         title: value.filename || (value.language || 'unknown').toUpperCase(),
         media: getMedia(value?.language),
+        selection: value,
       }
     },
   },

package/src/types.ts

@@ -1,22 +1,15 @@
+/**
+ * @public
+ */
 export interface CodeInputLanguage {
   title: string
   value: string
   mode?: string
 }
 
-export interface CodeInputType {
-  name?: string
-  title?: string
-  description?: string
-  fields: {name: string; title?: string; placeholder?: string}[]
-  options?: {
-    theme?: string
-    languageAlternatives: CodeInputLanguage[]
-    language: string
-    withFilename?: boolean
-  }
-}
-
+/**
+ * @public
+ */
 export interface CodeInputValue {
   _type?: 'code'
   code?: string