From e5ce7591677976768fa3877eac240a4a3f94d9be Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Sat, 23 Feb 2019 21:53:20 -0800
Subject: [PATCH 1/3] update

---
 public/app/plugins/panel/text2/TextPanel.tsx  | 100 ++++++++++++++++++
 .../plugins/panel/text2/TextPanelEditor.tsx   |  32 ++++++
 public/app/plugins/panel/text2/module.tsx     |  18 ++--
 public/app/plugins/panel/text2/types.ts       |  14 +++
 4 files changed, 153 insertions(+), 11 deletions(-)
 create mode 100644 public/app/plugins/panel/text2/TextPanel.tsx
 create mode 100644 public/app/plugins/panel/text2/TextPanelEditor.tsx
 create mode 100644 public/app/plugins/panel/text2/types.ts

diff --git a/public/app/plugins/panel/text2/TextPanel.tsx b/public/app/plugins/panel/text2/TextPanel.tsx
new file mode 100644
index 00000000000..9e9210df119
--- /dev/null
+++ b/public/app/plugins/panel/text2/TextPanel.tsx
@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+
+import Remarkable from 'remarkable';
+import { sanitize } from 'app/core/utils/text';
+import config from 'app/core/config';
+import templateSrv from 'app/features/templating/template_srv';
+import { debounce } from 'lodash';
+
+// Types
+import { TextOptions } from './types';
+import { PanelProps } from '@grafana/ui/src/types';
+
+interface Props extends PanelProps<TextOptions> {}
+interface State {
+  html: string;
+}
+
+export class TextPanel extends Component<Props, State> {
+  remarkable: Remarkable;
+
+  constructor(props) {
+    super(props);
+
+    // TODO thre must be some better way to start with defualt options!
+    let opts = props.options;
+    if (opts && opts['options']) {
+      opts = opts['options'];
+      console.log('WEIRD!', opts);
+    }
+
+    this.state = {
+      html: this.processContent(opts),
+    };
+  }
+
+  updateHTML = debounce(() => {
+    const html = this.processContent(this.props.options);
+    if (html !== this.state.html) {
+      this.setState({ html });
+    }
+  }, 100);
+
+  componentDidUpdate(prevProps: Props) {
+    // Since any change could be referenced in a template variable,
+    // This needs to process everything
+    this.updateHTML();
+  }
+
+  prepareHTML(html: string): string {
+    const scopedVars = {}; // TODO?? = this.props.;
+    html = config.disableSanitizeHtml ? html : sanitize(html);
+    try {
+      return templateSrv.replace(html, scopedVars);
+    } catch (e) {
+      // TODO -- put the error in the header window
+      console.log('Text panel error: ', e);
+      return html;
+    }
+  }
+
+  prepareText(content: string): string {
+    return this.prepareHTML(
+      content
+        .replace(/&/g, '&amp;')
+        .replace(/>/g, '&gt;')
+        .replace(/</g, '&lt;')
+        .replace(/\n/g, '<br/>')
+    );
+  }
+
+  prepareMarkdown(content: string): string {
+    if (!this.remarkable) {
+      this.remarkable = new Remarkable();
+    }
+    return this.prepareHTML(this.remarkable.render(content));
+  }
+
+  processContent(options: TextOptions): string {
+    const { mode, content } = options;
+
+    if (!content) {
+      return '';
+    }
+
+    if (mode === 'markdown') {
+      return this.prepareMarkdown(content);
+    }
+    if (mode === 'html') {
+      return this.prepareHTML(content);
+    }
+
+    return this.prepareText(content);
+  }
+
+  render() {
+    const { html } = this.state;
+
+    return <div className="markdown-html panel-text-content" dangerouslySetInnerHTML={{ __html: html }} />;
+  }
+}
diff --git a/public/app/plugins/panel/text2/TextPanelEditor.tsx b/public/app/plugins/panel/text2/TextPanelEditor.tsx
new file mode 100644
index 00000000000..2581384af9a
--- /dev/null
+++ b/public/app/plugins/panel/text2/TextPanelEditor.tsx
@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react';
+import { PanelEditorProps, PanelOptionsGroup, Select, SelectOptionItem } from '@grafana/ui';
+
+import { TextOptions } from './types';
+
+export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>> {
+  modes: SelectOptionItem[] = [
+    { value: 'markdown', label: 'Markdown' },
+    { value: 'text', label: 'Text' },
+    { value: 'html', label: 'HTML' },
+  ];
+
+  onModeChange = (item: SelectOptionItem) => this.props.onChange({ ...this.props.options, mode: item.value });
+
+  onContentChange = evt => this.props.onChange({ ...this.props.options, content: (event.target as any).value });
+
+  render() {
+    const { mode, content } = this.props.options;
+
+    return (
+      <PanelOptionsGroup title="Text">
+        <div className="gf-form">
+          <span className="gf-form-label">Mode</span>
+          <Select onChange={this.onModeChange} value={this.modes.find(e => mode === e.value)} options={this.modes} />
+        </div>
+
+        {/* TODO: <code-editor */}
+        <textarea value={content} onChange={this.onContentChange} className="gf-form-input" rows={10} />
+      </PanelOptionsGroup>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/text2/module.tsx b/public/app/plugins/panel/text2/module.tsx
index 884a5927a19..bac292e8c29 100644
--- a/public/app/plugins/panel/text2/module.tsx
+++ b/public/app/plugins/panel/text2/module.tsx
@@ -1,14 +1,10 @@
-import React, { PureComponent } from 'react';
-import { PanelProps, ReactPanelPlugin } from '@grafana/ui';
+import { ReactPanelPlugin } from '@grafana/ui';
 
-export class Text2 extends PureComponent<PanelProps> {
-  constructor(props: PanelProps) {
-    super(props);
-  }
+import { TextPanelEditor } from './TextPanelEditor';
+import { TextPanel } from './TextPanel';
+import { TextOptions, defaults } from './types';
 
-  render() {
-    return <h2>Text Panel!</h2>;
-  }
-}
+export const reactPanel = new ReactPanelPlugin<TextOptions>(TextPanel);
 
-export const reactPanel = new ReactPanelPlugin(Text2);
+reactPanel.setEditor(TextPanelEditor);
+reactPanel.setDefaults(defaults);
diff --git a/public/app/plugins/panel/text2/types.ts b/public/app/plugins/panel/text2/types.ts
new file mode 100644
index 00000000000..a725af59090
--- /dev/null
+++ b/public/app/plugins/panel/text2/types.ts
@@ -0,0 +1,14 @@
+export interface TextOptions {
+  mode: 'html' | 'markdown' | 'text';
+  content: string;
+}
+
+export const defaults: TextOptions = {
+  mode: 'markdown',
+  content: `# Title
+
+For markdown syntax help: [commonmark.org/help](https://commonmark.org/help/)
+
+
+`,
+};

From 94b6fc54fff768f402a8cf9e9b72e1ad816e99ac Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Tue, 5 Mar 2019 11:14:22 -0800
Subject: [PATCH 2/3] use replaceVariables

---
 public/app/plugins/panel/text2/TextPanel.tsx      | 15 ++++-----------
 .../app/plugins/panel/text2/TextPanelEditor.tsx   |  4 ++--
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/public/app/plugins/panel/text2/TextPanel.tsx b/public/app/plugins/panel/text2/TextPanel.tsx
index 9e9210df119..4abb0c105be 100644
--- a/public/app/plugins/panel/text2/TextPanel.tsx
+++ b/public/app/plugins/panel/text2/TextPanel.tsx
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import Remarkable from 'remarkable';
 import { sanitize } from 'app/core/utils/text';
 import config from 'app/core/config';
-import templateSrv from 'app/features/templating/template_srv';
 import { debounce } from 'lodash';
 
 // Types
@@ -21,15 +20,8 @@ export class TextPanel extends Component<Props, State> {
   constructor(props) {
     super(props);
 
-    // TODO thre must be some better way to start with defualt options!
-    let opts = props.options;
-    if (opts && opts['options']) {
-      opts = opts['options'];
-      console.log('WEIRD!', opts);
-    }
-
     this.state = {
-      html: this.processContent(opts),
+      html: this.processContent(props.options),
     };
   }
 
@@ -47,10 +39,11 @@ export class TextPanel extends Component<Props, State> {
   }
 
   prepareHTML(html: string): string {
-    const scopedVars = {}; // TODO?? = this.props.;
+    const { replaceVariables } = this.props;
+
     html = config.disableSanitizeHtml ? html : sanitize(html);
     try {
-      return templateSrv.replace(html, scopedVars);
+      return replaceVariables(html);
     } catch (e) {
       // TODO -- put the error in the header window
       console.log('Text panel error: ', e);
diff --git a/public/app/plugins/panel/text2/TextPanelEditor.tsx b/public/app/plugins/panel/text2/TextPanelEditor.tsx
index 2581384af9a..d604b32c82c 100644
--- a/public/app/plugins/panel/text2/TextPanelEditor.tsx
+++ b/public/app/plugins/panel/text2/TextPanelEditor.tsx
@@ -10,9 +10,9 @@ export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>
     { value: 'html', label: 'HTML' },
   ];
 
-  onModeChange = (item: SelectOptionItem) => this.props.onChange({ ...this.props.options, mode: item.value });
+  onModeChange = (item: SelectOptionItem) => this.props.onOptionsChange({ ...this.props.options, mode: item.value });
 
-  onContentChange = evt => this.props.onChange({ ...this.props.options, content: (event.target as any).value });
+  onContentChange = evt => this.props.onOptionsChange({ ...this.props.options, content: (event.target as any).value });
 
   render() {
     const { mode, content } = this.props.options;

From 2e8dd19636cea399c69c116d58a26702da651fbb Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Wed, 6 Mar 2019 15:54:19 -0800
Subject: [PATCH 3/3] use pure component

---
 public/app/plugins/panel/text2/TextPanel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/panel/text2/TextPanel.tsx b/public/app/plugins/panel/text2/TextPanel.tsx
index 4abb0c105be..26bb2b2dcb9 100644
--- a/public/app/plugins/panel/text2/TextPanel.tsx
+++ b/public/app/plugins/panel/text2/TextPanel.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 import Remarkable from 'remarkable';
 import { sanitize } from 'app/core/utils/text';
@@ -14,7 +14,7 @@ interface State {
   html: string;
 }
 
-export class TextPanel extends Component<Props, State> {
+export class TextPanel extends PureComponent<Props, State> {
   remarkable: Remarkable;
 
   constructor(props) {
@@ -30,11 +30,11 @@ export class TextPanel extends Component<Props, State> {
     if (html !== this.state.html) {
       this.setState({ html });
     }
-  }, 100);
+  }, 150);
 
   componentDidUpdate(prevProps: Props) {
     // Since any change could be referenced in a template variable,
-    // This needs to process everything
+    // This needs to process everytime (with debounce)
     this.updateHTML();
   }