Create a TSDoc lang conf for playground

Author: noahbuscher

playground/src/CodeEditor.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as monacoEditor from 'monaco-editor';
+import * as tsdoc from '@microsoft/tsdoc';
 import { FlexColDiv } from './FlexDivs';
 
 export interface ITextRange {
@@ -58,6 +59,10 @@ interface IMonacoWindow extends Window {
   };
 }
 
+interface IMonarchLanguageConfiguration extends monacoEditor.languages.IMonarchLanguage {
+  keywords: string[];
+}
+
 declare const MONACO_URL: string;
 const MONACO_BASE_URL: string = MONACO_URL;
 
@@ -309,6 +314,30 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
     CodeEditor._initializeMonaco()
       .then((monaco) => {
         if (!this._editor && this._hostDivRef) {
+          const tsdocLanguage: IMonarchLanguageConfiguration = {
+            keywords: tsdoc.StandardTags.allDefinitions.map((tag: tsdoc.TSDocTagDefinition) => tag.tagName),
+            tokenizer: {
+              common: [[/\/\*\*/, 'comment', '@comment']],
+              comment: [
+                [/\*/, 'comment'],
+                [/\\* [^\n@*]*/, 'comment'],
+                [/(?:\/)[\n|*]*/, 'comment', '@pop'],
+                [
+                  /@[^ \n]*/,
+                  {
+                    cases: {
+                      '@keywords': 'keyword',
+                      '@default': 'annotation'
+                    }
+                  }
+                ]
+              ]
+            }
+          };
+
+          monaco.languages.register({ id: 'tsdocLanguage' });
+          monaco.languages.setMonarchTokensProvider('tsdocLanguage', tsdocLanguage);
+
           this._editor = monaco.editor.create(this._hostDivRef, {
             value: this.props.value || '',
             language: this.props.language,

playground/src/PlaygroundView.tsx

@@ -150,7 +150,7 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
           style={editorStyle}
           value={this.state.inputText}
           onChange={this._inputTextArea_onChange}
-          language="typescript"
+          language="tsdocLanguage"
           markers={markers}
           syntaxStyles={syntaxStyles}
           theme={this.state.selectedTheme}