@sanity/code-input 2.35.2 → 2.36.0-v2-studio.1

package/src/CodeInput.tsx

@@ -0,0 +1,447 @@
+import React, {useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {FormFieldPresence} from '@sanity/base/presence'
+import {FormField, FormFieldSet} from '@sanity/base/components'
+import {Path} from '@sanity/types'
+import {Card, Select, TextInput} from '@sanity/ui'
+import * as PathUtils from '@sanity/util/paths'
+import {ChangeIndicatorProvider} from '@sanity/base/change-indicators'
+import PatchEvent, {set, unset, setIfMissing} from '@sanity/form-builder/PatchEvent'
+import AceEditor from 'react-ace'
+import styled from 'styled-components'
+import {useId} from '@reach/auto-id'
+import createHighlightMarkers, {highlightMarkersCSS} from './createHighlightMarkers'
+import {CodeInputLanguage, CodeInputType, CodeInputValue} from './types'
+import './editorSupport'
+
+import {
+  LANGUAGE_ALIASES,
+  ACE_EDITOR_PROPS,
+  ACE_SET_OPTIONS,
+  SUPPORTED_LANGUAGES,
+  SUPPORTED_THEMES,
+  DEFAULT_THEME,
+  PATH_LANGUAGE,
+  PATH_CODE,
+  PATH_FILENAME,
+} from './config'
+
+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};
+    }
+  }
+`
+
+export interface CodeInputProps {
+  compareValue?: CodeInputValue
+  focusPath: Path
+  level: number
+  onBlur: () => void
+  onChange: (...args: any[]) => void
+  onFocus: (path: Path) => void
+  presence: FormFieldPresence[]
+  readOnly?: boolean
+  type: CodeInputType
+  value?: CodeInputValue
+}
+
+// Returns a string with the mode name if supported (because aliases), otherwise false
+function isSupportedLanguage(mode: string) {
+  const alias = LANGUAGE_ALIASES[mode]
+
+  if (alias) {
+    return alias
+  }
+
+  const isSupported = SUPPORTED_LANGUAGES.find((lang) => lang.value === mode)
+  if (isSupported) {
+    return mode
+  }
+
+  return false
+}
+
+const CodeInput = React.forwardRef(
+  (props: CodeInputProps, ref: React.ForwardedRef<{focus: () => void}>) => {
+    const aceEditorRef = useRef<any>()
+    const aceEditorId = useId()
+
+    const {
+      onFocus,
+      onChange,
+      onBlur,
+      compareValue,
+      value,
+      presence,
+      type,
+      level,
+      readOnly,
+      focusPath,
+    } = props
+
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        aceEditorRef?.current?.editor?.focus()
+      },
+    }))
+
+    const handleLanguageFocus = useCallback(() => {
+      onFocus(PATH_LANGUAGE)
+    }, [onFocus])
+
+    const handleCodeFocus = useCallback(() => {
+      onFocus(PATH_CODE)
+    }, [onFocus])
+
+    const handleFilenameFocus = useCallback(() => {
+      onFocus(PATH_FILENAME)
+    }, [onFocus])
+
+    const handleFilenameChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const val = event.target.value
+        const path = PATH_FILENAME
+
+        onChange(
+          PatchEvent.from([setIfMissing({_type: type.name}), val ? set(val, path) : unset(path)])
+        )
+      },
+      [onChange, type.name]
+    )
+
+    const getTheme = useCallback(() => {
+      const preferredTheme = type.options?.theme
+      return preferredTheme && SUPPORTED_THEMES.find((theme) => theme === preferredTheme)
+        ? preferredTheme
+        : DEFAULT_THEME
+    }, [type])
+
+    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(
+          PatchEvent.from(
+            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 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
+        const fixedLanguage = type.options?.language
+
+        onChange(
+          PatchEvent.from([
+            setIfMissing({_type: type.name, language: fixedLanguage}),
+            code ? set(code, path) : unset(path),
+          ])
+        )
+      },
+      [onChange, type]
+    )
+
+    const handleLanguageChange = useCallback(
+      (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const val = event.currentTarget.value
+        const path = PATH_LANGUAGE
+
+        onChange(
+          PatchEvent.from([setIfMissing({_type: type.name}), val ? set(val, path) : unset(path)])
+        )
+      },
+      [onChange, type.name]
+    )
+
+    const languages = getLanguageAlternatives().slice()
+
+    const selectedLanguage = props?.value?.language
+      ? languages.find((item: {value: string | undefined}) => item.value === props?.value?.language)
+      : undefined
+
+    const languageField = type.fields.find((field) => field.name === 'language')
+    const filenameField = type.fields.find((field) => field.name === 'filename')
+
+    const languageCompareValue = PathUtils.get(compareValue, PATH_LANGUAGE)
+    const codeCompareValue = PathUtils.get(compareValue, PATH_CODE)
+    const filenameCompareValue = PathUtils.get(compareValue, PATH_FILENAME)
+
+    const languagePresence = presence.filter((presenceItem) =>
+      PathUtils.startsWith(PATH_LANGUAGE, presenceItem.path)
+    )
+    const codePresence = presence.filter((presenceItem) =>
+      PathUtils.startsWith(PATH_CODE, presenceItem.path)
+    )
+
+    const filenamePresence = presence.filter((presenceItem) =>
+      PathUtils.startsWith(PATH_FILENAME, presenceItem.path)
+    )
+    const renderLanguageAlternatives = useCallback(() => {
+      return (
+        <ChangeIndicatorProvider
+          path={PATH_LANGUAGE}
+          focusPath={focusPath}
+          value={selectedLanguage?.value}
+          compareValue={languageCompareValue}
+        >
+          <FormField
+            level={level + 1}
+            label={languageField?.title || 'Language'}
+            __unstable_presence={languagePresence}
+          >
+            <Select
+              onChange={handleLanguageChange}
+              readOnly={readOnly}
+              value={selectedLanguage?.value || ''}
+              onFocus={handleLanguageFocus}
+              onBlur={onBlur}
+            >
+              {languages.map((lang: {title: string; value: string}) => (
+                <option key={lang.value} value={lang.value}>
+                  {lang.title}
+                </option>
+              ))}
+            </Select>
+          </FormField>
+        </ChangeIndicatorProvider>
+      )
+    }, [
+      focusPath,
+      handleLanguageChange,
+      handleLanguageFocus,
+      languageCompareValue,
+      languageField?.title,
+      languagePresence,
+      languages,
+      level,
+      onBlur,
+      readOnly,
+      selectedLanguage?.value,
+    ])
+
+    const renderFilenameInput = useCallback(() => {
+      return (
+        <ChangeIndicatorProvider
+          path={PATH_FILENAME}
+          focusPath={focusPath}
+          value={value?.filename}
+          compareValue={filenameCompareValue}
+        >
+          <FormField
+            label={filenameField?.title || 'Filename'}
+            level={level + 1}
+            __unstable_presence={filenamePresence}
+          >
+            <TextInput
+              name="filename"
+              value={value?.filename || ''}
+              placeholder={filenameField?.placeholder}
+              onChange={handleFilenameChange}
+              onFocus={handleFilenameFocus}
+              onBlur={onBlur}
+            />
+          </FormField>
+        </ChangeIndicatorProvider>
+      )
+    }, [
+      filenameCompareValue,
+      filenameField?.placeholder,
+      filenameField?.title,
+      filenamePresence,
+      focusPath,
+      handleFilenameChange,
+      handleFilenameFocus,
+      level,
+      onBlur,
+      value?.filename,
+    ])
+
+    const renderEditor = useCallback(() => {
+      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 ? supported : 'text')
+
+      return (
+        <ChangeIndicatorProvider
+          path={PATH_CODE}
+          focusPath={focusPath}
+          value={value?.code}
+          compareValue={codeCompareValue}
+        >
+          <FormField label="Code" level={level + 1} __unstable_presence={codePresence}>
+            <EditorContainer radius={1} shadow={1} readOnly={readOnly}>
+              <AceEditor
+                ref={aceEditorRef}
+                mode={mode}
+                theme={getTheme()}
+                width="100%"
+                onChange={handleCodeChange}
+                name={`editor-${aceEditorId}`}
+                value={(value && value.code) || ''}
+                markers={
+                  value && value.highlightedLines
+                    ? createHighlightMarkers(value.highlightedLines)
+                    : undefined
+                }
+                onLoad={handleEditorLoad}
+                readOnly={readOnly}
+                tabSize={2}
+                wrapEnabled
+                setOptions={ACE_SET_OPTIONS}
+                editorProps={ACE_EDITOR_PROPS}
+                onFocus={handleCodeFocus}
+                onBlur={onBlur}
+              />
+            </EditorContainer>
+          </FormField>
+        </ChangeIndicatorProvider>
+      )
+    }, [
+      type.options?.language,
+      value,
+      languages,
+      focusPath,
+      codeCompareValue,
+      level,
+      codePresence,
+      readOnly,
+      getTheme,
+      handleCodeChange,
+      aceEditorId,
+      handleEditorLoad,
+      handleCodeFocus,
+      onBlur,
+    ])
+
+    return (
+      <FormFieldSet
+        title={type.title}
+        description={type.description}
+        level={level}
+        __unstable_changeIndicator={false}
+      >
+        {!type.options?.language && renderLanguageAlternatives()}
+        {type?.options?.withFilename && renderFilenameInput()}
+        {renderEditor()}
+      </FormFieldSet>
+    )
+  }
+)
+
+CodeInput.displayName = 'CodeInput'
+
+export default CodeInput

package/src/PreviewCode.tsx

@@ -0,0 +1,88 @@
+import React, {useCallback, useEffect, useRef} from 'react'
+import AceEditor from 'react-ace'
+import styled from 'styled-components'
+import {Box} from '@sanity/ui'
+import {ACE_EDITOR_PROPS, ACE_SET_OPTIONS} from './config'
+import createHighlightMarkers from './createHighlightMarkers'
+import {CodeInputType, CodeInputValue} from './types'
+import './editorSupport'
+
+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;
+  }
+`
+
+export interface PreviewCodeProps {
+  type?: CodeInputType
+  value?: CodeInputValue
+}
+
+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 {value, type} = props
+  const fixedLanguage = type?.options?.language
+
+  const mode = value?.language || fixedLanguage || 'text'
+
+  return (
+    <PreviewContainer>
+      <PreviewInner padding={4}>
+        <AceEditor
+          ref={aceEditorRef}
+          focus={false}
+          mode={mode}
+          theme="monokai"
+          width="100%"
+          onChange={handleEditorChange}
+          maxLines={200}
+          readOnly
+          wrapEnabled
+          showPrintMargin={false}
+          highlightActiveLine={false}
+          cursorStart={-1}
+          value={(value && value.code) || ''}
+          markers={
+            value && value.highlightedLines
+              ? createHighlightMarkers(value.highlightedLines)
+              : undefined
+          }
+          tabSize={2}
+          showGutter={false}
+          setOptions={ACE_SET_OPTIONS}
+          editorProps={ACE_EDITOR_PROPS}
+        />
+      </PreviewInner>
+    </PreviewContainer>
+  )
+}

package/src/config.ts

@@ -0,0 +1,45 @@
+import {CodeInputLanguage} from './types'
+
+// NOTE: MAKE SURE THESE ALIGN WITH IMPORTS IN ./editorSupport
+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: '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 SUPPORTED_THEMES = ['github', 'monokai', 'terminal', 'tomorrow']
+
+export const DEFAULT_THEME = 'tomorrow'
+
+export const ACE_SET_OPTIONS = {
+  useSoftTabs: true,
+  navigateWithinSoftTabs: true /* note only supported by ace v1.2.7 or higher */,
+}
+
+export const ACE_EDITOR_PROPS = {$blockScrolling: true}
+
+export const PATH_LANGUAGE = ['language']
+export const PATH_CODE = ['code']
+export const PATH_FILENAME = ['filename']

package/src/createHighlightMarkers.ts

@@ -0,0 +1,24 @@
+import {IMarker} from 'react-ace'
+import {css} from 'styled-components'
+
+export const highlightMarkersCSS = css`
+  .ace_editor_markers_highlight {
+    position: absolute;
+    background-color: ${({theme}) => theme.sanity.color.solid.primary.enabled.bg};
+    opacity: 0.2;
+    width: 100% !important;
+    border-radius: 0 !important;
+  }
+`
+
+export default function createHighlightMarkers(rows: number[]): IMarker[] {
+  return rows.map((row) => ({
+    startRow: Number(row) - 1,
+    startCol: 0,
+    endRow: Number(row) - 1,
+    endCol: +Infinity,
+    className: 'ace_editor_markers_highlight',
+    type: 'screenLine',
+    inFront: true,
+  }))
+}

package/src/deprecatedSchema.ts

@@ -0,0 +1,19 @@
+export default (() => {
+  /* eslint-disable no-console */
+  console.warn('@sanity/code-input has been upgraded to automatically register its schema type.')
+  console.warn('Please remove the explicit import of `part:@sanity/base/schema-type`')
+  /* eslint-enable no-console */
+
+  return {
+    name: 'oldDeprecatedCodeTypeWhichYouShouldRemove',
+    type: 'object',
+    title: 'Deprecated code type',
+    fields: [
+      {
+        title: 'Code',
+        name: 'code',
+        type: 'text',
+      },
+    ],
+  }
+})()

package/src/editorSupport.ts

@@ -0,0 +1,31 @@
+// NOTE: MAKE SURE THESE ALIGN WITH SUPPORTED_LANGUAGES in ./config
+import './groq'
+
+import 'ace-builds/src-noconflict/mode-batchfile'
+import 'ace-builds/src-noconflict/mode-csharp'
+import 'ace-builds/src-noconflict/mode-css'
+import 'ace-builds/src-noconflict/mode-golang'
+import 'ace-builds/src-noconflict/mode-html'
+import 'ace-builds/src-noconflict/mode-java'
+import 'ace-builds/src-noconflict/mode-javascript'
+import 'ace-builds/src-noconflict/mode-json'
+import 'ace-builds/src-noconflict/mode-jsx'
+import 'ace-builds/src-noconflict/mode-markdown'
+import 'ace-builds/src-noconflict/mode-mysql'
+import 'ace-builds/src-noconflict/mode-php'
+import 'ace-builds/src-noconflict/mode-python'
+import 'ace-builds/src-noconflict/mode-ruby'
+import 'ace-builds/src-noconflict/mode-sass'
+import 'ace-builds/src-noconflict/mode-scss'
+import 'ace-builds/src-noconflict/mode-sh'
+import 'ace-builds/src-noconflict/mode-text'
+import 'ace-builds/src-noconflict/mode-tsx'
+import 'ace-builds/src-noconflict/mode-typescript'
+import 'ace-builds/src-noconflict/mode-xml'
+import 'ace-builds/src-noconflict/mode-yaml'
+
+// Themes
+import 'ace-builds/src-noconflict/theme-github'
+import 'ace-builds/src-noconflict/theme-monokai'
+import 'ace-builds/src-noconflict/theme-terminal'
+import 'ace-builds/src-noconflict/theme-tomorrow'