Merge pull request #23 from atom-ide-community/feat/markdown-renderer

Feat/markdown renderer

Author: appelgriebsch

lib/datatip-manager.js

@@ -1,5 +1,3 @@
-// @ts-check
-/// <reference path="../typings/atom-ide.d.ts"/>
 'use babel';
 
 const { CompositeDisposable, Disposable, Range, Point, TextEditor } = require('atom');
@@ -80,15 +78,18 @@ module.exports = class DatatipManager {
      * [cursorMoveTimer description]
      */
     this.cursorMoveTimer = null;
+
+    this.renderer = null;
   }
 
   /**
    * [initialize description]
    */
-  initialize() {
+  initialize(renderer) {
     this.subscriptions = new CompositeDisposable();
     this.providerRegistry = new ProviderRegistry();
     this.watchedEditors = new WeakSet();
+    this.renderer = renderer;
 
     this.subscriptions.add(
       atom.workspace.observeTextEditors(editor => {
@@ -164,9 +165,9 @@ module.exports = class DatatipManager {
     if (editorView.hasFocus()) {
       this.updateCurrentEditor(editor);
     }
-    let focusListener = (element) => this.updateCurrentEditor(editor);
+    let focusListener = () => this.updateCurrentEditor(editor);
     editorView.addEventListener('focus', focusListener);
-    let blurListener = (element) => this.hideDataTip();
+    let blurListener = () => this.hideDataTip();
     editorView.addEventListener('blur', blurListener);
 
     let disposable = new Disposable(() => {
@@ -305,14 +306,20 @@ module.exports = class DatatipManager {
           let dataTipView = null;
 
           if (result.component){
-            dataTipView = new DataTipView({ component: result.component });
+            dataTipView = new DataTipView({ reactView: result.component });
+            this.dataTipMarkerDisposables = this.mountDataTipWithMarker(editor, result.range, position, dataTipView);
           }
           else if (result.markedStrings.length > 0) {
-            dataTipView = new DataTipView({ markedStrings: result.markedStrings });
-          }
-
-          if (dataTipView) {
-            this.dataTipMarkerDisposables = this.mountDataTipWithMarker(editor, result.range, position, dataTipView);
+            let s = result.markedStrings.map((m) => {
+              if (m.type === "markdown") return m.value;
+              const regExpLSPPrefix = /^\((method|property|parameter)\)\W/;
+              const snippet = m.value.replace(regExpLSPPrefix, '');
+              return `<pre><code class="${editor.getGrammar().name.toLowerCase()}">${snippet}</code></pre>`;
+            }).join('\r\n');
+            this.renderer.render(s).then((html) => {
+              dataTipView = new DataTipView({ htmlView: html });
+              this.dataTipMarkerDisposables = this.mountDataTipWithMarker(editor, result.range, position, dataTipView);
+            }).catch((err) => console.log(err));
           }
         });
     }

lib/datatip-view.js

@@ -3,100 +3,20 @@
 
 const ReactDOMServer = require('react-dom/server');
 const etch = require('etch');
-const marked = require('marked');
 const createDOMPurify = require('dompurify');
 /**
  * [domPurify description]
  * @type {DOMPurify}
  */
 const domPurify = createDOMPurify();
 
-class SnippetView {
-  constructor({ snippet, grammar }) {
-    this.rootElement = document.createElement("div");
-    this.rootElement.className = "datatip-container";
-    if (snippet) {
-      this.refreshRootElement(snippet, grammar);
-    }
-  }
-
-  update({ snippet, grammar }) {
-    this.refreshRootElement(snippet, grammar);
-  }
-
-  refreshRootElement(snippet, grammar) {
-    const wrapper = document.createElement("div");
-    wrapper.className = "datatip-marked-text-editor";
-    if (snippet) {
-      const regExpLSPPrefix = /^\((method|property|parameter)\)\W/;
-      snippet = snippet.replace(regExpLSPPrefix, '');
-      if (grammar) {
-        const atomElem = atom.workspace.buildTextEditor({
-          lineNumberGutterVisible: false,
-          readonly: true,
-          keyboardInputEnabled: false,
-          showInvisibles: false,
-          tabLength: atom.config.get("editor.tabLength")
-        });
-        atomElem.setGrammar(grammar);
-        atomElem.setText(snippet);
-        const atomView = atom.views.getView(atomElem);
-        atomView.setUpdatedSynchronously(true);
-        atomView.style.pointerEvents = "none"
-        atomView.style.position = "absolute";
-        atomView.style.width = "0px";
-        atomView.style.height = "1px";
-        atom.views.getView(atom.workspace).appendChild(atomView);
-        this.editorTokenized(atomElem).then(() => {
-          const html = Array.from(atomView.querySelectorAll(".line:not(.dummy)"));
-          wrapper.innerHTML = domPurify.sanitize(html.map(x => x.innerHTML).join("\n"), { breaks: true });
-          atomView.remove();
-        }).catch(() => {
-          atomView.remove();
-        })
-      }
-    }
-    this.rootElement.appendChild(wrapper);
-  }
-
-  get element() {
-    return this.rootElement;
-  }
-
-  /**
-   * [editorTokenized description]
-   * @param  {TextEditor}  editor [description]
-   * @return {Promise}        [description]
-   */
-  editorTokenized(editor) {
-    return new Promise(resolve => {
-      if (editor.getBuffer().getLanguageMode().fullyTokenized) {
-        resolve()
-      } else {
-        const disp = editor.onDidTokenize(() => {
-          disp.dispose()
-          resolve()
-        })
-      }
-    })
-  }
-}
-
-class MarkdownView {
-  constructor({ markedString }) {
-    this.markedString = markedString;
+class HtmlView {
+  constructor({ html }) {
     this.rootElement = document.createElement('div');
     this.rootElement.className = "datatip-marked-container";
     this.rootElement.addEventListener("wheel", this.onMouseWheel, { passive: true });
-
-    if (this.markedString) {
-      this.rootElement.innerHTML = domPurify.sanitize(marked(this.markedString, { breaks: true }));
-    }
-  }
-  update({ markedString }) {
-    this.markedString = markedString;
-    if (this.markedString) {
-      this.rootElement.innerHTML = domPurify.sanitize(marked(this.markedString, { breaks: true }));
+    if (html){
+      this.rootElement.innerHTML = domPurify.sanitize(html);
     }
   }
 
@@ -113,7 +33,7 @@ class MarkdownView {
   }
 }
 
-class ReactComponentView {
+class ReactView {
   constructor({ component }) {
     this.rootElement = document.createElement('span')
     if (component) {
@@ -134,24 +54,24 @@ module.exports = class DataTipView {
   }
 
   render() {
-    if (this.properties.component) {
+    if (this.properties.reactView) {
+      return (
+        <div className="datatip-element">
+          <ReactView component={this.properties.reactView} />
+        </div>
+      );
+    }
+    else if (this.properties.htmlView) {
       return (
         <div className="datatip-element">
-          <ReactComponentView component={this.properties.component} />
+          <HtmlView html={this.properties.htmlView} />
         </div>
       );
     }
     else {
       return (
         <div className="datatip-element">
-          {this.properties.markedStrings.map((m, i) => {
-            switch (m.type) {
-              case "snippet":
-                return <SnippetView key={i} snippet={m.value} grammar={m.grammar} />;
-              case "markdown":
-                return <MarkdownView key={i} markedString={m.value} />;
-            }
-          })}
+          { this.children }
         </div>
       );
     }

lib/main.js

@@ -1,5 +1,3 @@
-// @ts-check
-/// <reference path="../typings/atom-ide.d.ts"/>
 'use babel';
 
 const { CompositeDisposable } = require('atom');
@@ -29,7 +27,11 @@ module.exports = {
 
     if (!this.datatipManager) this.datatipManager = new DataTipManager();
     this.subscriptions.add(this.datatipManager);
-    this.datatipManager.initialize();
+
+    require('atom-package-deps').install('atom-ide-datatip')
+      .then(function() {
+        console.log('All dependencies installed, good to go')
+      });
   },
 
   /**
@@ -49,5 +51,9 @@ module.exports = {
    */
   provideDatatipService() {
     return this.datatipManager;
+  },
+
+  consumeMarkdownRenderer(renderer) {
+    this.datatipManager.initialize(renderer);
   }
 };