WIP: Add markdown_editor component

package.json

@@ -61,6 +61,8 @@
     "react-is": "~16.3.0",
     "react-virtualized": "^9.21.2",
     "resize-observer-polyfill": "^1.5.0",
+    "showdown": "^1.9.1",
+    "showdown-htmlescape": "^0.1.9",
     "tabbable": "^3.0.0",
     "uuid": "^3.1.0"
   },

src-docs/src/i18ntokens.json

@@ -1407,6 +1407,86 @@
     },
     "filepath": "src/components/link/link.tsx"
   },
+  {
+    "token": "euiMarkdownEditor.boldStyles",
+    "defString": "Bold and italic styles",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 136,
+        "column": 16
+      },
+      "end": {
+        "line": 138,
+        "column": 51
+      }
+    },
+    "filepath": "src/components/markdown_editor/markdown_editor.tsx"
+  },
+  {
+    "token": "euiMarkdownEditor.quoteStyles",
+    "defString": "Quote, code and link styles",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 155,
+        "column": 16
+      },
+      "end": {
+        "line": 157,
+        "column": 56
+      }
+    },
+    "filepath": "src/components/markdown_editor/markdown_editor.tsx"
+  },
+  {
+    "token": "euiMarkdownEditor.listStyles",
+    "defString": "Unordered and ordered list styles",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 174,
+        "column": 16
+      },
+      "end": {
+        "line": 176,
+        "column": 62
+      }
+    },
+    "filepath": "src/components/markdown_editor/markdown_editor.tsx"
+  },
+  {
+    "token": "euiMarkdownEditor.edit",
+    "defString": "Edit",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 202,
+        "column": 20
+      },
+      "end": {
+        "line": 202,
+        "column": 77
+      }
+    },
+    "filepath": "src/components/markdown_editor/markdown_editor.tsx"
+  },
+  {
+    "token": "euiMarkdownEditor.previewMarkdown",
+    "defString": "Preview markdown",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 204,
+        "column": 20
+      },
+      "end": {
+        "line": 207,
+        "column": 22
+      }
+    },
+    "filepath": "src/components/markdown_editor/markdown_editor.tsx"
+  },
   {
     "token": "euiModal.closeModal",
     "defString": "Closes this modal window",

src-docs/src/views/form_controls/form_controls_example.js

@@ -20,6 +20,7 @@ import {
   EuiFormControlLayout,
   EuiFormControlLayoutDelimited,
   EuiLink,
+  EuiMarkdownEditor,
   EuiRadio,
   EuiRadioGroup,
   EuiSelect,
@@ -47,6 +48,10 @@ import TextArea from './text_area';
 const textAreaSource = require('!!raw-loader!./text_area');
 const textAreaHtml = renderToHtml(TextArea);
 
+import MarkdownEditor from './markdown_editor';
+const markdownEditorSource = require('!!raw-loader!./markdown_editor');
+const markdownEditorHtml = renderToHtml(MarkdownEditor);
+
 import { FilePicker } from './file_picker';
 const filePickerSource = require('!!raw-loader!./file_picker');
 const filePickerHtml = renderToHtml(FilePicker);
@@ -203,6 +208,29 @@ export const FormControlsExample = {
       },
       demo: <TextArea />,
     },
+    {
+      title: 'Markdown Editor',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownEditorSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownEditorHtml,
+        },
+      ],
+      text: (
+        <p>
+          This component renders a markdown editor, including buttons for
+          quickly inserting common markdown elements and a preview mode.
+        </p>
+      ),
+      props: {
+        EuiMarkdownEditor,
+      },
+      demo: <MarkdownEditor />,
+    },
     {
       title: 'File Picker',
       source: [

src-docs/src/views/form_controls/markdown_editor.js

@@ -0,0 +1,10 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+
+import {
+  EuiMarkdownEditor,
+} from '../../../../src/components/markdown_editor';
+
+export default () => (
+  <EuiMarkdownEditor />
+);

src/components/index.js

@@ -175,6 +175,8 @@ export { EuiLink } from './link';
 
 export { EuiListGroup, EuiListGroupItem } from './list_group';
 
+export { EuiMarkdownEditor } from './markdown_editor';
+
 export {
   EUI_MODAL_CANCEL_BUTTON,
   EUI_MODAL_CONFIRM_BUTTON,

src/components/index.scss

@@ -39,6 +39,7 @@
 @import 'link/index';
 @import 'list_group/index';
 @import 'loading/index';
+@import 'markdown_editor/index';
 @import 'modal/index';
 @import 'nav_drawer/index';
 @import 'overlay_mask/index';

src/components/markdown_editor/_index.scss

@@ -0,0 +1 @@
+@import 'markdown_editor';

src/components/markdown_editor/_markdown_editor.scss

@@ -0,0 +1,40 @@
+.euiMarkdownEditor__actionBar {
+  background: $euiColorEmptyShade;
+  border: $euiBorderThin;
+  border-color: $euiColorLightShade;
+  border-bottom: none;
+  padding: 0 ($euiSizeS + $euiSizeXS);
+}
+
+.euiMarkdownEditor__actionBarItems {
+  padding: $euiSizeS 0;
+}
+
+.euiMarkdownEditor__previewToggleButton {
+  width: 150px;
+}
+
+.euiMarkdownEditor__previewContainer {
+  border: $euiBorderThin;
+  max-height: 150px;
+  overflow-y: auto;
+  @include euiScrollBar;
+  padding: $euiSizeM;
+}
+
+// Overrides for styles in the "preview" pane
+
+.euiMarkdownEditor__markdownWrapper .euiMarkdownEditor__displayText {
+  blockquote {
+    @include euiFont;
+    border-left: $euiBorderThick;
+    color: $euiColorDarkShade;
+    font-style: normal;
+    padding: 0 $euiSize;
+    text-align: left;
+
+    &::before, &::after {
+      display: none;
+    }
+  }
+}

src/components/markdown_editor/index.ts

@@ -0,0 +1 @@
+export { EuiMarkdownEditor } from './markdown_editor';