More flexible code input (#214)

* [test-studio] Update test-studio schema with language alternatives * [code-input] Make code-input slightly more configurable
sanity-io · Sep 29, 2017 · fb102f2 · fb102f2
1 parent 1445a91
commit fb102f2
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 22 deletions.
diff --git a/packages/@sanity/code-input/src/CodeInput.js b/packages/@sanity/code-input/src/CodeInput.js
@@ -7,18 +7,32 @@ import FormField from 'part:@sanity/components/formfields/default'
 import Fieldset from 'part:@sanity/components/fieldsets/default'
 import DefaultSelect from 'part:@sanity/components/selects/default'
 import fieldsetStyles from './Fieldset.css'
-
-import 'brace/mode/text'
+import createHighlightMarkers from './createHighlightMarkers'
+import {
+  ACE_EDITOR_PROPS,
+  ACE_SET_OPTIONS,
+  SUPPORTED_LANGUAGES,
+  SUPPORTED_THEMES,
+  DEFAULT_THEME
+} from './config'
+
+import 'brace/mode/batchfile'
+import 'brace/mode/css'
+import 'brace/mode/html'
 import 'brace/mode/javascript'
 import 'brace/mode/json'
 import 'brace/mode/jsx'
+import 'brace/mode/latex'
 import 'brace/mode/markdown'
-import 'brace/mode/css'
-import 'brace/mode/html'
+import 'brace/mode/matlab'
+import 'brace/mode/php'
+import 'brace/mode/sh'
+import 'brace/mode/text'
 
+import 'brace/theme/github'
+import 'brace/theme/monokai'
+import 'brace/theme/terminal'
 import 'brace/theme/tomorrow'
-import {ACE_EDITOR_PROPS, ACE_SET_OPTIONS, SUPPORTED_LANGUAGES} from './config'
-import createHighlightMarkers from './createHighlightMarkers'
 
 function compareNumbers(numA, numB) {
   return numA - numB
@@ -60,7 +74,6 @@ export default class CodeInput extends PureComponent {
   handleCodeChange = code => {
     const {type, onChange} = this.props
     const path = ['code']
-
     const fixedLanguage = get(type, 'options.language')
 
     onChange(PatchEvent.from([
@@ -133,13 +146,24 @@ export default class CodeInput extends PureComponent {
     ]))
   }
 
+  getLanguageAlternatives() {
+    return get(this.props.type, 'options.languageAlternatives') || SUPPORTED_LANGUAGES
+  }
+
+  getTheme() {
+    const preferredTheme = get(this.props.type, 'options.theme')
+    return (preferredTheme && SUPPORTED_THEMES.find(theme => theme === preferredTheme))
+      ? preferredTheme
+      : DEFAULT_THEME
+  }
+
   renderEditor = () => {
     const {value, type} = this.props
     const fixedLanguage = get(type, 'options.language')
     return (
       <AceEditor
         mode={(value && value.language) || fixedLanguage || 'text'}
-        theme="tomorrow"
+        theme={this.getTheme()}
         width="100%"
         onChange={this.handleCodeChange}
         name={`${this._inputId}__aceEditor`}
@@ -155,6 +179,7 @@ export default class CodeInput extends PureComponent {
 
   render() {
     const {value, type, level} = this.props
+    const languages = this.getLanguageAlternatives()
 
     if (has(type, 'options.language')) {
       return (
@@ -164,21 +189,21 @@ export default class CodeInput extends PureComponent {
       )
     }
 
-    const currentLanguage = (value && value.language)
-      ? SUPPORTED_LANGUAGES.find(item => item.value === value.language)
-      : null
+    const selectedLanguage = (value && value.language)
+      ? this.getLanguageAlternatives().find(item => item.value === value.language)
+      : undefined
 
+    if (!selectedLanguage) {
+      languages.unshift({title: 'Select language'})
+    }
     const languageField = type.fields.find(field => field.name === 'language')
-    const languages = currentLanguage
-      ? SUPPORTED_LANGUAGES
-      : [{title: 'Select language'}].concat(SUPPORTED_LANGUAGES)
 
     return (
       <Fieldset legend={type.title} description={type.description}>
         <FormField level={level + 1} label={languageField.type.title}>
           <DefaultSelect
             onChange={this.handleLanguageChange}
-            value={currentLanguage || undefined}
+            value={selectedLanguage}
             items={languages}
           />
         </FormField>

diff --git a/packages/@sanity/code-input/src/config.js b/packages/@sanity/code-input/src/config.js
@@ -1,15 +1,24 @@
-// Todo: should be made configurable from outside
-
 export const SUPPORTED_LANGUAGES = [
-  {title: 'JSX', value: 'jsx'},
+  {title: 'Batch file', value: 'batchfile'},
+  {title: 'CSS', value: 'css'},
+  {title: 'HTML', value: 'html'},
   {title: 'JavaScript', value: 'javascript'},
   {title: 'JSON', value: 'json'},
+  {title: 'JSX', value: 'jsx'},
+  {title: 'LaTeX', value: 'latex'},
   {title: 'Markdown', value: 'markdown'},
-  {title: 'CSS', value: 'css'},
-  {title: 'HTML', value: 'html'},
-  {title: 'text', value: 'text'}
+  {title: 'Matlab', value: 'matlab'},
+  {title: 'PHP', value: 'php'},
+  {title: 'sh', value: 'sh'},
+  {title: 'Plain text', value: 'text'}
 ]
 
+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 */

diff --git a/packages/test-studio/schemas/code.js b/packages/test-studio/schemas/code.js
@@ -13,7 +13,16 @@ export default {
       name: 'code',
       title: 'Code',
       description: 'A plain code field',
-      type: 'code'
+      type: 'code',
+      options: {
+        theme: 'github',
+        languageAlternatives: [
+          {title: 'LaTeX', value: 'latex'},
+          {title: 'JavaScript', value: 'javascript'},
+          {title: 'CSS', value: 'css'},
+          {title: 'text', value: 'text'}
+        ]
+      }
     }
   ]
 }