Enabling Markdown for GristDocTour

Author: Guillaume Olivrin (Lab)

app/client/ui/DocTour.ts

@@ -10,6 +10,10 @@ import {IconList, IconName} from 'app/client/ui2018/IconList';
 import {DocData} from 'app/common/DocData';
 import {dom} from 'grainjs';
 import sortBy = require('lodash/sortBy');
+import {marked} from "marked";
+import {renderer} from 'app/client/ui/DocTutorialRenderer';
+import {sanitizeTutorialHTML} from "./sanitizeHTML";
+
 
 const t = makeT('DocTour');
 
@@ -44,7 +48,17 @@ async function makeDocTour(docData: DocData, docComm: DocComm): Promise<IOnBoard
       return String(tableData.getValue(rowId, colId) || "");
     }
     const title = getValue("Title");
-    let body: HTMLElement | string = getValue("Body");
+
+    const bodyHtmlContent = sanitizeTutorialHTML(marked.parse(getValue("Body"), {
+      async: false, renderer
+    }));
+    const element = document.createElement('div');
+    element.innerHTML = bodyHtmlContent;
+
+
+    let body: HTMLElement = element;
+
+
     const linkText = getValue("Link_Text");
     const linkUrl = getValue("Link_URL");
     const linkIcon = getValue("Link_Icon") as IconName;

app/client/ui/DocTourRenderer.ts

@@ -0,0 +1,7 @@
+import {marked} from 'marked';
+
+export const renderer = new marked.Renderer();
+
+renderer.link = ({href, text}) => {
+  return `<a href="${href}" target="_blank">${text}</a>`;
+};