Merge pull request #310 from noahbuscher/playground-monaco-tsdoc-lang

[playground] Add TSDoc parsing, banner

Author: octogonz

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

@@ -139,18 +139,32 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
       borderColor: '#c0c0c0'
     };
 
+    const bannerStyle: React.CSSProperties = {
+      width: '100%',
+      padding: '8px 16px',
+      border: '1px solid #006721',
+      borderRadius: '3px',
+      color: 'var(--white)',
+      background: '#108938',
+      marginBottom: '8px',
+      fontSize: '14px'
+    };
+
     return (
       <FlexColDiv className="playground-input-box" style={{ flex: 1 }}>
         <div className="playground-button-bar" style={{ height: '40px', boxSizing: 'border-box' }}>
           {this._renderSelectSample()}
           {this._renderThemeSelector()}
         </div>
+        <div className="playground-notice-banner" style={bannerStyle}>
+          TSDoc does not parse Typescript. Typescript code used here is for illustrative purposes only.
+        </div>
         <CodeEditor
           className="playground-input-text-editor"
           style={editorStyle}
           value={this.state.inputText}
           onChange={this._inputTextArea_onChange}
-          language="typescript"
+          language="tsdocLanguage"
           markers={markers}
           syntaxStyles={syntaxStyles}
           theme={this.state.selectedTheme}