@sanity/code-input 3.0.0-v3-studio.0 → 3.0.0-v3-studio.3

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import {renderToString} from 'react-dom/server'
+import {useAceEditor} from './AceEditorLazy'
+
+describe('AceEditor - server', () => {
+  it('should render null to string (and not throw and Error)', () => {
+    const TestComponent = () => {
+      const Editor = useAceEditor()
+      if (!Editor) {
+        return null
+      }
+      throw new Error('editor should always be null in envs without window')
+    }
+    const serverString = renderToString(<TestComponent />)
+
+    expect(serverString).toEqual('')
+  })
+})

package/src/ace-editor/AceEditorLazy.tsx

@@ -0,0 +1,19 @@
+import React, {useEffect, useState} from 'react'
+
+/**
+ * AceEditor loads window global directly when imported, which crashes in node envs.
+ * This works around the issue by only importing ace-dependencies when window is defined.
+ *
+ * We only set the ace lazy component after mounting, to allow us to render null on the server,
+ * and use suspense on the client. This will make hydration work correctly.
+ */
+export const AceEditorLazy = React.lazy(() => import('./editorSupport'))
+
+export function useAceEditor() {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return mounted ? AceEditorLazy : null
+}

package/src/{editorSupport.ts → ace-editor/editorSupport.ts}

@@ -1,3 +1,6 @@
+import ReactAce from 'react-ace'
+export default ReactAce
+
 // NOTE: MAKE SURE THESE ALIGN WITH SUPPORTED_LANGUAGES in ./config
 import './groq'
 

package/src/schema.tsx

@@ -1,22 +1,19 @@
-import React from 'react'
 import {CodeBlockIcon} from '@sanity/icons'
 import {CodeInput} from './CodeInput'
 import PreviewCode, {PreviewCodeProps} from './PreviewCode'
 import {getMedia} from './getMedia'
+import {defineType} from 'sanity'
 
 export type {CodeInputProps, CodeSchemaType} from './CodeInput'
 
 export type {CodeInputLanguage, CodeInputValue} from './types'
+export type {PreviewCode, PreviewCodeProps, CodeInput}
 
-const Preview = (props: PreviewCodeProps) => {
-  return <PreviewCode {...props} />
-}
-
-export default {
+export default defineType({
   name: 'code',
   type: 'object',
   title: 'Code',
-  components: {input: CodeInput},
+  components: {input: CodeInput, preview: PreviewCode},
   icon: CodeBlockIcon,
   fields: [
     {
@@ -62,8 +59,7 @@ export default {
       return {
         title: value.filename || (value.language || 'unknown').toUpperCase(),
         media: getMedia(value?.language),
-        extendedPreview: <Preview value={value} />,
       }
     },
   },
-}
+})