@sanity/code-input 6.0.3 → 7.0.0

package/src/codemirror/defaultCodeModes.ts

@@ -1,109 +0,0 @@
-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(({javascriptLanguage}) => javascriptLanguage),
-  },
-  {
-    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/backwardsCompatibleTone.ts

@@ -1,19 +0,0 @@
-import type {ThemeContextValue} from '@sanity/ui'
-
-/**
- * `@sanity/ui@v2.9` introduced two new tones; "neutral" and "suggest",
- * which maps to "default" and "primary" respectively in the old theme.
- * This function returns the "backwards compatible" tone value.
- *
- * @returns The tone value that is backwards compatible with the old theme.
- * @internal
- */
-export function getBackwardsCompatibleTone(
-  themeCtx: ThemeContextValue,
-): Exclude<ThemeContextValue['tone'], 'neutral' | 'suggest'> {
-  if (themeCtx.tone !== 'neutral' && themeCtx.tone !== 'suggest') {
-    return themeCtx.tone
-  }
-
-  return themeCtx.tone === 'neutral' ? 'default' : 'primary'
-}

package/src/codemirror/extensions/highlightLineExtension.ts

@@ -1,175 +0,0 @@
-import {type Extension, StateEffect, StateField} from '@codemirror/state'
-import {Decoration, type DecorationSet, EditorView, lineNumbers} from '@codemirror/view'
-import type {ThemeContextValue} from '@sanity/ui'
-import {rgba} from '@sanity/ui/theme'
-
-import {getBackwardsCompatibleTone} from './backwardsCompatibleTone'
-
-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))
-    highlights.sort((a, b) => a.from - b.from)
-    try {
-      return Decoration.none.update({
-        add: highlights,
-      })
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e)
-      return Decoration.none
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-})
-
-const lineHighlightMark = Decoration.line({
-  class: highlightLineClass,
-})
-
-export const highlightState: {
-  [prop: string]: StateField<DecorationSet>
-} = {
-  highlight: lineHighlightField,
-}
-
-export interface HighlightLineConfig {
-  onHighlightChange?: (lines: number[]) => void
-  readOnly?: boolean
-  theme: ThemeContextValue
-}
-
-function createCodeMirrorTheme(options: {themeCtx: ThemeContextValue}) {
-  const {themeCtx} = options
-
-  const fallbackTone = getBackwardsCompatibleTone(themeCtx)
-
-  const dark = {color: themeCtx.theme.color.dark[fallbackTone]}
-  const light = {color: themeCtx.theme.color.light[fallbackTone]}
-
-  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

@@ -1,65 +0,0 @@
-import type {Extension} from '@codemirror/state'
-import {EditorView} from '@codemirror/view'
-import {useRootTheme} from '@sanity/ui'
-import {rgba} from '@sanity/ui/theme'
-import {useMemo} from 'react'
-
-import {getBackwardsCompatibleTone} from './backwardsCompatibleTone'
-
-export function useThemeExtension(): Extension {
-  const themeCtx = useRootTheme()
-
-  return useMemo(() => {
-    const fallbackTone = getBackwardsCompatibleTone(themeCtx)
-    const dark = {color: themeCtx.theme.color.dark[fallbackTone]}
-    const light = {color: themeCtx.theme.color.light[fallbackTone]}
-
-    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

@@ -1,64 +0,0 @@
-import type {Extension} from '@codemirror/state'
-import {tags as t} from '@lezer/highlight'
-import {useTheme} from '@sanity/ui'
-import {rgba} from '@sanity/ui/theme'
-import {createTheme} from '@uiw/codemirror-themes'
-import {useMemo} from 'react'
-
-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

@@ -1,24 +0,0 @@
-import type {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

@@ -1,51 +0,0 @@
-/** @jest-environment jsdom */
-
-import {studioTheme, ThemeProvider} from '@sanity/ui'
-import {act, render} from '@testing-library/react'
-import {Suspense} from 'react'
-
-import {CodeMirrorProxy, useMounted} from './useCodeMirror'
-
-describe('useCodeMirror - client', () => {
-  let rafMock: jest.SpyInstance<number, [FrameRequestCallback]>
-
-  beforeEach(() => {
-    rafMock = jest
-      .spyOn(window, 'requestAnimationFrame')
-      .mockImplementation((callback: FrameRequestCallback): number => {
-        try {
-          callback(0)
-        } catch {
-          // CodeMirror does some mesurement shenanigance that json dont support
-          // we just let it crash silently
-        }
-        return 0
-      })
-  })
-
-  afterEach(() => {
-    rafMock.mockRestore()
-  })
-
-  it('should render suspended codemirror editor', async () => {
-    const TestComponent = () => {
-      const mounted = useMounted()
-      return (
-        <Suspense fallback={'loading'}>
-          {mounted && (
-            <ThemeProvider theme={studioTheme}>
-              <CodeMirrorProxy languageMode={'tsx'} />
-            </ThemeProvider>
-          )}
-        </Suspense>
-      )
-    }
-    let container: HTMLElement | undefined
-    await act(async () => {
-      const result = render(<TestComponent />)
-      container = result.container
-    })
-    expect(container).toBeTruthy()
-    expect(container!.querySelector('.cm-theme')).toBeTruthy()
-  })
-})

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

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

package/src/codemirror/useCodeMirror.tsx

@@ -1,11 +0,0 @@
-import {lazy, startTransition, useEffect, useState} from 'react'
-
-export const CodeMirrorProxy = lazy(() => import('./CodeMirrorProxy'))
-
-export function useMounted() {
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
-    requestAnimationFrame(() => startTransition(() => setMounted(true)))
-  }, [])
-  return mounted
-}

package/src/codemirror/useLanguageMode.tsx

@@ -1,60 +0,0 @@
-import {useMemo} from 'react'
-
-import {LANGUAGE_ALIASES, SUPPORTED_LANGUAGES} from '../config'
-import type {CodeInputLanguage, CodeInputValue, CodeSchemaType} from '../types'
-
-export const defaultLanguageMode = 'text'
-
-export function useLanguageMode(
-  schemaType: CodeSchemaType,
-  value?: CodeInputValue,
-): {
-  language: string
-  languageMode: string
-  languages: CodeInputLanguage[]
-} {
-  const languages = useLanguageAlternatives(schemaType)
-  const fixedLanguage = schemaType.options?.language
-  const language = value?.language ?? fixedLanguage ?? defaultLanguageMode
-
-  // the language config from the schema
-  const configured = languages.find((entry) => entry.value === language)
-  const languageMode = configured?.mode ?? resolveAliasedLanguage(language) ?? defaultLanguageMode
-
-  return {language, languageMode, languages}
-}
-
-function resolveAliasedLanguage(lang?: string) {
-  return (lang && LANGUAGE_ALIASES[lang]) ?? lang
-}
-
-function useLanguageAlternatives(type: CodeSchemaType) {
-  return useMemo((): CodeInputLanguage[] => {
-    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})
-      }
-      return acc.concat({title, value: val, mode})
-    }, [])
-  }, [type])
-}

package/src/config.ts

@@ -1,35 +0,0 @@
-import type {CodeInputLanguage} from './types'
-
-// NOTE: MAKE SURE THESE ALIGN WITH CODE MODES IN ./codemirror/defaultCodeModes.ts
-export const SUPPORTED_LANGUAGES: CodeInputLanguage[] = [
-  {title: 'Batch file', value: 'batchfile'},
-  {title: 'C#', value: 'csharp'},
-  {title: 'CSS', value: 'css'},
-  {title: 'Go', value: 'golang'},
-  {title: 'GROQ', value: 'groq'},
-  {title: 'HTML', value: 'html'},
-  {title: 'Java', value: 'java'},
-  {title: 'JavaScript', value: 'javascript'},
-  {title: 'JSON', value: 'json'},
-  {title: 'JSX', value: 'jsx'},
-  {title: 'Markdown', value: 'markdown'},
-  {title: 'MySQL', value: 'mysql'},
-  {title: 'PHP', value: 'php'},
-  {title: 'Plain text', value: 'text'},
-  {title: 'Python', value: 'python'},
-  {title: 'Ruby', value: 'ruby'},
-  {title: 'SASS', value: 'sass'},
-  {title: 'SCSS', value: 'scss'},
-  {title: 'sh', value: 'sh'},
-  {title: 'SQL', value: 'sql'},
-  {title: 'TSX', value: 'tsx'},
-  {title: 'TypeScript', value: 'typescript'},
-  {title: 'XML', value: 'xml'},
-  {title: 'YAML', value: 'yaml'},
-]
-
-export const LANGUAGE_ALIASES: Record<string, string | undefined> = {js: 'javascript'}
-
-export const PATH_LANGUAGE = ['language']
-export const PATH_CODE = ['code']
-export const PATH_FILENAME = ['filename']