fix: multiple items of same type in datatip; preamble in snippets

Author: Andreas Gerlach

lib/datatip-manager.js

@@ -313,8 +313,8 @@ module.exports = class DatatipManager {
           }
           else if (datatip.markedStrings.length > 0) {
             const grammar = editor.getGrammar().name.toLowerCase();
-            const snippetHtml = await this.getSnippetHtml(datatip.markedStrings.filter(t => t.type === 'snippet').map(t => t.value).shift(), grammar);
-            const documentationHtml = await this.getDocumentationHtml(datatip.markedStrings.filter(t => t.type === 'markdown').map(t => t.value).shift(), grammar);
+            const snippetHtml = await this.getSnippetHtml(datatip.markedStrings.filter(t => t.type === 'snippet').map(t => t.value), grammar);
+            const documentationHtml = await this.getDocumentationHtml(datatip.markedStrings.filter(t => t.type === 'markdown').map(t => t.value), grammar);
             const dataTipView = new DataTipView({ snippet: snippetHtml, html: documentationHtml });
             this.dataTipMarkerDisposables = this.mountDataTipWithMarker(editor, datatip.range, position, dataTipView);
           }
@@ -327,33 +327,37 @@ module.exports = class DatatipManager {
 
   /**
    * converts a given code snippet into syntax formatted HTML
-   * @param  {String}  snippet     the code snippet to be converted
+   * @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(snippet, grammarName) {
-    if ((snippet !== undefined) && (snippet.length > 0)) {
+  async getSnippetHtml(snippets, grammarName) {
+    if ((snippets !== undefined) && (snippets.length > 0)) {
       const regExpLSPPrefix = /^\((method|property|parameter|alias)\)\W/;
-      const preElem = document.createElement('pre');
-      const codeElem = document.createElement('code');
-
-      codeElem.classList.add(grammarName);
-      codeElem.innerText = snippet.replace(regExpLSPPrefix, '');
-      preElem.appendChild(codeElem);
-
-      return this.renderer.render(preElem.outerHTML, grammarName);
+      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.classList.add(grammarName);
+        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  {String}  markdownText the documentation text in markdown format to be converted
+   * @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(markdownText, grammarName) {
-    if ((markdownText !== undefined) && (markdownText.length > 0)) {
+  async getDocumentationHtml(markdownTexts, grammarName) {
+    if ((markdownTexts !== undefined) && (markdownTexts.length > 0)) {
+      const markdownText = markdownTexts.join("\r\n");
       return this.renderer.render(markdownText, grammarName);
     }
     return null;