feat: add plain text renderer (elastic#564)

common/types/boolean.js

@@ -8,13 +8,11 @@ export const boolean = () => ({
   to: {
     string: n => String(n),
     number: n => Number(n),
-    render: input => {
+    render: value => {
       return {
         type: 'render',
-        as: 'markdown',
-        value: {
-          content: input,
-        },
+        as: 'text',
+        value: `${value}`,
       };
     },
   },

common/types/number.js

@@ -6,13 +6,11 @@ export const number = () => ({
   },
   to: {
     string: n => String(n),
-    render: input => {
+    render: value => {
       return {
         type: 'render',
-        as: 'markdown',
-        value: {
-          content: String(input),
-        },
+        as: 'text',
+        value: `${value}`,
       };
     },
     datatable: value => {

common/types/string.js

@@ -6,13 +6,11 @@ export const string = () => ({
   },
   to: {
     number: n => Number(n),
-    render: input => {
+    render: value => {
       return {
         type: 'render',
-        as: 'markdown',
-        value: {
-          content: input,
-        },
+        as: 'text',
+        value,
       };
     },
   },

public/render_functions/index.js

@@ -11,6 +11,7 @@ import { pie } from './pie';
 import { plot } from './plot';
 import { table } from './table';
 import { timeFilter } from './time_filter';
+import { text } from './text';
 
 export const renderFunctions = [
   advancedFilter,
@@ -26,4 +27,5 @@ export const renderFunctions = [
   plot,
   table,
   timeFilter,
+  text,
 ];

public/render_functions/text.js

@@ -0,0 +1,13 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+
+export const text = () => ({
+  name: 'text',
+  displayName: 'Plain Text',
+  help: 'Render output as plain text',
+  reuseDomNode: true,
+  render(domNode, config, handlers) {
+    ReactDOM.render(<div>{config}</div>, domNode, () => handlers.done());
+    handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
+  },
+});