@sanity/code-input 6.0.3 → 7.0.0

package/lib/index.d.ts

@@ -1,121 +0,0 @@
-import type {Extension} from '@codemirror/state'
-import {JSX} from 'react'
-import {ObjectDefinition} from 'sanity'
-import {ObjectInputProps} from 'sanity'
-import type {ObjectSchemaType} from 'sanity'
-import {Plugin as Plugin_2} from 'sanity'
-import {PreviewConfig} from 'sanity'
-import type {PreviewProps} from 'sanity'
-
-/**
- * @public
- */
-export declare interface CodeDefinition
-  extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {
-  type: typeof codeTypeName
-  options?: CodeOptions
-}
-
-/** @public */
-export declare function CodeInput(props: CodeInputProps): React.JSX.Element
-
-/**
- * @public
- */
-export declare const codeInput: Plugin_2<void | CodeInputConfig>
-
-declare interface CodeInputConfig {
-  codeModes?: CodeMode[]
-}
-
-export declare interface CodeInputLanguage {
-  title: string
-  value: string
-  mode?: string
-}
-
-/**
- * @public
- */
-export declare interface CodeInputProps extends ObjectInputProps<CodeInputValue, CodeSchemaType> {}
-
-/**
- * @public
- */
-export declare interface CodeInputValue {
-  _type?: 'code'
-  code?: string
-  filename?: string
-  language?: string
-  highlightedLines?: number[]
-}
-
-declare interface CodeMode {
-  name: string
-  loader: ModeLoader
-}
-
-/**
- * @public
- */
-export declare interface CodeOptions {
-  theme?: string
-  darkTheme?: string
-  languageAlternatives?: CodeInputLanguage[]
-  language?: string
-  withFilename?: boolean
-}
-
-/**
- * @public
- */
-export declare const codeSchema: {
-  type: 'object'
-  name: 'code'
-} & Omit<ObjectDefinition, 'preview'> & {
-    preview?:
-      | PreviewConfig<
-          {
-            language: string
-            code: string
-            filename: string
-            highlightedLines: string
-          },
-          Record<'language' | 'code' | 'filename' | 'highlightedLines', any>
-        >
-      | undefined
-  }
-
-/**
- * @public
- */
-export declare interface CodeSchemaType extends Omit<ObjectSchemaType, 'options'> {
-  options?: CodeOptions
-}
-
-/**
- * @public
- */
-export declare const codeTypeName: 'code'
-
-declare type ModeLoader = () => Promise<Extension | undefined> | Extension | undefined
-
-/**
- * @public
- */
-export declare function PreviewCode(props: PreviewCodeProps): JSX.Element
-
-/**
- * @public
- */
-export declare interface PreviewCodeProps extends PreviewProps {
-  selection?: CodeInputValue
-}
-
-export {}
-
-declare module 'sanity' {
-  interface IntrinsicDefinitions {
-    code: CodeDefinition
-  }
-}

package/sanity.json

@@ -1,8 +0,0 @@
-{
-  "parts": [
-    {
-      "implements": "part:@sanity/base/sanity-root",
-      "path": "./v2-incompatible.js"
-    }
-  ]
-}

package/src/CodeInput.tsx

@@ -1,181 +0,0 @@
-import {Box, Card, Stack, Text} from '@sanity/ui'
-import {Suspense, useCallback} from 'react'
-import {
-  MemberField,
-  type ObjectInputProps,
-  type RenderInputCallback,
-  set,
-  setIfMissing,
-  unset,
-} from 'sanity'
-import {css, styled} from 'styled-components'
-
-import {CodeMirrorProxy, useMounted} from './codemirror/useCodeMirror'
-import {useLanguageMode} from './codemirror/useLanguageMode'
-import {PATH_CODE} from './config'
-import {LanguageField} from './LanguageField'
-import type {CodeInputValue, CodeSchemaType} from './types'
-import {focusRingBorderStyle, focusRingStyle} from './ui/focusRingStyle'
-import {useFieldMember} from './useFieldMember'
-
-export type {CodeInputLanguage, CodeInputValue} from './types'
-
-/**
- * @public
- */
-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,
-  }
-
-  return css`
-    --input-box-shadow: ${focusRingBorderStyle(border)};
-
-    box-shadow: var(--input-box-shadow);
-    height: 250px;
-    min-height: 80px;
-    overflow-y: auto;
-    position: relative;
-    resize: vertical;
-    z-index: 0;
-
-    & > .cm-theme {
-      height: 100%;
-    }
-
-    &:focus-within {
-      --input-box-shadow: ${focusRingStyle({
-        base,
-        border,
-        focusRing,
-      })};
-    }
-  `
-})
-
-/** @public */
-export function CodeInput(props: CodeInputProps): React.JSX.Element {
-  const {
-    members,
-    elementProps,
-    onChange,
-    readOnly,
-    renderField,
-    renderInput,
-    renderItem,
-    renderPreview,
-    schemaType: type,
-    value,
-    onPathFocus,
-  } = props
-
-  const languageFieldMember = useFieldMember(members, 'language')
-  const filenameMember = useFieldMember(members, 'filename')
-  const codeFieldMember = useFieldMember(members, 'code')
-
-  const handleCodeFocus = useCallback(() => {
-    onPathFocus(PATH_CODE)
-  }, [onPathFocus])
-
-  const onHighlightChange = useCallback(
-    (lines: number[]) => onChange(set(lines, ['highlightedLines'])),
-    [onChange],
-  )
-
-  const handleCodeChange = useCallback(
-    (code: string) => {
-      const path = PATH_CODE
-      const fixedLanguage = type.options?.language
-
-      onChange([
-        setIfMissing({_type: type.name, language: fixedLanguage}),
-        code ? set(code, path) : unset(path),
-      ])
-    },
-    [onChange, type],
-  )
-  const {languages, language, languageMode} = useLanguageMode(props.schemaType, props.value)
-
-  const mounted = useMounted()
-
-  const renderCodeInput: RenderInputCallback = useCallback(
-    (inputProps) => {
-      return (
-        <EditorContainer border overflow="hidden" radius={1} sizing="border" readOnly={readOnly}>
-          {mounted && (
-            <Suspense
-              fallback={
-                <Box padding={3}>
-                  <Text>Loading code editor...</Text>
-                </Box>
-              }
-            >
-              <CodeMirrorProxy
-                languageMode={languageMode}
-                onChange={handleCodeChange}
-                value={inputProps.value as string}
-                highlightLines={value?.highlightedLines}
-                onHighlightChange={onHighlightChange}
-                readOnly={readOnly}
-                onFocus={handleCodeFocus}
-                onBlur={elementProps.onBlur}
-              />
-            </Suspense>
-          )}
-        </EditorContainer>
-      )
-    },
-    [
-      readOnly,
-      mounted,
-      languageMode,
-      handleCodeChange,
-      value?.highlightedLines,
-      onHighlightChange,
-      handleCodeFocus,
-      elementProps.onBlur,
-    ],
-  )
-
-  return (
-    <Stack space={4}>
-      {languageFieldMember && (
-        <LanguageField
-          member={languageFieldMember}
-          language={language}
-          languages={languages}
-          renderField={renderField}
-          renderItem={renderItem}
-          renderInput={renderInput}
-          renderPreview={renderPreview}
-        />
-      )}
-
-      {type.options?.withFilename && filenameMember && (
-        <MemberField
-          member={filenameMember}
-          renderItem={renderItem}
-          renderField={renderField}
-          renderInput={renderInput}
-          renderPreview={renderPreview}
-        />
-      )}
-
-      {codeFieldMember && (
-        <MemberField
-          member={codeFieldMember}
-          renderInput={renderCodeInput}
-          renderItem={renderItem}
-          renderField={renderField}
-          renderPreview={renderPreview}
-        />
-      )}
-    </Stack>
-  )
-}

package/src/LanguageField.tsx

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

package/src/LanguageInput.tsx

@@ -1,35 +0,0 @@
-import {Select} from '@sanity/ui'
-import {type ChangeEvent, useCallback} from 'react'
-import {set, type StringInputProps, unset} from 'sanity'
-
-import type {CodeInputLanguage} from './types'
-
-export interface LanguageInputProps {
-  language: string
-  languages: CodeInputLanguage[]
-  onChange: StringInputProps['onChange']
-  elementProps: StringInputProps['elementProps']
-}
-
-/** @internal */
-export function LanguageInput(props: LanguageInputProps) {
-  const {language, languages, onChange, elementProps} = props
-
-  const handleChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      const newValue = e.currentTarget.value
-      onChange(newValue ? set(newValue) : unset())
-    },
-    [onChange],
-  )
-
-  return (
-    <Select {...elementProps} 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,71 +0,0 @@
-import {Box, Card, Flex, Label, Text} from '@sanity/ui'
-import {Suspense} from 'react'
-import type {PreviewProps} from 'sanity'
-import {styled} from 'styled-components'
-
-import {CodeMirrorProxy, useMounted} from './codemirror/useCodeMirror'
-import {useLanguageMode} from './codemirror/useLanguageMode'
-import type {CodeInputValue, CodeSchemaType} from './types'
-
-const PreviewContainer = styled(Box)`
-  position: relative;
-`
-
-/**
- * @public
- */
-export interface PreviewCodeProps extends PreviewProps {
-  selection?: CodeInputValue
-}
-
-/**
- * @public
- */
-export function PreviewCode(props: PreviewCodeProps) {
-  const {selection, schemaType: type} = props
-  const {languageMode} = useLanguageMode(type as CodeSchemaType, props.selection)
-
-  const mounted = useMounted()
-  return (
-    <PreviewContainer>
-      <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}
-        {mounted && (
-          <Suspense fallback={<Card padding={2}>Loading code preview...</Card>}>
-            <CodeMirrorProxy
-              readOnly
-              editable={false}
-              value={selection?.code || ''}
-              highlightLines={selection?.highlightedLines || []}
-              basicSetup={{
-                lineNumbers: false,
-                foldGutter: false,
-                highlightSelectionMatches: false,
-                highlightActiveLineGutter: false,
-                highlightActiveLine: false,
-              }}
-              languageMode={languageMode}
-            />
-          </Suspense>
-        )}
-      </Card>
-    </PreviewContainer>
-  )
-}

package/src/codemirror/CodeMirrorProxy.tsx

@@ -1,159 +0,0 @@
-import type {Extension} from '@codemirror/state'
-import {EditorView} from '@codemirror/view'
-import {useRootTheme} from '@sanity/ui'
-import CodeMirror, {type ReactCodeMirrorProps, type ReactCodeMirrorRef} from '@uiw/react-codemirror'
-import {forwardRef, useCallback, useContext, useEffect, useMemo, useState} from 'react'
-
-import {CodeInputConfigContext} from './CodeModeContext'
-import {defaultCodeModes} from './defaultCodeModes'
-import {
-  highlightLine,
-  highlightState,
-  setHighlightedLines,
-} from './extensions/highlightLineExtension'
-import {useThemeExtension} from './extensions/theme'
-import {useCodeMirrorTheme} from './extensions/useCodeMirrorTheme'
-import {useFontSizeExtension} from './extensions/useFontSize'
-
-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) {
-      // eslint-disable-next-line no-console
-      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) => {
-        // eslint-disable-next-line no-console
-        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

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