@sanity/code-input 3.0.1 → 4.1.0

package/src/__workshop__/preview.tsx

@@ -0,0 +1,24 @@
+import {Box, Container} from '@sanity/ui'
+import {useWorkshopSanity} from '@sanity/ui-workshop-plugin-sanity'
+import {isObjectSchemaType, useSchema} from 'sanity'
+import {DocumentFormProvider, SelectedInput} from 'sanity-extra'
+
+export default function PreviewStory() {
+  const {onPatchEvent} = useWorkshopSanity()
+  const schema = useSchema()
+  const schemaType = schema.get('test')
+
+  if (!isObjectSchemaType(schemaType)) {
+    return <>Not an object type</>
+  }
+
+  return (
+    <DocumentFormProvider documentId="test" onPatchEvent={onPatchEvent} schemaType={schemaType}>
+      <Container width={1}>
+        <Box paddingX={4} paddingY={[5, 6, 7]}>
+          <SelectedInput selectedPath={['content']} />
+        </Box>
+      </Container>
+    </DocumentFormProvider>
+  )
+}

package/src/__workshop__/props.tsx

@@ -0,0 +1,24 @@
+import {Box, Container} from '@sanity/ui'
+import {useWorkshopSanity} from '@sanity/ui-workshop-plugin-sanity'
+import {isObjectSchemaType, useSchema} from 'sanity'
+import {DocumentFormProvider, SelectedInput} from 'sanity-extra'
+
+export default function PropsStory() {
+  const {onPatchEvent} = useWorkshopSanity()
+  const schema = useSchema()
+  const schemaType = schema.get('test')
+
+  if (!isObjectSchemaType(schemaType)) {
+    return <>Not an object type</>
+  }
+
+  return (
+    <DocumentFormProvider documentId="test" onPatchEvent={onPatchEvent} schemaType={schemaType}>
+      <Container width={1}>
+        <Box paddingX={4} paddingY={[5, 6, 7]}>
+          <SelectedInput selectedPath={['code']} />
+        </Box>
+      </Container>
+    </DocumentFormProvider>
+  )
+}

package/src/codemirror/CodeMirrorProxy.tsx

@@ -0,0 +1,157 @@
+import {forwardRef, useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import CodeMirror, {ReactCodeMirrorProps, ReactCodeMirrorRef} from '@uiw/react-codemirror'
+import {useCodeMirrorTheme} from './extensions/useCodeMirrorTheme'
+import {Extension} from '@codemirror/state'
+import {CodeInputConfigContext} from './CodeModeContext'
+import {defaultCodeModes} from './defaultCodeModes'
+import {
+  highlightLine,
+  highlightState,
+  setHighlightedLines,
+} from './extensions/highlightLineExtension'
+import {EditorView} from '@codemirror/view'
+import {useRootTheme} from '@sanity/ui'
+import {useFontSizeExtension} from './extensions/useFontSize'
+import {useThemeExtension} from './extensions/theme'
+
+export interface CodeMirrorProps extends ReactCodeMirrorProps {
+  highlightLines?: number[]
+  languageMode?: string
+  onHighlightChange?: (lines: number[]) => void
+}
+
+/**
+ * CodeMirrorProxy is a wrapper component around CodeMirror that we lazy load to reduce initial bundle size.
+ *
+ * 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}],
+        },
+        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}
+    />
+  )
+})
+
+function useLanguageExtension(mode?: string) {
+  const codeConfig = useContext(CodeInputConfigContext)
+
+  const [languageExtension, setLanguageExtension] = useState<Extension | undefined>()
+
+  useEffect(() => {
+    const customModes = codeConfig?.codeModes ?? []
+    const modes = [...customModes, ...defaultCodeModes]
+
+    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.`
+      )
+    }
+    let active = true
+    Promise.resolve(codeMode?.loader())
+      .then((extension) => {
+        if (active) {
+          setLanguageExtension(extension)
+        }
+      })
+      .catch((e) => {
+        console.error(`Failed to load language mode ${mode}`, e)
+        if (active) {
+          setLanguageExtension(undefined)
+        }
+      })
+    return () => {
+      active = false
+    }
+  }, [mode, codeConfig])
+
+  return languageExtension
+}
+
+export default CodeMirrorProxy

package/src/codemirror/CodeModeContext.tsx

@@ -0,0 +1,4 @@
+import {createContext} from 'react'
+import {CodeInputConfig} from '../plugin'
+
+export const CodeInputConfigContext = createContext<CodeInputConfig | undefined>(undefined)

package/src/codemirror/defaultCodeModes.ts

@@ -0,0 +1,109 @@
+import {StreamLanguage} from '@codemirror/language'
+import {type Extension} from '@codemirror/state'
+
+export interface CodeMode {
+  name: string
+  loader: ModeLoader
+}
+export type ModeLoader = () => Promise<Extension | undefined> | Extension | undefined
+
+export const defaultCodeModes: CodeMode[] = [
+  {
+    name: 'groq',
+    loader: () =>
+      import('@codemirror/lang-javascript').then(({javascript}) => javascript({jsx: false})),
+  },
+  {
+    name: 'javascript',
+    loader: () =>
+      import('@codemirror/lang-javascript').then(({javascript}) => javascript({jsx: false})),
+  },
+  {
+    name: 'jsx',
+    loader: () =>
+      import('@codemirror/lang-javascript').then(({javascript}) => javascript({jsx: true})),
+  },
+  {
+    name: 'typescript',
+    loader: () =>
+      import('@codemirror/lang-javascript').then(({javascript}) =>
+        javascript({jsx: false, typescript: true})
+      ),
+  },
+  {
+    name: 'tsx',
+    loader: () =>
+      import('@codemirror/lang-javascript').then(({javascript}) =>
+        javascript({jsx: true, typescript: true})
+      ),
+  },
+  {name: 'php', loader: () => import('@codemirror/lang-php').then(({php}) => php())},
+  {name: 'sql', loader: () => import('@codemirror/lang-sql').then(({sql}) => sql())},
+  {
+    name: 'mysql',
+    loader: () => import('@codemirror/lang-sql').then(({sql, MySQL}) => sql({dialect: MySQL})),
+  },
+  {name: 'json', loader: () => import('@codemirror/lang-json').then(({json}) => json())},
+  {
+    name: 'markdown',
+    loader: () => import('@codemirror/lang-markdown').then(({markdown}) => markdown()),
+  },
+  {name: 'java', loader: () => import('@codemirror/lang-java').then(({java}) => java())},
+  {name: 'html', loader: () => import('@codemirror/lang-html').then(({html}) => html())},
+  {
+    name: 'csharp',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/clike').then(({csharp}) =>
+        StreamLanguage.define(csharp)
+      ),
+  },
+  {
+    name: 'sh',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/shell').then(({shell}) => StreamLanguage.define(shell)),
+  },
+  {
+    name: 'css',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/css').then(({css}) => StreamLanguage.define(css)),
+  },
+  {
+    name: 'scss',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/css').then(({css}) => StreamLanguage.define(css)),
+  },
+  {
+    name: 'sass',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/sass').then(({sass}) => StreamLanguage.define(sass)),
+  },
+  {
+    name: 'ruby',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/ruby').then(({ruby}) => StreamLanguage.define(ruby)),
+  },
+  {
+    name: 'python',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/python').then(({python}) =>
+        StreamLanguage.define(python)
+      ),
+  },
+  {
+    name: 'xml',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/xml').then(({xml}) => StreamLanguage.define(xml)),
+  },
+  {
+    name: 'yaml',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/yaml').then(({yaml}) => StreamLanguage.define(yaml)),
+  },
+  {
+    name: 'golang',
+    loader: () =>
+      import('@codemirror/legacy-modes/mode/go').then(({go}) => StreamLanguage.define(go)),
+  },
+  {name: 'text', loader: () => undefined},
+  {name: 'batch', loader: () => undefined},
+]

package/src/codemirror/extensions/highlightLineExtension.ts

@@ -0,0 +1,164 @@
+/* eslint-disable no-param-reassign */
+
+import {Extension, StateEffect, StateField} from '@codemirror/state'
+import {Decoration, EditorView, lineNumbers} from '@codemirror/view'
+import {ThemeContextValue, rgba} from '@sanity/ui'
+
+const highlightLineClass = 'cm-highlight-line'
+
+export const addLineHighlight = StateEffect.define<number>()
+export const removeLineHighlight = StateEffect.define<number>()
+
+export const lineHighlightField = StateField.define({
+  create() {
+    return Decoration.none
+  },
+  update(lines, tr) {
+    lines = lines.map(tr.changes)
+    for (const e of tr.effects) {
+      if (e.is(addLineHighlight)) {
+        lines = lines.update({add: [lineHighlightMark.range(e.value)]})
+      }
+      if (e.is(removeLineHighlight)) {
+        lines = lines.update({
+          filter: (from) => {
+            // removeLineHighlight value is lineStart for the highlight, so keep other effects
+            return from !== e.value
+          },
+        })
+      }
+    }
+    return lines
+  },
+  toJSON(value, state) {
+    const highlightLines: number[] = []
+    const iter = value.iter()
+    while (iter.value) {
+      const lineNumber = state.doc.lineAt(iter.from).number
+      if (!highlightLines.includes(lineNumber)) {
+        highlightLines.push(lineNumber)
+      }
+      iter.next()
+    }
+    return highlightLines
+  },
+  fromJSON(value: number[], state) {
+    const lines = state.doc.lines
+    const highlights = value
+      .filter((line) => line <= lines) // one-indexed
+      .map((line) => lineHighlightMark.range(state.doc.line(line).from))
+    return Decoration.none.update({
+      add: highlights,
+    })
+  },
+  provide: (f) => EditorView.decorations.from(f),
+})
+
+const lineHighlightMark = Decoration.line({
+  class: highlightLineClass,
+})
+
+export const highlightState: {
+  [prop: string]: StateField<any>
+} = {
+  highlight: lineHighlightField,
+}
+
+export interface HighlightLineConfig {
+  onHighlightChange?: (lines: number[]) => void
+  readOnly?: boolean
+  theme: ThemeContextValue
+}
+
+function createCodeMirrorTheme(options: {themeCtx: ThemeContextValue}) {
+  const {themeCtx} = options
+  const dark = {color: themeCtx.theme.color.dark[themeCtx.tone]}
+  const light = {color: themeCtx.theme.color.light[themeCtx.tone]}
+
+  return EditorView.baseTheme({
+    '.cm-lineNumbers': {
+      cursor: 'default',
+    },
+    '.cm-line.cm-line': {
+      position: 'relative',
+    },
+
+    // need set background with pseudoelement so it does not render over selection color
+    [`.${highlightLineClass}::before`]: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: -3,
+      content: "''",
+      boxSizing: 'border-box',
+    },
+    [`&dark .${highlightLineClass}::before`]: {
+      background: rgba(dark.color.muted.caution.pressed.bg, 0.5),
+    },
+    [`&light .${highlightLineClass}::before`]: {
+      background: rgba(light.color.muted.caution.pressed.bg, 0.75),
+    },
+  })
+}
+
+export const highlightLine = (config: HighlightLineConfig): Extension => {
+  const highlightTheme = createCodeMirrorTheme({themeCtx: config.theme})
+
+  return [
+    lineHighlightField,
+    config.readOnly
+      ? []
+      : lineNumbers({
+          domEventHandlers: {
+            mousedown: (editorView, lineInfo) => {
+              // Determine if the line for the clicked gutter line number has highlighted state or not
+              const line = editorView.state.doc.lineAt(lineInfo.from)
+              let isHighlighted = false
+              editorView.state
+                .field(lineHighlightField)
+                .between(line.from, line.to, (from, to, value) => {
+                  if (value) {
+                    isHighlighted = true
+                    return false // stop iteration
+                  }
+                  return undefined
+                })
+
+              if (isHighlighted) {
+                editorView.dispatch({effects: removeLineHighlight.of(line.from)})
+              } else {
+                editorView.dispatch({effects: addLineHighlight.of(line.from)})
+              }
+              if (config?.onHighlightChange) {
+                config.onHighlightChange(editorView.state.toJSON(highlightState).highlight)
+              }
+              return true
+            },
+          },
+        }),
+    highlightTheme,
+  ]
+}
+
+/**
+ * Adds and removes highlights to the provided view using highlightLines
+ * @param view
+ * @param highlightLines
+ */
+export function setHighlightedLines(view: EditorView, highlightLines: number[]): void {
+  const doc = view.state.doc
+  const lines = doc.lines
+  //1-based line numbers
+  const allLineNumbers = Array.from({length: lines}, (x, i) => i + 1)
+  view.dispatch({
+    effects: allLineNumbers.map((lineNumber) => {
+      const line = doc.line(lineNumber)
+      if (highlightLines?.includes(lineNumber)) {
+        return addLineHighlight.of(line.from)
+      }
+      return removeLineHighlight.of(line.from)
+    }),
+  })
+}

package/src/codemirror/extensions/theme.ts

@@ -0,0 +1,61 @@
+import {Extension} from '@codemirror/state'
+import {EditorView} from '@codemirror/view'
+import {rgba, useRootTheme} from '@sanity/ui'
+import {useMemo} from 'react'
+
+export function useThemeExtension(): Extension {
+  const themeCtx = useRootTheme()
+
+  return useMemo(() => {
+    const dark = {color: themeCtx.theme.color.dark[themeCtx.tone]}
+    const light = {color: themeCtx.theme.color.light[themeCtx.tone]}
+
+    return EditorView.baseTheme({
+      '&.cm-editor': {
+        height: '100%',
+      },
+      '&.cm-editor.cm-focused': {
+        outline: 'none',
+      },
+
+      // Matching brackets
+      '&.cm-editor.cm-focused .cm-matchingBracket': {
+        backgroundColor: 'transparent',
+      },
+      '&.cm-editor.cm-focused .cm-nonmatchingBracket': {
+        backgroundColor: 'transparent',
+      },
+      '&dark.cm-editor.cm-focused .cm-matchingBracket': {
+        outline: `1px solid ${dark.color.base.border}`,
+      },
+      '&dark.cm-editor.cm-focused .cm-nonmatchingBracket': {
+        outline: `1px solid ${dark.color.base.border}`,
+      },
+      '&light.cm-editor.cm-focused .cm-matchingBracket': {
+        outline: `1px solid ${light.color.base.border}`,
+      },
+      '&light.cm-editor.cm-focused .cm-nonmatchingBracket': {
+        outline: `1px solid ${light.color.base.border}`,
+      },
+
+      // Size and padding of gutter
+      '& .cm-lineNumbers .cm-gutterElement': {
+        minWidth: `32px !important`,
+        padding: `0 8px !important`,
+      },
+      '& .cm-gutter.cm-foldGutter': {
+        width: `0px !important`,
+      },
+
+      // Color of gutter
+      '&dark .cm-gutters': {
+        color: `${rgba(dark.color.card.enabled.code.fg, 0.5)} !important`,
+        borderRight: `1px solid ${rgba(dark.color.base.border, 0.5)}`,
+      },
+      '&light .cm-gutters': {
+        color: `${rgba(light.color.card.enabled.code.fg, 0.5)} !important`,
+        borderRight: `1px solid ${rgba(light.color.base.border, 0.5)}`,
+      },
+    })
+  }, [themeCtx])
+}

package/src/codemirror/extensions/useCodeMirrorTheme.ts

@@ -0,0 +1,63 @@
+import {rgba, useTheme} from '@sanity/ui'
+import {useMemo} from 'react'
+import {createTheme} from '@uiw/codemirror-themes'
+import {tags as t} from '@lezer/highlight'
+import {Extension} from '@codemirror/state'
+
+export function useCodeMirrorTheme(): Extension {
+  const theme = useTheme()
+
+  return useMemo(() => {
+    const {code: codeFont} = theme.sanity.fonts
+    const {base, card, dark, syntax} = theme.sanity.color
+
+    return createTheme({
+      theme: dark ? 'dark' : 'light',
+      settings: {
+        background: card.enabled.bg,
+        foreground: card.enabled.code.fg,
+        lineHighlight: card.enabled.bg,
+        fontFamily: codeFont.family,
+        caret: base.focusRing,
+        selection: rgba(base.focusRing, 0.2),
+        selectionMatch: rgba(base.focusRing, 0.4),
+        gutterBackground: card.disabled.bg,
+        gutterForeground: card.disabled.code.fg,
+        gutterActiveForeground: card.enabled.fg,
+      },
+      styles: [
+        {
+          tag: [t.heading, t.heading2, t.heading3, t.heading4, t.heading5, t.heading6],
+          color: card.enabled.fg,
+        },
+        {tag: t.angleBracket, color: card.enabled.code.fg},
+        {tag: t.atom, color: syntax.keyword},
+        {tag: t.attributeName, color: syntax.attrName},
+        {tag: t.bool, color: syntax.boolean},
+        {tag: t.bracket, color: card.enabled.code.fg},
+        {tag: t.className, color: syntax.className},
+        {tag: t.comment, color: syntax.comment},
+        {tag: t.definition(t.typeName), color: syntax.function},
+        {
+          tag: [
+            t.definition(t.variableName),
+            t.function(t.variableName),
+            t.className,
+            t.attributeName,
+          ],
+          color: syntax.function,
+        },
+        {tag: [t.function(t.propertyName), t.propertyName], color: syntax.function},
+        {tag: t.keyword, color: syntax.keyword},
+        {tag: t.null, color: syntax.number},
+        {tag: t.number, color: syntax.number},
+        {tag: t.meta, color: card.enabled.code.fg},
+        {tag: t.operator, color: syntax.operator},
+        {tag: t.propertyName, color: syntax.property},
+        {tag: [t.string, t.special(t.brace)], color: syntax.string},
+        {tag: t.tagName, color: syntax.className},
+        {tag: t.typeName, color: syntax.keyword},
+      ],
+    })
+  }, [theme])
+}

package/src/codemirror/extensions/useFontSize.ts

@@ -0,0 +1,24 @@
+import {Extension} from '@codemirror/state'
+import {EditorView} from '@codemirror/view'
+import {rem, useTheme} from '@sanity/ui'
+import {useMemo} from 'react'
+
+export function useFontSizeExtension(props: {fontSize: number}): Extension {
+  const {fontSize: fontSizeProp} = props
+  const theme = useTheme()
+
+  return useMemo(() => {
+    const {code: codeFont} = theme.sanity.fonts
+    const {fontSize, lineHeight} = codeFont.sizes[fontSizeProp] || codeFont.sizes[2]
+
+    return EditorView.baseTheme({
+      '&': {
+        fontSize: rem(fontSize),
+      },
+
+      '& .cm-scroller': {
+        lineHeight: `${lineHeight / fontSize} !important`,
+      },
+    })
+  }, [fontSizeProp, theme])
+}

package/src/codemirror/useCodeMirror-client.test.tsx

@@ -0,0 +1,49 @@
+/** @jest-environment jsdom */
+
+import {Suspense} from 'react'
+
+import {act, render} from '@testing-library/react'
+import {useCodeMirror} from './useCodeMirror'
+import {studioTheme, ThemeProvider} from '@sanity/ui'
+
+describe('useCodeMirror - client', () => {
+  beforeEach(() => {
+    jest
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation((callback: FrameRequestCallback): number => {
+        try {
+          // eslint-disable-next-line callback-return
+          callback(0)
+        } catch (e) {
+          // CodeMirror does some mesurement shenanigance that json dont support
+          // we just let it crash silently
+        }
+        return 0
+      })
+  })
+
+  afterEach(() => {
+    ;(window.requestAnimationFrame as any).mockRestore()
+  })
+
+  it('should render suspended ace editor', async () => {
+    const TestComponent = () => {
+      const CodeMirror = useCodeMirror()
+      return (
+        <Suspense fallback={'loading'}>
+          {CodeMirror && (
+            <ThemeProvider theme={studioTheme}>
+              <CodeMirror languageMode={'tsx'} />
+            </ThemeProvider>
+          )}
+        </Suspense>
+      )
+    }
+    let container: any
+    await act(async () => {
+      const result = render(<TestComponent />)
+      container = result.container
+    })
+    expect(container.querySelector('.cm-theme')).toBeTruthy()
+  })
+})