@sanity/code-input 2.29.5-get-started-template.14 → 2.29.5-purple-unicorn.806

package/package.json

@@ -1,13 +1,57 @@
 {
   "name": "@sanity/code-input",
-  "version": "2.29.5-get-started-template.14+24fb038bb",
+  "version": "2.29.5-purple-unicorn.806+f6114ae54",
   "description": "Ace editor for editing code",
-  "main": "./lib/index.js",
-  "types": "./dist/dts",
+  "source": "./src/index.ts",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "require": "./lib/index.cjs",
+      "default": "./lib/index.js"
+    },
+    "./CodeInput": {
+      "source": "./src/CodeInput.tsx",
+      "require": "./lib/CodeInput.cjs",
+      "default": "./lib/CodeInput.js"
+    },
+    "./schema": {
+      "source": "./src/schema.tsx",
+      "require": "./lib/schema.cjs",
+      "default": "./lib/schema.js"
+    },
+    "./deprecatedSchema": {
+      "source": "./src/deprecatedSchema.ts",
+      "require": "./lib/deprecatedSchema.cjs",
+      "default": "./lib/deprecatedSchema.js"
+    }
+  },
+  "types": "./lib/dts/src/index.d.ts",
+  "//": "the typesVersion config below is a workaround for TypeScript's lack of support for package exports",
+  "typesVersions": {
+    "*": {
+      "CodeInput": [
+        "./lib/dts/src/CodeInput.d.ts"
+      ],
+      "schema": [
+        "./lib/dts/src/schema.d.ts"
+      ],
+      "deprecatedSchema": [
+        "./lib/dts/src/deprecatedSchema.d.ts"
+      ]
+    }
+  },
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf lib dest"
+    "build": "../../../bin/pkg-utils bundle",
+    "clean": "rimraf lib",
+    "exports:check": "../../../bin/pkg-utils exports-check",
+    "exports:clean": "../../../bin/pkg-utils exports-clean",
+    "exports:generate": "../../../bin/pkg-utils exports-generate",
+    "postbuild": "run-s exports:generate",
+    "watch": "../../../bin/pkg-utils bundle --watch"
   },
   "keywords": [
     "sanity",
@@ -20,19 +64,26 @@
     "code-editor"
   ],
   "dependencies": {
-    "@reach/auto-id": "^0.13.2",
-    "@sanity/base": "2.29.5-get-started-template.14+24fb038bb",
-    "@sanity/icons": "^1.2.6",
-    "@sanity/types": "2.29.5-get-started-template.14+24fb038bb",
-    "@sanity/ui": "^0.37.6",
-    "@sanity/util": "2.29.5-get-started-template.14+24fb038bb",
+    "@sanity/icons": "^1.3.0",
+    "@sanity/ui": "^0.37.9",
+    "@sanity/util": "2.29.5-purple-unicorn.806+f6114ae54",
     "ace-builds": "^1.4.13",
     "react-ace": "^9.5.0"
   },
   "devDependencies": {
-    "rimraf": "^2.7.1"
+    "@sanity/base": "2.29.5-purple-unicorn.806+f6114ae54",
+    "@sanity/form-builder": "2.30.0",
+    "@sanity/types": "2.29.5-purple-unicorn.806+f6114ae54",
+    "@sanity/ui-workshop": "^0.4.3",
+    "react": "17.0.2",
+    "rimraf": "^3.0.2",
+    "styled-components": "^5.2.0"
   },
   "peerDependencies": {
+    "@sanity/base": "^2.14",
+    "@sanity/form-builder": "^2.27",
+    "@sanity/types": "^2.14",
+    "@sanity/util": "2.27",
     "prop-types": "^15.6 || ^16",
     "react": "^16.9 || ^17",
     "styled-components": "^5.2.0"
@@ -46,5 +97,5 @@
     "url": "git+https://github.com/sanity-io/sanity.git",
     "directory": "packages/@sanity/code-input"
   },
-  "gitHead": "24fb038bb882944d8a567e4864955fc02ce3507a"
+  "gitHead": "f6114ae54abf20fb63a43c482c1f5e36aff3b9fc"
 }

package/schema.js

@@ -0,0 +1,7 @@
+/* eslint-disable prettier/prettier, strict */
+'use strict'
+
+// AUTO-GENERATED – DO NOT EDIT
+// This is a legacy package export
+// prettier-ignore
+require('./lib/_reExport')(module.exports, require('./lib/schema.cjs'))

package/src/CodeInput.tsx

@@ -0,0 +1,327 @@
+/* eslint-disable react/jsx-handler-names */
+import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
+import {
+  FieldMember,
+  MemberField,
+  ObjectInputProps,
+  set,
+  setIfMissing,
+  unset,
+} from '@sanity/base/form'
+import {ObjectSchemaType} from '@sanity/types'
+import {Card, Select, Stack} from '@sanity/ui'
+import AceEditor from 'react-ace'
+import styled from 'styled-components'
+import createHighlightMarkers, {highlightMarkersCSS} from './createHighlightMarkers'
+import {CodeInputLanguage, CodeInputValue} from './types'
+/* eslint-disable-next-line import/no-unassigned-import */
+import './editorSupport'
+
+import {
+  ACE_EDITOR_PROPS,
+  ACE_SET_OPTIONS,
+  DEFAULT_THEME,
+  LANGUAGE_ALIASES,
+  PATH_CODE,
+  SUPPORTED_LANGUAGES,
+  SUPPORTED_THEMES,
+} from './config'
+
+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};
+    }
+  }
+`
+
+export type CodeSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options: {
+    theme?: string
+    languageAlternatives: CodeInputLanguage[]
+    language: string
+    withFilename?: boolean
+  }
+}
+
+export type CodeInputProps = ObjectInputProps<CodeInputValue, CodeSchemaType>
+
+// 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
+}
+
+export function CodeInput(props: CodeInputProps) {
+  const {
+    focusRef,
+    members,
+    onBlur,
+    onChange,
+    onFocusPath,
+    readOnly,
+    renderField,
+    renderInput,
+    renderItem,
+    schemaType: type,
+    value,
+  } = 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(focusRef, () => ({
+    focus: () => {
+      aceEditorRef?.current?.editor?.focus()
+    },
+  }))
+
+  const handleCodeFocus = useCallback(() => {
+    onFocusPath(PATH_CODE)
+  }, [onFocusPath])
+
+  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(
+        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([
+        setIfMissing({_type: type.name, language: fixedLanguage}),
+        code ? set(code, path) : unset(path),
+      ])
+    },
+    [onChange, type]
+  )
+
+  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) => {
+      return (
+        <Select {...inputProps}>
+          {languages.map((lang: {title: string; value: string}) => (
+            <option key={lang.value} value={lang.value}>
+              {lang.title}
+            </option>
+          ))}
+        </Select>
+      )
+    },
+    [languages]
+  )
+
+  const renderCodeInput = useCallback(
+    (inputProps) => {
+      return (
+        <EditorContainer radius={1} shadow={1} readOnly={readOnly}>
+          <AceEditor
+            ref={aceEditorRef}
+            mode={mode}
+            theme={getTheme()}
+            width="100%"
+            onChange={handleCodeChange}
+            name={inputProps.id}
+            value={inputProps.value}
+            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>
+      )
+    },
+    [getTheme, handleCodeChange, handleCodeFocus, handleEditorLoad, mode, onBlur, readOnly, value]
+  )
+
+  return (
+    <Stack space={4}>
+      {languageFieldMember && (
+        <MemberField
+          member={languageFieldMember}
+          renderItem={renderItem}
+          renderField={renderField}
+          renderInput={renderLanguageInput}
+        />
+      )}
+
+      {type.options?.withFilename && filenameMember && (
+        <MemberField
+          member={filenameMember}
+          renderItem={renderItem}
+          renderField={renderField}
+          renderInput={renderInput}
+        />
+      )}
+
+      {codeFieldMember && (
+        <MemberField
+          member={codeFieldMember}
+          renderInput={renderCodeInput}
+          renderItem={renderItem}
+          renderField={renderField}
+        />
+      )}
+    </Stack>
+  )
+}

package/src/PreviewCode.tsx

@@ -0,0 +1,89 @@
+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'
+/* eslint-disable-next-line import/no-unassigned-import */
+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/__workshop__/dev.tsx

@@ -0,0 +1,35 @@
+import {createSchema} from '@sanity/base/_unstable'
+import {ValidationMarker, Path} from '@sanity/types'
+import {Box} from '@sanity/ui'
+import {useAction} from '@sanity/ui-workshop'
+import React, {useState} from 'react'
+import {CodeInput, CodeSchemaType} from '../CodeInput'
+import typeDef from '../schema'
+
+const schema = createSchema({name: 'dev', types: [typeDef]})
+const schemaType = schema.get('code') as CodeSchemaType
+
+export default function DevStory() {
+  const [focusPath] = useState<Path>([])
+  const [validation] = useState<ValidationMarker[]>([])
+  const onBlur = useAction('onBlur')
+  const onChange = useAction('onChange')
+  const onFocus = useAction('onFocus')
+  const [presence] = useState<any[]>([])
+
+  return (
+    <Box padding={4}>
+      <>TODO</>
+      {/* <CodeInput
+        focusPath={focusPath}
+        level={0}
+        validation={validation}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        presence={presence}
+        schemaType={schemaType}
+      /> */}
+    </Box>
+  )
+}

package/src/__workshop__/index.ts

@@ -0,0 +1,10 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('code-input', '@sanity/code-input', [
+  {
+    name: 'dev',
+    title: 'Dev',
+    component: lazy(() => import('./dev')),
+  },
+])

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',
+      },
+    ],
+  }
+})()