@sanity/code-input 3.0.1 → 4.1.0

package/src/CodeInput.tsx

@@ -1,102 +1,57 @@
-/* eslint-disable react/jsx-handler-names */
-import React, {Suspense, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
-import {
-  InputProps,
-  ObjectSchemaType,
-  StringInputProps,
-  useColorScheme,
-  FieldMember,
-  MemberField,
-  ObjectInputProps,
-  set,
-  setIfMissing,
-  unset,
-  RenderInputCallback,
-} from 'sanity'
-import {Card, Select, Stack, ThemeColorSchemeKey} from '@sanity/ui'
-import styled from 'styled-components'
-import createHighlightMarkers, {highlightMarkersCSS} from './createHighlightMarkers'
-import {CodeInputLanguage, CodeInputValue} from './types'
-import {
-  ACE_EDITOR_PROPS,
-  ACE_SET_OPTIONS,
-  DEFAULT_DARK_THEME,
-  DEFAULT_THEME,
-  LANGUAGE_ALIASES,
-  PATH_CODE,
-  SUPPORTED_LANGUAGES,
-  SUPPORTED_THEMES,
-} from './config'
-import {useAceEditor} from './ace-editor/AceEditorLazy'
+import {Suspense, useCallback} from 'react'
+import {MemberField, ObjectInputProps, RenderInputCallback, set, setIfMissing, unset} from 'sanity'
+import {Box, Card, Stack, Text} from '@sanity/ui'
+import styled, {css} from 'styled-components'
+import {LanguageField} from './LanguageField'
+import {useCodeMirror} from './codemirror/useCodeMirror'
+import {useLanguageMode} from './codemirror/useLanguageMode'
+import {PATH_CODE} from './config'
+import {CodeInputValue, CodeSchemaType} from './types'
+import {useFieldMember} from './useFieldMember'
+import {focusRingBorderStyle, focusRingStyle} from './ui/focusRingStyle'
 
 export type {CodeInputLanguage, CodeInputValue} from './types'
 
-const EditorContainer = styled(Card)`
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  z-index: 0;
-
-  .ace_editor {
-    font-family: ${({theme}) => theme.sanity.fonts.code.family};
-    font-size: ${({theme}) => theme.sanity.fonts.code.sizes[1]};
-    line-height: inherit;
-  }
-
-  ${highlightMarkersCSS}
-
-  &:not([disabled]):not([readonly]) {
-    &:focus,
-    &:focus-within {
-      box-shadow: 0 0 0 2px ${({theme}) => theme.sanity.color.base.focusRing};
-      background-color: ${({theme}) => theme.sanity.color.base.bg};
-      border-color: ${({theme}) => theme.sanity.color.base.focusRing};
-    }
-  }
-`
-
-/**
- * @public
- */
-export interface CodeOptions {
-  theme?: string
-  darkTheme?: string
-  languageAlternatives?: CodeInputLanguage[]
-  language?: string
-  withFilename?: boolean
-}
-
-/**
- * @public
- */
-export type CodeSchemaType = Omit<ObjectSchemaType, 'options'> & {
-  options?: CodeOptions
-}
-
 /**
  * @public
  */
-export type CodeInputProps = ObjectInputProps<CodeInputValue, CodeSchemaType> & {
-  /** @internal */
-  colorScheme?: ThemeColorSchemeKey
-}
+export interface CodeInputProps extends ObjectInputProps<CodeInputValue, CodeSchemaType> {}
+
+const EditorContainer = styled(Card)(({theme}) => {
+  const {focusRing, input} = theme.sanity
+  const base = theme.sanity.color.base
+  const color = theme.sanity.color.input
+  const border = {
+    color: color.default.enabled.border,
+    width: input.border.width,
+  }
 
-// Returns a string with the mode name if supported (because aliases), otherwise false
-function isSupportedLanguage(mode: string) {
-  const alias = LANGUAGE_ALIASES[mode]
+  return css`
+    --input-box-shadow: ${focusRingBorderStyle(border)};
 
-  if (alias) {
-    return alias
-  }
+    box-shadow: var(--input-box-shadow);
+    height: 250px;
+    min-height: 80px;
+    overflow-y: auto;
+    position: relative;
+    resize: vertical;
+    z-index: 0;
 
-  const isSupported = SUPPORTED_LANGUAGES.find((lang) => lang.value === mode)
-  if (isSupported) {
-    return mode
-  }
+    & > .cm-theme {
+      height: 100%;
+    }
 
-  return false
-}
+    &:focus-within {
+      --input-box-shadow: ${focusRingStyle({
+        base,
+        border,
+        focusRing,
+      })};
+    }
+  `
+})
 
+/** @public */
 export function CodeInput(props: CodeInputProps) {
   const {
     members,
@@ -112,135 +67,19 @@ export function CodeInput(props: CodeInputProps) {
     onPathFocus,
   } = props
 
-  const aceEditorRef = useRef<any>()
-
-  const fieldMembers = useMemo(
-    () => members.filter((member) => member.kind === 'field') as FieldMember[],
-    [members]
-  )
-
-  const languageFieldMember = fieldMembers.find((member) => member.name === 'language')
-  const filenameMember = fieldMembers.find((member) => member.name === 'filename')
-  const codeFieldMember = fieldMembers.find((member) => member.name === 'code')
-
-  useImperativeHandle(elementProps.ref, () => ({
-    focus: () => {
-      aceEditorRef?.current?.editor?.focus()
-    },
-  }))
+  const languageFieldMember = useFieldMember(members, 'language')
+  const filenameMember = useFieldMember(members, 'filename')
+  const codeFieldMember = useFieldMember(members, 'code')
 
   const handleCodeFocus = useCallback(() => {
     onPathFocus(PATH_CODE)
   }, [onPathFocus])
 
-  const {scheme} = useColorScheme()
-
-  const theme = useMemo(() => {
-    const isLight = scheme === 'light'
-    const preferredTheme = isLight ? type.options?.theme : type.options?.darkTheme
-    const defaultTheme = isLight ? DEFAULT_THEME : DEFAULT_DARK_THEME
-    return preferredTheme && SUPPORTED_THEMES.find((t) => t === preferredTheme)
-      ? preferredTheme
-      : defaultTheme
-  }, [type, scheme])
-
-  const handleToggleSelectLine = useCallback(
-    (lineNumber: number) => {
-      const editorSession = aceEditorRef.current?.editor?.getSession()
-      const backgroundMarkers = editorSession?.getMarkers(true)
-      const currentHighlightedLines = Object.keys(backgroundMarkers)
-        .filter((key) => backgroundMarkers[key].type === 'screenLine')
-        .map((key) => backgroundMarkers[key].range.start.row)
-      const currentIndex = currentHighlightedLines.indexOf(lineNumber)
-      if (currentIndex > -1) {
-        // toggle remove
-        currentHighlightedLines.splice(currentIndex, 1)
-      } else {
-        // toggle add
-        currentHighlightedLines.push(lineNumber)
-        currentHighlightedLines.sort()
-      }
-      onChange(
-        set(
-          currentHighlightedLines.map(
-            (line) =>
-              // ace starts at line (row) 0, but we store it starting at line 1
-              line + 1
-          ),
-          ['highlightedLines']
-        )
-      )
-    },
-    [aceEditorRef, onChange]
-  )
-
-  const handleGutterMouseDown = useCallback(
-    (event: any) => {
-      const target = event.domEvent.target
-      if (target.classList.contains('ace_gutter-cell')) {
-        const row = event.getDocumentPosition().row
-        handleToggleSelectLine(row)
-      }
-    },
-    [handleToggleSelectLine]
-  )
-
-  useEffect(() => {
-    const editor = aceEditorRef?.current?.editor
-    return () => {
-      editor?.session?.removeListener('guttermousedown', handleGutterMouseDown)
-    }
-  }, [aceEditorRef, handleGutterMouseDown])
-
-  const handleEditorLoad = useCallback(
-    (editor: any) => {
-      editor?.on('guttermousedown', handleGutterMouseDown)
-    },
-    [handleGutterMouseDown]
+  const onHighlightChange = useCallback(
+    (lines: number[]) => onChange(set(lines, ['highlightedLines'])),
+    [onChange]
   )
 
-  const getLanguageAlternatives = useCallback((): {
-    title: string
-    value: string
-    mode?: string
-  }[] => {
-    const languageAlternatives = type.options?.languageAlternatives
-    if (!languageAlternatives) {
-      return SUPPORTED_LANGUAGES
-    }
-
-    if (!Array.isArray(languageAlternatives)) {
-      throw new Error(
-        `'options.languageAlternatives' should be an array, got ${typeof languageAlternatives}`
-      )
-    }
-
-    return languageAlternatives.reduce((acc: CodeInputLanguage[], {title, value: val, mode}) => {
-      const alias = LANGUAGE_ALIASES[val]
-      if (alias) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `'options.languageAlternatives' lists a language with value "%s", which is an alias of "%s" - please replace the value to read "%s"`,
-          val,
-          alias,
-          alias
-        )
-
-        return acc.concat({title, value: alias, mode: mode})
-      }
-
-      if (!mode && !SUPPORTED_LANGUAGES.find((lang) => lang.value === val)) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `'options.languageAlternatives' lists a language which is not supported: "%s", syntax highlighting will be disabled.`,
-          val
-        )
-      }
-
-      return acc.concat({title, value: val, mode})
-    }, [])
-  }, [type])
-
   const handleCodeChange = useCallback(
     (code: string) => {
       const path = PATH_CODE
@@ -253,69 +92,29 @@ export function CodeInput(props: CodeInputProps) {
     },
     [onChange, type]
   )
+  const {languages, language, languageMode} = useLanguageMode(props.schemaType, props.value)
 
-  const languages = getLanguageAlternatives().slice()
-
-  const fixedLanguage = type.options?.language
-
-  const language = value?.language || fixedLanguage
-
-  // the language config from the schema
-  const configured = languages.find((entry) => entry.value === language)
-
-  // is the language officially supported (e.g. we import the mode by default)
-  const supported = language && isSupportedLanguage(language)
-
-  const mode = configured?.mode || (supported ? language : 'text')
-
-  const renderLanguageInput = useCallback(
-    (inputProps: Omit<InputProps, 'renderDefault'>) => {
-      return (
-        <Select
-          {...(inputProps as StringInputProps)}
-          onChange={(e) => {
-            const newValue = e.currentTarget.value
-            inputProps.onChange(newValue ? set(newValue) : unset())
-          }}
-        >
-          {languages.map((lang: {title: string; value: string}) => (
-            <option key={lang.value} value={lang.value}>
-              {lang.title}
-            </option>
-          ))}
-        </Select>
-      )
-    },
-    [languages]
-  )
-
-  const AceEditor = useAceEditor()
+  const CodeMirror = useCodeMirror()
 
   const renderCodeInput: RenderInputCallback = useCallback(
     (inputProps) => {
       return (
-        <EditorContainer radius={1} shadow={1} readOnly={readOnly}>
-          {AceEditor && (
-            <Suspense fallback={<div>Loading code editor...</div>}>
-              <AceEditor
-                ref={aceEditorRef}
-                mode={mode}
-                theme={theme}
-                width="100%"
+        <EditorContainer border overflow="hidden" radius={1} sizing="border" readOnly={readOnly}>
+          {CodeMirror && (
+            <Suspense
+              fallback={
+                <Box padding={3}>
+                  <Text>Loading code editor...</Text>
+                </Box>
+              }
+            >
+              <CodeMirror
+                languageMode={languageMode}
                 onChange={handleCodeChange}
-                name={inputProps.id}
                 value={inputProps.value as string}
-                markers={
-                  value && value.highlightedLines
-                    ? createHighlightMarkers(value.highlightedLines)
-                    : undefined
-                }
-                onLoad={handleEditorLoad}
+                highlightLines={value?.highlightedLines}
+                onHighlightChange={onHighlightChange}
                 readOnly={readOnly}
-                tabSize={2}
-                wrapEnabled
-                setOptions={ACE_SET_OPTIONS}
-                editorProps={ACE_EDITOR_PROPS}
                 onFocus={handleCodeFocus}
                 onBlur={elementProps.onBlur}
               />
@@ -325,12 +124,11 @@ export function CodeInput(props: CodeInputProps) {
       )
     },
     [
-      AceEditor,
-      theme,
+      CodeMirror,
       handleCodeChange,
       handleCodeFocus,
-      handleEditorLoad,
-      mode,
+      onHighlightChange,
+      languageMode,
       elementProps.onBlur,
       readOnly,
       value,
@@ -340,11 +138,13 @@ export function CodeInput(props: CodeInputProps) {
   return (
     <Stack space={4}>
       {languageFieldMember && (
-        <MemberField
+        <LanguageField
           member={languageFieldMember}
-          renderItem={renderItem}
+          language={language}
+          languages={languages}
           renderField={renderField}
-          renderInput={renderLanguageInput}
+          renderItem={renderItem}
+          renderInput={renderInput}
           renderPreview={renderPreview}
         />
       )}

package/src/LanguageField.tsx

@@ -0,0 +1,33 @@
+import {useCallback} from 'react'
+import {FieldMember, InputProps, MemberField, MemberFieldProps, StringInputProps} from 'sanity'
+import {CodeInputLanguage} from './types'
+import {LanguageInput} from './LanguageInput'
+
+export function LanguageField(
+  props: MemberFieldProps & {member: FieldMember; language: string; languages: CodeInputLanguage[]}
+) {
+  const {member, languages, language, renderItem, renderField, renderPreview} = props
+
+  const renderInput = useCallback(
+    (inputProps: Omit<InputProps, 'renderDefault'>) => {
+      return (
+        <LanguageInput
+          {...(inputProps as StringInputProps)}
+          language={language}
+          languages={languages}
+        />
+      )
+    },
+    [languages, language]
+  )
+
+  return (
+    <MemberField
+      member={member}
+      renderItem={renderItem}
+      renderField={renderField}
+      renderInput={renderInput}
+      renderPreview={renderPreview}
+    />
+  )
+}

package/src/LanguageInput.tsx

@@ -0,0 +1,32 @@
+import {ChangeEvent, useCallback} from 'react'
+import {StringInputProps, set, unset} from 'sanity'
+import {Select} from '@sanity/ui'
+import {CodeInputLanguage} from './types'
+
+export interface LanguageInputProps extends StringInputProps {
+  language: string
+  languages: CodeInputLanguage[]
+}
+
+/** @internal */
+export function LanguageInput(props: LanguageInputProps) {
+  const {language, languages, onChange} = props
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      const newValue = e.currentTarget.value
+      onChange(newValue ? set(newValue) : unset())
+    },
+    [onChange]
+  )
+
+  return (
+    <Select {...props} value={language} onChange={handleChange}>
+      {languages.map((lang: {title: string; value: string}) => (
+        <option key={lang.value} value={lang.value}>
+          {lang.title}
+        </option>
+      ))}
+    </Select>
+  )
+}

package/src/PreviewCode.tsx

@@ -1,31 +1,15 @@
-import React, {Suspense, useCallback, useEffect, useRef} from 'react'
+import {Suspense} from 'react'
 import styled from 'styled-components'
-import {Box} from '@sanity/ui'
-import {ACE_EDITOR_PROPS, ACE_SET_OPTIONS} from './config'
-import createHighlightMarkers from './createHighlightMarkers'
-import {CodeInputValue} from './types'
-import {useAceEditor} from './ace-editor/AceEditorLazy'
+import {Label, Box, Card, Flex, Text} from '@sanity/ui'
+import {CodeInputValue, CodeSchemaType} from './types'
 import {PreviewProps} from 'sanity'
+import {useCodeMirror} from './codemirror/useCodeMirror'
+import {useLanguageMode} from './codemirror/useLanguageMode'
 
 const PreviewContainer = styled(Box)`
   position: relative;
 `
 
-const PreviewInner = styled(Box)`
-  background-color: #272822;
-
-  .ace_editor {
-    box-sizing: border-box;
-    cursor: default;
-    pointer-events: none;
-  }
-
-  .ace_content {
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-`
-
 /**
  * @public
  */
@@ -37,62 +21,50 @@ export interface PreviewCodeProps extends PreviewProps {
  * @public
  */
 export default function PreviewCode(props: PreviewCodeProps) {
-  const aceEditorRef = useRef<any>()
-
-  useEffect(() => {
-    if (!aceEditorRef?.current) return
-
-    const editor = aceEditorRef.current?.editor
-
-    if (editor) {
-      // Avoid cursor and focus tracking by Ace
-      editor.renderer.$cursorLayer.element.style.opacity = 0
-      editor.textInput.getElement().disabled = true
-    }
-  }, [])
-
-  const handleEditorChange = useCallback(() => {
-    // do nothing when the editor changes
-  }, [])
-
   const {selection, schemaType: type} = props
-  const fixedLanguage = type?.options?.language
-
-  const mode = selection?.language || fixedLanguage || 'text'
+  const {languageMode} = useLanguageMode(type as CodeSchemaType, props.selection)
 
-  const AceEditor = useAceEditor()
+  const CodeMirror = useCodeMirror()
   return (
     <PreviewContainer>
-      <PreviewInner padding={4}>
-        {AceEditor && (
-          <Suspense fallback={<div>Loading code preview...</div>}>
-            <AceEditor
-              ref={aceEditorRef}
-              focus={false}
-              mode={mode}
-              theme="monokai"
-              width="100%"
-              onChange={handleEditorChange}
-              maxLines={200}
+      <Card padding={4}>
+        {selection?.filename || selection?.language ? (
+          <Card
+            paddingBottom={4}
+            marginBottom={selection.code ? 4 : 0}
+            borderBottom={!!selection.code}
+          >
+            <Flex align="center" justify="flex-end">
+              {selection?.filename ? (
+                <Box flex={1}>
+                  <Text>
+                    <code>{selection.filename}</code>
+                  </Text>
+                </Box>
+              ) : null}
+              {selection?.language ? <Label muted>{selection.language}</Label> : null}
+            </Flex>
+          </Card>
+        ) : null}
+        {CodeMirror && (
+          <Suspense fallback={<Card padding={2}>Loading code preview...</Card>}>
+            <CodeMirror
               readOnly
-              wrapEnabled
-              showPrintMargin={false}
-              highlightActiveLine={false}
-              cursorStart={-1}
+              editable={false}
               value={selection?.code || ''}
-              markers={
-                selection?.highlightedLines
-                  ? createHighlightMarkers(selection.highlightedLines)
-                  : undefined
-              }
-              tabSize={2}
-              showGutter={false}
-              setOptions={ACE_SET_OPTIONS}
-              editorProps={ACE_EDITOR_PROPS}
+              highlightLines={selection?.highlightedLines || []}
+              basicSetup={{
+                lineNumbers: false,
+                foldGutter: false,
+                highlightSelectionMatches: false,
+                highlightActiveLineGutter: false,
+                highlightActiveLine: false,
+              }}
+              languageMode={languageMode}
             />
           </Suspense>
         )}
-      </PreviewInner>
+      </Card>
     </PreviewContainer>
   )
 }

package/src/__workshop__/index.ts

@@ -0,0 +1,22 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'preview',
+      title: 'Preview',
+      component: lazy(() => import('./preview')),
+    },
+    {
+      name: 'lazy',
+      title: 'Lazy',
+      component: lazy(() => import('./lazy')),
+    },
+  ],
+})

package/src/__workshop__/lazy.tsx

@@ -0,0 +1,54 @@
+import {Box, Card, Container, Text} from '@sanity/ui'
+import {Suspense, useState} from 'react'
+import {useCodeMirror} from '../codemirror/useCodeMirror'
+import {SUPPORTED_LANGUAGES} from '../config'
+import {useSelect} from '@sanity/ui-workshop'
+import styled from 'styled-components'
+
+const langs = {
+  ...Object.fromEntries(SUPPORTED_LANGUAGES.map((l) => [l.title, l.mode ?? l.value])),
+  'Not supported': 'not-supported',
+}
+
+const defaultSnippet = `
+<Card border padding={2}>
+  {variable}
+</Card>
+`.trim()
+
+const Root = styled(Card)`
+  & > .cm-theme {
+    height: 100%;
+  }
+`
+
+export default function CodeMirrorStory() {
+  const language = useSelect('Language mode', langs, 'tsx')
+  const [code, setCode] = useState(defaultSnippet)
+  const [highlights, setHighlights] = useState<number[]>([])
+  const CodeMirror = useCodeMirror()
+
+  return (
+    <Container padding={4} sizing="border" width={1}>
+      <Root border overflow="hidden" radius={3} style={{height: 300}}>
+        {CodeMirror && (
+          <Suspense
+            fallback={
+              <Box padding={3}>
+                <Text>Loading code editor...</Text>
+              </Box>
+            }
+          >
+            <CodeMirror
+              value={code}
+              onChange={setCode}
+              highlightLines={highlights}
+              onHighlightChange={setHighlights}
+              languageMode={language}
+            />
+          </Suspense>
+        )}
+      </Root>
+    </Container>
+  )
+}