Add auto-complete to the P5 widget

lib/editor.tsx

@@ -1,11 +1,18 @@
 import React = require("react");
 
-import CodeMirror = require("codemirror");
+// import CodeMirror = require("codemirror");
+import * as Monaco from 'monaco-editor';
 
 import "codemirror/mode/javascript/javascript.js";
 
 import PureComponent from "./pure-component";
 
+// TODO: versions
+const p5dts = require("!!raw-loader!@types/p5/global.d.ts") as string;
+const p5Uri = "ts:p5.d.ts";
+// const p5domdts = require("raw-loader!@types/p5/lib/addons/p5.dom.d.ts") as string;
+// const p5sounddts = require("raw-loader!@types/p5/lib/addons/p5.sound.d.ts") as string;
+
 // It seems like CodeMirror behaves oddly with a flexbox layout, so
 // we will manually size it. However, Chrome seems to have a bug
 // whereby we need to wait a bit before resizing it after the
@@ -22,7 +29,7 @@ interface State {
 }
 
 export default class Editor extends PureComponent<Props, State> {
-  _cm: CodeMirror.Editor
+  _cm: Monaco.editor.IStandaloneCodeEditor
   _resizeTimeout: number
   _errorLineHandle: any
 
@@ -33,30 +40,53 @@ export default class Editor extends PureComponent<Props, State> {
     }
     if (this.props.errorLine !== prevProps.errorLine) {
       if (this._errorLineHandle) {
-        this._cm.removeLineClass(this._errorLineHandle, 'background',
-                                 'error-line');
+        this._cm.deltaDecorations(this._errorLineHandle, []);
+        // this._cm.removeLineClass(this._errorLineHandle, 'background',
+        //                          'error-line');
         this._errorLineHandle = null;
       }
       if (this.props.errorLine) {
-        this._errorLineHandle = this._cm.addLineClass(
-          this.props.errorLine - 1,
-          'background',
-          'error-line'
-        );
+        this._errorLineHandle = this._cm.deltaDecorations([], [
+          {
+            range: {
+              startColumn: 0,
+              startLineNumber: this.props.errorLine - 1,
+              endColumn: 0,
+              endLineNumber: this.props.errorLine,
+            },
+            options: {
+              linesDecorationsClassName: 'error-line'
+            }
+          }
+        ]);
+        // this._errorLineHandle = this._cm.addLineClass(
+        //   this.props.errorLine - 1,
+        //   'background',
+        //   'error-line'
+        // );
       }
     }
   }
 
   componentDidMount() {
-    this._cm = CodeMirror(this.refs.container, {
+    this._cm = Monaco.editor.create(this.refs.container, {
       theme: 'p5-widget',
       value: this.props.content,
-      lineNumbers: true,
-      mode: 'javascript'
+      lineNumbers: "on",
+      language: "javascript"
     });
-    this._cm.on('change', () => {
+
+    Monaco.languages.typescript.javascriptDefaults.addExtraLib(p5dts, p5Uri);
+    // When resolving definitions and references, the editor will try to use created models.
+    // Creating a model for the library allows "peek definition/references" commands to work with the library.
+    Monaco.editor.createModel(p5dts, 'typescript', Monaco.Uri.parse(p5Uri));
+
+
+    this._cm.onDidChangeModelContent(() => {
       if (this.props.onChange) {
-        let size = this._cm.getDoc().historySize();
+        // let size = this._cm.getDoc().historySize();
+        // TODO:
+        let size = { undo: 0, redo: 0 };
         this.props.onChange(this._cm.getValue(),
                             size.undo > 0, size.redo > 0);
       }
@@ -76,15 +106,17 @@ export default class Editor extends PureComponent<Props, State> {
   }
 
   undo() {
-    this._cm.getDoc().undo();
+    // TODO:
+    // this._cm.executeCommand();
   }
 
   redo() {
-    this._cm.getDoc().redo();
+    // TODO:
+    // this._cm.getDoc().redo();
   }
 
   resizeEditor = () => {
-    let wrapper = this._cm.getWrapperElement();
+    let wrapper = this._cm.getContainerDomNode();
     let oldDisplay = wrapper.style.display;
 
     // We need to get the size of our container when it's
@@ -96,7 +128,8 @@ export default class Editor extends PureComponent<Props, State> {
 
     wrapper.style.display = oldDisplay;
 
-    this._cm.setSize(null, rectHeight);
+    // TODO: may be unnec.
+    // this._cm.resize(null, rectHeight);
   }
 
   // http://stackoverflow.com/a/33826399/2422398

lib/main.tsx

@@ -1,28 +1,26 @@
 import React = require("react");
 import ReactDOM = require("react-dom");
 
-import url = require("url");
-
 import * as defaults from "./defaults";
 import { SessionStorageAutosaver } from "./autosaver";
 import App from "./app";
 
-let defaultSketchJS = require("raw!./default-sketch.js") as string;
+let defaultSketchJS = require("raw-loader!./default-sketch.js") as string;
 
 require("../node_modules/codemirror/lib/codemirror.css");
 require("../css/style.css");
 require("../css/p5-widget-codemirror-theme.css");
 
 function start() {
   let embeddingPageURL = document.referrer;
-  let qs = url.parse(window.location.search, true).query;
-  let id = embeddingPageURL + '_' + qs['id'];
-  let baseSketchURL = qs['baseSketchURL'] || embeddingPageURL;
-  let autoplay = (qs['autoplay'] === 'on');
-  let initialContent = qs['sketch'] || defaultSketchJS;
-  let p5version = qs['p5version'] || defaults.P5_VERSION;
-  let previewWidth = parseInt(qs['previewWidth']);
-  let maxRunTime = parseInt(qs['maxRunTime'])
+  let qs = new URLSearchParams(window.location.search);
+  let id = embeddingPageURL + '_' + qs.get('id');
+  let baseSketchURL = qs.get('baseSketchURL') || embeddingPageURL;
+  let autoplay = (qs.get('autoplay') === 'on');
+  let initialContent = qs.get('sketch') || defaultSketchJS;
+  let p5version = qs.get('p5version') || defaults.P5_VERSION;
+  let previewWidth = parseInt(qs.get('previewWidth'));
+  let maxRunTime = parseInt(qs.get('maxRunTime'))
   if (isNaN(previewWidth)) {
     previewWidth = defaults.PREVIEW_WIDTH;
   }

lib/preview-frame.ts

@@ -12,7 +12,7 @@ interface PreviewFrameWindow extends PreviewFrame.Runner {
   p5: (sketch?: Function, node?: HTMLElement, sync?: boolean) => void;
 }
 
-let global = window as PreviewFrameWindow;
+let global = window as unknown as PreviewFrameWindow;
 
 function loadScript(url, cb?: () => void) {
   let script = document.createElement('script');