@sanity/code-input 2.29.3 → 2.29.4-purple-unicorn.509

package/package.json

@@ -1,13 +1,57 @@
 {
   "name": "@sanity/code-input",
-  "version": "2.29.3",
+  "version": "2.29.4-purple-unicorn.509+183505a0b3",
   "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",
@@ -21,18 +65,26 @@
   ],
   "dependencies": {
     "@reach/auto-id": "^0.13.2",
-    "@sanity/base": "2.29.3",
-    "@sanity/icons": "^1.2.1",
-    "@sanity/types": "2.29.3",
-    "@sanity/ui": "^0.37.2",
-    "@sanity/util": "2.29.3",
+    "@sanity/icons": "^1.2.8",
+    "@sanity/ui": "^0.37.8",
     "ace-builds": "^1.4.13",
     "react-ace": "^9.5.0"
   },
   "devDependencies": {
-    "rimraf": "^2.7.1"
+    "@sanity/base": "2.29.4-purple-unicorn.509+183505a0b3",
+    "@sanity/form-builder": "2.29.3",
+    "@sanity/types": "2.29.4-purple-unicorn.509+183505a0b3",
+    "@sanity/ui-workshop": "^0.4.3",
+    "@sanity/util": "2.29.4-purple-unicorn.509+183505a0b3",
+    "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 +98,5 @@
     "url": "git+https://github.com/sanity-io/sanity.git",
     "directory": "packages/@sanity/code-input"
   },
-  "gitHead": "01422a8d4b1eae4b1491dbaf5da9bafc7823c4ea"
+  "gitHead": "183505a0b3ea400181bff4f4370c146374b58068"
 }

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,427 @@
+import React, {useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {FormField, FormFieldSet, ChangeIndicatorProvider} from '@sanity/base/_unstable'
+import {PatchEvent, set, unset, setIfMissing, FormInputProps} from '@sanity/base/form'
+import {ObjectSchemaType} from '@sanity/types'
+import {Card, Select, Stack, TextInput} from '@sanity/ui'
+import * as PathUtils from '@sanity/util/paths'
+import AceEditor from 'react-ace'
+import styled from 'styled-components'
+import {useId} from '@reach/auto-id'
+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,
+  PATH_FILENAME,
+  PATH_LANGUAGE,
+  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 = FormInputProps<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
+}
+
+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 = 0,
+      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 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 ? language : 'text')
+
+      return (
+        <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>
+      )
+    }, [
+      aceEditorId,
+      getTheme,
+      handleCodeChange,
+      handleCodeFocus,
+      handleEditorLoad,
+      languages,
+      onBlur,
+      readOnly,
+      type,
+      value,
+    ])
+
+    if (type.options?.language) {
+      return (
+        <ChangeIndicatorProvider
+          path={PATH_CODE}
+          focusPath={focusPath}
+          value={value?.code}
+          compareValue={codeCompareValue}
+        >
+          <FormFieldSet title={type.title} description={type.description} level={level}>
+            {renderEditor()}
+          </FormFieldSet>
+        </ChangeIndicatorProvider>
+      )
+    }
+
+    return (
+      <FormFieldSet
+        title={type.title}
+        description={type.description}
+        level={level}
+        __unstable_changeIndicator={false}
+      >
+        <Stack space={3}>
+          <ChangeIndicatorProvider
+            path={PATH_LANGUAGE}
+            focusPath={focusPath}
+            value={selectedLanguage?.value}
+            compareValue={languageCompareValue}
+          >
+            <FormField
+              level={level + 1}
+              label={languageField?.type.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>
+          {type.options?.withFilename && (
+            <ChangeIndicatorProvider
+              path={PATH_FILENAME}
+              focusPath={focusPath}
+              value={value?.filename}
+              compareValue={filenameCompareValue}
+            >
+              <FormField
+                label={filenameField?.type.title || 'Filename'}
+                level={level + 1}
+                __unstable_presence={filenamePresence}
+              >
+                <TextInput
+                  name="filename"
+                  value={value?.filename || ''}
+                  placeholder={filenameField?.type.placeholder}
+                  onChange={handleFilenameChange}
+                  onFocus={handleFilenameFocus}
+                  onBlur={onBlur}
+                />
+              </FormField>
+            </ChangeIndicatorProvider>
+          )}
+          <ChangeIndicatorProvider
+            path={PATH_CODE}
+            focusPath={focusPath}
+            value={value?.code}
+            compareValue={codeCompareValue}
+          >
+            <FormField label="Code" level={level + 1} __unstable_presence={codePresence}>
+              {renderEditor()}
+            </FormField>
+          </ChangeIndicatorProvider>
+        </Stack>
+      </FormFieldSet>
+    )
+  }
+)
+
+CodeInput.displayName = 'CodeInput'
+
+export default CodeInput

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,34 @@
+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 type = 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}>
+      <CodeInput
+        focusPath={focusPath}
+        level={0}
+        validation={validation}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        presence={presence}
+        type={type}
+      />
+    </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')),
+  },
+])