Merge pull request #30 from stoplightio/bug/sl-715/select-unsupported…

…-language-throws-exception

fix(code-editor): fail gracefully when cannot highlight code SL-715

src/CodeEditor.tsx

@@ -13,6 +13,42 @@ export interface ICodeEditorProps {
   onChange?: (code: string) => any;
 }
 
+const defaultSupport = {
+  css: 'CSS',
+  javascript: 'JavaScript',
+  markup: 'Markup',
+  clike: 'C-like',
+};
+
+const optionalSupport = {
+  // cpp: 'C++',
+  // csharp: 'C#',
+  // go: 'Go',
+  // html: 'HTML',
+  // http: 'HTTP',
+  // java: 'Java',
+  // json: 'JSON',
+  // jsx: 'JSX',
+  // markdown: 'Markdown',
+  // objectivec: 'Objective-C',
+  // perl: 'Perl',
+  // php: 'PHP',
+  // python: 'Python',
+  // ruby: 'Ruby',
+  // scala: 'Scala',
+  // bash: 'Bash',
+  // swift: 'Swift',
+  // yaml: 'YAML',
+};
+
+/**
+ * List of supported languages: https://prismjs.com/#languages-list
+ */
+export const supportedLanguages = {
+  ...defaultSupport,
+  ...optionalSupport,
+};
+
 const CodeEditorView = (props: ICodeEditorProps & { className: string }) => {
   const { className, language, onChange = noop, value } = props;
 

src/__stories__/CodeEditor.tsx

@@ -14,17 +14,15 @@ const store = new Store({
 
 export const codeEditorKnobs = (tabName = 'Code Editor') => {
   return {
-    language: text('language', 'js', tabName),
+    language: text('language', 'javascript', tabName),
     value: text('value', 'const defaultValue = stoplight.io();', tabName),
     style: object('style', { fontSize: '12px' }, tabName),
   };
 };
 
 storiesOf('CodeEditor', module)
   .addDecorator(withKnobs)
-  .add('with defaults', () => (
-    <CodeEditor {...codeEditorKnobs()} onChange={action('onChange')} />
-  ))
+  .add('with defaults', () => <CodeEditor {...codeEditorKnobs()} onChange={action('onChange')} />)
   .addDecorator(StateDecorator(store))
   .add('with store', () => (
     <CodeEditor {...codeEditorKnobs()} value={store.get('value')} onChange={(value: string) => store.set({ value })} />

src/utils/highlightCode.ts

@@ -1,5 +1,6 @@
 import { highlight, languages } from 'prismjs';
 
 export const highlightCode = (code: string, language: string) => {
-  return highlight(code, languages[language]);
+  const langDef = languages[language];
+  return langDef ? highlight(code, langDef) : code;
 };