Merge pull request #98 from atom-ide-community/atom-ide-base

Author: aminya

lib/datatip-manager.js

@@ -1,18 +1,13 @@
 // @ts-check
 /// <reference path="../typings/atom-ide.d.ts"/>
 
-import {
-  CompositeDisposable,
-  Disposable,
-  Range,
-  Point,
-  TextEditor,
-  CursorPositionChangedEvent,
-  CommandEvent,
-} from "atom"
+import { CompositeDisposable, Disposable, Range, Point, TextEditor, CursorPositionChangedEventommandEvent } from "atom"
 import type { DatatipProvider } from "atom-ide-base"
+import { ViewContainer } from "atom-ide-base/commons-ui/float-pane/ViewContainer"
+import { getDocumentationHtml } from "atom-ide-base/commons-ui/float-pane/HTMLView"
+import { getSnippetHtml } from "atom-ide-base/commons-ui/float-pane/SnippetView"
+
 import { ProviderRegistry } from "atom-ide-base/commons-atom/ProviderRegistry"
-import { DataTipView } from "./datatip-view"
 
 export class DataTipManager {
   constructor() {
@@ -361,21 +356,37 @@ export class DataTipManager {
         this.currentMarkerRange = datatip.range
 
         if (datatip.component) {
-          const dataTipView = new DataTipView({ component: datatip.component })
+          const dataTipView = new ViewContainer({
+            component: {
+              element: datatip.component,
+              containerClassName: "datatip-container",
+              contentClassName: "datatip-content",
+            },
+          })
           this.dataTipMarkerDisposables = this.mountDataTipWithMarker(editor, datatip.range, position, dataTipView)
         } else if (datatip.markedStrings.length > 0) {
           const grammar = editor.getGrammar().scopeName.toLowerCase()
-          const snippetHtml = await this.getSnippetHtml(
+          const snippetHtml = await getSnippetHtml(
             datatip.markedStrings.filter((t) => t.type === "snippet").map((t) => t.value),
-            grammar
+            grammar,
+            this.renderer
           )
-          const documentationHtml = await this.getDocumentationHtml(
+          const documentationHtml = await getDocumentationHtml(
             datatip.markedStrings.filter((t) => t.type === "markdown").map((t) => t.value),
-            grammar
+            grammar,
+            this.renderer
           )
-          const dataTipView = new DataTipView({
-            snippet: snippetHtml,
-            html: documentationHtml,
+          const dataTipView = new ViewContainer({
+            snippet: {
+              element: snippetHtml,
+              containerClassName: "datatip-container",
+              contentClassName: "datatip-snippet",
+            },
+            html: {
+              element: documentationHtml,
+              containerClassName: "datatip-container",
+              contentClassName: "datatip-marked",
+            },
           })
           this.dataTipMarkerDisposables = this.mountDataTipWithMarker(editor, datatip.range, position, dataTipView)
         }
@@ -385,43 +396,6 @@ export class DataTipManager {
     }
   }
 
-  /**
-   * converts a given code snippet into syntax formatted HTML
-   * @param  {Array<String>}  snippets     the code snippet to be converted
-   * @param  {String}  grammarName the name of the grammar to be used for syntax highlighting
-   * @return {Promise<string>}     a promise object to track the asynchronous operation
-   */
-  async getSnippetHtml(snippets, grammarName) {
-    if (snippets !== undefined && snippets.length > 0) {
-      const regExpLSPPrefix = /^\((method|property|parameter|alias)\)\W/
-      const divElem = document.createElement("div")
-      snippets.forEach((snippet) => {
-        const preElem = document.createElement("pre")
-        const codeElem = document.createElement("code")
-        snippet = snippet.replace(/^\s*<(\?|!)([a-zA-Z]+)?\s*/i, "") // remove any preamble from the line
-        codeElem.innerText = snippet.replace(regExpLSPPrefix, "")
-        preElem.appendChild(codeElem)
-        divElem.appendChild(preElem)
-      })
-      return this.renderer.render(divElem.outerHTML, grammarName)
-    }
-    return null
-  }
-
-  /**
-   * convert the markdown documentation to HTML
-   * @param  {Array<String>}  markdownTexts the documentation text in markdown format to be converted
-   * @param  {String}  grammarName  the default grammar used for embedded code samples
-   * @return {Promise<string>}      a promise object to track the asynchronous operation
-   */
-  async getDocumentationHtml(markdownTexts, grammarName) {
-    if (markdownTexts !== undefined && markdownTexts.length > 0) {
-      const markdownText = markdownTexts.join("\r\n")
-      return this.renderer.render(markdownText, grammarName)
-    }
-    return null
-  }
-
   /**
    * mounts / displays a data tip view component at a specific position in a given Atom Text editor
    * @param  {TextEditor} editor   the Atom Text editor instance to host the data tip view