Markdown: Replace rendering library (#17686)

* Replace remarkable with marked

* Add wrapper and options for marked

public/app/app.ts

@@ -36,6 +36,7 @@ import { setupAngularRoutes } from 'app/routes/routes';
 import 'app/routes/GrafanaCtrl';
 import 'app/features/all';
 import { setLocale } from '@grafana/ui/src/utils/moment_wrapper';
+import { setMarkdownOptions } from '@grafana/data';
 
 // import symlinked extensions
 const extensionsIndex = (require as any).context('.', true, /extensions\/index.ts/);
@@ -70,6 +71,8 @@ export class GrafanaApp {
 
     setLocale(config.bootData.user.locale);
 
+    setMarkdownOptions({ sanitize: !config.disableSanitizeHtml });
+
     app.config(
       (
         $locationProvider: angular.ILocationProvider,

public/app/core/components/PluginHelp/PluginHelp.tsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-// @ts-ignore
-import Remarkable from 'remarkable';
+import { renderMarkdown } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 
 interface Props {
@@ -39,8 +38,7 @@ export class PluginHelp extends PureComponent<Props, State> {
     getBackendSrv()
       .get(`/api/plugins/${plugin.id}/markdown/${type}`)
       .then((response: string) => {
-        const markdown = new Remarkable();
-        const helpHtml = markdown.render(response);
+        const helpHtml = renderMarkdown(response);
 
         if (response === '' && type === 'help') {
           this.setState({

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import Remarkable from 'remarkable';
+
+import { renderMarkdown } from '@grafana/data';
 import { Tooltip, ScopedVars, DataLink } from '@grafana/ui';
 
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
@@ -45,11 +46,12 @@ export class PanelHeaderCorner extends Component<Props> {
     const markdown = panel.description;
     const linkSrv = new LinkSrv(templateSrv, this.timeSrv);
     const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars);
-    const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown);
+    const markedInterpolatedMarkdown = renderMarkdown(interpolatedMarkdown);
 
     return (
-      <div className="markdown-html panel-info-content">
-        <p dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
+      <div className="panel-info-content markdown-html">
+        <div dangerouslySetInnerHTML={{ __html: markedInterpolatedMarkdown }} />
+
         {panel.links && panel.links.length > 0 && (
           <ul className="panel-info-corner-links">
             {panel.links.map((link, idx) => {

public/app/features/panel/panel_ctrl.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import Remarkable from 'remarkable';
 import { sanitize, escapeHtml } from 'app/core/utils/text';
+import { renderMarkdown } from '@grafana/data';
 
 import config from 'app/core/config';
 import { profiler } from 'app/core/core';
@@ -259,8 +259,8 @@ export class PanelCtrl {
     const interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
     let html = '<div class="markdown-html panel-info-content">';
 
-    const md = new Remarkable().render(interpolatedMarkdown);
-    html += sanitize(md);
+    const md = renderMarkdown(interpolatedMarkdown);
+    html += config.disableSanitizeHtml ? md : sanitize(md);
 
     if (this.panel.links && this.panel.links.length > 0) {
       html += '<ul class="panel-info-corner-links">';

public/app/features/users/UsersListPage.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import Remarkable from 'remarkable';
+import { renderMarkdown } from '@grafana/data';
 import Page from 'app/core/components/Page/Page';
 import UsersActionBar from './UsersActionBar';
 import UsersTable from './UsersTable';
@@ -38,8 +38,7 @@ export class UsersListPage extends PureComponent<Props, State> {
     super(props);
 
     if (this.props.externalUserMngInfo) {
-      const markdownRenderer = new Remarkable();
-      this.externalUserMngInfoHtml = markdownRenderer.render(this.props.externalUserMngInfo);
+      this.externalUserMngInfoHtml = renderMarkdown(this.props.externalUserMngInfo);
     }
 
     this.state = {

public/app/plugins/panel/text/module.ts

@@ -1,10 +1,11 @@
 import _ from 'lodash';
 import { PanelCtrl } from 'app/plugins/sdk';
-import Remarkable from 'remarkable';
+
 import { sanitize, escapeHtml } from 'app/core/utils/text';
 import config from 'app/core/config';
 import { auto, ISCEService } from 'angular';
 import { TemplateSrv } from 'app/features/templating/template_srv';
+import { renderMarkdown } from '@grafana/data';
 
 const defaultContent = `
 # Title
@@ -19,7 +20,6 @@ export class TextPanelCtrl extends PanelCtrl {
   static templateUrl = `public/app/plugins/panel/text/module.html`;
   static scrollable = true;
 
-  remarkable: any;
   content: string;
   // Set and populate defaults
   panelDefaults = {
@@ -82,12 +82,8 @@ export class TextPanelCtrl extends PanelCtrl {
   }
 
   renderMarkdown(content: string) {
-    if (!this.remarkable) {
-      this.remarkable = new Remarkable();
-    }
-
     this.$scope.$applyAsync(() => {
-      this.updateContent(this.remarkable.render(content));
+      this.updateContent(renderMarkdown(content));
     });
   }
 

public/app/plugins/panel/text2/TextPanel.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, { PureComponent } from 'react';
-import Remarkable from 'remarkable';
 import { debounce } from 'lodash';
+import { renderMarkdown } from '@grafana/data';
 
 // Utils
 import { sanitize } from 'app/core/utils/text';
@@ -17,8 +17,6 @@ interface State {
 }
 
 export class TextPanel extends PureComponent<Props, State> {
-  remarkable: Remarkable;
-
   constructor(props: Props) {
     super(props);
 
@@ -59,10 +57,7 @@ export class TextPanel extends PureComponent<Props, State> {
   }
 
   prepareMarkdown(content: string): string {
-    if (!this.remarkable) {
-      this.remarkable = new Remarkable();
-    }
-    return this.prepareHTML(this.remarkable.render(content));
+    return this.prepareHTML(renderMarkdown(content));
   }
 
   processContent(options: TextOptions): string {