From f6202929b767c3cc6c1cd01f1f389ef29b2bd741 Mon Sep 17 00:00:00 2001
From: i-a-n <ian@union.io>
Date: Thu, 5 Dec 2019 14:54:32 -0800
Subject: [PATCH 01/43] WIP: Add markdown_editor component

---
 package.json                                  |   2 +
 .../form_controls/form_controls_example.js    |  28 +
 .../views/form_controls/markdown_editor.js    |  10 +
 src/components/index.js                       |   2 +
 src/components/index.scss                     |   1 +
 src/components/markdown_editor/_index.scss    |   1 +
 .../markdown_editor/_markdown_editor.scss     |  40 ++
 src/components/markdown_editor/index.ts       |   1 +
 .../markdown_editor/markdown_actions.ts       | 523 ++++++++++++++++++
 .../markdown_editor/markdown_editor.test.tsx  |  13 +
 .../markdown_editor/markdown_editor.tsx       | 241 ++++++++
 yarn.lock                                     |  73 ++-
 12 files changed, 932 insertions(+), 3 deletions(-)
 create mode 100644 src-docs/src/views/form_controls/markdown_editor.js
 create mode 100644 src/components/markdown_editor/_index.scss
 create mode 100644 src/components/markdown_editor/_markdown_editor.scss
 create mode 100644 src/components/markdown_editor/index.ts
 create mode 100644 src/components/markdown_editor/markdown_actions.ts
 create mode 100644 src/components/markdown_editor/markdown_editor.test.tsx
 create mode 100644 src/components/markdown_editor/markdown_editor.tsx

diff --git a/package.json b/package.json
index 6bbc40b9f68..3f0ee4d7a59 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,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"
   },
diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
index 65784300e86..3e0168df589 100644
--- a/src-docs/src/views/form_controls/form_controls_example.js
+++ b/src-docs/src/views/form_controls/form_controls_example.js
@@ -22,6 +22,7 @@ import {
   EuiFormControlLayout,
   EuiFormControlLayoutDelimited,
   EuiLink,
+  EuiMarkdownEditor,
   EuiRadio,
   EuiRadioGroup,
   EuiSelect,
@@ -50,6 +51,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);
@@ -210,6 +215,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: [
diff --git a/src-docs/src/views/form_controls/markdown_editor.js b/src-docs/src/views/form_controls/markdown_editor.js
new file mode 100644
index 00000000000..49e6db23980
--- /dev/null
+++ b/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 />
+);
diff --git a/src/components/index.js b/src/components/index.js
index f4cb7cf6652..9832f96f464 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -177,6 +177,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,
diff --git a/src/components/index.scss b/src/components/index.scss
index 57f885deb08..533857f46ef 100644
--- a/src/components/index.scss
+++ b/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';
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
new file mode 100644
index 00000000000..4d913d41a98
--- /dev/null
+++ b/src/components/markdown_editor/_index.scss
@@ -0,0 +1 @@
+@import 'markdown_editor';
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
new file mode 100644
index 00000000000..fc61607fd4e
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
new file mode 100644
index 00000000000..5571dd3f6d3
--- /dev/null
+++ b/src/components/markdown_editor/index.ts
@@ -0,0 +1 @@
+export { EuiMarkdownEditor } from './markdown_editor';
diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
new file mode 100644
index 00000000000..457efd6d28e
--- /dev/null
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -0,0 +1,523 @@
+interface StyleArgsToUpdate {
+  prefix?: string;
+  suffix?: string;
+  blockPrefix?: string;
+  blockSuffix?: string;
+  multiline?: boolean;
+  replaceNext?: string;
+  prefixSpace?: boolean;
+  scanFor?: string;
+  surroundWithNewlines?: boolean;
+  orderedList?: boolean;
+  trimFirst?: boolean;
+}
+
+/**
+ * Class for applying styles to a text editor. Accepts the HTML ID for the textarea
+ * desired, and exposes the `.do(ACTION)` method for manipulating the text.
+ *
+ * @class MarkdownActions
+ * @param {string} editorID
+ */
+class MarkdownActions {
+  editorID: string;
+  styles: Record<string, StyleArgsToUpdate>;
+
+  constructor(editorID: string) {
+    this.editorID = editorID;
+
+    /**
+     * This object is in the format:
+     * [nameOfAction]: {[styles to apply]}
+     */
+    this.styles = {
+      mdBold: {
+        prefix: '**',
+        suffix: '**',
+        trimFirst: true,
+      },
+      mdItalic: {
+        prefix: '_',
+        suffix: '_',
+        trimFirst: true,
+      },
+      mdQuote: {
+        prefix: '> ',
+        multiline: true,
+        surroundWithNewlines: true,
+      },
+      mdCode: {
+        prefix: '`',
+        suffix: '`',
+        blockPrefix: '```',
+        blockSuffix: '```',
+      },
+      mdLink: {
+        prefix: '[',
+        suffix: '](url)',
+        replaceNext: 'url',
+        scanFor: 'https?://',
+      },
+      mdUl: {
+        prefix: '- ',
+        multiline: true,
+        surroundWithNewlines: true,
+      },
+      mdOl: {
+        prefix: '1. ',
+        multiline: true,
+        orderedList: true,
+      },
+    };
+  }
+
+  /**
+   * .do() accepts a string and retrieves the correlating style object (defined in the
+   * constructor). It passes this to applyStyle() that does the text manipulation.
+   *
+   * @param {string} action
+   * @memberof MarkdownActions
+   */
+  do(action: string) {
+    this.applyStyle(this.styles[action]);
+  }
+
+  /**
+   * Sets the default styling object and then superimposes the changes to make on top of
+   * it. Calls the `styleSelectedText` helper function that does the heavy lifting.
+   *
+   * @param {object} incomingStyle
+   * @memberof MarkdownActions
+   */
+  applyStyle(incomingStyle: object) {
+    const defaults = {
+      prefix: '',
+      suffix: '',
+      blockPrefix: '',
+      blockSuffix: '',
+      multiline: false,
+      replaceNext: '',
+      prefixSpace: false,
+      scanFor: '',
+      surroundWithNewlines: false,
+      orderedList: false,
+      trimFirst: false,
+    };
+
+    const outgoingStyle = {
+      ...defaults,
+      ...incomingStyle,
+    };
+    const editor = document.getElementById(this.editorID);
+
+    if (editor) {
+      editor.focus();
+      // @ts-ignore
+      styleSelectedText(editor, outgoingStyle);
+    }
+  }
+}
+
+/**
+ * The following helper functions and types were copied from the GitHub Markdown Toolbar
+ * Element project. The project is MIT-licensed. See it here:
+ * https://github.com/github/markdown-toolbar-element
+ */
+
+interface Newlines {
+  newlinesToAppend: string;
+  newlinesToPrepend: string;
+}
+
+interface SelectionRange {
+  text: string;
+  selectionStart?: number;
+  selectionEnd?: number;
+}
+
+interface StyleArgs {
+  prefix: string;
+  suffix: string;
+  blockPrefix: string;
+  blockSuffix: string;
+  multiline: boolean;
+  replaceNext: string;
+  prefixSpace: boolean;
+  scanFor: string;
+  surroundWithNewlines: boolean;
+  orderedList: boolean;
+  trimFirst: boolean;
+}
+
+function isMultipleLines(string: string): boolean {
+  return string.trim().split('\n').length > 1;
+}
+
+function repeat(string: string, n: number): string {
+  return Array(n + 1).join(string);
+}
+
+function wordSelectionStart(text: string, i: number): number {
+  let index = i;
+  while (
+    text[index] &&
+    text[index - 1] != null &&
+    !text[index - 1].match(/\s/)
+  ) {
+    index--;
+  }
+  return index;
+}
+
+function wordSelectionEnd(text: string, i: number, multiline: boolean): number {
+  let index = i;
+  const breakpoint = multiline ? /\n/ : /\s/;
+  while (text[index] && !text[index].match(breakpoint)) {
+    index++;
+  }
+  return index;
+}
+
+let canInsertText: boolean | null = null;
+
+/**
+ * Note that we're using the native HTMLTextAreaElement.set() method to play nicely with
+ * React's synthetic event system. We fallback to a brute force way of doing it if the
+ * above doesn't work. Although all modern browsers, including IE, seem to be fine:
+ * https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
+ */
+function insertText(
+  textarea: HTMLTextAreaElement,
+  { text, selectionStart, selectionEnd }: SelectionRange
+) {
+  const originalSelectionStart = textarea.selectionStart;
+  const before = textarea.value.slice(0, originalSelectionStart);
+  const after = textarea.value.slice(textarea.selectionEnd);
+  const inputEvent = new Event('input', { bubbles: true });
+
+  if (canInsertText === null || canInsertText === true) {
+    canInsertText = true;
+
+    const nativeInputValueSetter =
+      // @ts-ignore
+      Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype,'value').set;
+    try {
+      // @ts-ignore
+      nativeInputValueSetter.call(textarea, before + text + after);
+
+      textarea.dispatchEvent(inputEvent);
+    } catch (error) {
+      canInsertText = false;
+    }
+  }
+
+  if (!canInsertText) {
+    // If calling [HTMLTextAreaElement.set()] fails, just brute-force it
+    textarea.value = before + text + after;
+    textarea.dispatchEvent(inputEvent);
+  }
+
+  if (selectionStart != null && selectionEnd != null) {
+    textarea.setSelectionRange(selectionStart, selectionEnd);
+  } else {
+    textarea.setSelectionRange(originalSelectionStart, textarea.selectionEnd);
+  }
+}
+
+function styleSelectedText(
+  textarea: HTMLTextAreaElement,
+  styleArgs: StyleArgs
+) {
+  const text = textarea.value.slice(
+    textarea.selectionStart,
+    textarea.selectionEnd
+  );
+
+  let result;
+  if (styleArgs.orderedList) {
+    result = orderedList(textarea);
+  } else if (styleArgs.multiline && isMultipleLines(text)) {
+    result = multilineStyle(textarea, styleArgs);
+  } else {
+    result = blockStyle(textarea, styleArgs);
+  }
+
+  insertText(textarea, result);
+}
+
+function expandSelectedText(
+  textarea: HTMLTextAreaElement,
+  prefixToUse: string,
+  suffixToUse: string,
+  multiline: boolean = false
+): string {
+  if (textarea.selectionStart === textarea.selectionEnd) {
+    textarea.selectionStart = wordSelectionStart(
+      textarea.value,
+      textarea.selectionStart
+    );
+    textarea.selectionEnd = wordSelectionEnd(
+      textarea.value,
+      textarea.selectionEnd,
+      multiline
+    );
+  } else {
+    const expandedSelectionStart = textarea.selectionStart - prefixToUse.length;
+    const expandedSelectionEnd = textarea.selectionEnd + suffixToUse.length;
+    const beginsWithPrefix =
+      textarea.value.slice(expandedSelectionStart, textarea.selectionStart) ===
+      prefixToUse;
+    const endsWithSuffix =
+      textarea.value.slice(textarea.selectionEnd, expandedSelectionEnd) ===
+      suffixToUse;
+    if (beginsWithPrefix && endsWithSuffix) {
+      textarea.selectionStart = expandedSelectionStart;
+      textarea.selectionEnd = expandedSelectionEnd;
+    }
+  }
+  return textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+}
+
+function newlinesToSurroundSelectedText(
+  textarea: HTMLTextAreaElement
+): Newlines {
+  const beforeSelection = textarea.value.slice(0, textarea.selectionStart);
+  const afterSelection = textarea.value.slice(textarea.selectionEnd);
+
+  const breaksBefore = beforeSelection.match(/\n*$/);
+  const breaksAfter = afterSelection.match(/^\n*/);
+  const newlinesBeforeSelection = breaksBefore ? breaksBefore[0].length : 0;
+  const newlinesAfterSelection = breaksAfter ? breaksAfter[0].length : 0;
+
+  let newlinesToAppend;
+  let newlinesToPrepend;
+
+  if (beforeSelection.match(/\S/) && newlinesBeforeSelection < 2) {
+    newlinesToAppend = repeat('\n', 2 - newlinesBeforeSelection);
+  }
+
+  if (afterSelection.match(/\S/) && newlinesAfterSelection < 2) {
+    newlinesToPrepend = repeat('\n', 2 - newlinesAfterSelection);
+  }
+
+  if (newlinesToAppend == null) {
+    newlinesToAppend = '';
+  }
+
+  if (newlinesToPrepend == null) {
+    newlinesToPrepend = '';
+  }
+
+  return { newlinesToAppend, newlinesToPrepend };
+}
+
+function blockStyle(
+  textarea: HTMLTextAreaElement,
+  arg: StyleArgs
+): SelectionRange {
+  let newlinesToAppend;
+  let newlinesToPrepend;
+
+  const {
+    prefix,
+    suffix,
+    blockPrefix,
+    blockSuffix,
+    replaceNext,
+    prefixSpace,
+    scanFor,
+    surroundWithNewlines,
+  } = arg;
+  const originalSelectionStart = textarea.selectionStart;
+  const originalSelectionEnd = textarea.selectionEnd;
+
+  let selectedText = textarea.value.slice(
+    textarea.selectionStart,
+    textarea.selectionEnd
+  );
+  let prefixToUse =
+    isMultipleLines(selectedText) && blockPrefix.length > 0
+      ? `${blockPrefix}\n`
+      : prefix;
+  let suffixToUse =
+    isMultipleLines(selectedText) && blockSuffix.length > 0
+      ? `\n${blockSuffix}`
+      : suffix;
+
+  if (prefixSpace) {
+    const beforeSelection = textarea.value[textarea.selectionStart - 1];
+    if (
+      textarea.selectionStart !== 0 &&
+      beforeSelection != null &&
+      !beforeSelection.match(/\s/)
+    ) {
+      prefixToUse = ` ${prefixToUse}`;
+    }
+  }
+  selectedText = expandSelectedText(
+    textarea,
+    prefixToUse,
+    suffixToUse,
+    arg.multiline
+  );
+  let selectionStart = textarea.selectionStart;
+  let selectionEnd = textarea.selectionEnd;
+  const hasReplaceNext =
+    replaceNext.length > 0 &&
+    suffixToUse.indexOf(replaceNext) > -1 &&
+    selectedText.length > 0;
+  if (surroundWithNewlines) {
+    const ref = newlinesToSurroundSelectedText(textarea);
+    newlinesToAppend = ref.newlinesToAppend;
+    newlinesToPrepend = ref.newlinesToPrepend;
+    prefixToUse = newlinesToAppend + prefix;
+    suffixToUse += newlinesToPrepend;
+  }
+
+  if (
+    selectedText.startsWith(prefixToUse) &&
+    selectedText.endsWith(suffixToUse)
+  ) {
+    const replacementText = selectedText.slice(
+      prefixToUse.length,
+      selectedText.length - suffixToUse.length
+    );
+    if (originalSelectionStart === originalSelectionEnd) {
+      let position = originalSelectionStart - prefixToUse.length;
+      position = Math.max(position, selectionStart);
+      position = Math.min(position, selectionStart + replacementText.length);
+      selectionStart = selectionEnd = position;
+    } else {
+      selectionEnd = selectionStart + replacementText.length;
+    }
+    return { text: replacementText, selectionStart, selectionEnd };
+  } else if (!hasReplaceNext) {
+    let replacementText = prefixToUse + selectedText + suffixToUse;
+    selectionStart = originalSelectionStart + prefixToUse.length;
+    selectionEnd = originalSelectionEnd + prefixToUse.length;
+    const whitespaceEdges = selectedText.match(/^\s*|\s*$/g);
+    if (arg.trimFirst && whitespaceEdges) {
+      const leadingWhitespace = whitespaceEdges[0] || '';
+      const trailingWhitespace = whitespaceEdges[1] || '';
+      replacementText =
+        leadingWhitespace +
+        prefixToUse +
+        selectedText.trim() +
+        suffixToUse +
+        trailingWhitespace;
+      selectionStart += leadingWhitespace.length;
+      selectionEnd -= trailingWhitespace.length;
+    }
+    return { text: replacementText, selectionStart, selectionEnd };
+  } else if (scanFor.length > 0 && selectedText.match(scanFor)) {
+    suffixToUse = suffixToUse.replace(replaceNext, selectedText);
+    const replacementText = prefixToUse + suffixToUse;
+    selectionStart = selectionEnd = selectionStart + prefixToUse.length;
+    return { text: replacementText, selectionStart, selectionEnd };
+  } else {
+    const replacementText = prefixToUse + selectedText + suffixToUse;
+    selectionStart =
+      selectionStart +
+      prefixToUse.length +
+      selectedText.length +
+      suffixToUse.indexOf(replaceNext);
+    selectionEnd = selectionStart + replaceNext.length;
+    return { text: replacementText, selectionStart, selectionEnd };
+  }
+}
+
+function multilineStyle(textarea: HTMLTextAreaElement, arg: StyleArgs) {
+  const { prefix, suffix, surroundWithNewlines } = arg;
+  let text = textarea.value.slice(
+    textarea.selectionStart,
+    textarea.selectionEnd
+  );
+  let selectionStart = textarea.selectionStart;
+  let selectionEnd = textarea.selectionEnd;
+  const lines = text.split('\n');
+  const undoStyle = lines.every(
+    line => line.startsWith(prefix) && line.endsWith(suffix)
+  );
+
+  if (undoStyle) {
+    text = lines
+      .map(line => line.slice(prefix.length, line.length - suffix.length))
+      .join('\n');
+    selectionEnd = selectionStart + text.length;
+  } else {
+    text = lines.map(line => prefix + line + suffix).join('\n');
+    if (surroundWithNewlines) {
+      const {
+        newlinesToAppend,
+        newlinesToPrepend,
+      } = newlinesToSurroundSelectedText(textarea);
+      selectionStart += newlinesToAppend.length;
+      selectionEnd = selectionStart + text.length;
+      text = newlinesToAppend + text + newlinesToPrepend;
+    }
+  }
+
+  return { text, selectionStart, selectionEnd };
+}
+
+function orderedList(textarea: HTMLTextAreaElement): SelectionRange {
+  const orderedListRegex = /^\d+\.\s+/;
+  const noInitialSelection = textarea.selectionStart === textarea.selectionEnd;
+  let selectionEnd;
+  let selectionStart;
+  let text = textarea.value.slice(
+    textarea.selectionStart,
+    textarea.selectionEnd
+  );
+  let textToUnstyle = text;
+  let lines = text.split('\n');
+  let startOfLine;
+  let endOfLine;
+  if (noInitialSelection) {
+    const linesBefore = textarea.value
+      .slice(0, textarea.selectionStart)
+      .split(/\n/);
+    startOfLine =
+      textarea.selectionStart - linesBefore[linesBefore.length - 1].length;
+    endOfLine = wordSelectionEnd(textarea.value, textarea.selectionStart, true);
+    textToUnstyle = textarea.value.slice(startOfLine, endOfLine);
+  }
+  const linesToUnstyle = textToUnstyle.split('\n');
+  const undoStyling = linesToUnstyle.every(line => orderedListRegex.test(line));
+
+  if (undoStyling) {
+    lines = linesToUnstyle.map(line => line.replace(orderedListRegex, ''));
+    text = lines.join('\n');
+    if (noInitialSelection && startOfLine && endOfLine) {
+      const lengthDiff = linesToUnstyle[0].length - lines[0].length;
+      selectionStart = selectionEnd = textarea.selectionStart - lengthDiff;
+      textarea.selectionStart = startOfLine;
+      textarea.selectionEnd = endOfLine;
+    }
+  } else {
+    lines = (function() {
+      let i;
+      let len;
+      let index;
+      const results = [];
+      for (index = i = 0, len = lines.length; i < len; index = ++i) {
+        const line = lines[index];
+        results.push(`${index + 1}. ${line}`);
+      }
+      return results;
+    })();
+    text = lines.join('\n');
+    const {
+      newlinesToAppend,
+      newlinesToPrepend,
+    } = newlinesToSurroundSelectedText(textarea);
+    selectionStart = textarea.selectionStart + newlinesToAppend.length;
+    selectionEnd = selectionStart + text.length;
+    if (noInitialSelection) selectionStart = selectionEnd;
+    text = newlinesToAppend + text + newlinesToPrepend;
+  }
+
+  return { text, selectionStart, selectionEnd };
+}
+
+export default MarkdownActions;
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
new file mode 100644
index 00000000000..a6a889be520
--- /dev/null
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiMarkdownEditor } from './markdown_editor';
+
+describe('EuiMarkdownEditor', () => {
+  test('is rendered', () => {
+    const component = render(<EuiMarkdownEditor {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
new file mode 100644
index 00000000000..055bcc13185
--- /dev/null
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -0,0 +1,241 @@
+import React, { Component, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+import MarkdownActions from './markdown_actions';
+
+// @ts-ignore
+import showdown from 'showdown';
+// @ts-ignore
+import showdownHtmlEscape from 'showdown-htmlescape';
+
+import { EuiHideFor } from '../responsive';
+import { EuiText } from '../text';
+// @ts-ignore
+import { EuiTextArea } from '../form/text_area';
+import { EuiButtonGroup, EuiButtonEmpty } from '../button';
+import { EuiFlexItem, EuiFlexGroup } from '../flex';
+import { EuiI18n } from '../i18n';
+
+export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    /** A unique ID to attach to the textarea. If one isn't provided, a random one
+     * will be generated */
+    editorID?: string;
+  };
+
+export interface MarkdownEditorState {
+  editorContent: string;
+  viewMarkdownPreview: boolean;
+}
+
+export class EuiMarkdownEditor extends Component<
+  EuiMarkdownEditorProps,
+  MarkdownEditorState
+> {
+  converter: showdown.Converter;
+  editorID: string;
+  markdownActions: MarkdownActions;
+
+  constructor(props: EuiMarkdownEditorProps) {
+    super(props);
+
+    // Instantiate Showdown (for converting markdown -> html) with options
+    this.converter = new showdown.Converter({
+      openLinksInNewWindow: true,
+      ghMentions: false,
+      backslashEscapesHTMLTags: true,
+      extensions: [showdownHtmlEscape],
+    });
+    this.converter.setFlavor('github');
+
+    this.state = {
+      editorContent: '',
+      viewMarkdownPreview: false,
+    };
+
+    // If an ID wasn't provided, just generate a rando
+    this.editorID =
+      this.props.editorID ||
+      Math.random()
+        .toString(35)
+        .substring(2, 10);
+    this.markdownActions = new MarkdownActions(this.editorID);
+
+    this.handleMdButtonClick = this.handleMdButtonClick.bind(this);
+  }
+
+  getBoldItalicButtons = () => [
+    {
+      id: 'mdBold',
+      label: 'Bold',
+      name: 'bold',
+      iconType: 'editorBold',
+    },
+    {
+      id: 'mdItalic',
+      label: 'Italic',
+      name: 'italic',
+      iconType: 'editorItalic',
+    },
+  ];
+
+  getQuoteCodeLinkButtons = () => [
+    {
+      id: 'mdQuote',
+      label: 'Quote',
+      name: 'quote',
+      iconType: 'editorComment',
+    },
+    {
+      id: 'mdCode',
+      label: 'Code',
+      name: 'code',
+      iconType: 'editorCodeBlock',
+    },
+    {
+      id: 'mdLink',
+      label: 'Link',
+      name: 'link',
+      iconType: 'editorLink',
+    },
+  ];
+
+  getListButtons = () => [
+    {
+      id: 'mdUl',
+      label: 'Unordered list',
+      name: 'ul',
+      iconType: 'editorUnorderedList',
+    },
+    {
+      id: 'mdOl',
+      label: 'Ordered list',
+      name: 'ol',
+      iconType: 'editorOrderedList',
+    },
+  ];
+
+  handleMdButtonClick = (mdButtonId: string) => {
+    this.markdownActions.do(mdButtonId);
+  };
+
+  render() {
+    const { className, ...rest } = this.props;
+
+    const classes = classNames('euiMarkdownEditor', className);
+
+    return (
+      <div className={classes} {...rest}>
+        <EuiHideFor sizes={['xs', 's']}>
+          <div className="euiMarkdownEditor__actionBar">
+            <EuiFlexGroup
+              justifyContent="spaceBetween"
+              alignItems="center"
+              className="euiMarkdownEditor__actionBarItems">
+              <EuiFlexItem grow={false}>
+                <EuiI18n
+                  token="euiMarkdownEditor.boldStyles"
+                  default="Bold and italic styles">
+                  {(legend: string) => (
+                    <EuiButtonGroup
+                      isDisabled={
+                        this.state.viewMarkdownPreview ? true : undefined
+                      }
+                      legend={legend}
+                      options={this.getBoldItalicButtons()}
+                      idToSelectedMap={{}}
+                      onChange={this.handleMdButtonClick}
+                      type="multi"
+                      isIconOnly
+                    />
+                  )}
+                </EuiI18n>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiI18n
+                  token="euiMarkdownEditor.quoteStyles"
+                  default="Quote, code and link styles">
+                  {(legend: string) => (
+                    <EuiButtonGroup
+                      isDisabled={
+                        this.state.viewMarkdownPreview ? true : undefined
+                      }
+                      legend={legend}
+                      options={this.getQuoteCodeLinkButtons()}
+                      idToSelectedMap={{}}
+                      onChange={this.handleMdButtonClick}
+                      type="multi"
+                      isIconOnly
+                    />
+                  )}
+                </EuiI18n>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiI18n
+                  token="euiMarkdownEditor.listStyles"
+                  default="Unordered and ordered list styles">
+                  {(legend: string) => (
+                    <EuiButtonGroup
+                      isDisabled={
+                        this.state.viewMarkdownPreview ? true : undefined
+                      }
+                      legend={legend}
+                      options={this.getListButtons()}
+                      idToSelectedMap={{}}
+                      onChange={this.handleMdButtonClick}
+                      type="multi"
+                      isIconOnly
+                    />
+                  )}
+                </EuiI18n>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  className="euiMarkdownEditor__previewToggleButton"
+                  size="xs"
+                  onClick={() => {
+                    this.setState({
+                      viewMarkdownPreview: !this.state.viewMarkdownPreview,
+                    });
+                  }}>
+                  {this.state.viewMarkdownPreview ? (
+                    <EuiI18n token="euiMarkdownEditor.edit" default="Edit" />
+                  ) : (
+                    <EuiI18n
+                      token="euiMarkdownEditor.previewMarkdown"
+                      default="Preview markdown"
+                    />
+                  )}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
+        </EuiHideFor>
+        {this.state.viewMarkdownPreview ? (
+          <div className="euiMarkdownEditor__markdownWrapper">
+            <div className="euiMarkdownEditor__previewContainer">
+              <EuiText
+                className="euiMarkdownEditor__displayText"
+                dangerouslySetInnerHTML={{
+                  __html: this.converter.makeHtml(this.state.editorContent),
+                }}
+                size="s"
+              />
+            </div>
+          </div>
+        ) : (
+          <div>
+            <EuiTextArea
+              id={this.editorID}
+              fullWidth
+              onChange={(e: any) => {
+                this.setState({ editorContent: e.target.value });
+              }}
+              value={this.state.editorContent}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 11a61621c8d..e0488f396ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3293,6 +3293,15 @@ cliui@^4.0.0:
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
 clone-buffer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
@@ -4371,7 +4380,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -6438,6 +6447,11 @@ get-caller-file@^1.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
   integrity sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=
 
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
 get-func-name@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
@@ -12838,6 +12852,11 @@ require-main-filename@^1.0.1:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
   integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
 
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
 require-uncached@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
@@ -13513,6 +13532,20 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+showdown-htmlescape@^0.1.9:
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/showdown-htmlescape/-/showdown-htmlescape-0.1.9.tgz#4299676a209016c9fbdabe60c38408eef3eb1800"
+  integrity sha512-kkg0Lh6CRzJKMvIkNBYNkZaJiZSii98mfiZj3FpQK0lXn1iV0UT5VD63YoTAqOCP7QiIo3nTH/z5ndVKCfMenQ==
+  dependencies:
+    showdown "^1.2.3"
+
+showdown@^1.2.3, showdown@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.9.1.tgz#134e148e75cd4623e09c21b0511977d79b5ad0ef"
+  integrity sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==
+  dependencies:
+    yargs "^14.2"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -13926,7 +13959,7 @@ string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^3.0.0:
+string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
   integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
@@ -13991,7 +14024,7 @@ strip-ansi@^5.0.0:
   dependencies:
     ansi-regex "^4.0.0"
 
-strip-ansi@^5.1.0:
+strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
   integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
@@ -15497,6 +15530,15 @@ wrap-ansi@^2.0.0:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -15646,6 +15688,14 @@ yargs-parser@^10.1.0:
   dependencies:
     camelcase "^4.1.0"
 
+yargs-parser@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
+  integrity sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
@@ -15678,6 +15728,23 @@ yargs@12.0.2, yargs@^12.0.2:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^10.1.0"
 
+yargs@^14.2:
+  version "14.2.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.2.tgz#2769564379009ff8597cdd38fba09da9b493c4b5"
+  integrity sha512-/4ld+4VV5RnrynMhPZJ/ZpOCGSCeghMykZ3BhdFBDa9Wy/RH6uEGNWDJog+aUlq+9OM1CFTgtYRW5Is1Po9NOA==
+  dependencies:
+    cliui "^5.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^15.0.0"
+
 yargs@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"

From edd78169fd3b65a5c8f1b98b83b8818edacd285a Mon Sep 17 00:00:00 2001
From: i-a-n <ian@union.io>
Date: Thu, 5 Dec 2019 15:11:49 -0800
Subject: [PATCH 02/43] WIP: commit auto-added i18n tokens

---
 src-docs/src/i18ntokens.json | 80 ++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/src-docs/src/i18ntokens.json b/src-docs/src/i18ntokens.json
index bc98b245435..e8d23b99229 100644
--- a/src-docs/src/i18ntokens.json
+++ b/src-docs/src/i18ntokens.json
@@ -1423,6 +1423,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",

From f1a2cab927d74dd10387dfd74cf3229aac10f320 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 5 Feb 2020 19:58:26 +0000
Subject: [PATCH 03/43] Adding button toggle for previewing

---
 .../markdown_editor.test.tsx.snap             | 360 ++++++++++++++++++
 .../markdown_editor/markdown_editor.test.tsx  |   4 +-
 .../markdown_editor/markdown_editor.tsx       |  56 +--
 3 files changed, 394 insertions(+), 26 deletions(-)
 create mode 100644 src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
new file mode 100644
index 00000000000..99c35e4317e
--- /dev/null
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -0,0 +1,360 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiMarkdownEditor is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiMarkdownEditor testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiMarkdownEditor__actionBar eui-hideFor--xs eui-hideFor--s"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiMarkdownEditor__actionBarItems"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <fieldset
+          class="euiButtonGroup__fieldset"
+        >
+          <legend
+            class="euiScreenReaderOnly"
+          >
+            Bold and italic styles
+          </legend>
+          <div
+            class="euiButtonGroup euiButtonGroup--s"
+          >
+            <div
+              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Bold"
+                class="euiToggle__input euiButtonToggle__input"
+                name="bold"
+                title="Bold"
+                type="checkbox"
+              />
+              <button
+                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="mdBold"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiButton__text"
+                  />
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Italic"
+                class="euiToggle__input euiButtonToggle__input"
+                name="italic"
+                title="Italic"
+                type="checkbox"
+              />
+              <button
+                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="mdItalic"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiButton__text"
+                  />
+                </span>
+              </button>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <fieldset
+          class="euiButtonGroup__fieldset"
+        >
+          <legend
+            class="euiScreenReaderOnly"
+          >
+            Quote, code and link styles
+          </legend>
+          <div
+            class="euiButtonGroup euiButtonGroup--s"
+          >
+            <div
+              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Quote"
+                class="euiToggle__input euiButtonToggle__input"
+                name="quote"
+                title="Quote"
+                type="checkbox"
+              />
+              <button
+                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="mdQuote"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiButton__text"
+                  />
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Code"
+                class="euiToggle__input euiButtonToggle__input"
+                name="code"
+                title="Code"
+                type="checkbox"
+              />
+              <button
+                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="mdCode"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiButton__text"
+                  />
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Link"
+                class="euiToggle__input euiButtonToggle__input"
+                name="link"
+                title="Link"
+                type="checkbox"
+              />
+              <button
+                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="mdLink"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiButton__text"
+                  />
+                </span>
+              </button>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+      <div
+        class="euiFlexItem"
+      >
+        <fieldset
+          class="euiButtonGroup__fieldset"
+        >
+          <legend
+            class="euiScreenReaderOnly"
+          >
+            Unordered and ordered list styles
+          </legend>
+          <div
+            class="euiButtonGroup euiButtonGroup--s"
+          >
+            <div
+              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Unordered list"
+                class="euiToggle__input euiButtonToggle__input"
+                name="ul"
+                title="Unordered list"
+                type="checkbox"
+              />
+              <button
+                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="mdUl"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiButton__text"
+                  />
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Ordered list"
+                class="euiToggle__input euiButtonToggle__input"
+                name="ol"
+                title="Ordered list"
+                type="checkbox"
+              />
+              <button
+                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="mdOl"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiButton__text"
+                  />
+                </span>
+              </button>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          class="euiToggle euiButtonToggle__wrapper"
+        >
+          <input
+            aria-label=""
+            class="euiToggle__input euiButtonToggle__input"
+            title=""
+            type="checkbox"
+          />
+          <button
+            class="euiButton euiButton--primary euiButton--small euiButtonToggle euiButtonToggle--isEmpty"
+            tabindex="-1"
+            type="button"
+          >
+            <span
+              class="euiButton__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <span
+                class="euiButton__text"
+              >
+                Preview
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <textarea
+      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+      id="editorId"
+      rows="6"
+    />
+  </div>
+</div>
+`;
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index a6a889be520..9972bd379d3 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -6,7 +6,9 @@ import { EuiMarkdownEditor } from './markdown_editor';
 
 describe('EuiMarkdownEditor', () => {
   test('is rendered', () => {
-    const component = render(<EuiMarkdownEditor {...requiredProps} />);
+    const component = render(
+      <EuiMarkdownEditor editorId="editorId" {...requiredProps} />
+    );
 
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 055bcc13185..b0f32ea9759 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -12,7 +12,7 @@ import { EuiHideFor } from '../responsive';
 import { EuiText } from '../text';
 // @ts-ignore
 import { EuiTextArea } from '../form/text_area';
-import { EuiButtonGroup, EuiButtonEmpty } from '../button';
+import { EuiButtonGroup, EuiButtonToggle } from '../button';
 import { EuiFlexItem, EuiFlexGroup } from '../flex';
 import { EuiI18n } from '../i18n';
 
@@ -20,7 +20,7 @@ export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     /** A unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
-    editorID?: string;
+    editorId?: string;
   };
 
 export interface MarkdownEditorState {
@@ -33,7 +33,7 @@ export class EuiMarkdownEditor extends Component<
   MarkdownEditorState
 > {
   converter: showdown.Converter;
-  editorID: string;
+  editorId: string;
   markdownActions: MarkdownActions;
 
   constructor(props: EuiMarkdownEditorProps) {
@@ -54,12 +54,12 @@ export class EuiMarkdownEditor extends Component<
     };
 
     // If an ID wasn't provided, just generate a rando
-    this.editorID =
-      this.props.editorID ||
+    this.editorId =
+      this.props.editorId ||
       Math.random()
         .toString(35)
         .substring(2, 10);
-    this.markdownActions = new MarkdownActions(this.editorID);
+    this.markdownActions = new MarkdownActions(this.editorId);
 
     this.handleMdButtonClick = this.handleMdButtonClick.bind(this);
   }
@@ -119,8 +119,12 @@ export class EuiMarkdownEditor extends Component<
     this.markdownActions.do(mdButtonId);
   };
 
+  onTogglePreview = (e: any) => {
+    this.setState({ viewMarkdownPreview: e.target.checked });
+  };
+
   render() {
-    const { className, ...rest } = this.props;
+    const { className, editorId, ...rest } = this.props;
 
     const classes = classNames('euiMarkdownEditor', className);
 
@@ -190,23 +194,25 @@ export class EuiMarkdownEditor extends Component<
                 </EuiI18n>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                  className="euiMarkdownEditor__previewToggleButton"
-                  size="xs"
-                  onClick={() => {
-                    this.setState({
-                      viewMarkdownPreview: !this.state.viewMarkdownPreview,
-                    });
-                  }}>
-                  {this.state.viewMarkdownPreview ? (
-                    <EuiI18n token="euiMarkdownEditor.edit" default="Edit" />
-                  ) : (
-                    <EuiI18n
-                      token="euiMarkdownEditor.previewMarkdown"
-                      default="Preview markdown"
-                    />
-                  )}
-                </EuiButtonEmpty>
+                <EuiButtonToggle
+                  size="s"
+                  label={
+                    this.state.viewMarkdownPreview ? (
+                      <EuiI18n token="euiMarkdownEditor.edit" default="Edit" />
+                    ) : (
+                      <EuiI18n
+                        token="euiMarkdownEditor.previewMarkdown"
+                        default="Preview"
+                      />
+                    )
+                  }
+                  iconType={
+                    this.state.viewMarkdownPreview ? 'eye' : 'eyeClosed'
+                  }
+                  onChange={this.onTogglePreview}
+                  isSelected={this.state.viewMarkdownPreview}
+                  isEmpty
+                />
               </EuiFlexItem>
             </EuiFlexGroup>
           </div>
@@ -226,7 +232,7 @@ export class EuiMarkdownEditor extends Component<
         ) : (
           <div>
             <EuiTextArea
-              id={this.editorID}
+              id={this.editorId}
               fullWidth
               onChange={(e: any) => {
                 this.setState({ editorContent: e.target.value });

From 37e1f2349ecbcadd12476b5937272dce37cc4ef4 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 10 Feb 2020 14:17:47 +0000
Subject: [PATCH 04/43] Adding toolbar component

---
 .../markdown_editor.test.tsx.snap             | 416 +++++-------------
 .../markdown_editor/_markdown_editor.scss     |  26 +-
 .../markdown_editor/markdown_editor.tsx       | 156 +------
 .../markdown_editor_toolbar.tsx               | 142 ++++++
 4 files changed, 296 insertions(+), 444 deletions(-)
 create mode 100644 src/components/markdown_editor/markdown_editor_toolbar.tsx

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 99c35e4317e..ba2eed90324 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -7,306 +7,132 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiMarkdownEditor__actionBar eui-hideFor--xs eui-hideFor--s"
+    class="euiMarkdownEditor__toolbar"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiMarkdownEditor__actionBarItems"
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
+        class="euiFlexItem euiFlexItem--flexGrowZero euiMarkdownEditor__toolbar__buttons"
       >
-        <fieldset
-          class="euiButtonGroup__fieldset"
+        <button
+          aria-label="Next"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <legend
-            class="euiScreenReaderOnly"
-          >
-            Bold and italic styles
-          </legend>
-          <div
-            class="euiButtonGroup euiButtonGroup--s"
-          >
-            <div
-              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-            >
-              <input
-                aria-label="Bold"
-                class="euiToggle__input euiButtonToggle__input"
-                name="bold"
-                title="Bold"
-                type="checkbox"
-              />
-              <button
-                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-                id="mdBold"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="euiButton__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                  <span
-                    class="euiButton__text"
-                  />
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-            >
-              <input
-                aria-label="Italic"
-                class="euiToggle__input euiButtonToggle__input"
-                name="italic"
-                title="Italic"
-                type="checkbox"
-              />
-              <button
-                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-                id="mdItalic"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="euiButton__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                  <span
-                    class="euiButton__text"
-                  />
-                </span>
-              </button>
-            </div>
-          </div>
-        </fieldset>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <fieldset
-          class="euiButtonGroup__fieldset"
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+        <button
+          aria-label="Next"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <legend
-            class="euiScreenReaderOnly"
-          >
-            Quote, code and link styles
-          </legend>
-          <div
-            class="euiButtonGroup euiButtonGroup--s"
-          >
-            <div
-              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-            >
-              <input
-                aria-label="Quote"
-                class="euiToggle__input euiButtonToggle__input"
-                name="quote"
-                title="Quote"
-                type="checkbox"
-              />
-              <button
-                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-                id="mdQuote"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="euiButton__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                  <span
-                    class="euiButton__text"
-                  />
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-            >
-              <input
-                aria-label="Code"
-                class="euiToggle__input euiButtonToggle__input"
-                name="code"
-                title="Code"
-                type="checkbox"
-              />
-              <button
-                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-                id="mdCode"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="euiButton__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                  <span
-                    class="euiButton__text"
-                  />
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-            >
-              <input
-                aria-label="Link"
-                class="euiToggle__input euiButtonToggle__input"
-                name="link"
-                title="Link"
-                type="checkbox"
-              />
-              <button
-                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-                id="mdLink"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="euiButton__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                  <span
-                    class="euiButton__text"
-                  />
-                </span>
-              </button>
-            </div>
-          </div>
-        </fieldset>
-      </div>
-      <div
-        class="euiFlexItem"
-      >
-        <fieldset
-          class="euiButtonGroup__fieldset"
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+        <span
+          class="euiMarkdownEditor__toolbar__divider"
+        />
+        <button
+          aria-label="Next"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <legend
-            class="euiScreenReaderOnly"
-          >
-            Unordered and ordered list styles
-          </legend>
-          <div
-            class="euiButtonGroup euiButtonGroup--s"
-          >
-            <div
-              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-            >
-              <input
-                aria-label="Unordered list"
-                class="euiToggle__input euiButtonToggle__input"
-                name="ul"
-                title="Unordered list"
-                type="checkbox"
-              />
-              <button
-                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-                id="mdUl"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="euiButton__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                  <span
-                    class="euiButton__text"
-                  />
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-            >
-              <input
-                aria-label="Ordered list"
-                class="euiToggle__input euiButtonToggle__input"
-                name="ol"
-                title="Ordered list"
-                type="checkbox"
-              />
-              <button
-                class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-                id="mdOl"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="euiButton__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                  <span
-                    class="euiButton__text"
-                  />
-                </span>
-              </button>
-            </div>
-          </div>
-        </fieldset>
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+        <button
+          aria-label="Next"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+        <button
+          aria-label="Next"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+        <span
+          class="euiMarkdownEditor__toolbar__divider"
+        />
+        <button
+          aria-label="Next"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+        <button
+          aria-label="Next"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
       </div>
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -321,7 +147,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
             type="checkbox"
           />
           <button
-            class="euiButton euiButton--primary euiButton--small euiButtonToggle euiButtonToggle--isEmpty"
+            class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isEmpty"
             tabindex="-1"
             type="button"
           >
@@ -349,7 +175,9 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       </div>
     </div>
   </div>
-  <div>
+  <div
+    class="euiMarkdownEditor__markdownWrapper"
+  >
     <textarea
       class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
       id="editorId"
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index fc61607fd4e..8a472c7b56e 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -1,22 +1,36 @@
-.euiMarkdownEditor__actionBar {
+.euiMarkdownEditor__toolbar {
   background: $euiColorEmptyShade;
   border: $euiBorderThin;
   border-color: $euiColorLightShade;
   border-bottom: none;
-  padding: 0 ($euiSizeS + $euiSizeXS);
-}
+  padding: $euiSizeXS;
+
+  &__buttons {
+    flex-direction: row;
 
-.euiMarkdownEditor__actionBarItems {
-  padding: $euiSizeS 0;
+    > * {
+      margin-right: $euiSizeXS;
+    }
+  }
+
+  &__divider {
+    content: '';
+    height: $euiSizeL;
+    display: block;
+    margin-left: $euiSizeXS;
+    padding-right: $euiSizeXS;
+    border-left: 1px solid $euiColorLightShade;
+  }
 }
 
+
 .euiMarkdownEditor__previewToggleButton {
   width: 150px;
 }
 
 .euiMarkdownEditor__previewContainer {
   border: $euiBorderThin;
-  max-height: 150px;
+  min-height: 150px;
   overflow-y: auto;
   @include euiScrollBar;
   padding: $euiSizeM;
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index b0f32ea9759..24bf425e769 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -7,14 +7,12 @@ import MarkdownActions from './markdown_actions';
 import showdown from 'showdown';
 // @ts-ignore
 import showdownHtmlEscape from 'showdown-htmlescape';
-
-import { EuiHideFor } from '../responsive';
 import { EuiText } from '../text';
 // @ts-ignore
 import { EuiTextArea } from '../form/text_area';
-import { EuiButtonGroup, EuiButtonToggle } from '../button';
-import { EuiFlexItem, EuiFlexGroup } from '../flex';
-import { EuiI18n } from '../i18n';
+// import { EuiI18n } from '../i18n';
+
+import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 
 export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
@@ -64,57 +62,6 @@ export class EuiMarkdownEditor extends Component<
     this.handleMdButtonClick = this.handleMdButtonClick.bind(this);
   }
 
-  getBoldItalicButtons = () => [
-    {
-      id: 'mdBold',
-      label: 'Bold',
-      name: 'bold',
-      iconType: 'editorBold',
-    },
-    {
-      id: 'mdItalic',
-      label: 'Italic',
-      name: 'italic',
-      iconType: 'editorItalic',
-    },
-  ];
-
-  getQuoteCodeLinkButtons = () => [
-    {
-      id: 'mdQuote',
-      label: 'Quote',
-      name: 'quote',
-      iconType: 'editorComment',
-    },
-    {
-      id: 'mdCode',
-      label: 'Code',
-      name: 'code',
-      iconType: 'editorCodeBlock',
-    },
-    {
-      id: 'mdLink',
-      label: 'Link',
-      name: 'link',
-      iconType: 'editorLink',
-    },
-  ];
-
-  getListButtons = () => [
-    {
-      id: 'mdUl',
-      label: 'Unordered list',
-      name: 'ul',
-      iconType: 'editorUnorderedList',
-    },
-    {
-      id: 'mdOl',
-      label: 'Ordered list',
-      name: 'ol',
-      iconType: 'editorOrderedList',
-    },
-  ];
-
   handleMdButtonClick = (mdButtonId: string) => {
     this.markdownActions.do(mdButtonId);
   };
@@ -126,97 +73,18 @@ export class EuiMarkdownEditor extends Component<
   render() {
     const { className, editorId, ...rest } = this.props;
 
+    const { viewMarkdownPreview } = this.state;
+
     const classes = classNames('euiMarkdownEditor', className);
 
     return (
       <div className={classes} {...rest}>
-        <EuiHideFor sizes={['xs', 's']}>
-          <div className="euiMarkdownEditor__actionBar">
-            <EuiFlexGroup
-              justifyContent="spaceBetween"
-              alignItems="center"
-              className="euiMarkdownEditor__actionBarItems">
-              <EuiFlexItem grow={false}>
-                <EuiI18n
-                  token="euiMarkdownEditor.boldStyles"
-                  default="Bold and italic styles">
-                  {(legend: string) => (
-                    <EuiButtonGroup
-                      isDisabled={
-                        this.state.viewMarkdownPreview ? true : undefined
-                      }
-                      legend={legend}
-                      options={this.getBoldItalicButtons()}
-                      idToSelectedMap={{}}
-                      onChange={this.handleMdButtonClick}
-                      type="multi"
-                      isIconOnly
-                    />
-                  )}
-                </EuiI18n>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiI18n
-                  token="euiMarkdownEditor.quoteStyles"
-                  default="Quote, code and link styles">
-                  {(legend: string) => (
-                    <EuiButtonGroup
-                      isDisabled={
-                        this.state.viewMarkdownPreview ? true : undefined
-                      }
-                      legend={legend}
-                      options={this.getQuoteCodeLinkButtons()}
-                      idToSelectedMap={{}}
-                      onChange={this.handleMdButtonClick}
-                      type="multi"
-                      isIconOnly
-                    />
-                  )}
-                </EuiI18n>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiI18n
-                  token="euiMarkdownEditor.listStyles"
-                  default="Unordered and ordered list styles">
-                  {(legend: string) => (
-                    <EuiButtonGroup
-                      isDisabled={
-                        this.state.viewMarkdownPreview ? true : undefined
-                      }
-                      legend={legend}
-                      options={this.getListButtons()}
-                      idToSelectedMap={{}}
-                      onChange={this.handleMdButtonClick}
-                      type="multi"
-                      isIconOnly
-                    />
-                  )}
-                </EuiI18n>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButtonToggle
-                  size="s"
-                  label={
-                    this.state.viewMarkdownPreview ? (
-                      <EuiI18n token="euiMarkdownEditor.edit" default="Edit" />
-                    ) : (
-                      <EuiI18n
-                        token="euiMarkdownEditor.previewMarkdown"
-                        default="Preview"
-                      />
-                    )
-                  }
-                  iconType={
-                    this.state.viewMarkdownPreview ? 'eye' : 'eyeClosed'
-                  }
-                  onChange={this.onTogglePreview}
-                  isSelected={this.state.viewMarkdownPreview}
-                  isEmpty
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </div>
-        </EuiHideFor>
+        <EuiMarkdownEditorToolbar
+          markdownActions={this.markdownActions}
+          onTogglePreview={this.onTogglePreview}
+          viewMarkdownPreview={viewMarkdownPreview}
+        />
+
         {this.state.viewMarkdownPreview ? (
           <div className="euiMarkdownEditor__markdownWrapper">
             <div className="euiMarkdownEditor__previewContainer">
@@ -230,7 +98,7 @@ export class EuiMarkdownEditor extends Component<
             </div>
           </div>
         ) : (
-          <div>
+          <div className="euiMarkdownEditor__markdownWrapper">
             <EuiTextArea
               id={this.editorId}
               fullWidth
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
new file mode 100644
index 00000000000..6a4e9fd0756
--- /dev/null
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -0,0 +1,142 @@
+import React, { Component, HTMLAttributes } from 'react';
+import { CommonProps } from '../common';
+import { EuiButtonToggle, EuiButtonIcon } from '../button';
+import { EuiFlexItem, EuiFlexGroup } from '../flex';
+import { EuiI18n } from '../i18n';
+
+export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    markdownActions?: any;
+    viewMarkdownPreview?: any;
+    onTogglePreview?: any;
+  };
+
+export class EuiMarkdownEditorToolbar extends Component<
+  EuiMarkdownEditorToolbarProps
+> {
+  boldItalicButtons = [
+    {
+      id: 'mdBold',
+      label: 'Bold',
+      name: 'bold',
+      iconType: 'editorBold',
+    },
+    {
+      id: 'mdItalic',
+      label: 'Italic',
+      name: 'italic',
+      iconType: 'editorItalic',
+    },
+  ];
+
+  quoteCodeLinkButtons = [
+    {
+      id: 'mdQuote',
+      label: 'Quote',
+      name: 'quote',
+      iconType: 'editorComment',
+    },
+    {
+      id: 'mdCode',
+      label: 'Code',
+      name: 'code',
+      iconType: 'editorCodeBlock',
+    },
+    {
+      id: 'mdLink',
+      label: 'Link',
+      name: 'link',
+      iconType: 'editorLink',
+    },
+  ];
+
+  listButtons = [
+    {
+      id: 'mdUl',
+      label: 'Unordered list',
+      name: 'ul',
+      iconType: 'editorUnorderedList',
+    },
+    {
+      id: 'mdOl',
+      label: 'Ordered list',
+      name: 'ol',
+      iconType: 'editorOrderedList',
+    },
+  ];
+
+  handleMdButtonClick = (mdButtonId: string) => {
+    this.props.markdownActions.do(mdButtonId);
+  };
+
+  render() {
+    const { viewMarkdownPreview, onTogglePreview } = this.props;
+
+    return (
+      <div className="euiMarkdownEditor__toolbar">
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem
+            grow={false}
+            className="euiMarkdownEditor__toolbar__buttons">
+            {this.boldItalicButtons.map(item => (
+              <EuiButtonIcon
+                key={item.id}
+                color="text"
+                onClick={() => this.handleMdButtonClick(item.id)}
+                iconType={item.iconType}
+                aria-label="Next"
+                isDisabled={viewMarkdownPreview}
+              />
+            ))}
+            <span className="euiMarkdownEditor__toolbar__divider" />
+            {this.quoteCodeLinkButtons.map(item => (
+              <EuiButtonIcon
+                key={item.id}
+                color="text"
+                onClick={() => this.handleMdButtonClick(item.id)}
+                iconType={item.iconType}
+                aria-label="Next"
+                isDisabled={viewMarkdownPreview}
+              />
+            ))}
+            <span className="euiMarkdownEditor__toolbar__divider" />
+            {this.listButtons.map(item => (
+              <EuiButtonIcon
+                key={item.id}
+                color="text"
+                onClick={() => this.handleMdButtonClick(item.id)}
+                iconType={item.iconType}
+                aria-label="Next"
+                isDisabled={viewMarkdownPreview}
+              />
+            ))}
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButtonToggle
+              color="text"
+              size="s"
+              label={
+                viewMarkdownPreview ? (
+                  <EuiI18n
+                    token="euiMarkdownEditorToolbar.edit"
+                    default="Edit"
+                  />
+                ) : (
+                  <EuiI18n
+                    token="euiMarkdownEditorToolbar.previewMarkdown"
+                    default="Preview"
+                  />
+                )
+              }
+              iconType={viewMarkdownPreview ? 'eye' : 'eyeClosed'}
+              onChange={onTogglePreview}
+              isSelected={viewMarkdownPreview}
+              isEmpty
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
+    );
+  }
+}

From e489f116ab8110cfd3f892f0246df17d92e9121e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 10 Feb 2020 16:54:36 +0000
Subject: [PATCH 05/43] Adding file picker initial structure

---
 .../markdown_editor.test.tsx.snap             | 12 ++++-
 src/components/markdown_editor/_index.scss    |  2 +
 .../markdown_editor/_markdown_editor.scss     | 45 +++++--------------
 .../_markdown_editor_file_picker.scss         | 23 ++++++++++
 .../_markdown_editor_toolbar.scss             | 24 ++++++++++
 src/components/markdown_editor/index.ts       |  2 +
 .../markdown_editor/markdown_actions.ts       |  6 ++-
 .../markdown_editor/markdown_editor.tsx       |  5 ++-
 .../markdown_editor_file_picker.tsx           | 32 +++++++++++++
 9 files changed, 114 insertions(+), 37 deletions(-)
 create mode 100644 src/components/markdown_editor/_markdown_editor_file_picker.scss
 create mode 100644 src/components/markdown_editor/_markdown_editor_toolbar.scss
 create mode 100644 src/components/markdown_editor/markdown_editor_file_picker.tsx

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index ba2eed90324..472aab45e1e 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -179,10 +179,18 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
     class="euiMarkdownEditor__markdownWrapper"
   >
     <textarea
-      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth euiTextArea--compressed euiMarkdownEditor__textArea"
       id="editorId"
-      rows="6"
+      rows="3"
     />
+    <div
+      class="euiMarkdownEditor__filePicker"
+    >
+      <input
+        class="euiMarkdownEditor__filePicker__input"
+        type="file"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index 4d913d41a98..3d262323a96 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -1 +1,3 @@
 @import 'markdown_editor';
+@import 'markdown_editor_toolbar';
+@import 'markdown_editor_file_picker';
\ No newline at end of file
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index 8a472c7b56e..5085bd3bc46 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -1,43 +1,21 @@
-.euiMarkdownEditor__toolbar {
+.euiMarkdownEditor__previewContainer {
+  @include euiScrollBar;
+  @include euiFormControlDefaultShadow;
   background: $euiColorEmptyShade;
-  border: $euiBorderThin;
-  border-color: $euiColorLightShade;
-  border-bottom: none;
-  padding: $euiSizeXS;
-
-  &__buttons {
-    flex-direction: row;
-
-    > * {
-      margin-right: $euiSizeXS;
-    }
-  }
-
-  &__divider {
-    content: '';
-    height: $euiSizeL;
-    display: block;
-    margin-left: $euiSizeXS;
-    padding-right: $euiSizeXS;
-    border-left: 1px solid $euiColorLightShade;
-  }
+  height: 150px;
+  overflow-y: auto;
+  padding: $euiSizeM;
 }
 
-
-.euiMarkdownEditor__previewToggleButton {
-  width: 150px;
+.euiMarkdownEditor__textArea {
+  background: $euiColorEmptyShade;
 }
 
-.euiMarkdownEditor__previewContainer {
-  border: $euiBorderThin;
-  min-height: 150px;
-  overflow-y: auto;
-  @include euiScrollBar;
-  padding: $euiSizeM;
+.euiMarkdownEditor__markdownWrapper {
+  line-height: 0;
 }
 
 // Overrides for styles in the "preview" pane
-
 .euiMarkdownEditor__markdownWrapper .euiMarkdownEditor__displayText {
   blockquote {
     @include euiFont;
@@ -47,7 +25,8 @@
     padding: 0 $euiSize;
     text-align: left;
 
-    &::before, &::after {
+    &::before,
+    &::after {
       display: none;
     }
   }
diff --git a/src/components/markdown_editor/_markdown_editor_file_picker.scss b/src/components/markdown_editor/_markdown_editor_file_picker.scss
new file mode 100644
index 00000000000..2935a69cde6
--- /dev/null
+++ b/src/components/markdown_editor/_markdown_editor_file_picker.scss
@@ -0,0 +1,23 @@
+.euiMarkdownEditor__filePicker {
+  height: $euiSizeXL;
+  background: $euiPageBackgroundColor;
+  border: $euiBorderThin;
+
+  &__input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    overflow: hidden;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:hover:disabled {
+      cursor: not-allowed;
+    }
+  }
+}
diff --git a/src/components/markdown_editor/_markdown_editor_toolbar.scss b/src/components/markdown_editor/_markdown_editor_toolbar.scss
new file mode 100644
index 00000000000..4984bd2f3c8
--- /dev/null
+++ b/src/components/markdown_editor/_markdown_editor_toolbar.scss
@@ -0,0 +1,24 @@
+.euiMarkdownEditor__toolbar {
+  background: $euiPageBackgroundColor;
+  border: $euiBorderThin;
+  border-color: $euiColorLightShade;
+  border-bottom: none;
+  padding: $euiSizeXS;
+
+  &__buttons {
+    flex-direction: row;
+
+    > * {
+      margin-right: $euiSizeXS;
+    }
+  }
+
+  &__divider {
+    content: '';
+    height: $euiSizeL;
+    display: block;
+    margin-left: $euiSizeXS;
+    padding-right: $euiSizeXS;
+    border-left: 1px solid $euiColorLightShade;
+  }
+}
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
index 5571dd3f6d3..f9931945d90 100644
--- a/src/components/markdown_editor/index.ts
+++ b/src/components/markdown_editor/index.ts
@@ -1 +1,3 @@
 export { EuiMarkdownEditor } from './markdown_editor';
+export { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
+export { EuiMarkdownEditorFilePicker } from './markdown_editor_file_picker';
diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
index 457efd6d28e..6549b83af6f 100644
--- a/src/components/markdown_editor/markdown_actions.ts
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -200,7 +200,11 @@ function insertText(
 
     const nativeInputValueSetter =
       // @ts-ignore
-      Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype,'value').set;
+      Object.getOwnPropertyDescriptor(
+        // @ts-ignore
+        window.HTMLTextAreaElement.prototype,
+        'value'
+      ).set;
     try {
       // @ts-ignore
       nativeInputValueSetter.call(textarea, before + text + after);
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 24bf425e769..6c7d44bdce0 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -12,7 +12,7 @@ import { EuiText } from '../text';
 import { EuiTextArea } from '../form/text_area';
 // import { EuiI18n } from '../i18n';
 
-import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
+import { EuiMarkdownEditorToolbar, EuiMarkdownEditorFilePicker } from './';
 
 export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
@@ -101,12 +101,15 @@ export class EuiMarkdownEditor extends Component<
           <div className="euiMarkdownEditor__markdownWrapper">
             <EuiTextArea
               id={this.editorId}
+              className="euiMarkdownEditor__textArea"
               fullWidth
+              compressed
               onChange={(e: any) => {
                 this.setState({ editorContent: e.target.value });
               }}
               value={this.state.editorContent}
             />
+            <EuiMarkdownEditorFilePicker />
           </div>
         )}
       </div>
diff --git a/src/components/markdown_editor/markdown_editor_file_picker.tsx b/src/components/markdown_editor/markdown_editor_file_picker.tsx
new file mode 100644
index 00000000000..6bd63f6c798
--- /dev/null
+++ b/src/components/markdown_editor/markdown_editor_file_picker.tsx
@@ -0,0 +1,32 @@
+import React, { Component, HTMLAttributes } from 'react';
+import { CommonProps } from '../common';
+
+export type EuiMarkdownEditorFilePickerProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    markdownActions?: any;
+    viewMarkdownPreview?: any;
+    onTogglePreview?: any;
+  };
+
+export class EuiMarkdownEditorFilePicker extends Component<
+  EuiMarkdownEditorFilePickerProps
+> {
+  state = {
+    files: {},
+    large: true,
+  };
+
+  onChange = (files: any) => {
+    this.setState({
+      files: files,
+    });
+  };
+
+  render() {
+    return (
+      <div className="euiMarkdownEditor__filePicker">
+        <input type="file" className="euiMarkdownEditor__filePicker__input" />
+      </div>
+    );
+  }
+}

From cf99ece4241369d9a55c9aa38fc511c160a858ac Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 10 Feb 2020 18:15:11 +0000
Subject: [PATCH 06/43] Adding text area component

---
 .../markdown_editor.test.tsx.snap             | 23 ++++++-
 src/components/markdown_editor/_index.scss    |  3 +-
 .../markdown_editor/_markdown_editor.scss     | 16 +++--
 .../_markdown_editor_file_picker.scss         | 21 ++++++
 .../_markdown_editor_text_area.scss           |  7 ++
 src/components/markdown_editor/index.ts       |  2 -
 .../markdown_editor/markdown_editor.tsx       | 14 ++--
 .../markdown_editor_file_picker.tsx           | 12 ++++
 .../markdown_editor_text_area.tsx             | 65 +++++++++++++++++++
 .../markdown_editor_toolbar.tsx               |  2 +-
 10 files changed, 143 insertions(+), 22 deletions(-)
 create mode 100644 src/components/markdown_editor/_markdown_editor_text_area.scss
 create mode 100644 src/components/markdown_editor/markdown_editor_text_area.tsx

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 472aab45e1e..bc06c54b741 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -179,9 +179,9 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
     class="euiMarkdownEditor__markdownWrapper"
   >
     <textarea
-      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth euiTextArea--compressed euiMarkdownEditor__textArea"
+      class="euiMarkdownEditor__textArea"
       id="editorId"
-      rows="3"
+      rows="6"
     />
     <div
       class="euiMarkdownEditor__filePicker"
@@ -190,6 +190,25 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         class="euiMarkdownEditor__filePicker__input"
         type="file"
       />
+      <div
+        class="euiMarkdownEditor__filePicker__placeholder"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--small euiIcon-isLoading euiMarkdownEditor__filePicker__icon"
+          focusable="false"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <div
+          class="euiMarkdownEditor__filePicker__text"
+        >
+          Attach files by dragging & dropping or by clicking this area
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index 3d262323a96..e02d702e0e7 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -1,3 +1,4 @@
 @import 'markdown_editor';
 @import 'markdown_editor_toolbar';
-@import 'markdown_editor_file_picker';
\ No newline at end of file
+@import 'markdown_editor_file_picker';
+@import 'markdown_editor_text_area';
\ No newline at end of file
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index 5085bd3bc46..f5bbdbe0eb6 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -1,20 +1,24 @@
+.euiMarkdownEditor__markdownWrapper {
+  line-height: 0;
+
+  .euiMarkdownEditor__textArea,
+  .euiMarkdownEditor__previewContainer {
+    padding: $euiSizeM;
+  }
+}
+
 .euiMarkdownEditor__previewContainer {
   @include euiScrollBar;
-  @include euiFormControlDefaultShadow;
   background: $euiColorEmptyShade;
   height: 150px;
   overflow-y: auto;
-  padding: $euiSizeM;
+  border: $euiBorderThin;
 }
 
 .euiMarkdownEditor__textArea {
   background: $euiColorEmptyShade;
 }
 
-.euiMarkdownEditor__markdownWrapper {
-  line-height: 0;
-}
-
 // Overrides for styles in the "preview" pane
 .euiMarkdownEditor__markdownWrapper .euiMarkdownEditor__displayText {
   blockquote {
diff --git a/src/components/markdown_editor/_markdown_editor_file_picker.scss b/src/components/markdown_editor/_markdown_editor_file_picker.scss
index 2935a69cde6..c15e08f3816 100644
--- a/src/components/markdown_editor/_markdown_editor_file_picker.scss
+++ b/src/components/markdown_editor/_markdown_editor_file_picker.scss
@@ -1,7 +1,11 @@
 .euiMarkdownEditor__filePicker {
+  display: flex;
   height: $euiSizeXL;
   background: $euiPageBackgroundColor;
   border: $euiBorderThin;
+  border-top: 1px dashed $euiColorLightShade;
+  align-items: center;
+
 
   &__input {
     position: absolute;
@@ -20,4 +24,21 @@
       cursor: not-allowed;
     }
   }
+
+  &__placeholder {
+    display: inline-flex;
+    padding: 0 $euiSizeS;
+  }
+
+  &__icon {
+    align-self: center;
+    margin-right: $euiSizeS;
+  }
+
+  &__text {
+    @include euiFontSizeS;
+    @include euiTextTruncate;
+    line-height: $euiSize;
+    display: block;
+  }
 }
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
new file mode 100644
index 00000000000..0f9f27cc7e5
--- /dev/null
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -0,0 +1,7 @@
+.euiMarkdownEditor__textArea {
+  @include euiFormControlText;
+  width: 100%;
+  border: $euiBorderThin;
+  border-color: $euiColorLightShade;
+  border-bottom: none;
+}
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
index f9931945d90..5571dd3f6d3 100644
--- a/src/components/markdown_editor/index.ts
+++ b/src/components/markdown_editor/index.ts
@@ -1,3 +1 @@
 export { EuiMarkdownEditor } from './markdown_editor';
-export { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
-export { EuiMarkdownEditorFilePicker } from './markdown_editor_file_picker';
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 6c7d44bdce0..27a32b00632 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -8,11 +8,9 @@ import showdown from 'showdown';
 // @ts-ignore
 import showdownHtmlEscape from 'showdown-htmlescape';
 import { EuiText } from '../text';
-// @ts-ignore
-import { EuiTextArea } from '../form/text_area';
-// import { EuiI18n } from '../i18n';
-
-import { EuiMarkdownEditorToolbar, EuiMarkdownEditorFilePicker } from './';
+import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
+import { EuiMarkdownEditorFilePicker } from './markdown_editor_file_picker';
+import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
 
 export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
@@ -84,7 +82,6 @@ export class EuiMarkdownEditor extends Component<
           onTogglePreview={this.onTogglePreview}
           viewMarkdownPreview={viewMarkdownPreview}
         />
-
         {this.state.viewMarkdownPreview ? (
           <div className="euiMarkdownEditor__markdownWrapper">
             <div className="euiMarkdownEditor__previewContainer">
@@ -99,11 +96,8 @@ export class EuiMarkdownEditor extends Component<
           </div>
         ) : (
           <div className="euiMarkdownEditor__markdownWrapper">
-            <EuiTextArea
+            <EuiMarkdownEditorTextArea
               id={this.editorId}
-              className="euiMarkdownEditor__textArea"
-              fullWidth
-              compressed
               onChange={(e: any) => {
                 this.setState({ editorContent: e.target.value });
               }}
diff --git a/src/components/markdown_editor/markdown_editor_file_picker.tsx b/src/components/markdown_editor/markdown_editor_file_picker.tsx
index 6bd63f6c798..4843b505d31 100644
--- a/src/components/markdown_editor/markdown_editor_file_picker.tsx
+++ b/src/components/markdown_editor/markdown_editor_file_picker.tsx
@@ -1,5 +1,6 @@
 import React, { Component, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
+import { EuiIcon } from '../icon';
 
 export type EuiMarkdownEditorFilePickerProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
@@ -26,6 +27,17 @@ export class EuiMarkdownEditorFilePicker extends Component<
     return (
       <div className="euiMarkdownEditor__filePicker">
         <input type="file" className="euiMarkdownEditor__filePicker__input" />
+        <div className="euiMarkdownEditor__filePicker__placeholder">
+          <EuiIcon
+            className="euiMarkdownEditor__filePicker__icon"
+            type="importAction"
+            size="s"
+            aria-hidden="true"
+          />
+          <div className="euiMarkdownEditor__filePicker__text">
+            Attach files by dragging & dropping or by clicking this area
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
new file mode 100644
index 00000000000..76e817cdf72
--- /dev/null
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -0,0 +1,65 @@
+import React, { TextareaHTMLAttributes, Ref, FunctionComponent } from 'react';
+import { CommonProps } from '../common';
+
+export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
+  HTMLTextAreaElement
+> &
+  CommonProps & {
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    compressed?: boolean;
+
+    /**
+     * Which direction, if at all, should the textarea resize
+     */
+    resize?: keyof typeof resizeToClassNameMap;
+
+    inputRef?: Ref<HTMLTextAreaElement>;
+  };
+
+const resizeToClassNameMap = {
+  vertical: 'euiTextArea--resizeVertical',
+  horizontal: 'euiTextArea--resizeHorizontal',
+  both: 'euiTextArea--resizeBoth',
+  none: 'euiTextArea--resizeNone',
+};
+
+export const RESIZE = Object.keys(resizeToClassNameMap);
+
+export const EuiMarkdownEditorTextArea: FunctionComponent<
+  EuiMarkdownEditorTextAreaProps
+> = ({
+  children,
+  className,
+  compressed,
+  id,
+  inputRef,
+  isInvalid,
+  name,
+  placeholder,
+  rows,
+  ...rest
+}) => {
+  let definedRows: number;
+
+  if (rows) {
+    definedRows = rows;
+  } else if (compressed) {
+    definedRows = 3;
+  } else {
+    definedRows = 6;
+  }
+
+  return (
+    <textarea
+      className="euiMarkdownEditor__textArea"
+      {...rest}
+      rows={definedRows}
+      name={name}
+      id={id}
+      ref={inputRef}
+      placeholder={placeholder}>
+      {children}
+    </textarea>
+  );
+};
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 6a4e9fd0756..e894808e029 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -129,7 +129,7 @@ export class EuiMarkdownEditorToolbar extends Component<
                   />
                 )
               }
-              iconType={viewMarkdownPreview ? 'eye' : 'eyeClosed'}
+              iconType={viewMarkdownPreview ? 'pencil' : 'eye'}
               onChange={onTogglePreview}
               isSelected={viewMarkdownPreview}
               isEmpty

From 7568dfb19c01b57aae6a28c8061fe902e52fa78b Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 11 Feb 2020 18:26:24 +0000
Subject: [PATCH 07/43] Buttons order

---
 .../markdown_editor.test.tsx.snap             | 20 ++++-----
 .../markdown_editor_toolbar.tsx               | 42 +++++++++----------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index bc06c54b741..57d244dddd6 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero euiMarkdownEditor__toolbar__buttons"
       >
         <button
-          aria-label="Next"
+          aria-label="Bold"
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
@@ -32,7 +32,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           />
         </button>
         <button
-          aria-label="Next"
+          aria-label="Italic"
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
@@ -51,7 +51,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiMarkdownEditor__toolbar__divider"
         />
         <button
-          aria-label="Next"
+          aria-label="Unordered list"
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
@@ -67,7 +67,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           />
         </button>
         <button
-          aria-label="Next"
+          aria-label="Ordered list"
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
@@ -82,8 +82,11 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           />
         </button>
+        <span
+          class="euiMarkdownEditor__toolbar__divider"
+        />
         <button
-          aria-label="Next"
+          aria-label="Quote"
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
@@ -98,11 +101,8 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           />
         </button>
-        <span
-          class="euiMarkdownEditor__toolbar__divider"
-        />
         <button
-          aria-label="Next"
+          aria-label="Code"
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
@@ -118,7 +118,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           />
         </button>
         <button
-          aria-label="Next"
+          aria-label="Link"
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index e894808e029..68c8d55baba 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -7,7 +7,7 @@ import { EuiI18n } from '../i18n';
 export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     markdownActions?: any;
-    viewMarkdownPreview?: any;
+    viewMarkdownPreview?: boolean;
     onTogglePreview?: any;
   };
 
@@ -29,6 +29,21 @@ export class EuiMarkdownEditorToolbar extends Component<
     },
   ];
 
+  listButtons = [
+    {
+      id: 'mdUl',
+      label: 'Unordered list',
+      name: 'ul',
+      iconType: 'editorUnorderedList',
+    },
+    {
+      id: 'mdOl',
+      label: 'Ordered list',
+      name: 'ol',
+      iconType: 'editorOrderedList',
+    },
+  ];
+
   quoteCodeLinkButtons = [
     {
       id: 'mdQuote',
@@ -50,21 +65,6 @@ export class EuiMarkdownEditorToolbar extends Component<
     },
   ];
 
-  listButtons = [
-    {
-      id: 'mdUl',
-      label: 'Unordered list',
-      name: 'ul',
-      iconType: 'editorUnorderedList',
-    },
-    {
-      id: 'mdOl',
-      label: 'Ordered list',
-      name: 'ol',
-      iconType: 'editorOrderedList',
-    },
-  ];
-
   handleMdButtonClick = (mdButtonId: string) => {
     this.props.markdownActions.do(mdButtonId);
   };
@@ -84,29 +84,29 @@ export class EuiMarkdownEditorToolbar extends Component<
                 color="text"
                 onClick={() => this.handleMdButtonClick(item.id)}
                 iconType={item.iconType}
-                aria-label="Next"
+                aria-label={item.label}
                 isDisabled={viewMarkdownPreview}
               />
             ))}
             <span className="euiMarkdownEditor__toolbar__divider" />
-            {this.quoteCodeLinkButtons.map(item => (
+            {this.listButtons.map(item => (
               <EuiButtonIcon
                 key={item.id}
                 color="text"
                 onClick={() => this.handleMdButtonClick(item.id)}
                 iconType={item.iconType}
-                aria-label="Next"
+                aria-label={item.label}
                 isDisabled={viewMarkdownPreview}
               />
             ))}
             <span className="euiMarkdownEditor__toolbar__divider" />
-            {this.listButtons.map(item => (
+            {this.quoteCodeLinkButtons.map(item => (
               <EuiButtonIcon
                 key={item.id}
                 color="text"
                 onClick={() => this.handleMdButtonClick(item.id)}
                 iconType={item.iconType}
-                aria-label="Next"
+                aria-label={item.label}
                 isDisabled={viewMarkdownPreview}
               />
             ))}

From 7b6c69e7dece01ddc47f83261b6a3530f660c8b3 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 12 Feb 2020 18:31:15 +0000
Subject: [PATCH 08/43] Moving markdown editor to docs form section

---
 src-docs/src/routes.js                        |  3 ++
 .../form_controls/form_controls_example.js    | 28 -------------
 .../views/form_controls/markdown_editor.js    | 10 -----
 .../markdown_editor/mardown_editor_example.js | 39 +++++++++++++++++++
 .../views/markdown_editor/markdown_editor.js  |  6 +++
 .../_markdown_editor_file_picker.scss         |  1 +
 6 files changed, 49 insertions(+), 38 deletions(-)
 delete mode 100644 src-docs/src/views/form_controls/markdown_editor.js
 create mode 100644 src-docs/src/views/markdown_editor/mardown_editor_example.js
 create mode 100644 src-docs/src/views/markdown_editor/markdown_editor.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 80ff1d72b9d..0911513b1ae 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -137,6 +137,8 @@ import { ListGroupExample } from './views/list_group/list_group_example';
 
 import { LoadingExample } from './views/loading/loading_example';
 
+import { MarkdownEditorExample } from './views/markdown_editor/mardown_editor_example';
+
 import { ModalExample } from './views/modal/modal_example';
 
 import { MutationObserverExample } from './views/mutation_observer/mutation_observer_example';
@@ -383,6 +385,7 @@ const navigation = [
       DatePickerExample,
       ExpressionExample,
       FilterGroupExample,
+      MarkdownEditorExample,
       RangeControlExample,
       SearchBarExample,
       SelectableExample,
diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
index 3e0168df589..65784300e86 100644
--- a/src-docs/src/views/form_controls/form_controls_example.js
+++ b/src-docs/src/views/form_controls/form_controls_example.js
@@ -22,7 +22,6 @@ import {
   EuiFormControlLayout,
   EuiFormControlLayoutDelimited,
   EuiLink,
-  EuiMarkdownEditor,
   EuiRadio,
   EuiRadioGroup,
   EuiSelect,
@@ -51,10 +50,6 @@ 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);
@@ -215,29 +210,6 @@ 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: [
diff --git a/src-docs/src/views/form_controls/markdown_editor.js b/src-docs/src/views/form_controls/markdown_editor.js
deleted file mode 100644
index 49e6db23980..00000000000
--- a/src-docs/src/views/form_controls/markdown_editor.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* eslint-disable prettier/prettier */
-import React from 'react';
-
-import {
-  EuiMarkdownEditor,
-} from '../../../../src/components/markdown_editor';
-
-export default () => (
-  <EuiMarkdownEditor />
-);
diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
new file mode 100644
index 00000000000..c6744de6bb0
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiMarkdownEditor } from '../../../../src/components';
+
+import MarkdownEditor from './markdown_editor';
+const markdownEditorSource = require('!!raw-loader!./markdown_editor');
+const markdownEditorHtml = renderToHtml(MarkdownEditor);
+
+export const MarkdownEditorExample = {
+  title: 'Markdown Editor',
+  sections: [
+    {
+      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 />,
+    },
+  ],
+};
diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
new file mode 100644
index 00000000000..3ff12341693
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -0,0 +1,6 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+
+import { EuiMarkdownEditor } from '../../../../src/components/markdown_editor';
+
+export default () => <EuiMarkdownEditor />;
diff --git a/src/components/markdown_editor/_markdown_editor_file_picker.scss b/src/components/markdown_editor/_markdown_editor_file_picker.scss
index c15e08f3816..edf04b07b1d 100644
--- a/src/components/markdown_editor/_markdown_editor_file_picker.scss
+++ b/src/components/markdown_editor/_markdown_editor_file_picker.scss
@@ -1,5 +1,6 @@
 .euiMarkdownEditor__filePicker {
   display: flex;
+  position: relative;
   height: $euiSizeXL;
   background: $euiPageBackgroundColor;
   border: $euiBorderThin;

From e5e5e1a5c6fe2a28724106f38ce5e91c2118c7ee Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 13 Feb 2020 23:42:37 +0000
Subject: [PATCH 09/43] Improving file picker

---
 .../markdown_editor.test.tsx.snap             |  47 ++++----
 .../_markdown_editor_text_area.scss           |   1 +
 .../markdown_editor/markdown_editor.tsx       |  31 ++++--
 .../markdown_editor_file_picker.tsx           | 101 ++++++++++++++----
 4 files changed, 130 insertions(+), 50 deletions(-)

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 57d244dddd6..3594b0b67c4 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -178,35 +178,40 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
   <div
     class="euiMarkdownEditor__markdownWrapper"
   >
-    <textarea
-      class="euiMarkdownEditor__textArea"
-      id="editorId"
-      rows="6"
-    />
     <div
-      class="euiMarkdownEditor__filePicker"
+      draggable="true"
     >
-      <input
-        class="euiMarkdownEditor__filePicker__input"
-        type="file"
+      <textarea
+        class="euiMarkdownEditor__textArea"
+        id="editorId"
+        rows="6"
       />
       <div
-        class="euiMarkdownEditor__filePicker__placeholder"
+        class="euiMarkdownEditor__filePicker"
       >
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--small euiIcon-isLoading euiMarkdownEditor__filePicker__icon"
-          focusable="false"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
+        <input
+          class="euiMarkdownEditor__filePicker__input"
+          multiple=""
+          type="file"
         />
         <div
-          class="euiMarkdownEditor__filePicker__text"
+          class="euiMarkdownEditor__filePicker__placeholder"
         >
-          Attach files by dragging & dropping or by clicking this area
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--small euiIcon-isLoading euiMarkdownEditor__filePicker__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <div
+            class="euiMarkdownEditor__filePicker__text"
+          >
+            Attach files by dragging & dropping or by clicking this area
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index 0f9f27cc7e5..bd624ec2007 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -4,4 +4,5 @@
   border: $euiBorderThin;
   border-color: $euiColorLightShade;
   border-bottom: none;
+  resize: vertical;
 }
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 27a32b00632..c35a1c6bc2e 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -17,11 +17,13 @@ export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
     /** A unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
     editorId?: string;
+    // onChange?: (files: FileList | null) => void;
   };
 
 export interface MarkdownEditorState {
   editorContent: string;
   viewMarkdownPreview: boolean;
+  files: FileList | null;
 }
 
 export class EuiMarkdownEditor extends Component<
@@ -47,6 +49,7 @@ export class EuiMarkdownEditor extends Component<
     this.state = {
       editorContent: '',
       viewMarkdownPreview: false,
+      files: null,
     };
 
     // If an ID wasn't provided, just generate a rando
@@ -68,6 +71,13 @@ export class EuiMarkdownEditor extends Component<
     this.setState({ viewMarkdownPreview: e.target.checked });
   };
 
+  onAttachFiles = (files: FileList | null) => {
+    console.log('List of attached files -->', files);
+    this.setState({
+      files: files,
+    });
+  };
+
   render() {
     const { className, editorId, ...rest } = this.props;
 
@@ -82,6 +92,7 @@ export class EuiMarkdownEditor extends Component<
           onTogglePreview={this.onTogglePreview}
           viewMarkdownPreview={viewMarkdownPreview}
         />
+
         {this.state.viewMarkdownPreview ? (
           <div className="euiMarkdownEditor__markdownWrapper">
             <div className="euiMarkdownEditor__previewContainer">
@@ -96,14 +107,18 @@ export class EuiMarkdownEditor extends Component<
           </div>
         ) : (
           <div className="euiMarkdownEditor__markdownWrapper">
-            <EuiMarkdownEditorTextArea
-              id={this.editorId}
-              onChange={(e: any) => {
-                this.setState({ editorContent: e.target.value });
-              }}
-              value={this.state.editorContent}
-            />
-            <EuiMarkdownEditorFilePicker />
+            <EuiMarkdownEditorFilePicker
+              onChange={files => {
+                this.onAttachFiles(files);
+              }}>
+              <EuiMarkdownEditorTextArea
+                id={this.editorId}
+                onChange={(e: any) => {
+                  this.setState({ editorContent: e.target.value });
+                }}
+                value={this.state.editorContent}
+              />
+            </EuiMarkdownEditorFilePicker>
           </div>
         )}
       </div>
diff --git a/src/components/markdown_editor/markdown_editor_file_picker.tsx b/src/components/markdown_editor/markdown_editor_file_picker.tsx
index 4843b505d31..7c937cfa715 100644
--- a/src/components/markdown_editor/markdown_editor_file_picker.tsx
+++ b/src/components/markdown_editor/markdown_editor_file_picker.tsx
@@ -1,13 +1,16 @@
-import React, { Component, HTMLAttributes } from 'react';
+import React, { Component, InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
 import { CommonProps } from '../common';
 import { EuiIcon } from '../icon';
 
-export type EuiMarkdownEditorFilePickerProps = HTMLAttributes<HTMLDivElement> &
-  CommonProps & {
-    markdownActions?: any;
-    viewMarkdownPreview?: any;
-    onTogglePreview?: any;
-  };
+export interface EuiMarkdownEditorFilePickerProps
+  extends CommonProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  /**
+   * Use as a callback to access the HTML FileList API
+   */
+  onChange?: (files: FileList | null) => void;
+}
 
 export class EuiMarkdownEditorFilePicker extends Component<
   EuiMarkdownEditorFilePickerProps
@@ -15,27 +18,83 @@ export class EuiMarkdownEditorFilePicker extends Component<
   state = {
     files: {},
     large: true,
+    isHoveringDrop: false,
+  };
+
+  fileInput: HTMLInputElement | null = null;
+
+  handleChange = (attachedFile?: string | null) => {
+    if (!this.fileInput) return;
+
+    console.log(attachedFile);
+
+    console.log(this.fileInput.files);
+
+    const { onChange } = this.props;
+
+    if (onChange) {
+      onChange(this.fileInput.files);
+    }
+  };
+
+  showDrop = () => {
+    if (!this.props.disabled) {
+      this.setState({ isHoveringDrop: true });
+    }
   };
 
-  onChange = (files: any) => {
-    this.setState({
-      files: files,
-    });
+  hideDrop = () => {
+    this.setState({ isHoveringDrop: false });
   };
 
   render() {
+    const {
+      id,
+      name,
+      className,
+      disabled,
+      onChange,
+      children,
+      ...rest
+    } = this.props;
+
+    const classes = classNames(
+      'euiMarkdownEditor__filePicker',
+      {
+        euiMarkdownEditor__filePicker__showDrop: this.state.isHoveringDrop,
+      },
+      className
+    );
+
     return (
-      <div className="euiMarkdownEditor__filePicker">
-        <input type="file" className="euiMarkdownEditor__filePicker__input" />
-        <div className="euiMarkdownEditor__filePicker__placeholder">
-          <EuiIcon
-            className="euiMarkdownEditor__filePicker__icon"
-            type="importAction"
-            size="s"
-            aria-hidden="true"
+      <div
+        draggable
+        onDragOver={this.showDrop}
+        onDragLeave={this.hideDrop}
+        onDrop={this.hideDrop}>
+        {children}
+        <div className={classes}>
+          <input
+            type="file"
+            className="euiMarkdownEditor__filePicker__input"
+            multiple
+            onChange={() => this.handleChange()}
+            ref={input => {
+              this.fileInput = input;
+            }}
+            disabled={disabled}
+            {...rest}
           />
-          <div className="euiMarkdownEditor__filePicker__text">
-            Attach files by dragging & dropping or by clicking this area
+          <div className="euiMarkdownEditor__filePicker__placeholder">
+            <EuiIcon
+              className="euiMarkdownEditor__filePicker__icon"
+              type="importAction"
+              size="s"
+              aria-hidden="true"
+            />
+            <div className="euiMarkdownEditor__filePicker__text">
+              Attach files by dragging & dropping or by clicking this area
+            </div>
           </div>
         </div>
       </div>

From ab7833bf574656f01ab351324002cc33d2f47d7d Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 17 Feb 2020 19:39:35 +0000
Subject: [PATCH 10/43] Adding dropZone component and preview styles

---
 package.json                                  |   7 +-
 .../views/markdown_editor/markdown-example.md | 220 +++++++++
 .../views/markdown_editor/markdown_editor.js  |   7 +-
 .../markdown_editor.test.tsx.snap             |  61 ++-
 src/components/markdown_editor/_index.scss    |   5 +-
 .../markdown_editor/_markdown_editor.scss     |  23 +-
 .../_markdown_editor_drop_zone.scss           |  65 +++
 .../_markdown_editor_file_picker.scss         |  45 --
 .../_markdown_editor_text_area.scss           |  12 +-
 .../_markdown_editor_toolbar.scss             |   2 +-
 .../markdown_editor/_markdown_format.scss     | 313 ++++++++++++
 .../markdown_editor/markdown_editor.tsx       |  55 +--
 .../markdown_editor_drop_zone.tsx             |  77 +++
 .../markdown_editor_file_picker.tsx           | 103 ----
 .../markdown_editor_toolbar.tsx               |   6 +-
 .../markdown_editor/markdown_format.tsx       |  23 +
 yarn.lock                                     | 455 +++++++++++++++++-
 17 files changed, 1238 insertions(+), 241 deletions(-)
 create mode 100644 src-docs/src/views/markdown_editor/markdown-example.md
 create mode 100644 src/components/markdown_editor/_markdown_editor_drop_zone.scss
 delete mode 100644 src/components/markdown_editor/_markdown_editor_file_picker.scss
 create mode 100644 src/components/markdown_editor/_markdown_format.scss
 create mode 100644 src/components/markdown_editor/markdown_editor_drop_zone.tsx
 delete mode 100644 src/components/markdown_editor/markdown_editor_file_picker.tsx
 create mode 100644 src/components/markdown_editor/markdown_format.tsx

diff --git a/package.json b/package.json
index 102f9626eac..6abb8d408ba 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,8 @@
     "@types/enzyme": "^3.1.13",
     "@types/lodash": "^4.14.116",
     "@types/numeral": "^0.0.25",
-    "@types/react-virtualized": "^9.18.7",
     "@types/react-beautiful-dnd": "^10.1.0",
+    "@types/react-virtualized": "^9.18.7",
     "chroma-js": "^2.0.4",
     "classnames": "^2.2.5",
     "highlight.js": "^9.12.0",
@@ -60,10 +60,15 @@
     "prop-types": "^15.6.0",
     "react-ace": "^7.0.5",
     "react-beautiful-dnd": "^10.1.0",
+    "react-dropzone": "^10.2.1",
     "react-focus-lock": "^1.17.7",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
     "react-virtualized": "^9.21.2",
+    "remark": "^11.0.2",
+    "remark-parse": "^7.0.2",
+    "remark-react": "^6.0.0",
+    "remark-slug": "^5.1.2",
     "resize-observer-polyfill": "^1.5.0",
     "showdown": "^1.9.1",
     "showdown-htmlescape": "^0.1.9",
diff --git a/src-docs/src/views/markdown_editor/markdown-example.md b/src-docs/src/views/markdown_editor/markdown-example.md
new file mode 100644
index 00000000000..b2782375b58
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown-example.md
@@ -0,0 +1,220 @@
+# h1 Heading
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+## Emphasis
+
+**This is bold text**
+
+__This is bold text__
+
+*This is italic text*
+
+_This is italic text_
+
+~~Strikethrough~~
+
+
+## Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+
+## Lists
+
+Unordered
+
++ Create a list by starting a line with `+`, `-`, or `*`
++ Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    * Ac tristique libero volutpat at
+    + Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
++ Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+
+1. You can use sequential numbers...
+1. ...or keep all the numbers as `1.`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+
+## Code
+
+Inline `code`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+
+Block code "fences"
+
+```
+Sample text here...
+```
+
+Syntax highlighting
+
+``` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+```
+
+## Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+Right aligned columns
+
+| Option | Description |
+| ------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+Like links, Images also have a footnote style syntax
+
+![Alt text][id]
+
+With a reference later in the document defining the URL location:
+
+[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+
+
+## Plugins
+
+The killer feature of `markdown-it` is very effective support of
+[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
+
+
+### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+>
+> Shortcuts (emoticons): :-) :-( 8-) ;)
+
+see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
+
+
+### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
+
+- 19^th^
+- H~2~O
+
+
+### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
+
+++Inserted text++
+
+
+### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
+
+==Marked text==
+
+
+### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
+
+Footnote 1 link[^first].
+
+Footnote 2 link[^second].
+
+Inline footnote^[Text of inline footnote] definition.
+
+Duplicated footnote reference[^second].
+
+[^first]: Footnote **can have markup**
+
+    and multiple paragraphs.
+
+[^second]: Footnote text.
+
+
+### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+Term 1
+
+:   Definition 1
+with lazy continuation.
+
+Term 2 with *inline markup*
+
+:   Definition 2
+
+        { some code, part of Definition 2 }
+
+    Third paragraph of definition 2.
+
+_Compact style:_
+
+Term 1
+  ~ Definition 1
+
+Term 2
+  ~ Definition 2a
+  ~ Definition 2b
+
+
+### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+*[HTML]: Hyper Text Markup Language
+
+### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+::: warning
+*here be dragons*
+:::
\ No newline at end of file
diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 3ff12341693..088c46bae03 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -3,4 +3,9 @@ import React from 'react';
 
 import { EuiMarkdownEditor } from '../../../../src/components/markdown_editor';
 
-export default () => <EuiMarkdownEditor />;
+// eslint-disable-next-line
+const markdownExample = require('!!raw-loader!./markdown-example.md');
+
+export default () => (
+  <EuiMarkdownEditor initialValue={markdownExample} height={400} />
+);
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 3594b0b67c4..840e5c66281 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -176,45 +176,40 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
     </div>
   </div>
   <div
-    class="euiMarkdownEditor__markdownWrapper"
+    class="euiMarkdownEditor__dropZone"
+    style="height:150px"
   >
-    <div
-      draggable="true"
+    <textarea
+      class="euiMarkdownEditor__textArea"
+      id="editorId"
+      rows="6"
+    />
+    <button
+      class="euiMarkdownEditor__dropZone__button"
     >
-      <textarea
-        class="euiMarkdownEditor__textArea"
-        id="editorId"
-        rows="6"
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--small euiIcon-isLoading euiMarkdownEditor__dropZone__icon"
+        focusable="false"
+        height="16"
+        role="img"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       />
       <div
-        class="euiMarkdownEditor__filePicker"
+        class="euiMarkdownEditor__dropZone__text"
       >
-        <input
-          class="euiMarkdownEditor__filePicker__input"
-          multiple=""
-          type="file"
-        />
-        <div
-          class="euiMarkdownEditor__filePicker__placeholder"
-        >
-          <svg
-            aria-hidden="true"
-            class="euiIcon euiIcon--small euiIcon-isLoading euiMarkdownEditor__filePicker__icon"
-            focusable="false"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          />
-          <div
-            class="euiMarkdownEditor__filePicker__text"
-          >
-            Attach files by dragging & dropping or by clicking this area
-          </div>
-        </div>
+        Attach files by dragging & dropping or by clicking this area
       </div>
-    </div>
+    </button>
+    <input
+      autocomplete="off"
+      multiple=""
+      style="display:none"
+      tabindex="-1"
+      type="file"
+    />
   </div>
 </div>
 `;
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index e02d702e0e7..521d3610e10 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -1,4 +1,5 @@
 @import 'markdown_editor';
+@import 'markdown_editor_drop_zone';
+@import 'markdown_format';
+@import 'markdown_editor_text_area';
 @import 'markdown_editor_toolbar';
-@import 'markdown_editor_file_picker';
-@import 'markdown_editor_text_area';
\ No newline at end of file
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index f5bbdbe0eb6..aa882a23c70 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -1,5 +1,7 @@
-.euiMarkdownEditor__markdownWrapper {
-  line-height: 0;
+.euiMarkdownEditor {
+  &:focus-within {
+    @include euiSlightShadowHover;
+  }
 
   .euiMarkdownEditor__textArea,
   .euiMarkdownEditor__previewContainer {
@@ -18,20 +20,3 @@
 .euiMarkdownEditor__textArea {
   background: $euiColorEmptyShade;
 }
-
-// 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;
-    }
-  }
-}
diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
new file mode 100644
index 00000000000..fddb8e54cb5
--- /dev/null
+++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
@@ -0,0 +1,65 @@
+.euiMarkdownEditor__dropZone {
+  @include euiFormControlDefaultShadow;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  min-height: 150px;
+  max-height: 600px;
+
+  &__input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    overflow: hidden;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:hover:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__button {
+    display: inline-flex;
+    height: $euiSizeXL;
+    padding: 0 $euiSizeS;
+    border: $euiBorderThin;
+    border-top: none;
+    align-items: center;
+    background: $euiPageBackgroundColor;
+
+    &:focus {
+      background-color: transparentize($euiColorPrimary, .88);
+    }
+  }
+
+  &__icon {
+    align-self: center;
+    margin-right: $euiSizeXS;
+    width: 12px;
+    height: 12px;
+  }
+
+  &__text {
+    @include euiFontSizeS;
+    @include euiTextTruncate;
+    line-height: $euiSize;
+    display: block;
+  }
+
+  &--isDragging {
+    .euiMarkdownEditor__textArea,
+    .euiMarkdownEditor__dropZone__button {
+      background-color: transparentize($euiColorSecondary, .88);
+    }
+
+    .euiMarkdownEditor__dropZone__button {
+      border-top-color: $euiColorSecondary;
+    }
+  }
+}
diff --git a/src/components/markdown_editor/_markdown_editor_file_picker.scss b/src/components/markdown_editor/_markdown_editor_file_picker.scss
deleted file mode 100644
index edf04b07b1d..00000000000
--- a/src/components/markdown_editor/_markdown_editor_file_picker.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.euiMarkdownEditor__filePicker {
-  display: flex;
-  position: relative;
-  height: $euiSizeXL;
-  background: $euiPageBackgroundColor;
-  border: $euiBorderThin;
-  border-top: 1px dashed $euiColorLightShade;
-  align-items: center;
-
-
-  &__input {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    overflow: hidden;
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:hover:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  &__placeholder {
-    display: inline-flex;
-    padding: 0 $euiSizeS;
-  }
-
-  &__icon {
-    align-self: center;
-    margin-right: $euiSizeS;
-  }
-
-  &__text {
-    @include euiFontSizeS;
-    @include euiTextTruncate;
-    line-height: $euiSize;
-    display: block;
-  }
-}
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index bd624ec2007..681a27cc9fb 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -1,8 +1,18 @@
 .euiMarkdownEditor__textArea {
   @include euiFormControlText;
   width: 100%;
+  height: 100%;
+  background-color: $euiFormBackgroundColor;
   border: $euiBorderThin;
+  border-bottom: 1px dashed $euiColorLightShade;
   border-color: $euiColorLightShade;
-  border-bottom: none;
   resize: vertical;
+
+  &:focus {
+    background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
+
+    + .euiMarkdownEditor__dropZone__button {
+      background-image: euiFormControlGradient();
+    }
+  }
 }
diff --git a/src/components/markdown_editor/_markdown_editor_toolbar.scss b/src/components/markdown_editor/_markdown_editor_toolbar.scss
index 4984bd2f3c8..64c4545cc55 100644
--- a/src/components/markdown_editor/_markdown_editor_toolbar.scss
+++ b/src/components/markdown_editor/_markdown_editor_toolbar.scss
@@ -1,5 +1,5 @@
 .euiMarkdownEditor__toolbar {
-  background: $euiPageBackgroundColor;
+  background: $euiColorLightestShade;
   border: $euiBorderThin;
   border-color: $euiColorLightShade;
   border-bottom: none;
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
new file mode 100644
index 00000000000..5d490719cd1
--- /dev/null
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -0,0 +1,313 @@
+// Default styles for Markdown element
+//
+// 1. Links
+// 2. Headings
+// 3. Images
+// 4. Blockquotes
+// 5. Horizontal rules
+// 6. Lists
+// 7. Tables
+// 8. Code blocks
+
+// Functions
+// Note: The inlined base font size is set in common/functions/font.js. It should match $euiMdFontSize.
+$euiDefaultFontSize: 14px;
+
+@function canvasToEm($size) {
+  @return #{$size / $euiDefaultFontSize}em;
+}
+
+.euiMarkdownFormat {
+  // Font size variables
+  $euiMarkdownFontSizeS: canvasToEm(12px);
+  $euiMarkdownFontSize: canvasToEm(14px);
+  $euiMarkdownFontSizeL: canvasToEm(20px);
+  $euiMarkdownFontSizeXL: canvasToEm(28px);
+  $euiMarkdownFontSizeXXL: canvasToEm(36px);
+
+  // Spacing variables
+  $euiMarkdownSizeL: canvasToEm(24px);
+  $euiMarkdownSize: canvasToEm(16px);
+  $euiMarkdownSizeS: canvasToEm(12px);
+  $euiMarkdownSizeXS: canvasToEm(8px);
+  $euiMarkdownSizeXXS: canvasToEm(4px);
+
+  // Grayscale variables
+  $euiMarkdownAlphaLightestShade: rgba($euiColorFullShade, .05);
+  $euiMarkdownAlphaLightShade: rgba($euiColorFullShade, .15);
+  $euiMarkdownAlphaDarkShade: rgba($euiColorFullShade, .65);
+
+  // Reverse grayscale for opposite of theme
+  $euiMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade, .05);
+  $euiMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
+  $euiMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);
+
+  &--reversed {
+    color: $euiColorLightestShade;
+  }
+
+  > *:first-child {
+    // sass-lint:disable-block no-important
+    margin-top: 0 !important;
+  }
+
+  > *:last-child {
+    // sass-lint:disable-block no-important
+    margin-bottom: 0 !important;
+  }
+
+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table,
+  pre {
+    margin-top: 0;
+    margin-bottom: $euiMarkdownSize;
+    line-height: 1.5em;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  // 1. Links
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+
+  a:hover {
+    text-decoration: underline dotted;
+  }
+
+  a:active,
+  a:hover {
+    outline-width: 0;
+  }
+
+  a:not([href]) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  // 2. Headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 0;
+    margin-bottom: $euiMarkdownSizeXS;
+  }
+
+  h1 {
+    font-size: $euiMarkdownFontSizeXXL;
+    line-height: 1.333333em;
+    font-weight: 300;
+  }
+
+  h2 {
+    font-size: $euiMarkdownFontSizeXL;
+    line-height: 1.428571em;
+    font-weight: 300;
+  }
+
+  h3 {
+    font-size: $euiMarkdownFontSizeL;
+    line-height: 1.6em;
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: $euiMarkdownSize;
+    line-height: 1.5em;
+    font-weight: 600;
+  }
+
+  h5 {
+    font-size: $euiMarkdownFontSize;
+    line-height: 1.142857em;
+    font-weight: 700;
+  }
+
+  h6 {
+    font-size: $euiMarkdownFontSizeS;
+    line-height: 1.333333em;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  // 3. Images
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+    border-style: none;
+  }
+
+  // 4. Blockquotes
+  blockquote {
+    padding: 0 1em;
+    border-left: $euiMarkdownSizeXXS solid $euiMarkdownAlphaLightShade;
+  }
+
+  &--reversed blockquote {
+    border-left-color: $euiMarkdownAlphaLightShadeReversed;
+  }
+
+  // 5. Horizontal rules
+  hr {
+    overflow: hidden;
+    background: transparent;
+    height: 2px;
+    padding: 0;
+    margin: $euiMarkdownSizeL 0;
+    background-color: $euiMarkdownAlphaLightShade;
+    border: none;
+  }
+
+  hr::before {
+    display: table;
+    content: '';
+  }
+
+  hr::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  // 6. Lists
+  ul,
+  ol {
+    padding-left: euiMarkdownSizeL;
+    margin-top: 0;
+    margin-bottom: $euiMarkdownSize;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul ul {
+    list-style-type: circle;
+  }
+
+  ol ol,
+  ul ol {
+    list-style-type: lower-roman;
+  }
+
+  ul ul ol,
+  ul ol ol,
+  ol ul ol,
+  ol ol ol {
+    list-style-type: lower-alpha;
+  }
+
+  dd {
+    margin-left: 0;
+  }
+
+  ul ul,
+  ul ol,
+  ol ol,
+  ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  li > p {
+    margin-bottom: $euiMarkdownSizeXS;
+  }
+
+  li + li {
+    margin-top: $euiMarkdownSizeXXS;
+  }
+
+  // 7. Tables
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    border-left: 1px solid $euiMarkdownAlphaLightShade;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  td,
+  th {
+    padding: 0;
+  }
+
+  table th,
+  table td {
+    padding: $euiMarkdownSizeXXS $euiMarkdownSizeS;
+    border-top: 1px solid $euiMarkdownAlphaLightShade;
+    border-bottom: 1px solid $euiMarkdownAlphaLightShade;
+
+    &:last-child {
+      border-right: 1px solid $euiMarkdownAlphaLightShade;
+    }
+  }
+
+
+  table tr {
+    background-color: transparent;
+    border-top: 1px solid $euiMarkdownAlphaLightShade;
+  }
+
+  // 8. Code blocks
+  code,
+  pre {
+    margin-bottom: $euiMarkdownSizeXS;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+    font-size: $euiMarkdownFontSizeS;
+  }
+
+  code {
+    padding: $euiMarkdownSizeXXS 0;
+    margin: 0;
+    background-color: $euiMarkdownAlphaLightestShade;
+    border-radius: $euiMarkdownSizeXXS;
+  }
+
+  code::before,
+  code::after {
+    letter-spacing: -.2em;
+    content: '\00a0';
+  }
+
+  pre {
+    padding: $euiMarkdownSize;
+    overflow: auto;
+    font-size: $euiMarkdownFontSizeS;
+    line-height: 1.333333em;
+    background-color: $euiMarkdownAlphaLightestShade;
+    border-radius: $euiMarkdownSizeXXS;
+    word-wrap: normal;
+  }
+
+  pre code {
+    display: inline;
+    max-width: auto;
+    padding: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    white-space: pre;
+    background-color: transparent;
+    border: none;
+  }
+
+  pre code::before,
+  pre code::after {
+    content: normal;
+  }
+}
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index c35a1c6bc2e..22ad5a2eb09 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -7,17 +7,21 @@ import MarkdownActions from './markdown_actions';
 import showdown from 'showdown';
 // @ts-ignore
 import showdownHtmlEscape from 'showdown-htmlescape';
-import { EuiText } from '../text';
+// import { EuiText } from '../text';
 import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
-import { EuiMarkdownEditorFilePicker } from './markdown_editor_file_picker';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
+import { EuiMarkdownFormat } from './markdown_format';
+import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone';
 
 export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     /** A unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
     editorId?: string;
-    // onChange?: (files: FileList | null) => void;
+    /** A initial markdown content */
+    initialValue?: string;
+    /** The height of the content/preview area */
+    height: number;
   };
 
 export interface MarkdownEditorState {
@@ -34,6 +38,10 @@ export class EuiMarkdownEditor extends Component<
   editorId: string;
   markdownActions: MarkdownActions;
 
+  static defaultProps = {
+    height: 150,
+  };
+
   constructor(props: EuiMarkdownEditorProps) {
     super(props);
 
@@ -47,7 +55,7 @@ export class EuiMarkdownEditor extends Component<
     this.converter.setFlavor('github');
 
     this.state = {
-      editorContent: '',
+      editorContent: this.props.initialValue!,
       viewMarkdownPreview: false,
       files: null,
     };
@@ -79,7 +87,7 @@ export class EuiMarkdownEditor extends Component<
   };
 
   render() {
-    const { className, editorId, ...rest } = this.props;
+    const { className, editorId, initialValue, height, ...rest } = this.props;
 
     const { viewMarkdownPreview } = this.state;
 
@@ -94,32 +102,21 @@ export class EuiMarkdownEditor extends Component<
         />
 
         {this.state.viewMarkdownPreview ? (
-          <div className="euiMarkdownEditor__markdownWrapper">
-            <div className="euiMarkdownEditor__previewContainer">
-              <EuiText
-                className="euiMarkdownEditor__displayText"
-                dangerouslySetInnerHTML={{
-                  __html: this.converter.makeHtml(this.state.editorContent),
-                }}
-                size="s"
-              />
-            </div>
+          <div
+            className="euiMarkdownEditor__previewContainer"
+            style={{ height: `${height}px` }}>
+            <EuiMarkdownFormat>{this.state.editorContent}</EuiMarkdownFormat>
           </div>
         ) : (
-          <div className="euiMarkdownEditor__markdownWrapper">
-            <EuiMarkdownEditorFilePicker
-              onChange={files => {
-                this.onAttachFiles(files);
-              }}>
-              <EuiMarkdownEditorTextArea
-                id={this.editorId}
-                onChange={(e: any) => {
-                  this.setState({ editorContent: e.target.value });
-                }}
-                value={this.state.editorContent}
-              />
-            </EuiMarkdownEditorFilePicker>
-          </div>
+          <EuiMarkdownEditorDropZone height={height}>
+            <EuiMarkdownEditorTextArea
+              id={this.editorId}
+              onChange={(e: any) => {
+                this.setState({ editorContent: e.target.value });
+              }}
+              value={this.state.editorContent}
+            />
+          </EuiMarkdownEditorDropZone>
         )}
       </div>
     );
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
new file mode 100644
index 00000000000..09f2b120ccc
--- /dev/null
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useDropzone } from 'react-dropzone';
+import { EuiIcon } from '../icon';
+import { EuiLoadingSpinner } from '../loading';
+
+export const EuiMarkdownEditorDropZone = (props: any) => {
+  const [isDragging, toggleDragging] = React.useState(false);
+  const [isUploadingFiles, toggleUploadingFiles] = React.useState(false);
+
+  const { children, height, className } = props;
+
+  const classes = classNames('euiMarkdownEditor__dropZone', {
+    'euiMarkdownEditor__dropZone--isDragging': isDragging,
+    className,
+  });
+
+  const { getRootProps, getInputProps, open } = useDropzone({
+    // Disable click and keydown behavior
+    noClick: true,
+    noKeyboard: true,
+    // multiple: false,
+    onDragEnter: () => {
+      toggleDragging(true);
+    },
+    onDragLeave: () => {
+      toggleDragging(false);
+    },
+    onDrop: () => {
+      toggleUploadingFiles(true);
+
+      // faking the file upload
+      setTimeout(() => {
+        toggleDragging(false);
+        toggleUploadingFiles(false);
+      }, 3000);
+    },
+  });
+
+  let buttonIcon;
+
+  if (isUploadingFiles) {
+    buttonIcon = (
+      <EuiLoadingSpinner
+        className="euiMarkdownEditor__dropZone__icon"
+        size="m"
+      />
+    );
+  } else {
+    buttonIcon = (
+      <EuiIcon
+        className="euiMarkdownEditor__dropZone__icon"
+        type="paperClip"
+        size="s"
+        aria-hidden="true"
+      />
+    );
+  }
+
+  return (
+    <div
+      {...getRootProps()}
+      style={{ height: `${height}px` }}
+      className={classes}>
+      {children}
+      <button className="euiMarkdownEditor__dropZone__button" onClick={open}>
+        {buttonIcon}
+        <div className="euiMarkdownEditor__dropZone__text">
+          {isUploadingFiles
+            ? 'Uploading your files...'
+            : 'Attach files by dragging & dropping or by clicking this area'}
+        </div>
+      </button>
+      <input {...getInputProps()} />
+    </div>
+  );
+};
diff --git a/src/components/markdown_editor/markdown_editor_file_picker.tsx b/src/components/markdown_editor/markdown_editor_file_picker.tsx
deleted file mode 100644
index 7c937cfa715..00000000000
--- a/src/components/markdown_editor/markdown_editor_file_picker.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { Component, InputHTMLAttributes } from 'react';
-import classNames from 'classnames';
-import { CommonProps } from '../common';
-import { EuiIcon } from '../icon';
-
-export interface EuiMarkdownEditorFilePickerProps
-  extends CommonProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-  /**
-   * Use as a callback to access the HTML FileList API
-   */
-  onChange?: (files: FileList | null) => void;
-}
-
-export class EuiMarkdownEditorFilePicker extends Component<
-  EuiMarkdownEditorFilePickerProps
-> {
-  state = {
-    files: {},
-    large: true,
-    isHoveringDrop: false,
-  };
-
-  fileInput: HTMLInputElement | null = null;
-
-  handleChange = (attachedFile?: string | null) => {
-    if (!this.fileInput) return;
-
-    console.log(attachedFile);
-
-    console.log(this.fileInput.files);
-
-    const { onChange } = this.props;
-
-    if (onChange) {
-      onChange(this.fileInput.files);
-    }
-  };
-
-  showDrop = () => {
-    if (!this.props.disabled) {
-      this.setState({ isHoveringDrop: true });
-    }
-  };
-
-  hideDrop = () => {
-    this.setState({ isHoveringDrop: false });
-  };
-
-  render() {
-    const {
-      id,
-      name,
-      className,
-      disabled,
-      onChange,
-      children,
-      ...rest
-    } = this.props;
-
-    const classes = classNames(
-      'euiMarkdownEditor__filePicker',
-      {
-        euiMarkdownEditor__filePicker__showDrop: this.state.isHoveringDrop,
-      },
-      className
-    );
-
-    return (
-      <div
-        draggable
-        onDragOver={this.showDrop}
-        onDragLeave={this.hideDrop}
-        onDrop={this.hideDrop}>
-        {children}
-        <div className={classes}>
-          <input
-            type="file"
-            className="euiMarkdownEditor__filePicker__input"
-            multiple
-            onChange={() => this.handleChange()}
-            ref={input => {
-              this.fileInput = input;
-            }}
-            disabled={disabled}
-            {...rest}
-          />
-          <div className="euiMarkdownEditor__filePicker__placeholder">
-            <EuiIcon
-              className="euiMarkdownEditor__filePicker__icon"
-              type="importAction"
-              size="s"
-              aria-hidden="true"
-            />
-            <div className="euiMarkdownEditor__filePicker__text">
-              Attach files by dragging & dropping or by clicking this area
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 68c8d55baba..8dcfb29ffa8 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -119,8 +119,8 @@ export class EuiMarkdownEditorToolbar extends Component<
               label={
                 viewMarkdownPreview ? (
                   <EuiI18n
-                    token="euiMarkdownEditorToolbar.edit"
-                    default="Edit"
+                    token="euiMarkdownEditorToolbar.editor"
+                    default="Editor"
                   />
                 ) : (
                   <EuiI18n
@@ -129,7 +129,7 @@ export class EuiMarkdownEditorToolbar extends Component<
                   />
                 )
               }
-              iconType={viewMarkdownPreview ? 'pencil' : 'eye'}
+              iconType={viewMarkdownPreview ? 'editorCodeBlock' : 'eye'}
               onChange={onTogglePreview}
               isSelected={viewMarkdownPreview}
               isEmpty
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
new file mode 100644
index 00000000000..1f67e60695c
--- /dev/null
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import remark from 'remark';
+import remarkParse from 'remark-parse';
+// @ts-ignore
+import remarkToReact from 'remark-react';
+// @ts-ignore
+import remarkSlug from 'remark-slug';
+
+export const EuiMarkdownFormat = (props: any) => {
+  const { children } = props;
+
+  return (
+    <div className="euiMarkdownFormat">
+      {
+        remark()
+          .use(remarkParse)
+          .use(remarkSlug)
+          .use(remarkToReact)
+          .processSync(children).contents
+      }
+    </div>
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 82a067395dc..38070794504 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1024,6 +1024,13 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-config-kibana/-/eslint-config-kibana-0.15.0.tgz#a552793497cdfc1829c2f9b7cd7018eb008f1606"
   integrity sha1-pVJ5NJfN/Bgpwvm3zXAY6wCPFgY=
 
+"@mapbox/hast-util-table-cell-style@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz#5b7166ae01297d72216932b245e4b2f0b642dca6"
+  integrity sha512-QsEsh5YaDvHoMQ2YHdvZy2iDnU3GgKVBTcHf6cILyoWDZtPSdlG444pL/ioPYO/GpXSfODBb9sefEetfC4v9oA==
+  dependencies:
+    unist-util-visit "^1.3.0"
+
 "@sentry/core@4.2.4":
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/core/-/core-4.2.4.tgz#e4a331512a4db149f14a2976b75a5b3c8ef47f87"
@@ -1335,6 +1342,11 @@
   resolved "https://registry.yarnpkg.com/@types/tabbable/-/tabbable-3.1.0.tgz#540d4c2729872560badcc220e73c9412c1d2bffe"
   integrity sha512-LL0q/bTlzseaXQ8j91eZ+Z8FQUzo0nwkng00B8365qULvFyiSOWylxV8m31Gmee3QuidkDqR72a9NRfR8s4qTw==
 
+"@types/unist@^2.0.0", "@types/unist@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
+  integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
+
 "@types/uuid@^3.4.4":
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.4.tgz#7af69360fa65ef0decb41fd150bf4ca5c0cefdf5"
@@ -2117,6 +2129,11 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+attr-accept@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.0.0.tgz#8422fef5ee4a511c207796c888227ab5de03306f"
+  integrity sha512-I9SDP4Wvh2ItYYoafEg8hFpsBe96pfQ+eabceShXt3sw2fbIP96+Aoj9zZE0vkZNAkXXzHJATVRuWz+h9FxJxQ==
+
 autoprefixer@^6.3.1:
   version "6.7.7"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
@@ -2336,6 +2353,11 @@ babylon@^6.18.0:
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
   integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
 
+bail@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
+
 balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
@@ -2968,6 +2990,11 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+ccount@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
+  integrity sha512-MOli1W+nfbPLlKEhInaxhRdp7KVLFxLN5ykwzHgLsLI3H3gs5jjFAK4Eoj3OzzcxCtumDaI8onoVDeQyWaNTkw==
+
 chai-webdriverio@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/chai-webdriverio/-/chai-webdriverio-0.4.3.tgz#55f19b198e03889f23d4d612bf9ab7e9518d5c24"
@@ -3023,6 +3050,26 @@ chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+character-entities-html4@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.4.tgz#0e64b0a3753ddbf1fdc044c5fd01d0199a02e125"
+  integrity sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==
+
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
@@ -3395,6 +3442,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+collapse-white-space@^1.0.0, collapse-white-space@^1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
+  integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -3519,6 +3571,11 @@ combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
 commander@2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
@@ -4570,6 +4627,13 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
+detab@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.3.tgz#33e5dd74d230501bd69985a0d2b9a3382699a130"
+  integrity sha512-Up8P0clUVwq0FnFjDclzZsy9PadzRn5FFxrr47tQQvMHqyiFYVbpH8oXDzWtF0Q7pYy3l+RPmtBl+BsFF6wH0A==
+  dependencies:
+    repeat-string "^1.5.4"
+
 detect-conflict@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/detect-conflict/-/detect-conflict-1.0.1.tgz#088657a66a961c05019db7c4230883b1c6b4176e"
@@ -4871,6 +4935,11 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+"emoji-regex@>=6.0.0 <=6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.1.tgz#c6cd0ec1b0642e2a3c67a1137efc5e796da4f88e"
+  integrity sha1-xs0OwbBkLio8Z6ETfvxeeW2k+I4=
+
 emoji-regex@^7.0.1, emoji-regex@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -5936,6 +6005,13 @@ file-loader@^1.1.11:
     loader-utils "^1.0.2"
     schema-utils "^0.4.5"
 
+file-selector@^0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.12.tgz#fe726547be219a787a9dcc640575a04a032b1fd0"
+  integrity sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ==
+  dependencies:
+    tslib "^1.9.0"
+
 file-type@^3.1.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-3.9.0.tgz#257a078384d1db8087bc449d107d52a52672b9e9"
@@ -6498,6 +6574,13 @@ gh-got@^6.0.0:
     got "^7.0.0"
     is-plain-obj "^1.1.0"
 
+github-slugger@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.2.1.tgz#47e904e70bf2dccd0014748142d31126cfd49508"
+  integrity sha512-SsZUjg/P03KPzQBt7OxJPasGw6NRO5uOgiZ5RGXVud5iSIZ0eNZeNp5rTwCxtavrRUa/A77j8mePVc5lEvk0KQ==
+  dependencies:
+    emoji-regex ">=6.0.0 <=6.1.1"
+
 github-username@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/github-username/-/github-username-4.1.0.tgz#cbe280041883206da4212ae9e4b5f169c30bf417"
@@ -6939,6 +7022,25 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.0"
 
+hast-to-hyperscript@^7.0.0:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-7.0.4.tgz#7c4c037d9a8ea19b0a3fdb676a26448ad922353d"
+  integrity sha512-vmwriQ2H0RPS9ho4Kkbf3n3lY436QKLq6VaGA1pzBh36hBi3tm1DO9bR+kaJIbpT10UqaANDkMjxvjVfr+cnOA==
+  dependencies:
+    comma-separated-tokens "^1.0.0"
+    property-information "^5.3.0"
+    space-separated-tokens "^1.0.0"
+    style-to-object "^0.2.1"
+    unist-util-is "^3.0.0"
+    web-namespaces "^1.1.2"
+
+hast-util-sanitize@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-2.0.1.tgz#de2f32c5aa9e93b61903e4381be6c49887d3829e"
+  integrity sha512-Hk9YC6+HURcdNuBFaPP5nX6xK6zPnm0Dr6QnU4hvvXoStzH5nLI1u71wux6u3fbEQk3/+kTEIcyxRtCA0jt9RA==
+  dependencies:
+    xtend "^4.0.1"
+
 he@1.1.1, he@1.1.x:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -7325,7 +7427,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -7345,6 +7447,11 @@ ini@^1.3.4, ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
 
+inline-style-parser@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+
 inquirer@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.10.1.tgz#ea25e4ce69ca145e05c99e46dcfec05e4012594a"
@@ -7545,6 +7652,24 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumeric@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz#4a9cef71daf4c001c1d81d63d140cf53fd6889f4"
+  integrity sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -7572,6 +7697,11 @@ is-buffer@^1.0.2, is-buffer@^1.1.5, is-buffer@~1.1.1:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
+is-buffer@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
+  integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
+
 is-builtin-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
@@ -7627,6 +7757,11 @@ is-date-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
   integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
 
+is-decimal@^1.0.0, is-decimal@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -7739,6 +7874,11 @@ is-glob@^4.0.0:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
 is-installed-globally@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@@ -7833,6 +7973,11 @@ is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
 
+is-plain-obj@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -7955,11 +8100,21 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-whitespace-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
+  integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
+
 is-windows@^1.0.0, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
+is-word-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.4.tgz#ce0e73216f98599060592f62ff31354ddbeb0230"
+  integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
+
 is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
@@ -9116,6 +9271,11 @@ lolex@^4.1.0:
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-4.2.0.tgz#ddbd7f6213ca1ea5826901ab1222b65d714b3cd7"
   integrity sha512-gKO5uExCXvSm6zbF562EvM+rd1kQDnB9AZBbiQVzf1ZmdDpxUSvpnAaVOP83N/31mRK8Ml8/VE8DMvsAZQ+7wg==
 
+longest-streak@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
+  integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
+
 loose-envify@^1.0.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -9244,6 +9404,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-escapes@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
+  integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
+
 markdown-it@8.4.1:
   version "8.4.1"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.1.tgz#206fe59b0e4e1b78a7c73250af9b34a4ad0aaf44"
@@ -9255,6 +9420,11 @@ markdown-it@8.4.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+markdown-table@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
+  integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -9282,6 +9452,42 @@ md5@2.2.1:
     crypt "~0.0.1"
     is-buffer "~1.1.1"
 
+mdast-util-compact@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.4.tgz#d531bb7667b5123abf20859be086c4d06c894593"
+  integrity sha512-3YDMQHI5vRiS2uygEFYaqckibpJtKq5Sj2c8JioeOQBU6INpKbdWzfyLqFFnDwEcEnRFIdMsguzs5pC1Jp4Isg==
+  dependencies:
+    unist-util-visit "^1.1.0"
+
+mdast-util-definitions@^1.2.0:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-1.2.5.tgz#3fe622a4171c774ebd06f11e9f8af7ec53ea5c74"
+  integrity sha512-CJXEdoLfiISCDc2JB6QLb79pYfI6+GcIH+W2ox9nMc7od0Pz+bovcHsiq29xAQY6ayqe/9CsK2VzkSJdg1pFYA==
+  dependencies:
+    unist-util-visit "^1.0.0"
+
+mdast-util-to-hast@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-6.0.2.tgz#24a8791b7c624118637d70f03a9d29116e4311cf"
+  integrity sha512-GjcOimC9qHI0yNFAQdBesrZXzUkRdFleQlcoU8+TVNfDW6oLUazUx8MgUoTaUyCJzBOnE5AOgqhpURrSlf0QwQ==
+  dependencies:
+    collapse-white-space "^1.0.0"
+    detab "^2.0.0"
+    mdast-util-definitions "^1.2.0"
+    mdurl "^1.0.1"
+    trim "0.0.1"
+    trim-lines "^1.0.0"
+    unist-builder "^1.0.1"
+    unist-util-generated "^1.1.0"
+    unist-util-position "^3.0.0"
+    unist-util-visit "^1.1.0"
+    xtend "^4.0.1"
+
+mdast-util-to-string@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.0.7.tgz#62d8e9c6b2113070d8b497c7dc35bf12796f06ee"
+  integrity sha512-P+gdtssCoHOX+eJUrrC30Sixqao86ZPlVjR5NEAoy0U79Pfxb1Y0Gntei0+GrnQD4T04X9xA8tcugp90cSmNow==
+
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -10765,6 +10971,18 @@ parse-color@^1.0.0:
   dependencies:
     color-convert "~0.5.0"
 
+parse-entities@^1.0.2, parse-entities@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
+  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
@@ -11854,6 +12072,13 @@ prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-information@^5.3.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.4.0.tgz#16e08f13f4e5c4a7be2e4ec431c01c4f8dba869a"
+  integrity sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==
+  dependencies:
+    xtend "^4.0.0"
+
 proxy-addr@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -12149,6 +12374,15 @@ react-dom@^16.12.0:
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
+react-dropzone@^10.2.1:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.2.1.tgz#b7520124c4a3b66f96d49f7879027c7a475eaa20"
+  integrity sha512-Me5nOu8hK9/Xyg5easpdfJ6SajwUquqYR/2YTdMotsCUgJ1pHIIwNsv0n+qcIno0tWR2V2rVQtj2r/hXYs2TnQ==
+  dependencies:
+    attr-accept "^2.0.0"
+    file-selector "^0.1.12"
+    prop-types "^15.7.2"
+
 react-focus-lock@^1.17.7:
   version "1.17.7"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.17.7.tgz#ea7fd05d88d0e32833cad241f9333c124c35ba9a"
@@ -12720,6 +12954,75 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-parse@^7.0.0, remark-parse@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-7.0.2.tgz#41e7170d9c1d96c3d32cf1109600a9ed50dba7cf"
+  integrity sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==
+  dependencies:
+    collapse-white-space "^1.0.2"
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    is-word-character "^1.0.0"
+    markdown-escapes "^1.0.0"
+    parse-entities "^1.1.0"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^1.0.0"
+    vfile-location "^2.0.0"
+    xtend "^4.0.1"
+
+remark-react@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/remark-react/-/remark-react-6.0.0.tgz#2bc46ce2ba74a8561d8984bf7885b5eb1ebc8273"
+  integrity sha512-5g73p8ZuqKoSdKByEf6IbXtVaHnbSEV0aamhIIqpzeNvj1wWDPX0USSPs4Gf3ZAsQIehIp6QiqJIbbXpq74bug==
+  dependencies:
+    "@mapbox/hast-util-table-cell-style" "^0.1.3"
+    hast-to-hyperscript "^7.0.0"
+    hast-util-sanitize "^2.0.0"
+    mdast-util-to-hast "^6.0.0"
+
+remark-slug@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-5.1.2.tgz#715ecdef8df1226786204b1887d31ab16aa24609"
+  integrity sha512-DWX+Kd9iKycqyD+/B+gEFO3jjnt7Yg1O05lygYSNTe5i5PIxxxPjp5qPBDxPIzp5wreF7+1ROCwRgjEcqmzr3A==
+  dependencies:
+    github-slugger "^1.0.0"
+    mdast-util-to-string "^1.0.0"
+    unist-util-visit "^1.0.0"
+
+remark-stringify@^7.0.0:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-7.0.4.tgz#3de1e3f93853288d3407da1cd44f2212321dd548"
+  integrity sha512-qck+8NeA1D0utk1ttKcWAoHRrJxERYQzkHDyn+pF5Z4whX1ug98uCNPPSeFgLSaNERRxnD6oxIug6DzZQth6Pg==
+  dependencies:
+    ccount "^1.0.0"
+    is-alphanumeric "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    longest-streak "^2.0.1"
+    markdown-escapes "^1.0.0"
+    markdown-table "^1.1.0"
+    mdast-util-compact "^1.0.0"
+    parse-entities "^1.0.2"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    stringify-entities "^2.0.0"
+    unherit "^1.0.4"
+    xtend "^4.0.1"
+
+remark@^11.0.2:
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-11.0.2.tgz#12b90ea100ac3362b1976fa87a6e4e0ab5968202"
+  integrity sha512-bh+eJgn8wgmbHmIBOuwJFdTVRVpl3fcVP6HxmpPWO0ULGP9Qkh6INJh0N5Uy7GqlV7DQYGoqaKiEIpM5LLvJ8w==
+  dependencies:
+    remark-parse "^7.0.0"
+    remark-stringify "^7.0.0"
+    unified "^8.2.0"
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -12741,7 +13044,7 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
   integrity sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=
 
-repeat-string@^1.5.2, repeat-string@^1.6.1:
+repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
@@ -12758,7 +13061,7 @@ replace-ext@0.0.1:
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
   integrity sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=
 
-replace-ext@^1.0.0:
+replace-ext@1.0.0, replace-ext@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
@@ -13713,6 +14016,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
 spawn-sync@^1.0.15:
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
@@ -13830,6 +14138,11 @@ start-server-and-test@^1.1.4:
     ps-tree "1.1.0"
     wait-on "2.1.0"
 
+state-toggle@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
+  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -13997,6 +14310,17 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
+stringify-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-2.0.0.tgz#fa7ca6614b355fb6c28448140a20c4ede7462827"
+  integrity sha512-fqqhZzXyAM6pGD9lky/GOPq6V4X0SeTAFBl0iXb/BzOegl40gpf/bV3QQP7zULNYvjr6+Dx8SCaDULjVoOru0A==
+  dependencies:
+    character-entities-html4 "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.2"
+    is-hexadecimal "^1.0.0"
+
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -14075,6 +14399,13 @@ style-loader@^0.19.0:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
+style-to-object@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.3.tgz#afcf42bc03846b1e311880c55632a26ad2780bcb"
+  integrity sha512-1d/k4EY2N7jVLOqf2j04dTc37TPOv/hHxZmvpg8Pdh8UYydxeu/C1W1U4vD8alzf5V2Gt7rLsmkr4dxAlDm9ng==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 stylehacks@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.0.tgz#64b323951c4a24e5fc7b2ec06c137bf32d155e8a"
@@ -14568,16 +14899,31 @@ tr46@^1.0.0:
   dependencies:
     punycode "^2.1.0"
 
+trim-lines@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-1.1.3.tgz#839514be82428fd9e7ec89e35081afe8f6f93115"
+  integrity sha512-E0ZosSWYK2mkSu+KEtQ9/KqarVjA9HztOSX+9FDdNacRAq29RRV6ZQNgob3iuW8Htar9vAfEa6yyt5qBAHZDBA==
+
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
   integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
 
+trim-trailing-lines@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"
+  integrity sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA==
+
 trim@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
   integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
 
+trough@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
+
 "true-case-path@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
@@ -14715,6 +15061,14 @@ underscore@~1.4.4:
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
   integrity sha1-YaajIBBiKvoHljvzJSA88SI51gQ=
 
+unherit@^1.0.4:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
+  integrity sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==
+  dependencies:
+    inherits "^2.0.0"
+    xtend "^4.0.0"
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -14738,6 +15092,17 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"
   integrity sha512-2WSLa6OdYd2ng8oqiGIWnJqyFArvhn+5vgx5GTxMbUYjCYKUcuKS62YLFF0R/BDGlB1yzXjQOLtPAfHsgirEpg==
 
+unified@^8.2.0:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
+  integrity sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^2.0.0"
+    trough "^1.0.0"
+    vfile "^4.0.0"
+
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -14786,6 +15151,56 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
+unist-builder@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-1.0.4.tgz#e1808aed30bd72adc3607f25afecebef4dd59e17"
+  integrity sha512-v6xbUPP7ILrT15fHGrNyHc1Xda8H3xVhP7/HAIotHOhVPjH5dCXA097C3Rry1Q2O+HbOLCao4hfPB+EYEjHgVg==
+  dependencies:
+    object-assign "^4.1.0"
+
+unist-util-generated@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.5.tgz#1e903e68467931ebfaea386dae9ea253628acd42"
+  integrity sha512-1TC+NxQa4N9pNdayCYA1EGUOCAO0Le3fVp7Jzns6lnua/mYgwHo0tz5WUAfrdpNch1RZLHc61VZ1SDgrtNXLSw==
+
+unist-util-is@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
+  integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
+
+unist-util-position@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.0.4.tgz#5872be7aec38629b971fdb758051f78817b0040a"
+  integrity sha512-tWvIbV8goayTjobxDIr4zVTyG+Q7ragMSMeKC3xnPl9xzIc0+she8mxXLM3JVNDDsfARPbCd3XdzkyLdo7fF3g==
+
+unist-util-remove-position@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz#ec037348b6102c897703eee6d0294ca4755a2020"
+  integrity sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==
+  dependencies:
+    unist-util-visit "^1.1.0"
+
+unist-util-stringify-position@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.2.tgz#5a3866e7138d55974b640ec69a94bc19e0f3fa12"
+  integrity sha512-nK5n8OGhZ7ZgUwoUbL8uiVRwAbZyzBsB/Ddrlbu6jwwubFza4oe15KlyEaLNMXQW1svOQq4xesUeqA85YrIUQA==
+  dependencies:
+    "@types/unist" "^2.0.2"
+
+unist-util-visit-parents@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz#25e43e55312166f3348cae6743588781d112c1e9"
+  integrity sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==
+  dependencies:
+    unist-util-is "^3.0.0"
+
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
+  integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
+  dependencies:
+    unist-util-visit-parents "^2.0.0"
+
 universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
@@ -15037,6 +15452,30 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vfile-location@^2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
+  integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
+
+vfile-message@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.2.tgz#75ba05090ec758fa8420f2c11ce049bcddd8cf3e"
+  integrity sha512-gNV2Y2fDvDOOqq8bEe7cF3DXU6QgV4uA9zMR2P8tix11l1r7zju3zry3wZ8sx+BEfuO6WQ7z2QzfWTvqHQiwsA==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+
+vfile@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.0.2.tgz#71af004d4a710b0e6be99c894655bc56126d5d56"
+  integrity sha512-yhoTU5cDMSsaeaMfJ5g0bUKYkYmZhAh9fn9TZicxqn+Cw4Z439il2v3oT9S0yjlpqlI74aFOQCt3nOV+pxzlkw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^2.0.0"
+    vfile-message "^2.0.0"
+
 vinyl-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vinyl-file/-/vinyl-file-2.0.0.tgz#a7ebf5ffbefda1b7d18d140fcb07b223efb6751a"
@@ -15235,6 +15674,11 @@ wdio-visual-regression-service@silne30/wdio-visual-regression-service#Add_Filena
     platform "^1.3.1"
     wdio-screenshot "^0.6.0"
 
+web-namespaces@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
+  integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
+
 webdriverio@^4.12.0:
   version "4.14.4"
   resolved "https://registry.yarnpkg.com/webdriverio/-/webdriverio-4.14.4.tgz#f7a94e9a6530819796088f42b009833d83de0386"
@@ -15648,6 +16092,11 @@ xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
   integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=
 
+xtend@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"

From 3b302072ad7e476613254dfa0070a1eff4a4b8b9 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 17 Feb 2020 20:04:34 +0000
Subject: [PATCH 11/43] Fixing height issue while resizing textarea

---
 .../__snapshots__/markdown_editor.test.tsx.snap  |  2 +-
 .../_markdown_editor_text_area.scss              |  1 +
 .../markdown_editor/markdown_editor.tsx          |  3 ++-
 .../markdown_editor_drop_zone.tsx                |  7 ++-----
 .../markdown_editor_text_area.tsx                | 16 ++++++----------
 5 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 840e5c66281..068d452b255 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -177,12 +177,12 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
   </div>
   <div
     class="euiMarkdownEditor__dropZone"
-    style="height:150px"
   >
     <textarea
       class="euiMarkdownEditor__textArea"
       id="editorId"
       rows="6"
+      style="height:calc(118px"
     />
     <button
       class="euiMarkdownEditor__dropZone__button"
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index 681a27cc9fb..d8388a18fc8 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -2,6 +2,7 @@
   @include euiFormControlText;
   width: 100%;
   height: 100%;
+  min-height: 150px;
   background-color: $euiFormBackgroundColor;
   border: $euiBorderThin;
   border-bottom: 1px dashed $euiColorLightShade;
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 22ad5a2eb09..60b0797e3de 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -108,8 +108,9 @@ export class EuiMarkdownEditor extends Component<
             <EuiMarkdownFormat>{this.state.editorContent}</EuiMarkdownFormat>
           </div>
         ) : (
-          <EuiMarkdownEditorDropZone height={height}>
+          <EuiMarkdownEditorDropZone>
             <EuiMarkdownEditorTextArea
+              height={height}
               id={this.editorId}
               onChange={(e: any) => {
                 this.setState({ editorContent: e.target.value });
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index 09f2b120ccc..04ed3f84a9c 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -8,7 +8,7 @@ export const EuiMarkdownEditorDropZone = (props: any) => {
   const [isDragging, toggleDragging] = React.useState(false);
   const [isUploadingFiles, toggleUploadingFiles] = React.useState(false);
 
-  const { children, height, className } = props;
+  const { children, className } = props;
 
   const classes = classNames('euiMarkdownEditor__dropZone', {
     'euiMarkdownEditor__dropZone--isDragging': isDragging,
@@ -58,10 +58,7 @@ export const EuiMarkdownEditorDropZone = (props: any) => {
   }
 
   return (
-    <div
-      {...getRootProps()}
-      style={{ height: `${height}px` }}
-      className={classes}>
+    <div {...getRootProps()} className={classes}>
       {children}
       <button className="euiMarkdownEditor__dropZone__button" onClick={open}>
         {buttonIcon}
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index 76e817cdf72..bae47d3c45e 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -15,6 +15,8 @@ export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
     resize?: keyof typeof resizeToClassNameMap;
 
     inputRef?: Ref<HTMLTextAreaElement>;
+
+    height: number;
   };
 
 const resizeToClassNameMap = {
@@ -38,23 +40,17 @@ export const EuiMarkdownEditorTextArea: FunctionComponent<
   name,
   placeholder,
   rows,
+  height,
   ...rest
 }) => {
-  let definedRows: number;
-
-  if (rows) {
-    definedRows = rows;
-  } else if (compressed) {
-    definedRows = 3;
-  } else {
-    definedRows = 6;
-  }
+  const dropZoneButtonHeight = 32;
 
   return (
     <textarea
+      style={{ height: `calc(${height - dropZoneButtonHeight}px` }}
       className="euiMarkdownEditor__textArea"
       {...rest}
-      rows={definedRows}
+      rows={6}
       name={name}
       id={id}
       ref={inputRef}

From 0b28523bf2f5bde3cb415f440017ed71632b15af Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 18 Feb 2020 12:13:01 +0000
Subject: [PATCH 12/43] Small UI fix

---
 src/components/markdown_editor/_markdown_format.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 5d490719cd1..4b37a66b57f 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -182,7 +182,7 @@ $euiDefaultFontSize: 14px;
   // 6. Lists
   ul,
   ol {
-    padding-left: euiMarkdownSizeL;
+    padding-left: $euiMarkdownSizeL;
     margin-top: 0;
     margin-bottom: $euiMarkdownSize;
   }

From fb284cea4f5c9f5ae5a3f5270c6742bbae27f5f9 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 18 Feb 2020 13:20:03 +0000
Subject: [PATCH 13/43] Improving markdown example

---
 .../views/markdown_editor/markdown-example.md | 131 ++----------------
 1 file changed, 15 insertions(+), 116 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown-example.md b/src-docs/src/views/markdown_editor/markdown-example.md
index b2782375b58..5d51ffea386 100644
--- a/src-docs/src/views/markdown_editor/markdown-example.md
+++ b/src-docs/src/views/markdown_editor/markdown-example.md
@@ -40,41 +40,30 @@ ___
 
 Unordered
 
-+ Create a list by starting a line with `+`, `-`, or `*`
-+ Sub-lists are made by indenting 2 spaces:
-  - Marker character change forces new list start:
-    * Ac tristique libero volutpat at
-    + Facilisis in pretium nisl aliquet
-    - Nulla volutpat aliquam velit
-+ Very easy!
+* Item 1
+* Item 2
+  * Item 2a
+  * Item 2b
 
 Ordered
 
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
+1. Item 1
+1. Item 2
+1. Item 3
+   1. Item 3a
+   1. Item 3b
 
 
-1. You can use sequential numbers...
-1. ...or keep all the numbers as `1.`
+## Task Lists
 
-Start numbering with offset:
-
-57. foo
-1. bar
+- [x] Create a new project
+- [x] Give your project a name
+- [ ] Add a new column
 
 
 ## Code
 
-Inline `code`
-
-Indented code
-
-    // Some comments
-    line 1 of code
-    line 2 of code
-    line 3 of code
-
+Inline `<Code />` is awesome!
 
 Block code "fences"
 
@@ -82,7 +71,7 @@ Block code "fences"
 Sample text here...
 ```
 
-Syntax highlighting
+Syntax highlighting JS
 
 ``` js
 var foo = function (bar) {
@@ -123,98 +112,8 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 ![Minion](https://octodex.github.com/images/minion.png)
 ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
 
-Like links, Images also have a footnote style syntax
-
-![Alt text][id]
-
-With a reference later in the document defining the URL location:
-
-[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
-
-
-## Plugins
-
-The killer feature of `markdown-it` is very effective support of
-[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
 
 
 ### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
 
 > Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
->
-> Shortcuts (emoticons): :-) :-( 8-) ;)
-
-see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
-
-
-### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
-
-- 19^th^
-- H~2~O
-
-
-### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
-
-++Inserted text++
-
-
-### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
-
-==Marked text==
-
-
-### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
-
-Footnote 1 link[^first].
-
-Footnote 2 link[^second].
-
-Inline footnote^[Text of inline footnote] definition.
-
-Duplicated footnote reference[^second].
-
-[^first]: Footnote **can have markup**
-
-    and multiple paragraphs.
-
-[^second]: Footnote text.
-
-
-### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
-
-Term 1
-
-:   Definition 1
-with lazy continuation.
-
-Term 2 with *inline markup*
-
-:   Definition 2
-
-        { some code, part of Definition 2 }
-
-    Third paragraph of definition 2.
-
-_Compact style:_
-
-Term 1
-  ~ Definition 1
-
-Term 2
-  ~ Definition 2a
-  ~ Definition 2b
-
-
-### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
-
-This is HTML abbreviation example.
-
-It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
-
-*[HTML]: Hyper Text Markup Language
-
-### [Custom containers](https://github.com/markdown-it/markdown-it-container)
-
-::: warning
-*here be dragons*
-:::
\ No newline at end of file

From 383140700d2f38b16c4dc813ed708eabbe9aeffc Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 18 Mar 2020 19:18:48 -0700
Subject: [PATCH 14/43] remove showdown, since it wasn't being used

---
 package.json                                  |  2 -
 .../markdown_editor/markdown_editor.tsx       | 15 ----
 yarn.lock                                     | 73 +------------------
 3 files changed, 3 insertions(+), 87 deletions(-)

diff --git a/package.json b/package.json
index 42f71df56cc..6627925b065 100644
--- a/package.json
+++ b/package.json
@@ -73,8 +73,6 @@
     "remark-react": "^6.0.0",
     "remark-slug": "^5.1.2",
     "resize-observer-polyfill": "^1.5.0",
-    "showdown": "^1.9.1",
-    "showdown-htmlescape": "^0.1.9",
     "tabbable": "^3.0.0",
     "uuid": "^3.1.0"
   },
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 60b0797e3de..aa33fada79f 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -2,11 +2,6 @@ import React, { Component, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 import MarkdownActions from './markdown_actions';
-
-// @ts-ignore
-import showdown from 'showdown';
-// @ts-ignore
-import showdownHtmlEscape from 'showdown-htmlescape';
 // import { EuiText } from '../text';
 import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
@@ -34,7 +29,6 @@ export class EuiMarkdownEditor extends Component<
   EuiMarkdownEditorProps,
   MarkdownEditorState
 > {
-  converter: showdown.Converter;
   editorId: string;
   markdownActions: MarkdownActions;
 
@@ -45,15 +39,6 @@ export class EuiMarkdownEditor extends Component<
   constructor(props: EuiMarkdownEditorProps) {
     super(props);
 
-    // Instantiate Showdown (for converting markdown -> html) with options
-    this.converter = new showdown.Converter({
-      openLinksInNewWindow: true,
-      ghMentions: false,
-      backslashEscapesHTMLTags: true,
-      extensions: [showdownHtmlEscape],
-    });
-    this.converter.setFlavor('github');
-
     this.state = {
       editorContent: this.props.initialValue!,
       viewMarkdownPreview: false,
diff --git a/yarn.lock b/yarn.lock
index 5672fa58216..cad66b95e24 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3336,15 +3336,6 @@ cliui@^4.0.0:
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
 clone-buffer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
@@ -4440,7 +4431,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -6534,11 +6525,6 @@ get-caller-file@^1.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
   integrity sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=
 
-get-caller-file@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
 get-func-name@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
@@ -13186,11 +13172,6 @@ require-main-filename@^1.0.1:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
   integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
 
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
 require-uncached@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
@@ -13861,20 +13842,6 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-showdown-htmlescape@^0.1.9:
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/showdown-htmlescape/-/showdown-htmlescape-0.1.9.tgz#4299676a209016c9fbdabe60c38408eef3eb1800"
-  integrity sha512-kkg0Lh6CRzJKMvIkNBYNkZaJiZSii98mfiZj3FpQK0lXn1iV0UT5VD63YoTAqOCP7QiIo3nTH/z5ndVKCfMenQ==
-  dependencies:
-    showdown "^1.2.3"
-
-showdown@^1.2.3, showdown@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.9.1.tgz#134e148e75cd4623e09c21b0511977d79b5ad0ef"
-  integrity sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==
-  dependencies:
-    yargs "^14.2"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -14285,7 +14252,7 @@ string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^3.0.0, string-width@^3.1.0:
+string-width@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
   integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
@@ -14361,7 +14328,7 @@ strip-ansi@^5.0.0:
   dependencies:
     ansi-regex "^4.0.0"
 
-strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+strip-ansi@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
   integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
@@ -15995,15 +15962,6 @@ wrap-ansi@^2.0.0:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -16165,14 +16123,6 @@ yargs-parser@^10.1.0:
   dependencies:
     camelcase "^4.1.0"
 
-yargs-parser@^15.0.0:
-  version "15.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
-  integrity sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
 yargs-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
@@ -16205,23 +16155,6 @@ yargs@12.0.2, yargs@^12.0.2:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^10.1.0"
 
-yargs@^14.2:
-  version "14.2.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.2.tgz#2769564379009ff8597cdd38fba09da9b493c4b5"
-  integrity sha512-/4ld+4VV5RnrynMhPZJ/ZpOCGSCeghMykZ3BhdFBDa9Wy/RH6uEGNWDJog+aUlq+9OM1CFTgtYRW5Is1Po9NOA==
-  dependencies:
-    cliui "^5.0.0"
-    decamelize "^1.2.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^15.0.0"
-
 yargs@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"

From 2f95bbc0be1a5a1a4a8c75e99765a65a5f00db68 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 19 Mar 2020 13:15:51 +0000
Subject: [PATCH 15/43] Adding code highlight

---
 .stylelintrc                                  |   6 +
 package.json                                  |   8 +
 .../views/markdown_editor/markdown-example.md |  20 +-
 src/components/markdown_editor/_index.scss    |   1 +
 .../markdown_editor/_markdown_format.scss     |   8 +-
 .../_markdown_highlight_js.scss               |  94 ++
 .../markdown_editor/markdown_format.tsx       |  50 +-
 yarn.lock                                     | 812 +++++++++++++++++-
 8 files changed, 961 insertions(+), 38 deletions(-)
 create mode 100644 .stylelintrc
 create mode 100644 src/components/markdown_editor/_markdown_highlight_js.scss

diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 00000000000..8168ad3708e
--- /dev/null
+++ b/.stylelintrc
@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "number-leading-zero": "never",
+    "color-hex-case": "upper"
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 6abb8d408ba..52f5b0e7a8f 100644
--- a/package.json
+++ b/package.json
@@ -65,9 +65,16 @@
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
     "react-virtualized": "^9.21.2",
+    "rehype-highlight": "^3.1.0",
+    "rehype-raw": "^4.0.1",
+    "rehype-react": "^5.0.0",
+    "rehype-stringify": "^6.0.1",
     "remark": "^11.0.2",
+    "remark-emoji": "^2.1.0",
+    "remark-highlight.js": "^5.2.0",
     "remark-parse": "^7.0.2",
     "remark-react": "^6.0.0",
+    "remark-rehype": "^5.0.0",
     "remark-slug": "^5.1.2",
     "resize-observer-polyfill": "^1.5.0",
     "showdown": "^1.9.1",
@@ -163,6 +170,7 @@
     "postcss-loader": "^2.0.8",
     "pre-commit": "^1.2.2",
     "prettier": "^1.17.0",
+    "prettier-stylelint": "^0.4.2",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "raw-loader": "^0.5.1",
diff --git a/src-docs/src/views/markdown_editor/markdown-example.md b/src-docs/src/views/markdown_editor/markdown-example.md
index 5d51ffea386..58724587b67 100644
--- a/src-docs/src/views/markdown_editor/markdown-example.md
+++ b/src-docs/src/views/markdown_editor/markdown-example.md
@@ -81,6 +81,24 @@ var foo = function (bar) {
 console.log(foo(5));
 ```
 
+Syntax highlighting 
+
+``` java
+package l2f.gameserver.model;
+
+public abstract class L2Char extends L2Object {
+  public static final Short ERROR = 0x0001;
+
+  public void moveTo(int x, int y, int z) {
+    _ai = null;
+    log("Should not be called");
+    if (1 > 5) { // wtf!?
+      return;
+    }
+  }
+}
+```
+
 ## Tables
 
 | Option | Description |
@@ -116,4 +134,4 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 
 ### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
 
-> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+> Classic markup: :wink: :cry: :laughing: :yum:
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index 521d3610e10..4e101be94c6 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -3,3 +3,4 @@
 @import 'markdown_format';
 @import 'markdown_editor_text_area';
 @import 'markdown_editor_toolbar';
+@import 'markdown_highlight_js';
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 4b37a66b57f..fe3ef9dd51a 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -18,6 +18,10 @@ $euiDefaultFontSize: 14px;
 }
 
 .euiMarkdownFormat {
+  // sass-lint:disable-block indentation
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
   // Font size variables
   $euiMarkdownFontSizeS: canvasToEm(12px);
   $euiMarkdownFontSize: canvasToEm(14px);
@@ -257,7 +261,6 @@ $euiDefaultFontSize: 14px;
     }
   }
 
-
   table tr {
     background-color: transparent;
     border-top: 1px solid $euiMarkdownAlphaLightShade;
@@ -267,7 +270,8 @@ $euiDefaultFontSize: 14px;
   code,
   pre {
     margin-bottom: $euiMarkdownSizeXS;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro',
+      monospace;
     font-size: $euiMarkdownFontSizeS;
   }
 
diff --git a/src/components/markdown_editor/_markdown_highlight_js.scss b/src/components/markdown_editor/_markdown_highlight_js.scss
new file mode 100644
index 00000000000..9463e477996
--- /dev/null
+++ b/src/components/markdown_editor/_markdown_highlight_js.scss
@@ -0,0 +1,94 @@
+/*
+Atom One Light by Daniel Gamage
+Original One Light Syntax theme from https://github.com/atom/one-light-syntax
+*/
+
+$base: #FAFAFA;
+$mono1: #383A42;
+$mono2: #686B77;
+$mono3: #A0A1A7;
+$hue1: #0184BB;
+$hue2: #4078F2;
+$hue3: #A626A4;
+$hue4: #50A14F;
+$hue5: #E45649;
+$hue52: #C91243;
+$hue6: #986801;
+$hue62: #C18401;
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: .5em;
+  color: $mono1;
+  background: $base;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: $mono3;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: $hue3;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: $hue5;
+}
+
+.hljs-literal {
+  color: $hue1;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: $hue4;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: $hue62;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: $hue6;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: $hue2;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 1f67e60695c..8fbde324143 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -1,23 +1,35 @@
-import React from 'react';
-import remark from 'remark';
-import remarkParse from 'remark-parse';
+import React, { createElement, FunctionComponent } from 'react';
 // @ts-ignore
-import remarkToReact from 'remark-react';
+import emoji from 'remark-emoji';
+import unified from 'unified';
+import markdown from 'remark-parse';
 // @ts-ignore
-import remarkSlug from 'remark-slug';
+import remark2rehype from 'remark-rehype';
+// @ts-ignore
+import highlight from 'remark-highlight.js';
+// @ts-ignore
+import rehype2react from 'rehype-react';
+// @ts-ignore
+import row from 'rehype-raw';
+
+const processor = unified()
+  .use(markdown)
+  .use(highlight)
+  .use(emoji, { emoticon: true })
+  .use(remark2rehype, { allowDangerousHTML: true })
+  .use(row)
+  .use(rehype2react, {
+    createElement: createElement,
+  });
 
-export const EuiMarkdownFormat = (props: any) => {
-  const { children } = props;
+interface EuiMarkdownFormatProps {
+  children: string;
+}
 
-  return (
-    <div className="euiMarkdownFormat">
-      {
-        remark()
-          .use(remarkParse)
-          .use(remarkSlug)
-          .use(remarkToReact)
-          .processSync(children).contents
-      }
-    </div>
-  );
-};
+export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
+  children,
+}) => (
+  <div className="euiMarkdownFormat">
+    {processor.processSync(children).contents}
+  </div>
+);
diff --git a/yarn.lock b/yarn.lock
index 38070794504..d6492a55321 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1663,16 +1663,16 @@ ajv-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
   integrity sha1-MU3QpLM2j609/NxU7eYXG4htrzw=
 
+ajv-keywords@^3.0.0, ajv-keywords@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
+  integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
+
 ajv-keywords@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
   integrity sha1-rCsnk5xUPpXSwG5/f1wnvkqlQ74=
 
-ajv-keywords@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
-  integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
-
 ajv@^4.7.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
@@ -1691,6 +1691,16 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.3.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
+ajv@^6.0.1:
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.0.tgz#06d60b96d87b8454a5adaba86e7854da629db4b7"
+  integrity sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 ajv@^6.1.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.2.1.tgz#28a6abc493a2abe0fb4c8507acaedb43fa550671"
@@ -2146,7 +2156,7 @@ autoprefixer@^6.3.1:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
-autoprefixer@^7.1.5:
+autoprefixer@^7.1.2, autoprefixer@^7.1.5:
   version "7.2.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.6.tgz#256672f86f7c735da849c4f07d008abb056067dc"
   integrity sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==
@@ -2913,6 +2923,15 @@ camelcase-keys@^2.0.0:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
+camelcase-keys@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
+  integrity sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=
+  dependencies:
+    camelcase "^4.1.0"
+    map-obj "^2.0.0"
+    quick-lru "^1.0.0"
+
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@@ -2990,7 +3009,7 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-ccount@^1.0.0:
+ccount@^1.0.0, ccount@^1.0.3:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
   integrity sha512-MOli1W+nfbPLlKEhInaxhRdp7KVLFxLN5ykwzHgLsLI3H3gs5jjFAK4Eoj3OzzcxCtumDaI8onoVDeQyWaNTkw==
@@ -3213,6 +3232,11 @@ chromedriver@2.37.0:
     mkdirp "^0.5.1"
     request "^2.83.0"
 
+ci-info@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
+  integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
+
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -3571,7 +3595,7 @@ combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-comma-separated-tokens@^1.0.0:
+comma-separated-tokens@^1.0.0, comma-separated-tokens@^1.0.1:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
   integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
@@ -3845,6 +3869,16 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
     parse-json "^2.2.0"
     require-from-string "^1.1.0"
 
+cosmiconfig@^3.0.1, cosmiconfig@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-3.1.0.tgz#640a94bf9847f321800403cd273af60665c73397"
+  integrity sha512-zedsBhLSbPBms+kE7AH4vHg6JsKDz6epSv2/+5XHs8ILHlgDciSJfSWf8sX9aQ52Jb7KI7VswUTsLpR/G0cr2Q==
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^3.0.0"
+    require-from-string "^2.0.1"
+
 cosmiconfig@^5.0.0:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.5.tgz#a809e3c2306891ce17ab70359dc8bdf661fe2cd0"
@@ -4422,7 +4456,7 @@ debug@3.1.0, debug@^3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@^3.2.5:
+debug@^3.0.0, debug@^3.0.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -4436,7 +4470,15 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize-keys@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
+  integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -4678,6 +4720,13 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dir-glob@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
+  integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
+  dependencies:
+    path-type "^3.0.0"
+
 discontinuous-range@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
@@ -4763,6 +4812,11 @@ domelementtype@1, domelementtype@^1.3.0:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
   integrity sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=
 
+domelementtype@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
+
 domelementtype@~1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
@@ -4827,6 +4881,13 @@ dot-prop@^4.1.0, dot-prop@^4.1.1:
   dependencies:
     is-obj "^1.0.0"
 
+dot-prop@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
+  integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
+  dependencies:
+    is-obj "^2.0.0"
+
 downgrade-root@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/downgrade-root/-/downgrade-root-1.2.2.tgz#531319715b0e81ffcc22eb28478ba27643e12c6c"
@@ -4950,6 +5011,11 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
+emoticon@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/emoticon/-/emoticon-3.2.0.tgz#c008ca7d7620fac742fe1bf4af8ff8fed154ae7f"
+  integrity sha512-SNujglcLTTg+lDAcApPNgEdudaqQFiAbJCqzjNxJkvN9vAwCGi0uu8IUVvx+f16h+V44KCY6Y2yboroc9pilHg==
+
 encodeurl@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -5876,6 +5942,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-deep-equal@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
+  integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
+
 fast-diff@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
@@ -5896,6 +5967,13 @@ fastparse@^1.1.1:
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
   integrity sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=
 
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -5990,6 +6068,14 @@ file-entry-cache@^1.1.1:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+file-entry-cache@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  integrity sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
 file-entry-cache@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
@@ -6273,6 +6359,11 @@ form-data@~2.3.2:
     combined-stream "1.0.6"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -6727,6 +6818,23 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  integrity sha1-+yzP+UAfhgCUXfral0QMypcrhoA=
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globjoin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
+  integrity sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=
+
 globule@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
@@ -6759,6 +6867,13 @@ gonzales-pe-sl@srowhani/gonzales-pe#dev:
   dependencies:
     minimist "1.1.x"
 
+gonzales-pe@^4.0.3:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.2.4.tgz#356ae36a312c46fe0f1026dd6cb539039f8500d2"
+  integrity sha512-v0Ts/8IsSbh9n1OJRnSfa7Nlxi4AkXIsWB6vPept8FDbL4bXn3FNuxjYtO/nmBGu7GDkL9MFeGebeSu6l55EPQ==
+  dependencies:
+    minimist "1.1.x"
+
 gonzales-pe@^4.2.2:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.2.3.tgz#41091703625433285e0aee3aa47829fc1fbeb6f2"
@@ -7034,6 +7149,53 @@ hast-to-hyperscript@^7.0.0:
     unist-util-is "^3.0.0"
     web-namespaces "^1.1.2"
 
+hast-to-hyperscript@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-8.0.0.tgz#ad1182144366ed8d4f65f1a771c7f1da6f812648"
+  integrity sha512-WgSlKtcjhDeCa6USBnoJwjOmRo81/Ib/MPSASOjTH99XLoPO+R5/1LrCjHJnftM8KTbnf6OV9czQj25mqBXYHw==
+  dependencies:
+    comma-separated-tokens "^1.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+    style-to-object "^0.3.0"
+    unist-util-is "^4.0.0"
+    web-namespaces "^1.0.0"
+
+hast-util-from-parse5@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-5.0.3.tgz#3089dc0ee2ccf6ec8bc416919b51a54a589e097c"
+  integrity sha512-gOc8UB99F6eWVWFtM9jUikjN7QkWxB3nY0df5Z0Zq1/Nkwl5V4hAAsl0tmwlgWl/1shlTF8DnNYLO8X6wRV9pA==
+  dependencies:
+    ccount "^1.0.3"
+    hastscript "^5.0.0"
+    property-information "^5.0.0"
+    web-namespaces "^1.1.2"
+    xtend "^4.0.1"
+
+hast-util-is-element@^1.0.0, hast-util-is-element@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.0.4.tgz#059090a05cc02e275df1ad02caf8cb422fcd2e02"
+  integrity sha512-NFR6ljJRvDcyPP5SbV7MyPBgF47X3BsskLnmw1U34yL+X6YC0MoBx9EyMg8Jtx4FzGH95jw8+c1VPLHaRA0wDQ==
+
+hast-util-parse-selector@^2.0.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz#60c99d0b519e12ab4ed32e58f150ec3f61ed1974"
+  integrity sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA==
+
+hast-util-raw@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-5.0.2.tgz#62288f311ec2f35e066a30d5e0277f963ad43a67"
+  integrity sha512-3ReYQcIHmzSgMq8UrDZHFL0oGlbuVGdLKs8s/Fe8BfHFAyZDrdv1fy/AGn+Fim8ZuvAHcJ61NQhVMtyfHviT/g==
+  dependencies:
+    hast-util-from-parse5 "^5.0.0"
+    hast-util-to-parse5 "^5.0.0"
+    html-void-elements "^1.0.0"
+    parse5 "^5.0.0"
+    unist-util-position "^3.0.0"
+    web-namespaces "^1.0.0"
+    xtend "^4.0.0"
+    zwitch "^1.0.0"
+
 hast-util-sanitize@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-2.0.1.tgz#de2f32c5aa9e93b61903e4381be6c49887d3829e"
@@ -7041,6 +7203,57 @@ hast-util-sanitize@^2.0.0:
   dependencies:
     xtend "^4.0.1"
 
+hast-util-to-html@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-6.1.0.tgz#86bcd19c3bd46af456984f8f34db16298c2b10b0"
+  integrity sha512-IlC+LG2HGv0Y8js3wqdhg9O2sO4iVpRDbHOPwXd7qgeagpGsnY49i8yyazwqS35RA35WCzrBQE/n0M6GG/ewxA==
+  dependencies:
+    ccount "^1.0.0"
+    comma-separated-tokens "^1.0.1"
+    hast-util-is-element "^1.0.0"
+    hast-util-whitespace "^1.0.0"
+    html-void-elements "^1.0.0"
+    property-information "^5.2.0"
+    space-separated-tokens "^1.0.0"
+    stringify-entities "^2.0.0"
+    unist-util-is "^3.0.0"
+    xtend "^4.0.1"
+
+hast-util-to-parse5@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-5.1.2.tgz#09d27bee9ba9348ea05a6cfcc44e02f9083969b6"
+  integrity sha512-ZgYLJu9lYknMfsBY0rBV4TJn2xiwF1fXFFjbP6EE7S0s5mS8LIKBVWzhA1MeIs1SWW6GnnE4In6c3kPb+CWhog==
+  dependencies:
+    hast-to-hyperscript "^7.0.0"
+    property-information "^5.0.0"
+    web-namespaces "^1.0.0"
+    xtend "^4.0.0"
+    zwitch "^1.0.0"
+
+hast-util-to-text@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hast-util-to-text/-/hast-util-to-text-1.0.1.tgz#90d75c82084c10b260b6fe23a7a8f9b84d2d6b3c"
+  integrity sha512-Xvp9fWiWVb4WaHc1E1g6dtyYlcVwyjRT0CC9oXtVUNhbmIB1gqRVBuBIFJgrFkYxdo+T3UIl5i5ipPGaPRnUOw==
+  dependencies:
+    hast-util-is-element "^1.0.2"
+    repeat-string "^1.6.1"
+    unist-util-find-after "^2.0.3"
+
+hast-util-whitespace@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz#e4fe77c4a9ae1cb2e6c25e02df0043d0164f6e41"
+  integrity sha512-I5GTdSfhYfAPNztx2xJRQpG8cuDSNt599/7YUn7Gx/WxNMsG+a835k97TDkFgk123cwjfwINaZknkKkphx/f2A==
+
+hastscript@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.1.2.tgz#bde2c2e56d04c62dd24e8c5df288d050a355fb8a"
+  integrity sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ==
+  dependencies:
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 he@1.1.1, he@1.1.x:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -7056,6 +7269,11 @@ highlight.js@^9.12.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
   integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=
 
+highlight.js@~9.16.0:
+  version "9.16.2"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.16.2.tgz#68368d039ffe1c6211bcc07e483daf95de3e403e"
+  integrity sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw==
+
 history@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/history/-/history-3.3.0.tgz#fcedcce8f12975371545d735461033579a6dae9c"
@@ -7155,6 +7373,16 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.3.x"
 
+html-tags@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
+  integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
+
+html-void-elements@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
+  integrity sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==
+
 html-webpack-plugin@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
@@ -7187,6 +7415,18 @@ htmlparser2@^3.9.0, htmlparser2@^3.9.1:
     inherits "^2.0.1"
     readable-stream "^2.0.2"
 
+htmlparser2@^3.9.2:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
+  dependencies:
+    domelementtype "^1.3.1"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^3.1.1"
+
 htmlparser2@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
@@ -7330,7 +7570,7 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.1.2:
+ignore@^3.1.2, ignore@^3.3.3, ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
   integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
@@ -7374,6 +7614,14 @@ import-lazy@^2.1.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
   integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
 
+import-local@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-0.1.1.tgz#b1179572aacdc11c6a91009fb430dbcab5f668a8"
+  integrity sha1-sReVcqrNwRxqkQCftDDbyrX2aKg=
+  dependencies:
+    pkg-dir "^2.0.0"
+    resolve-cwd "^2.0.0"
+
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -7692,7 +7940,7 @@ is-boolean-object@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
   integrity sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=
 
-is-buffer@^1.0.2, is-buffer@^1.1.5, is-buffer@~1.1.1:
+is-buffer@^1.0.2, is-buffer@^1.1.4, is-buffer@^1.1.5, is-buffer@~1.1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
@@ -7719,6 +7967,13 @@ is-callable@^1.1.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
   integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
 
+is-ci@^1.0.10:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
+  dependencies:
+    ci-info "^1.5.0"
+
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -7937,6 +8192,11 @@ is-obj@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
   integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
 
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
 is-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
@@ -8890,6 +9150,11 @@ known-css-properties@^0.3.0:
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.3.0.tgz#a3d135bbfc60ee8c6eacf2f7e7e6f2d4755e49a4"
   integrity sha512-QMQcnKAiQccfQTqtBh/qwquGZ2XK/DXND1jrcN9M8gMMy99Gwla7GQjndVUsEqIaRyP6bsFRuhwRj5poafBGJQ==
 
+known-css-properties@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.5.0.tgz#6ff66943ed4a5b55657ee095779a91f4536f8084"
+  integrity sha512-LOS0CoS8zcZnB1EjLw4LLqDXw8nvt3AGH5dXLQP3D9O1nLLA+9GC5GnPl5mmF+JiQAtSX4VyZC7KvEtcA4kUtA==
+
 konva@^4.0.18:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/konva/-/konva-4.1.3.tgz#9ae6c47b86421243b599f22dba0e2fde8fbb5f15"
@@ -9207,6 +9472,11 @@ lodash.tail@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
   integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=
 
+lodash.toarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
+  integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
+
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
@@ -9308,6 +9578,14 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
   integrity sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=
 
+lowlight@^1.10.0, lowlight@^1.2.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.13.1.tgz#c4f0e03906ebd23fedf2d258f6ab2f6324cf90eb"
+  integrity sha512-kQ71/T6RksEVz9AlPq07/2m+SU/1kGvt9k39UtvHX760u4SaWakaYH7hYgH5n6sTsCWk4MVYzUzLU59aN5CSmQ==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~9.16.0"
+
 lru-cache@^4.0.0, lru-cache@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
@@ -9392,6 +9670,11 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
   integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
 
+map-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
+  integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
+
 map-stream@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"
@@ -9435,6 +9718,11 @@ math-random@^1.0.1:
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
   integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==
 
+mathml-tag-names@^2.0.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
+  integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
+
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -9591,6 +9879,21 @@ meow@^3.0.0, meow@^3.5.0, meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+meow@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-4.0.1.tgz#d48598f6f4b1472f35bf6317a95945ace347f975"
+  integrity sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==
+  dependencies:
+    camelcase-keys "^4.0.0"
+    decamelize-keys "^1.0.0"
+    loud-rejection "^1.0.0"
+    minimist "^1.1.3"
+    minimist-options "^3.0.1"
+    normalize-package-data "^2.3.4"
+    read-pkg-up "^3.0.0"
+    redent "^2.0.0"
+    trim-newlines "^2.0.0"
+
 merge-deep@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@@ -9627,7 +9930,7 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@^2.1.5:
+micromatch@^2.1.5, micromatch@^2.3.11:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
   integrity sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=
@@ -9775,6 +10078,14 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimist-options@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
+  integrity sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+
 minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -10104,6 +10415,13 @@ node-dir@^0.1.10:
   dependencies:
     minimatch "^3.0.2"
 
+node-emoji@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
+  integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
+  dependencies:
+    lodash.toarray "^4.4.0"
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -10376,6 +10694,11 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
+normalize-selector@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
+  integrity sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=
+
 normalize-url@^1.4.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
@@ -11015,6 +11338,13 @@ parse-json@^2.1.0, parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
+parse-json@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-3.0.0.tgz#fa6f47b18e23826ead32f263e744d0e1e847fb13"
+  integrity sha1-+m9HsY4jgm6tMvJj50TQ4ehH+xM=
+  dependencies:
+    error-ex "^1.3.1"
+
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -11045,6 +11375,11 @@ parse5@^4.0.0:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
   integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
 
+parse5@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+
 parseurl@~1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
@@ -11448,6 +11783,15 @@ postcss-filter-plugins@^2.0.0:
     postcss "^5.0.4"
     uniqid "^4.0.0"
 
+postcss-html@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.12.0.tgz#39b6adb4005dfc5464df7999c0f81c95bced7e50"
+  integrity sha512-KxKUpj7AY7nlCbLcTOYxdfJnGE7QFAfU2n95ADj1Q90RM/pOLdz8k3n4avOyRFs7MDQHcRzJQWM1dehCwJxisQ==
+  dependencies:
+    htmlparser2 "^3.9.2"
+    remark "^8.0.0"
+    unist-util-find-all-after "^1.0.1"
+
 postcss-inline-svg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-inline-svg/-/postcss-inline-svg-3.0.0.tgz#195da9f5487bf8f183b03f8a2a843b060ff00525"
@@ -11459,6 +11803,13 @@ postcss-inline-svg@^3.0.0:
     postcss "^6.0.1"
     postcss-value-parser "^3.2.3"
 
+postcss-less@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.5.tgz#a6f0ce180cf3797eeee1d4adc0e9e6d6db665609"
+  integrity sha512-QQIiIqgEjNnquc0d4b6HDOSFZxbFQoy4MPpli2lSLpKhMyBkKwwca2HFqu4xzxlKID/F2fxSOowwtKpgczhF7A==
+  dependencies:
+    postcss "^5.2.16"
+
 postcss-load-config@^1.1.0, postcss-load-config@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
@@ -11495,6 +11846,11 @@ postcss-loader@^2.0.8:
     postcss-load-config "^1.2.0"
     schema-utils "^0.3.0"
 
+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=
+
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
@@ -11824,6 +12180,33 @@ postcss-reporter@^5.0.0:
     log-symbols "^2.0.0"
     postcss "^6.0.8"
 
+postcss-resolve-nested-selector@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
+  integrity sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=
+
+postcss-safe-parser@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-3.0.1.tgz#b753eff6c7c0aea5e8375fbe4cde8bf9063ff142"
+  integrity sha1-t1Pv9sfArqXoN1++TN6L+QY/8UI=
+  dependencies:
+    postcss "^6.0.6"
+
+postcss-sass@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-sass/-/postcss-sass-0.2.0.tgz#e55516441e9526ba4b380a730d3a02e9eaa78c7a"
+  integrity sha512-cUmYzkP747fPCQE6d+CH2l1L4VSyIlAzZsok3HPjb5Gzsq3jE+VjpAdGlPsnQ310WKWI42sw+ar0UNN59/f3hg==
+  dependencies:
+    gonzales-pe "^4.0.3"
+    postcss "^6.0.6"
+
+postcss-scss@^1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-1.0.6.tgz#ab903f3bb20161bc177896462293a53d4bff5f7a"
+  integrity sha512-4EFYGHcEw+H3E06PT/pQQri06u/1VIIPjeJQaM8skB80vZuXMhp4cSNV5azmdNkontnOID/XYWEvEEELLFB1ww==
+  dependencies:
+    postcss "^6.0.23"
+
 postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
@@ -11842,6 +12225,15 @@ postcss-selector-parser@^3.0.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
+  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
+  dependencies:
+    dot-prop "^5.2.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-svgo@^2.1.1:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
@@ -11904,7 +12296,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.17, postcss@^6.0.8:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.14, postcss@^6.0.17, postcss@^6.0.23, postcss@^6.0.6, postcss@^6.0.8:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -11944,11 +12336,36 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-stylelint@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/prettier-stylelint/-/prettier-stylelint-0.4.2.tgz#62845e342f786218b008da69eef14f0a5c05bcfb"
+  integrity sha512-CmatjDsW8xKMtWg/Tc6/W02wC59p50kkItrXmkgbhR4b2EKMU5Pm55x1WuCahkkZeZoNVReWRxA8VL/s69mkBg==
+  dependencies:
+    cosmiconfig "^3.0.1"
+    debug "^3.0.1"
+    get-stdin "^5.0.1"
+    globby "^6.1.0"
+    ignore "^3.3.5"
+    import-local "^0.1.1"
+    meow "^3.7.0"
+    pify "^3.0.0"
+    prettier "^1.7.0"
+    resolve-from "^4.0.0"
+    stylelint "^8.1.1"
+    temp-write "^3.3.0"
+    tempy "^0.2.1"
+    update-notifier "^2.2.0"
+
 prettier@^1.17.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
   integrity sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==
 
+prettier@^1.7.0:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+
 pretty-bytes@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
@@ -12072,7 +12489,7 @@ prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-property-information@^5.3.0:
+property-information@^5.0.0, property-information@^5.2.0, property-information@^5.3.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.4.0.tgz#16e08f13f4e5c4a7be2e4ec431c01c4f8dba869a"
   integrity sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==
@@ -12214,6 +12631,11 @@ querystringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.0.tgz#7ded8dfbf7879dcc60d0a644ac6754b283ad17ef"
   integrity sha512-sluvZZ1YiTLD5jsqZcDmFyV2EwToyXZBfpoVOmktMmW+VEnhgakFHnasVph65fOjGPTWN0Nw3+XQaSeMayr0kg==
 
+quick-lru@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
+  integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
+
 raf-schd@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.0.tgz#9855756c5045ff4ed4516e14a47719387c3c907b"
@@ -12768,6 +13190,14 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
+  dependencies:
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
+
 reduce-css-calc@^1.2.6:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
@@ -12949,11 +13379,81 @@ regjsparser@^0.6.0:
   dependencies:
     jsesc "~0.5.0"
 
+rehype-highlight@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/rehype-highlight/-/rehype-highlight-3.1.0.tgz#99d4b8b79432ce07ed74c9c7497f7a094db77ad2"
+  integrity sha512-5MzqLWUUMS4II+jWisOzF4mIgXJxt+QI3yvXLO/tTdzXuwYMGA7vRR3H60BiGOtlL30N/2267oefm+zdh8lePw==
+  dependencies:
+    hast-util-to-text "^1.0.0"
+    lowlight "^1.10.0"
+    unist-util-visit "^1.1.0"
+
+rehype-raw@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-4.0.1.tgz#65e228469e129a2ca94fe47778132cb647fb9718"
+  integrity sha512-g74dPCUWeB9EBfTfGF3lGOHSnZwFwN1ssc3Je9OwQO9f8yTkkAIrMqUVxT34h8zpi4ICU051tTLBZbOrzRWpxg==
+  dependencies:
+    hast-util-raw "^5.0.0"
+
+rehype-react@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-react/-/rehype-react-5.0.0.tgz#7c08017b125d86839a13577851512cb4e23a2be4"
+  integrity sha512-siBd7cyMAgJv8yoLOm5Dh2izha2aoKMw01SKN0DTjeEO1r5mSQUjb6LZnGxWs/ip2Lfaso+CjZUXuPlJqC3S4g==
+  dependencies:
+    "@mapbox/hast-util-table-cell-style" "^0.1.3"
+    hast-to-hyperscript "^8.0.0"
+
+rehype-stringify@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-6.0.1.tgz#b6aa9f84d5276c5d247c62fc1ea15983a35a4575"
+  integrity sha512-JfEPRDD4DiG7jet4md7sY07v6ACeb2x+9HWQtRPm2iA6/ic31hCv1SNBUtpolJASxQ/D8gicXiviW4TJKEMPKQ==
+  dependencies:
+    hast-util-to-html "^6.0.0"
+    xtend "^4.0.0"
+
 relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-emoji@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.1.0.tgz#69165d1181b98a54ad5d9ef811003d53d7ebc7db"
+  integrity sha512-lDddGsxXURV01WS9WAiS9rO/cedO1pvr9tahtLhr6qCGFhHG4yZSJW3Ha4Nw9Uk1hLNmUBtPC0+m45Ms+xEitg==
+  dependencies:
+    emoticon "^3.2.0"
+    node-emoji "^1.10.0"
+    unist-util-visit "^2.0.2"
+
+remark-highlight.js@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/remark-highlight.js/-/remark-highlight.js-5.2.0.tgz#6d8d22085e0c76573744b7e3706fc232269f5b02"
+  integrity sha512-5tCr1CfdXDYzR8HCAnohlr1rK8DjUTFxEZdr+QEul5o13+EOEt5RrO8U6Znf8Faj5rVLcMJtxLPq6hHrZFo33A==
+  dependencies:
+    lowlight "^1.2.0"
+    unist-util-visit "^1.0.0"
+
+remark-parse@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-4.0.0.tgz#99f1f049afac80382366e2e0d0bd55429dd45d8b"
+  integrity sha512-XZgICP2gJ1MHU7+vQaRM+VA9HEL3X253uwUM/BGgx3iv6TH2B3bF3B8q00DKcyP9YrJV+/7WOWEWBFF/u8cIsw==
+  dependencies:
+    collapse-white-space "^1.0.2"
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    is-word-character "^1.0.0"
+    markdown-escapes "^1.0.0"
+    parse-entities "^1.0.2"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^1.0.0"
+    vfile-location "^2.0.0"
+    xtend "^4.0.1"
+
 remark-parse@^7.0.0, remark-parse@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-7.0.2.tgz#41e7170d9c1d96c3d32cf1109600a9ed50dba7cf"
@@ -12985,6 +13485,13 @@ remark-react@^6.0.0:
     hast-util-sanitize "^2.0.0"
     mdast-util-to-hast "^6.0.0"
 
+remark-rehype@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-5.0.0.tgz#dcf85b481bfaadf262ddde9b4ecefbb7f2673e70"
+  integrity sha512-tgo+AeOotuh9FnGMkEPbE6C3OfdARqqSxT0H/KNGAiTwJLiDoRSm6x/ytqPZTyYSiQ/exbi/kx7k6uUvqYL1wQ==
+  dependencies:
+    mdast-util-to-hast "^6.0.0"
+
 remark-slug@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-5.1.2.tgz#715ecdef8df1226786204b1887d31ab16aa24609"
@@ -12994,6 +13501,26 @@ remark-slug@^5.1.2:
     mdast-util-to-string "^1.0.0"
     unist-util-visit "^1.0.0"
 
+remark-stringify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-4.0.0.tgz#4431884c0418f112da44991b4e356cfe37facd87"
+  integrity sha512-xLuyKTnuQer3ke9hkU38SUYLiTmS078QOnoFavztmbt/pAJtNSkNtFgR0U//uCcmG0qnyxao+PDuatQav46F1w==
+  dependencies:
+    ccount "^1.0.0"
+    is-alphanumeric "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    longest-streak "^2.0.1"
+    markdown-escapes "^1.0.0"
+    markdown-table "^1.1.0"
+    mdast-util-compact "^1.0.0"
+    parse-entities "^1.0.2"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    stringify-entities "^1.0.1"
+    unherit "^1.0.4"
+    xtend "^4.0.1"
+
 remark-stringify@^7.0.0:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-7.0.4.tgz#3de1e3f93853288d3407da1cd44f2212321dd548"
@@ -13023,6 +13550,15 @@ remark@^11.0.2:
     remark-stringify "^7.0.0"
     unified "^8.2.0"
 
+remark@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-8.0.0.tgz#287b6df2fe1190e263c1d15e486d3fa835594d6d"
+  integrity sha512-K0PTsaZvJlXTl9DN6qYlvjTkqSZBFELhROZMrblm2rB+085flN84nz4g/BscKRMqDvhzlK1oQ/xnWQumdeNZYw==
+  dependencies:
+    remark-parse "^4.0.0"
+    remark-stringify "^4.0.0"
+    unified "^6.0.0"
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -13144,6 +13680,11 @@ require-from-string@^1.1.0:
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
   integrity sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=
 
+require-from-string@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
@@ -13873,6 +14414,11 @@ sisteransi@^1.0.0:
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.0.tgz#77d9622ff909080f1c19e5f4a1df0c1b0a27b88c"
   integrity sha512-N+z4pHB4AmUv0SjveWRd6q1Nj5w62m5jodv+GD8lvmbY/83T/rpbJGZOnK5T149OldDj4Db07BSv9xY4K6NTPQ==
 
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
+
 slash@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
@@ -13883,6 +14429,13 @@ slice-ansi@0.0.4:
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
   integrity sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=
 
+slice-ansi@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
+  integrity sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+
 slice-ansi@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
@@ -14069,6 +14622,11 @@ spdy@^4.0.0:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+specificity@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.3.2.tgz#99e6511eceef0f8d9b57924937aac2cb13d13c42"
+  integrity sha512-Nc/QN/A425Qog7j9aHmwOrlwX2e7pNI47ciwxwy4jOlvbbMHkNNJchit+FX+UjF3IAdiaaV5BKeWuDUnws6G1A==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -14310,6 +14868,16 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
+stringify-entities@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-1.3.2.tgz#a98417e5471fd227b3e45d3db1861c11caf668f7"
+  integrity sha512-nrBAQClJAPN2p+uGCVJRPIPakKeKWZ9GtBCmormE7pWOSlHat7+x5A8gx85M7HM5Dt0BP3pP5RhVW77WdbJJ3A==
+  dependencies:
+    character-entities-html4 "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 stringify-entities@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-2.0.0.tgz#fa7ca6614b355fb6c28448140a20c4ede7462827"
@@ -14381,6 +14949,11 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
+strip-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
+  integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
+
 strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -14399,6 +14972,11 @@ style-loader@^0.19.0:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
+style-search@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
+  integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
+
 style-to-object@^0.2.1:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.3.tgz#afcf42bc03846b1e311880c55632a26ad2780bcb"
@@ -14406,6 +14984,13 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
+style-to-object@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 stylehacks@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.0.tgz#64b323951c4a24e5fc7b2ec06c137bf32d155e8a"
@@ -14415,6 +15000,51 @@ stylehacks@^4.0.0:
     postcss "^6.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylelint@^8.1.1:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-8.4.0.tgz#c2dbaeb17236917819f9206e1c0df5fddf6f83c3"
+  integrity sha512-56hPH5mTFnk8LzlEuTWq0epa34fHuS54UFYQidBOFt563RJBNi1nz1F2HK2MoT1X1waq47milvRsRahFCCJs/Q==
+  dependencies:
+    autoprefixer "^7.1.2"
+    balanced-match "^1.0.0"
+    chalk "^2.0.1"
+    cosmiconfig "^3.1.0"
+    debug "^3.0.0"
+    execall "^1.0.0"
+    file-entry-cache "^2.0.0"
+    get-stdin "^5.0.1"
+    globby "^7.0.0"
+    globjoin "^0.1.4"
+    html-tags "^2.0.0"
+    ignore "^3.3.3"
+    imurmurhash "^0.1.4"
+    known-css-properties "^0.5.0"
+    lodash "^4.17.4"
+    log-symbols "^2.0.0"
+    mathml-tag-names "^2.0.1"
+    meow "^4.0.0"
+    micromatch "^2.3.11"
+    normalize-selector "^0.2.0"
+    pify "^3.0.0"
+    postcss "^6.0.6"
+    postcss-html "^0.12.0"
+    postcss-less "^1.1.0"
+    postcss-media-query-parser "^0.2.3"
+    postcss-reporter "^5.0.0"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-safe-parser "^3.0.1"
+    postcss-sass "^0.2.0"
+    postcss-scss "^1.0.2"
+    postcss-selector-parser "^3.1.0"
+    postcss-value-parser "^3.3.0"
+    resolve-from "^4.0.0"
+    specificity "^0.3.1"
+    string-width "^2.1.0"
+    style-search "^0.1.0"
+    sugarss "^1.0.0"
+    svg-tags "^1.0.0"
+    table "^4.0.1"
+
 sudo-block@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/sudo-block/-/sudo-block-1.2.0.tgz#cc539bf8191624d4f507d83eeb45b4cea27f3463"
@@ -14424,6 +15054,13 @@ sudo-block@^1.1.0:
     is-docker "^1.0.0"
     is-root "^1.0.0"
 
+sugarss@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-1.0.1.tgz#be826d9003e0f247735f92365dc3fd7f1bae9e44"
+  integrity sha512-3qgLZytikQQEVn1/FrhY7B68gPUUGY3R1Q1vTiD5xT+Ti1DP/8iZuwFet9ONs5+bmL8pZoDQ6JrQHVgrNlK6mA==
+  dependencies:
+    postcss "^6.0.14"
+
 supports-color@4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
@@ -14490,6 +15127,11 @@ svg-parser@^2.0.2:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.3.tgz#a38f2e4e5442986f7ecb554c11f1411cfcf8c2b9"
   integrity sha512-fnCWiifNhK8i2Z7b9R5tbNahpxrRdAaQbnoxKlT2KrSCj9Kq/yBSgulCRgBJRhy1dPnSY5slg5ehPUnzpEcHlg==
 
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+  integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
+
 svgo@^0.7.0, svgo@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -14554,6 +15196,18 @@ table@^3.7.8:
     slice-ansi "0.0.4"
     string-width "^2.0.0"
 
+table@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"
+  integrity sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==
+  dependencies:
+    ajv "^6.0.1"
+    ajv-keywords "^3.0.0"
+    chalk "^2.1.0"
+    lodash "^4.17.4"
+    slice-ansi "1.0.0"
+    string-width "^2.1.1"
+
 table@^5.2.3:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.0.tgz#d772a3216e68829920a41a32c18eda286c95d780"
@@ -14676,6 +15330,31 @@ tar@^4:
     safe-buffer "^5.1.2"
     yallist "^3.0.2"
 
+temp-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
+  integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=
+
+temp-write@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/temp-write/-/temp-write-3.4.0.tgz#8cff630fb7e9da05f047c74ce4ce4d685457d492"
+  integrity sha1-jP9jD7fp2gXwR8dM5M5NaFRX1JI=
+  dependencies:
+    graceful-fs "^4.1.2"
+    is-stream "^1.1.0"
+    make-dir "^1.0.0"
+    pify "^3.0.0"
+    temp-dir "^1.0.0"
+    uuid "^3.0.1"
+
+tempy@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.2.1.tgz#9038e4dbd1c201b74472214179bc2c6f7776e54c"
+  integrity sha512-LB83o9bfZGrntdqPuRdanIVCPReam9SOZKW0fOy5I9X3A854GGWi0tjCqoXEk84XIEYBc/x9Hq3EFop/H5wJaw==
+  dependencies:
+    temp-dir "^1.0.0"
+    unique-string "^1.0.0"
+
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -14909,6 +15588,11 @@ trim-newlines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
   integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
 
+trim-newlines@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
+  integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=
+
 trim-trailing-lines@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"
@@ -15092,6 +15776,18 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"
   integrity sha512-2WSLa6OdYd2ng8oqiGIWnJqyFArvhn+5vgx5GTxMbUYjCYKUcuKS62YLFF0R/BDGlB1yzXjQOLtPAfHsgirEpg==
 
+unified@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba"
+  integrity sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^1.1.0"
+    trough "^1.0.0"
+    vfile "^2.0.0"
+    x-is-string "^0.1.0"
+
 unified@^8.2.0:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
@@ -15158,6 +15854,20 @@ unist-builder@^1.0.1:
   dependencies:
     object-assign "^4.1.0"
 
+unist-util-find-after@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/unist-util-find-after/-/unist-util-find-after-2.0.4.tgz#3fcccf0df3a2e7291fa119224c0f22158357cc10"
+  integrity sha512-zo0ShIr+E/aU9xSK7JC9Kb+WP9seTFCuqVYdo5+HJSjN009XMfhiA1FIExEKzdDP1UsgvKGleGlB/pSdTSqZww==
+  dependencies:
+    unist-util-is "^3.0.0"
+
+unist-util-find-all-after@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-1.0.5.tgz#5751a8608834f41d117ad9c577770c5f2f1b2899"
+  integrity sha512-lWgIc3rrTMTlK1Y0hEuL+k+ApzFk78h+lsaa2gHf63Gp5Ww+mt11huDniuaoq1H+XMK2lIIjjPkncxXcDp3QDw==
+  dependencies:
+    unist-util-is "^3.0.0"
+
 unist-util-generated@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.5.tgz#1e903e68467931ebfaea386dae9ea253628acd42"
@@ -15168,6 +15878,11 @@ unist-util-is@^3.0.0:
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
   integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
 
+unist-util-is@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.0.2.tgz#c7d1341188aa9ce5b3cff538958de9895f14a5de"
+  integrity sha512-Ofx8uf6haexJwI1gxWMGg6I/dLnF2yE+KibhD3/diOqY2TinLcqHXCV6OI5gFVn3xQqDH+u0M625pfKwIwgBKQ==
+
 unist-util-position@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.0.4.tgz#5872be7aec38629b971fdb758051f78817b0040a"
@@ -15180,6 +15895,11 @@ unist-util-remove-position@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
+unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
+  integrity sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==
+
 unist-util-stringify-position@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.2.tgz#5a3866e7138d55974b640ec69a94bc19e0f3fa12"
@@ -15194,6 +15914,14 @@ unist-util-visit-parents@^2.0.0:
   dependencies:
     unist-util-is "^3.0.0"
 
+unist-util-visit-parents@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.0.2.tgz#d4076af3011739c71d2ce99d05de37d545f4351d"
+  integrity sha512-yJEfuZtzFpQmg1OSCyS9M5NJRrln/9FbYosH3iW0MG402QbdbaB8ZESwUv9RO6nRfLAKvWcMxCwdLWOov36x/g==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+
 unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
@@ -15201,6 +15929,15 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
   dependencies:
     unist-util-visit-parents "^2.0.0"
 
+unist-util-visit@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.2.tgz#3843782a517de3d2357b4c193b24af2d9366afb7"
+  integrity sha512-HoHNhGnKj6y+Sq+7ASo2zpVdfdRifhTgX2KTU3B/sO/TTlZchp7E3S4vjRzDJ7L60KmrCPsQkVK3lEF3cz36XQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+    unist-util-visit-parents "^3.0.0"
+
 universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
@@ -15264,6 +16001,22 @@ update-notifier@^2.1.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
+update-notifier@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
+  integrity sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==
+  dependencies:
+    boxen "^1.2.1"
+    chalk "^2.0.1"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-ci "^1.0.10"
+    is-installed-globally "^0.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
 upper-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
@@ -15457,6 +16210,13 @@ vfile-location@^2.0.0:
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
   integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
 
+vfile-message@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
+  integrity sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==
+  dependencies:
+    unist-util-stringify-position "^1.1.1"
+
 vfile-message@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.2.tgz#75ba05090ec758fa8420f2c11ce049bcddd8cf3e"
@@ -15465,6 +16225,16 @@ vfile-message@^2.0.0:
     "@types/unist" "^2.0.0"
     unist-util-stringify-position "^2.0.0"
 
+vfile@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a"
+  integrity sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==
+  dependencies:
+    is-buffer "^1.1.4"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^1.0.0"
+    vfile-message "^1.0.0"
+
 vfile@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.0.2.tgz#71af004d4a710b0e6be99c894655bc56126d5d56"
@@ -15674,7 +16444,7 @@ wdio-visual-regression-service@silne30/wdio-visual-regression-service#Add_Filena
     platform "^1.3.1"
     wdio-screenshot "^0.6.0"
 
-web-namespaces@^1.1.2:
+web-namespaces@^1.0.0, web-namespaces@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
   integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
@@ -16032,6 +16802,11 @@ ws@^4.0.0:
     safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
+x-is-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
+  integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
+
 xdg-basedir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-2.0.0.tgz#edbc903cc385fc04523d966a335504b5504d1bd2"
@@ -16371,3 +17146,8 @@ zip-stream@^1.2.0:
     compress-commons "^1.2.0"
     lodash "^4.8.0"
     readable-stream "^2.0.0"
+
+zwitch@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
+  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==

From 7583186174da952d2d3abed52b0a6ff90e14f65f Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 19 Mar 2020 15:47:47 +0000
Subject: [PATCH 16/43] Better coding highlight

---
 .../views/markdown_editor/markdown-example.md |  4 +-
 src/components/code/_code_block.scss          |  2 +-
 src/components/markdown_editor/_index.scss    |  1 -
 .../markdown_editor/_markdown_format.scss     | 79 +++++++---------
 .../_markdown_highlight_js.scss               | 94 -------------------
 .../markdown_editor/markdown_format.tsx       | 12 +++
 6 files changed, 47 insertions(+), 145 deletions(-)
 delete mode 100644 src/components/markdown_editor/_markdown_highlight_js.scss

diff --git a/src-docs/src/views/markdown_editor/markdown-example.md b/src-docs/src/views/markdown_editor/markdown-example.md
index 58724587b67..5e7a0807c7d 100644
--- a/src-docs/src/views/markdown_editor/markdown-example.md
+++ b/src-docs/src/views/markdown_editor/markdown-example.md
@@ -6,7 +6,7 @@
 ###### h6 Heading
 
 
-## Emphasis
+### Emphasis
 
 **This is bold text**
 
@@ -19,7 +19,7 @@ _This is italic text_
 ~~Strikethrough~~
 
 
-## Horizontal Rules
+### Horizontal Rules
 
 ___
 
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index 106e274c4fa..e80e6e2c845 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -123,7 +123,7 @@
     background: $euiCodeBlockBackgroundColor;
 
     .euiCodeBlock__pre {
-      padding:  0 $euiSizeXS;
+      padding: 0 $euiSizeXS;
     }
 
     .euiCodeBlock__code {
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index 4e101be94c6..521d3610e10 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -3,4 +3,3 @@
 @import 'markdown_format';
 @import 'markdown_editor_text_area';
 @import 'markdown_editor_toolbar';
-@import 'markdown_highlight_js';
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index fe3ef9dd51a..468255d46f9 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -1,13 +1,13 @@
 // Default styles for Markdown element
 //
-// 1. Links
+// 1. Links (EuiLink)
 // 2. Headings
 // 3. Images
 // 4. Blockquotes
 // 5. Horizontal rules
 // 6. Lists
 // 7. Tables
-// 8. Code blocks
+// 8. Code
 
 // Functions
 // Note: The inlined base font size is set in common/functions/font.js. It should match $euiMdFontSize.
@@ -76,26 +76,6 @@ $euiDefaultFontSize: 14px;
     font-weight: 600;
   }
 
-  // 1. Links
-  a {
-    color: inherit;
-    text-decoration: underline;
-  }
-
-  a:hover {
-    text-decoration: underline dotted;
-  }
-
-  a:active,
-  a:hover {
-    outline-width: 0;
-  }
-
-  a:not([href]) {
-    color: inherit;
-    text-decoration: none;
-  }
-
   // 2. Headings
   h1,
   h2,
@@ -144,6 +124,12 @@ $euiDefaultFontSize: 14px;
     text-transform: uppercase;
   }
 
+  h1,
+  h2 {
+    padding-bottom: .3em;
+    border-bottom: 1px solid $euiMarkdownAlphaLightShade;
+  }
+
   // 3. Images
   img {
     max-width: 100%;
@@ -235,6 +221,19 @@ $euiDefaultFontSize: 14px;
     margin-top: $euiMarkdownSizeXXS;
   }
 
+  .task-list-item {
+    list-style-type: none;
+  }
+
+  .task-list-item + .task-list-item {
+    margin-top: $euiMarkdownSizeXXS;
+  }
+
+  .task-list-item input {
+    margin: 0 .2em .25em -1.6em;
+    vertical-align: middle;
+  }
+
   // 7. Tables
   table {
     display: block;
@@ -266,39 +265,25 @@ $euiDefaultFontSize: 14px;
     border-top: 1px solid $euiMarkdownAlphaLightShade;
   }
 
-  // 8. Code blocks
-  code,
-  pre {
-    margin-bottom: $euiMarkdownSizeXS;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro',
-      monospace;
+  // 8. Code
+  .euiMarkdownFormat__code {
+    @include euiCodeFont;
+    color: $euiCodeBlockColor;
     font-size: $euiMarkdownFontSizeS;
-  }
-
-  code {
     padding: $euiMarkdownSizeXXS 0;
     margin: 0;
-    background-color: $euiMarkdownAlphaLightestShade;
+    margin-bottom: $euiMarkdownSizeXS;
+    background: $euiCodeBlockBackgroundColor;
     border-radius: $euiMarkdownSizeXXS;
   }
 
-  code::before,
-  code::after {
+  .euiMarkdownFormat__code::before,
+  .euiMarkdownFormat__code::after {
     letter-spacing: -.2em;
     content: '\00a0';
   }
 
-  pre {
-    padding: $euiMarkdownSize;
-    overflow: auto;
-    font-size: $euiMarkdownFontSizeS;
-    line-height: 1.333333em;
-    background-color: $euiMarkdownAlphaLightestShade;
-    border-radius: $euiMarkdownSizeXXS;
-    word-wrap: normal;
-  }
-
-  pre code {
+  pre .euiMarkdownFormat__code {
     display: inline;
     max-width: auto;
     padding: 0;
@@ -310,8 +295,8 @@ $euiDefaultFontSize: 14px;
     border: none;
   }
 
-  pre code::before,
-  pre code::after {
+  pre .euiMarkdownFormat__code::before,
+  pre .euiMarkdownFormat__code::after {
     content: normal;
   }
 }
diff --git a/src/components/markdown_editor/_markdown_highlight_js.scss b/src/components/markdown_editor/_markdown_highlight_js.scss
deleted file mode 100644
index 9463e477996..00000000000
--- a/src/components/markdown_editor/_markdown_highlight_js.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
-Atom One Light by Daniel Gamage
-Original One Light Syntax theme from https://github.com/atom/one-light-syntax
-*/
-
-$base: #FAFAFA;
-$mono1: #383A42;
-$mono2: #686B77;
-$mono3: #A0A1A7;
-$hue1: #0184BB;
-$hue2: #4078F2;
-$hue3: #A626A4;
-$hue4: #50A14F;
-$hue5: #E45649;
-$hue52: #C91243;
-$hue6: #986801;
-$hue62: #C18401;
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: .5em;
-  color: $mono1;
-  background: $base;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: $mono3;
-  font-style: italic;
-}
-
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
-  color: $hue3;
-}
-
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-  color: $hue5;
-}
-
-.hljs-literal {
-  color: $hue1;
-}
-
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string {
-  color: $hue4;
-}
-
-.hljs-built_in,
-.hljs-class .hljs-title {
-  color: $hue62;
-}
-
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-  color: $hue6;
-}
-
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-  color: $hue2;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 8fbde324143..3c196c5b3fd 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -11,6 +11,8 @@ import highlight from 'remark-highlight.js';
 import rehype2react from 'rehype-react';
 // @ts-ignore
 import row from 'rehype-raw';
+import { EuiCodeBlock } from '../code/code_block';
+import { EuiLink } from '../link/link';
 
 const processor = unified()
   .use(markdown)
@@ -20,6 +22,16 @@ const processor = unified()
   .use(row)
   .use(rehype2react, {
     createElement: createElement,
+    components: {
+      a: EuiLink,
+      code: (props: any) =>
+        // if has classNames is a codeBlock using highlight js
+        props.className ? (
+          <EuiCodeBlock {...props} />
+        ) : (
+          <code className="euiMarkdownFormat__code" {...props} />
+        ),
+    },
   });
 
 interface EuiMarkdownFormatProps {

From 8aa5b7f045fc8dfa38e0744175b503203403d84b Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 19 Mar 2020 19:35:24 +0000
Subject: [PATCH 17/43] Replacing UglifyJsPlugin with TerserPlugin

---
 package.json                                  |   6 +-
 src-docs/src/i18ntokens.json                  | 206 +++++----
 .../markdown_editor/_markdown_format.scss     |   8 +-
 .../markdown_editor/markdown_editor.tsx       |   1 -
 .../markdown_editor/markdown_format.tsx       |   5 +-
 src/webpack.config.js                         |  21 +-
 yarn.lock                                     | 402 ++++++++++--------
 7 files changed, 367 insertions(+), 282 deletions(-)

diff --git a/package.json b/package.json
index 8a13e5e4069..3901aa55b74 100644
--- a/package.json
+++ b/package.json
@@ -72,15 +72,13 @@
     "rehype-raw": "^4.0.1",
     "rehype-react": "^5.0.0",
     "rehype-stringify": "^6.0.1",
-    "remark": "^11.0.2",
     "remark-emoji": "^2.1.0",
     "remark-highlight.js": "^5.2.0",
     "remark-parse": "^7.0.2",
-    "remark-react": "^6.0.0",
     "remark-rehype": "^5.0.0",
-    "remark-slug": "^5.1.2",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
+    "unified": "^8.4.2",
     "uuid": "^3.1.0"
   },
   "devDependencies": {
@@ -197,8 +195,8 @@
     "shelljs": "^0.8.1",
     "start-server-and-test": "^1.1.4",
     "style-loader": "^0.19.0",
+    "terser-webpack-plugin": "^2.3.5",
     "typescript": "3.5.3",
-    "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.0.1",
     "wdio-chromedriver-service": "^0.1.2",
     "wdio-mocha-framework": "^0.5.13",
diff --git a/src-docs/src/i18ntokens.json b/src-docs/src/i18ntokens.json
index 5b23f70b81c..af6eeff42c8 100644
--- a/src-docs/src/i18ntokens.json
+++ b/src-docs/src/i18ntokens.json
@@ -1109,11 +1109,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 126,
+        "line": 130,
         "column": 8
       },
       "end": {
-        "line": 128,
+        "line": 132,
         "column": 46
       }
     },
@@ -1125,11 +1125,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 145,
+        "line": 149,
         "column": 12
       },
       "end": {
-        "line": 147,
+        "line": 151,
         "column": 37
       }
     },
@@ -1141,11 +1141,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 158,
+        "line": 162,
         "column": 16
       },
       "end": {
-        "line": 160,
+        "line": 164,
         "column": 49
       }
     },
@@ -1157,11 +1157,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 173,
+        "line": 177,
         "column": 16
       },
       "end": {
-        "line": 175,
+        "line": 179,
         "column": 45
       }
     },
@@ -1173,11 +1173,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 193,
+        "line": 197,
         "column": 12
       },
       "end": {
-        "line": 193,
+        "line": 197,
         "column": 76
       }
     },
@@ -1189,11 +1189,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 207,
+        "line": 212,
         "column": 12
       },
       "end": {
-        "line": 207,
+        "line": 212,
         "column": 76
       }
     },
@@ -1205,11 +1205,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 226,
         "column": 12
       },
       "end": {
-        "line": 220,
+        "line": 226,
         "column": 74
       }
     },
@@ -1221,11 +1221,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 240,
+        "line": 247,
         "column": 14
       },
       "end": {
-        "line": 240,
+        "line": 247,
         "column": 76
       }
     },
@@ -1237,11 +1237,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 247,
+        "line": 254,
         "column": 12
       },
       "end": {
-        "line": 257,
+        "line": 264,
         "column": 14
       }
     },
@@ -1253,11 +1253,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 129,
+        "line": 146,
         "column": 12
       },
       "end": {
-        "line": 132,
+        "line": 149,
         "column": 14
       }
     },
@@ -1269,11 +1269,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 168,
+        "line": 187,
         "column": 16
       },
       "end": {
-        "line": 168,
+        "line": 187,
         "column": 76
       }
     },
@@ -1285,11 +1285,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 170,
+        "line": 189,
         "column": 16
       },
       "end": {
-        "line": 170,
+        "line": 189,
         "column": 74
       }
     },
@@ -1301,11 +1301,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 177,
+        "line": 196,
         "column": 12
       },
       "end": {
-        "line": 186,
+        "line": 205,
         "column": 14
       }
     },
@@ -1568,84 +1568,36 @@
     "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",
+    "token": "euiMarkdownEditorToolbar.editor",
+    "defString": "Editor",
     "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
+        "line": 121,
+        "column": 18
       },
       "end": {
-        "line": 176,
-        "column": 62
-      }
-    },
-    "filepath": "src/components/markdown_editor/markdown_editor.tsx"
-  },
-  {
-    "token": "euiMarkdownEditor.edit",
-    "defString": "Edit",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 202,
+        "line": 124,
         "column": 20
-      },
-      "end": {
-        "line": 202,
-        "column": 77
       }
     },
-    "filepath": "src/components/markdown_editor/markdown_editor.tsx"
+    "filepath": "src/components/markdown_editor/markdown_editor_toolbar.tsx"
   },
   {
-    "token": "euiMarkdownEditor.previewMarkdown",
-    "defString": "Preview markdown",
+    "token": "euiMarkdownEditorToolbar.previewMarkdown",
+    "defString": "Preview",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 204,
-        "column": 20
+        "line": 126,
+        "column": 18
       },
       "end": {
-        "line": 207,
-        "column": 22
+        "line": 129,
+        "column": 20
       }
     },
-    "filepath": "src/components/markdown_editor/markdown_editor.tsx"
+    "filepath": "src/components/markdown_editor/markdown_editor_toolbar.tsx"
   },
   {
     "token": "euiModal.closeModal",
@@ -1983,6 +1935,86 @@
     },
     "filepath": "src/components/table/mobile/table_sort_mobile.tsx"
   },
+  {
+    "token": "euiTableHeaderCell.clickForDescending",
+    "defString": "Click to sort in descending order",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 111,
+        "column": 10
+      },
+      "end": {
+        "line": 114,
+        "column": 12
+      }
+    },
+    "filepath": "src/components/table/table_header_cell.tsx"
+  },
+  {
+    "token": "euiTableHeaderCell.clickForUnsort",
+    "defString": "Click to unsort",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 120,
+        "column": 10
+      },
+      "end": {
+        "line": 123,
+        "column": 12
+      }
+    },
+    "filepath": "src/components/table/table_header_cell.tsx"
+  },
+  {
+    "token": "euiTableHeaderCell.clickForAscending",
+    "defString": "Click to sort in ascending order",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 128,
+        "column": 8
+      },
+      "end": {
+        "line": 131,
+        "column": 10
+      }
+    },
+    "filepath": "src/components/table/table_header_cell.tsx"
+  },
+  {
+    "token": "euiTableHeaderCell.titleTextWithSort",
+    "defString": "{innerText}; Sorted in {ariaSortValue} order",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 152,
+        "column": 16
+      },
+      "end": {
+        "line": 155,
+        "column": 56
+      }
+    },
+    "filepath": "src/components/table/table_header_cell.tsx"
+  },
+  {
+    "token": "euiTableHeaderCell.sortedAriaLabel",
+    "defString": "Sorted in {ariaSortValue} order",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 169,
+        "column": 14
+      },
+      "end": {
+        "line": 172,
+        "column": 43
+      }
+    },
+    "filepath": "src/components/table/table_header_cell.tsx"
+  },
   {
     "token": "euiTablePagination.rowsPerPage",
     "defString": "Rows per page",
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 468255d46f9..e17441d0fc2 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -273,10 +273,14 @@ $euiDefaultFontSize: 14px;
     padding: $euiMarkdownSizeXXS 0;
     margin: 0;
     margin-bottom: $euiMarkdownSizeXS;
-    background: $euiCodeBlockBackgroundColor;
     border-radius: $euiMarkdownSizeXXS;
   }
 
+  pre,
+  .euiMarkdownFormat__code {
+    background: $euiCodeBlockBackgroundColor;
+  }
+
   .euiMarkdownFormat__code::before,
   .euiMarkdownFormat__code::after {
     letter-spacing: -.2em;
@@ -291,8 +295,6 @@ $euiDefaultFontSize: 14px;
     line-height: inherit;
     word-wrap: normal;
     white-space: pre;
-    background-color: transparent;
-    border: none;
   }
 
   pre .euiMarkdownFormat__code::before,
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index aa33fada79f..ec301fc6e4c 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -2,7 +2,6 @@ import React, { Component, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 import MarkdownActions from './markdown_actions';
-// import { EuiText } from '../text';
 import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
 import { EuiMarkdownFormat } from './markdown_format';
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 3c196c5b3fd..19ac3c20f35 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -9,8 +9,7 @@ import remark2rehype from 'remark-rehype';
 import highlight from 'remark-highlight.js';
 // @ts-ignore
 import rehype2react from 'rehype-react';
-// @ts-ignore
-import row from 'rehype-raw';
+
 import { EuiCodeBlock } from '../code/code_block';
 import { EuiLink } from '../link/link';
 
@@ -19,7 +18,7 @@ const processor = unified()
   .use(highlight)
   .use(emoji, { emoticon: true })
   .use(remark2rehype, { allowDangerousHTML: true })
-  .use(row)
+  // .use(row)
   .use(rehype2react, {
     createElement: createElement,
     components: {
diff --git a/src/webpack.config.js b/src/webpack.config.js
index e7c19b056f9..faad373c073 100644
--- a/src/webpack.config.js
+++ b/src/webpack.config.js
@@ -3,7 +3,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -27,6 +27,10 @@ const plugins = [
   }),
 ];
 
+const terserPlugin = new TerserPlugin({
+  sourceMap: true,
+});
+
 module.exports = {
   mode: isProduction ? 'production' : 'development',
 
@@ -80,16 +84,7 @@ module.exports = {
   },
 
   plugins,
+  optimization: {
+    minimizer: isProduction ? [terserPlugin] : [],
+  },
 };
-
-if (isProduction) {
-  const optimization = (module.exports.optimization =
-    module.exports.optimization || {});
-  optimization.minimizer = [
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        sourceMap: true,
-      },
-    }),
-  ];
-}
diff --git a/yarn.lock b/yarn.lock
index fc9fad0a064..155ce8634f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1627,6 +1627,14 @@ aggregate-error@^1.0.0:
     clean-stack "^1.0.0"
     indent-string "^3.0.0"
 
+aggregate-error@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.0.1.tgz#db2fe7246e536f40d9b5442a39e117d7dd6a24e0"
+  integrity sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
+
 airbnb-prop-types@^2.13.2:
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.13.2.tgz#43147a5062dd2a4a5600e748a47b64004cc5f7fc"
@@ -1681,7 +1689,7 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.3.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-ajv@^6.0.1:
+ajv@^6.0.1, ajv@^6.12.0:
   version "6.12.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.0.tgz#06d60b96d87b8454a5adaba86e7854da629db4b7"
   integrity sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==
@@ -2492,11 +2500,6 @@ bluebird@3.5.1, bluebird@^3.4.7:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
   integrity sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA==
 
-bluebird@^3.5.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.2.tgz#1be0908e054a751754549c270489c1505d4ab15a"
-  integrity sha512-dhHTWMI7kMx5whMQntl7Vr9C6BvV10lFXDAasnqnrMYhXVCzzk6IO9Fo2L75jXHT07WrOngL1WDXOp+yYS91Yg==
-
 bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@@ -2801,26 +2804,6 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-cacache@^11.2.0:
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.2.0.tgz#617bdc0b02844af56310e411c0878941d5739965"
-  integrity sha512-IFWl6lfK6wSeYCHUXh+N1lY72UDrpyrYQJNIVQf48paDuWbv5RbAtJYf/4gUQFObTCHZwdZ5sI8Iw7nqwP6nlQ==
-  dependencies:
-    bluebird "^3.5.1"
-    chownr "^1.0.1"
-    figgy-pudding "^3.1.0"
-    glob "^7.1.2"
-    graceful-fs "^4.1.11"
-    lru-cache "^4.1.3"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
-    move-concurrently "^1.0.1"
-    promise-inflight "^1.0.1"
-    rimraf "^2.6.2"
-    ssri "^6.0.0"
-    unique-filename "^1.1.0"
-    y18n "^4.0.0"
-
 cacache@^12.0.2:
   version "12.0.3"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
@@ -2842,6 +2825,30 @@ cacache@^12.0.2:
     unique-filename "^1.1.1"
     y18n "^4.0.0"
 
+cacache@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-13.0.1.tgz#a8000c21697089082f85287a1aec6e382024a71c"
+  integrity sha512-5ZvAxd05HDDU+y9BVvcqYu2LLXmPnQ0hW62h32g4xBTgL/MppR4/04NHfj/ycM2y6lmTnbw6HVi+1eN0Psba6w==
+  dependencies:
+    chownr "^1.1.2"
+    figgy-pudding "^3.5.1"
+    fs-minipass "^2.0.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.2"
+    infer-owner "^1.0.4"
+    lru-cache "^5.1.1"
+    minipass "^3.0.0"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.2"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    p-map "^3.0.0"
+    promise-inflight "^1.0.1"
+    rimraf "^2.7.1"
+    ssri "^7.0.0"
+    unique-filename "^1.1.1"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -3206,6 +3213,11 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
   integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
 
+chownr@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
 chroma-js@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.0.4.tgz#51ada59274856411630d45ea533d717018554cea"
@@ -3296,6 +3308,11 @@ clean-stack@^1.0.0:
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-1.3.0.tgz#9e821501ae979986c46b1d66d2d432db2fd4ae31"
   integrity sha1-noIVAa6XmYbEax1m0tQy2y/UrjE=
 
+clean-stack@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -3628,11 +3645,6 @@ commander@~2.13.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
   integrity sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==
 
-commander@~2.17.1:
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
-  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
-
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -5004,11 +5016,6 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-"emoji-regex@>=6.0.0 <=6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.1.tgz#c6cd0ec1b0642e2a3c67a1137efc5e796da4f88e"
-  integrity sha1-xs0OwbBkLio8Z6ETfvxeeW2k+I4=
-
 emoji-regex@^7.0.1, emoji-regex@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -6048,7 +6055,7 @@ fibers@~2.0.0:
   resolved "https://registry.yarnpkg.com/fibers/-/fibers-2.0.2.tgz#36db63ea61c543174e2264675fea8c2783371366"
   integrity sha512-HfVRxhYG7C8Jl9FqtrlElMR2z/8YiLQVDKf67MLY25Ic+ILx3ecmklfT1v3u+7P5/4vEFjuxaAFXhr2/Afwk5g==
 
-figgy-pudding@^3.1.0, figgy-pudding@^3.5.1:
+figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
   integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
@@ -6177,15 +6184,6 @@ find-cache-dir@^1.0.0:
     make-dir "^1.0.0"
     pkg-dir "^2.0.0"
 
-find-cache-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.0.0.tgz#4c1faed59f45184530fb9d7fa123a4d04a98472d"
-  integrity sha512-LDUY6V1Xs5eFskUVYtIwatojt6+9xC9Chnlk/jYOOvn3FAFfSaWddxahDGyNHh0b2dMXa6YW2m0tk8TdVaXHlA==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^1.0.0"
-    pkg-dir "^3.0.0"
-
 find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -6195,6 +6193,15 @@ find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
+find-cache-dir@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
+  integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
+
 find-root@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
@@ -6222,6 +6229,14 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 find-versions@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-1.2.1.tgz#cbde9f12e38575a0af1be1b9a2c5d5fd8f186b62"
@@ -6473,6 +6488,13 @@ fs-minipass@^1.2.5:
   dependencies:
     minipass "^2.2.1"
 
+fs-minipass@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
+  dependencies:
+    minipass "^3.0.0"
+
 fs-readdir-recursive@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
@@ -6668,13 +6690,6 @@ gh-got@^6.0.0:
     got "^7.0.0"
     is-plain-obj "^1.1.0"
 
-github-slugger@^1.0.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.2.1.tgz#47e904e70bf2dccd0014748142d31126cfd49508"
-  integrity sha512-SsZUjg/P03KPzQBt7OxJPasGw6NRO5uOgiZ5RGXVud5iSIZ0eNZeNp5rTwCxtavrRUa/A77j8mePVc5lEvk0KQ==
-  dependencies:
-    emoji-regex ">=6.0.0 <=6.1.1"
-
 github-username@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/github-username/-/github-username-4.1.0.tgz#cbe280041883206da4212ae9e4b5f169c30bf417"
@@ -6969,6 +6984,11 @@ graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
   integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
 
+graceful-fs@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+
 grapheme-splitter@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
@@ -7050,6 +7070,11 @@ has-flag@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
 has-symbol-support-x@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.1.tgz#66ec2e377e0c7d7ccedb07a3a84d77510ff1bc4c"
@@ -7199,13 +7224,6 @@ hast-util-raw@^5.0.0:
     xtend "^4.0.0"
     zwitch "^1.0.0"
 
-hast-util-sanitize@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-2.0.1.tgz#de2f32c5aa9e93b61903e4381be6c49887d3829e"
-  integrity sha512-Hk9YC6+HURcdNuBFaPP5nX6xK6zPnm0Dr6QnU4hvvXoStzH5nLI1u71wux6u3fbEQk3/+kTEIcyxRtCA0jt9RA==
-  dependencies:
-    xtend "^4.0.1"
-
 hast-util-to-html@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-6.1.0.tgz#86bcd19c3bd46af456984f8f34db16298c2b10b0"
@@ -7663,6 +7681,11 @@ indent-string@^3.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
   integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
 
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -7673,7 +7696,7 @@ indexof@0.0.1:
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
   integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
 
-infer-owner@^1.0.3:
+infer-owner@^1.0.3, infer-owner@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
   integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
@@ -8883,6 +8906,14 @@ jest-worker@^24.0.0:
     merge-stream "^1.0.1"
     supports-color "^6.1.0"
 
+jest-worker@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.1.0.tgz#75d038bad6fdf58eba0d2ec1835856c497e3907a"
+  integrity sha512-ZHhHtlxOWSxCoNOKHGbiLzXnl42ga9CxDr27H36Qn+15pQZd3R/F24jrmjDelw9j/iHUIWMWs08/u2QN50HHOg==
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
 jest@^24.1.0:
   version "24.1.0"
   resolved "https://registry.yarnpkg.com/jest/-/jest-24.1.0.tgz#b1e1135caefcf2397950ecf7f90e395fde866fd2"
@@ -9379,6 +9410,13 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 lodash-es@^4.2.1:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
@@ -9618,14 +9656,6 @@ lru-cache@^4.0.0, lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-lru-cache@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c"
-  integrity sha512-fFEhvcgzuIoJVUF8fYr5KR0YqxD238zgObTps31YdADwPPAp82a4M8TrckkWyx7ekNlf9aBcVn81cFwwXngrJA==
-  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
-
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -9665,6 +9695,13 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
+make-dir@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.0.2.tgz#04a1acbf22221e1d6ef43559f43e05a90dbb4392"
+  integrity sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==
+  dependencies:
+    semver "^6.0.0"
+
 makeerror@1.0.x:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
@@ -9795,11 +9832,6 @@ mdast-util-to-hast@^6.0.0:
     unist-util-visit "^1.1.0"
     xtend "^4.0.1"
 
-mdast-util-to-string@^1.0.0:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.0.7.tgz#62d8e9c6b2113070d8b497c7dc35bf12796f06ee"
-  integrity sha512-P+gdtssCoHOX+eJUrrC30Sixqao86ZPlVjR5NEAoy0U79Pfxb1Y0Gntei0+GrnQD4T04X9xA8tcugp90cSmNow==
-
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -9939,6 +9971,11 @@ merge-stream@^1.0.1:
   dependencies:
     readable-stream "^2.0.1"
 
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
 merge@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
@@ -10130,6 +10167,27 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
   integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
+minipass-collect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
+  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-flush@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
+  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-pipeline@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz#3dcb6bb4a546e32969c7ad710f2c79a86abba93a"
+  integrity sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==
+  dependencies:
+    minipass "^3.0.0"
+
 minipass@^2.2.1:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.2.4.tgz#03c824d84551ec38a8d1bb5bc350a5a30a354a40"
@@ -10146,6 +10204,13 @@ minipass@^2.3.3:
     safe-buffer "^5.1.2"
     yallist "^3.0.0"
 
+minipass@^3.0.0, minipass@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5"
+  integrity sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==
+  dependencies:
+    yallist "^4.0.0"
+
 minizlib@^1.0.4, minizlib@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.1.tgz#6734acc045a46e61d596a43bb9d9cd326e19cc42"
@@ -11163,6 +11228,13 @@ p-limit@^2.0.0:
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^2.2.0, p-limit@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.2.tgz#61279b67721f5287aa1c13a9a7fbbc48c9291b1e"
+  integrity sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==
+  dependencies:
+    p-try "^2.0.0"
+
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -11177,6 +11249,13 @@ p-locate@^3.0.0:
   dependencies:
     p-limit "^2.0.0"
 
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-map@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
@@ -11187,6 +11266,13 @@ p-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
   integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
 
+p-map@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
+  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
 p-reduce@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
@@ -11436,6 +11522,11 @@ path-exists@^3.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
   integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
 
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -11592,6 +11683,13 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
+pkg-dir@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
 pkginfo@0.3.x:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.3.1.tgz#5b29f6a81f70717142e09e765bbeab97b4f81e21"
@@ -13477,7 +13575,7 @@ remark-parse@^4.0.0:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-parse@^7.0.0, remark-parse@^7.0.2:
+remark-parse@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-7.0.2.tgz#41e7170d9c1d96c3d32cf1109600a9ed50dba7cf"
   integrity sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==
@@ -13498,16 +13596,6 @@ remark-parse@^7.0.0, remark-parse@^7.0.2:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-react@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/remark-react/-/remark-react-6.0.0.tgz#2bc46ce2ba74a8561d8984bf7885b5eb1ebc8273"
-  integrity sha512-5g73p8ZuqKoSdKByEf6IbXtVaHnbSEV0aamhIIqpzeNvj1wWDPX0USSPs4Gf3ZAsQIehIp6QiqJIbbXpq74bug==
-  dependencies:
-    "@mapbox/hast-util-table-cell-style" "^0.1.3"
-    hast-to-hyperscript "^7.0.0"
-    hast-util-sanitize "^2.0.0"
-    mdast-util-to-hast "^6.0.0"
-
 remark-rehype@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-5.0.0.tgz#dcf85b481bfaadf262ddde9b4ecefbb7f2673e70"
@@ -13515,15 +13603,6 @@ remark-rehype@^5.0.0:
   dependencies:
     mdast-util-to-hast "^6.0.0"
 
-remark-slug@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-5.1.2.tgz#715ecdef8df1226786204b1887d31ab16aa24609"
-  integrity sha512-DWX+Kd9iKycqyD+/B+gEFO3jjnt7Yg1O05lygYSNTe5i5PIxxxPjp5qPBDxPIzp5wreF7+1ROCwRgjEcqmzr3A==
-  dependencies:
-    github-slugger "^1.0.0"
-    mdast-util-to-string "^1.0.0"
-    unist-util-visit "^1.0.0"
-
 remark-stringify@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-4.0.0.tgz#4431884c0418f112da44991b4e356cfe37facd87"
@@ -13544,35 +13623,6 @@ remark-stringify@^4.0.0:
     unherit "^1.0.4"
     xtend "^4.0.1"
 
-remark-stringify@^7.0.0:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-7.0.4.tgz#3de1e3f93853288d3407da1cd44f2212321dd548"
-  integrity sha512-qck+8NeA1D0utk1ttKcWAoHRrJxERYQzkHDyn+pF5Z4whX1ug98uCNPPSeFgLSaNERRxnD6oxIug6DzZQth6Pg==
-  dependencies:
-    ccount "^1.0.0"
-    is-alphanumeric "^1.0.0"
-    is-decimal "^1.0.0"
-    is-whitespace-character "^1.0.0"
-    longest-streak "^2.0.1"
-    markdown-escapes "^1.0.0"
-    markdown-table "^1.1.0"
-    mdast-util-compact "^1.0.0"
-    parse-entities "^1.0.2"
-    repeat-string "^1.5.4"
-    state-toggle "^1.0.0"
-    stringify-entities "^2.0.0"
-    unherit "^1.0.4"
-    xtend "^4.0.1"
-
-remark@^11.0.2:
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/remark/-/remark-11.0.2.tgz#12b90ea100ac3362b1976fa87a6e4e0ab5968202"
-  integrity sha512-bh+eJgn8wgmbHmIBOuwJFdTVRVpl3fcVP6HxmpPWO0ULGP9Qkh6INJh0N5Uy7GqlV7DQYGoqaKiEIpM5LLvJ8w==
-  dependencies:
-    remark-parse "^7.0.0"
-    remark-stringify "^7.0.0"
-    unified "^8.2.0"
-
 remark@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/remark/-/remark-8.0.0.tgz#287b6df2fe1190e263c1d15e486d3fa835594d6d"
@@ -13835,7 +13885,7 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
-rimraf@2, rimraf@2.x.x, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
+rimraf@2, rimraf@2.x.x, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -14111,6 +14161,14 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^2.6.4:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.5.tgz#c758f0a7e624263073d396e29cd40aa101152d8a"
+  integrity sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==
+  dependencies:
+    ajv "^6.12.0"
+    ajv-keywords "^3.4.1"
+
 scoped-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
@@ -14207,7 +14265,7 @@ semver@^5.6.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
   integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
 
-semver@^6.3.0:
+semver@^6.0.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -14236,11 +14294,6 @@ send@0.16.1:
     range-parser "~1.2.0"
     statuses "~1.3.1"
 
-serialize-javascript@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.5.0.tgz#1aa336162c88a890ddad5384baebc93a655161fe"
-  integrity sha512-Ga8c8NjAAp46Br4+0oZ2WxJCwIzwP60Gq1YPgU+39PiTVxyed/iKE/zyZI6+UlVYH5Q4PaQdHhcegIFPZTUfoQ==
-
 serialize-javascript@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
@@ -14647,13 +14700,21 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
-ssri@^6.0.0, ssri@^6.0.1:
+ssri@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
   integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
   dependencies:
     figgy-pudding "^3.5.1"
 
+ssri@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-7.1.0.tgz#92c241bf6de82365b5c7fb4bd76e975522e1294d"
+  integrity sha512-77/WrDZUWocK0mvA5NTRQyveUf+wsrIc6vyrxpS8tVvYBcX215QbafrJR3KtkpskIzoFLqqNuuYQvxaMjXJ/0g==
+  dependencies:
+    figgy-pudding "^3.5.1"
+    minipass "^3.1.1"
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -15101,6 +15162,13 @@ supports-color@^6.0.0, supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
 supports-color@~5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.0.1.tgz#1c5331f22250c84202805b2f17adf16699f3a39a"
@@ -15371,6 +15439,21 @@ terser-webpack-plugin@^1.4.3:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
+terser-webpack-plugin@^2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.5.tgz#5ad971acce5c517440ba873ea4f09687de2f4a81"
+  integrity sha512-WlWksUoq+E4+JlJ+h+U+QUzXpcsMSSNXkDy9lBVkSqDn1w23Gg29L/ary9GeJVYCGiNJJX7LnVc4bwL1N3/g1w==
+  dependencies:
+    cacache "^13.0.1"
+    find-cache-dir "^3.2.0"
+    jest-worker "^25.1.0"
+    p-limit "^2.2.2"
+    schema-utils "^2.6.4"
+    serialize-javascript "^2.1.2"
+    source-map "^0.6.1"
+    terser "^4.4.3"
+    webpack-sources "^1.4.3"
+
 terser@^4.1.2:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.3.tgz#e33aa42461ced5238d352d2df2a67f21921f8d87"
@@ -15380,6 +15463,15 @@ terser@^4.1.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+terser@^4.4.3:
+  version "4.6.7"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.7.tgz#478d7f9394ec1907f0e488c5f6a6a9a2bad55e72"
+  integrity sha512-fmr7M1f7DBly5cX2+rFDvmGBAaaZyPrHYK4mMdHEDAdNTqXSZgSOfqsfGq2HqPGT/1V0foZZuCZFx8CHKgAk3g==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
 test-exclude@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.1.0.tgz#6ba6b25179d2d38724824661323b73e03c0c1de1"
@@ -15699,14 +15791,6 @@ uglify-js@3.3.x:
     commander "~2.13.0"
     source-map "~0.6.1"
 
-uglify-js@^3.0.0:
-  version "3.4.9"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
-  integrity sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==
-  dependencies:
-    commander "~2.17.1"
-    source-map "~0.6.1"
-
 uglify-js@^3.1.4:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.2.tgz#cb1a601e67536e9ed094a92dd1e333459643d3f9"
@@ -15715,20 +15799,6 @@ uglify-js@^3.1.4:
     commander "~2.20.3"
     source-map "~0.6.1"
 
-uglifyjs-webpack-plugin@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.0.1.tgz#f346af53ed496ce72fef462517d417f62bec3010"
-  integrity sha512-1HhCHkOB6wRCcv7htcz1QRPVbWPEY074RP9vzt/X0LF4xXm9l4YGd0qja7z88abDixQlnVwBjXsTBs+Xsn/eeQ==
-  dependencies:
-    cacache "^11.2.0"
-    find-cache-dir "^2.0.0"
-    schema-utils "^1.0.0"
-    serialize-javascript "^1.4.0"
-    source-map "^0.6.1"
-    uglify-js "^3.0.0"
-    webpack-sources "^1.1.0"
-    worker-farm "^1.5.2"
-
 ultron@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
@@ -15782,7 +15852,7 @@ unified@^6.0.0:
     vfile "^2.0.0"
     x-is-string "^0.1.0"
 
-unified@^8.2.0:
+unified@^8.4.2:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
   integrity sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==
@@ -15820,7 +15890,7 @@ uniqs@^2.0.0:
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
   integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
 
-unique-filename@^1.1.0, unique-filename@^1.1.1:
+unique-filename@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
   integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
@@ -16546,15 +16616,7 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
-webpack-sources@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
-  integrity sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==
-  dependencies:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
-
-webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
@@ -16710,13 +16772,6 @@ wordwrap@~1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
 
-worker-farm@^1.5.2:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.6.0.tgz#aecc405976fab5a95526180846f0dba288f3a4a0"
-  integrity sha512-6w+3tHbM87WnSWnENBUvA2pxJPLhQUg5LKwUQHq3r+XPhIM+Gh2R5ycbwPCyuGbNg+lPgdcnQUhuC02kJCvffQ==
-  dependencies:
-    errno "~0.1.7"
-
 worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
@@ -16884,6 +16939,11 @@ yallist@^3.0.0, yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
   integrity sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=
 
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
 yaml@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.7.2.tgz#f26aabf738590ab61efaca502358e48dc9f348b2"

From b87737805926105d5960ae0a3eaea37a6c76ff7d Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 20 Mar 2020 13:51:46 +0000
Subject: [PATCH 18/43] Adding button enter key and buttons tooltips

---
 .../markdown_editor.test.tsx.snap             | 207 ++++++++++--------
 .../markdown_editor/_markdown_format.scss     |   1 -
 .../markdown_editor/markdown_editor.tsx       |   6 +-
 .../markdown_editor_toolbar.tsx               | 104 +++++----
 4 files changed, 171 insertions(+), 147 deletions(-)

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 42a36cdb2db..bb28c04d325 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -15,123 +15,140 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero euiMarkdownEditor__toolbar__buttons"
       >
-        <button
-          aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--text"
-          type="button"
+        <span
+          class="euiToolTipAnchor"
         >
-          <div
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            data-euiicon-type="editorBold"
-          />
-        </button>
-        <button
-          aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--text"
-          type="button"
+          <button
+            aria-label="Bold"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="editorBold"
+            />
+          </button>
+        </span>
+        <span
+          class="euiToolTipAnchor"
         >
-          <div
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            data-euiicon-type="editorItalic"
-          />
-        </button>
+          <button
+            aria-label="Italic"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="editorItalic"
+            />
+          </button>
+        </span>
         <span
           class="euiMarkdownEditor__toolbar__divider"
         />
-        <button
-          aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--text"
-          type="button"
+        <span
+          class="euiToolTipAnchor"
         >
-          <div
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            data-euiicon-type="editorUnorderedList"
-          />
-        </button>
-        <button
-          aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--text"
-          type="button"
+          <button
+            aria-label="Unordered list"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="editorUnorderedList"
+            />
+          </button>
+        </span>
+        <span
+          class="euiToolTipAnchor"
         >
-          <div
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            data-euiicon-type="editorOrderedList"
-          />
-        </button>
+          <button
+            aria-label="Ordered list"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="editorOrderedList"
+            />
+          </button>
+        </span>
         <span
           class="euiMarkdownEditor__toolbar__divider"
         />
-        <button
-          aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--text"
-          type="button"
+        <span
+          class="euiToolTipAnchor"
         >
-          <div
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            data-euiicon-type="editorComment"
-          />
-        </button>
-        <button
-          aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--text"
-          type="button"
+          <button
+            aria-label="Quote"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="editorComment"
+            />
+          </button>
+        </span>
+        <span
+          class="euiToolTipAnchor"
         >
-          <div
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            data-euiicon-type="editorCodeBlock"
-          />
-        </button>
-        <button
-          aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--text"
-          type="button"
+          <button
+            aria-label="Code"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="editorCodeBlock"
+            />
+          </button>
+        </span>
+        <span
+          class="euiToolTipAnchor"
         >
-          <div
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            data-euiicon-type="editorLink"
-          />
-        </button>
+          <button
+            aria-label="Link"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="editorLink"
+            />
+          </button>
+        </span>
       </div>
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
-        <div
-          class="euiToggle euiButtonToggle__wrapper"
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+          type="button"
         >
-          <input
-            aria-label=""
-            class="euiToggle__input euiButtonToggle__input"
-            title=""
-            type="checkbox"
-          />
-          <button
-            class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isEmpty"
-            tabindex="-1"
-            type="button"
+          <span
+            class="euiButtonEmpty__content"
           >
+            <div
+              aria-hidden="true"
+              class="euiButtonEmpty__icon"
+              data-euiicon-type="eye"
+            />
             <span
-              class="euiButton__content"
+              class="euiButtonEmpty__text"
             >
-              <div
-                aria-hidden="true"
-                class="euiButton__icon"
-                data-euiicon-type="eye"
-              />
-              <span
-                class="euiButton__text"
-              >
-                Preview
-              </span>
+              Preview
             </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index e17441d0fc2..2b1a4745294 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -290,7 +290,6 @@ $euiDefaultFontSize: 14px;
   pre .euiMarkdownFormat__code {
     display: inline;
     max-width: auto;
-    padding: 0;
     overflow: visible;
     line-height: inherit;
     word-wrap: normal;
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index ec301fc6e4c..fe42aec6e3f 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -59,8 +59,8 @@ export class EuiMarkdownEditor extends Component<
     this.markdownActions.do(mdButtonId);
   };
 
-  onTogglePreview = (e: any) => {
-    this.setState({ viewMarkdownPreview: e.target.checked });
+  onClickPreview = () => {
+    this.setState({ viewMarkdownPreview: !this.state.viewMarkdownPreview });
   };
 
   onAttachFiles = (files: FileList | null) => {
@@ -81,7 +81,7 @@ export class EuiMarkdownEditor extends Component<
       <div className={classes} {...rest}>
         <EuiMarkdownEditorToolbar
           markdownActions={this.markdownActions}
-          onTogglePreview={this.onTogglePreview}
+          onClickPreview={this.onClickPreview}
           viewMarkdownPreview={viewMarkdownPreview}
         />
 
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 8dcfb29ffa8..007c89d9be3 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -1,14 +1,15 @@
 import React, { Component, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
-import { EuiButtonToggle, EuiButtonIcon } from '../button';
+import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiFlexItem, EuiFlexGroup } from '../flex';
 import { EuiI18n } from '../i18n';
+import { EuiToolTip } from '../tool_tip';
 
 export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     markdownActions?: any;
     viewMarkdownPreview?: boolean;
-    onTogglePreview?: any;
+    onClickPreview?: any;
   };
 
 export class EuiMarkdownEditorToolbar extends Component<
@@ -66,11 +67,12 @@ export class EuiMarkdownEditorToolbar extends Component<
   ];
 
   handleMdButtonClick = (mdButtonId: string) => {
+    console.log('button clicked');
     this.props.markdownActions.do(mdButtonId);
   };
 
   render() {
-    const { viewMarkdownPreview, onTogglePreview } = this.props;
+    const { viewMarkdownPreview, onClickPreview } = this.props;
 
     return (
       <div className="euiMarkdownEditor__toolbar">
@@ -79,61 +81,67 @@ export class EuiMarkdownEditorToolbar extends Component<
             grow={false}
             className="euiMarkdownEditor__toolbar__buttons">
             {this.boldItalicButtons.map(item => (
-              <EuiButtonIcon
-                key={item.id}
-                color="text"
-                onClick={() => this.handleMdButtonClick(item.id)}
-                iconType={item.iconType}
-                aria-label={item.label}
-                isDisabled={viewMarkdownPreview}
-              />
+              <EuiToolTip key={item.id} content={item.label} delay="long">
+                <EuiButtonIcon
+                  color="text"
+                  onClick={() => this.handleMdButtonClick(item.id)}
+                  iconType={item.iconType}
+                  aria-label={item.label}
+                  isDisabled={viewMarkdownPreview}
+                />
+              </EuiToolTip>
             ))}
             <span className="euiMarkdownEditor__toolbar__divider" />
             {this.listButtons.map(item => (
-              <EuiButtonIcon
-                key={item.id}
-                color="text"
-                onClick={() => this.handleMdButtonClick(item.id)}
-                iconType={item.iconType}
-                aria-label={item.label}
-                isDisabled={viewMarkdownPreview}
-              />
+              <EuiToolTip key={item.id} content={item.label} delay="long">
+                <EuiButtonIcon
+                  color="text"
+                  onClick={() => this.handleMdButtonClick(item.id)}
+                  iconType={item.iconType}
+                  aria-label={item.label}
+                  isDisabled={viewMarkdownPreview}
+                />
+              </EuiToolTip>
             ))}
             <span className="euiMarkdownEditor__toolbar__divider" />
             {this.quoteCodeLinkButtons.map(item => (
-              <EuiButtonIcon
-                key={item.id}
-                color="text"
-                onClick={() => this.handleMdButtonClick(item.id)}
-                iconType={item.iconType}
-                aria-label={item.label}
-                isDisabled={viewMarkdownPreview}
-              />
+              <EuiToolTip key={item.id} content={item.label} delay="long">
+                <EuiButtonIcon
+                  color="text"
+                  onClick={() => this.handleMdButtonClick(item.id)}
+                  iconType={item.iconType}
+                  aria-label={item.label}
+                  isDisabled={viewMarkdownPreview}
+                />
+              </EuiToolTip>
             ))}
           </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
-            <EuiButtonToggle
-              color="text"
-              size="s"
-              label={
-                viewMarkdownPreview ? (
-                  <EuiI18n
-                    token="euiMarkdownEditorToolbar.editor"
-                    default="Editor"
-                  />
-                ) : (
-                  <EuiI18n
-                    token="euiMarkdownEditorToolbar.previewMarkdown"
-                    default="Preview"
-                  />
-                )
-              }
-              iconType={viewMarkdownPreview ? 'editorCodeBlock' : 'eye'}
-              onChange={onTogglePreview}
-              isSelected={viewMarkdownPreview}
-              isEmpty
-            />
+            {/* The idea was to use the EuiButtonToggle but it doesn't work when pressing the enter key */}
+            {viewMarkdownPreview ? (
+              <EuiButtonEmpty
+                iconType="editorCodeBlock"
+                color="text"
+                size="s"
+                onClick={onClickPreview}>
+                <EuiI18n
+                  token="euiMarkdownEditorToolbar.editor"
+                  default="Editor"
+                />
+              </EuiButtonEmpty>
+            ) : (
+              <EuiButtonEmpty
+                iconType="eye"
+                color="text"
+                size="s"
+                onClick={onClickPreview}>
+                <EuiI18n
+                  token="euiMarkdownEditorToolbar.previewMarkdown"
+                  default="Preview"
+                />
+              </EuiButtonEmpty>
+            )}
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>

From d1b922329e55cb6fdffdf5f93f458bae96577c88 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 20 Mar 2020 19:51:16 +0000
Subject: [PATCH 19/43] More code highlight fixes

---
 package.json                                  |  1 -
 .../views/markdown_editor/markdown-example.md |  2 +-
 .../markdown_editor.test.tsx.snap             |  2 +-
 .../markdown_editor/_markdown_format.scss     | 12 +++-----
 .../markdown_editor_toolbar.tsx               |  6 ++--
 yarn.lock                                     | 29 ++-----------------
 6 files changed, 12 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index 3901aa55b74..1bba0747367 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,6 @@
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
     "react-virtualized": "^9.21.2",
-    "rehype-highlight": "^3.1.0",
     "rehype-raw": "^4.0.1",
     "rehype-react": "^5.0.0",
     "rehype-stringify": "^6.0.1",
diff --git a/src-docs/src/views/markdown_editor/markdown-example.md b/src-docs/src/views/markdown_editor/markdown-example.md
index d7559710fc2..7b48ac21afa 100644
--- a/src-docs/src/views/markdown_editor/markdown-example.md
+++ b/src-docs/src/views/markdown_editor/markdown-example.md
@@ -81,7 +81,7 @@ var foo = function (bar) {
 console.log(foo(5));
 ```
 
-Syntax highlighting 
+Syntax highlighting Java
 
 ``` java
 package l2f.gameserver.model;
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index bb28c04d325..5c1842a7c09 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
     class="euiMarkdownEditor__toolbar"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
     >
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero euiMarkdownEditor__toolbar__buttons"
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 2b1a4745294..4990ce7bead 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -269,15 +269,10 @@ $euiDefaultFontSize: 14px;
   .euiMarkdownFormat__code {
     @include euiCodeFont;
     color: $euiCodeBlockColor;
-    font-size: $euiMarkdownFontSizeS;
+    font-size: $euiFontSizeXS;
     padding: $euiMarkdownSizeXXS 0;
-    margin: 0;
     margin-bottom: $euiMarkdownSizeXS;
     border-radius: $euiMarkdownSizeXXS;
-  }
-
-  pre,
-  .euiMarkdownFormat__code {
     background: $euiCodeBlockBackgroundColor;
   }
 
@@ -287,9 +282,10 @@ $euiDefaultFontSize: 14px;
     content: '\00a0';
   }
 
+  // code block
   pre .euiMarkdownFormat__code {
-    display: inline;
-    max-width: auto;
+    display: block;
+    padding: $euiSizeL;
     overflow: visible;
     line-height: inherit;
     word-wrap: normal;
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 007c89d9be3..2c6851285e6 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -67,7 +67,6 @@ export class EuiMarkdownEditorToolbar extends Component<
   ];
 
   handleMdButtonClick = (mdButtonId: string) => {
-    console.log('button clicked');
     this.props.markdownActions.do(mdButtonId);
   };
 
@@ -76,7 +75,10 @@ export class EuiMarkdownEditorToolbar extends Component<
 
     return (
       <div className="euiMarkdownEditor__toolbar">
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexGroup
+          justifyContent="spaceBetween"
+          alignItems="center"
+          responsive={false}>
           <EuiFlexItem
             grow={false}
             className="euiMarkdownEditor__toolbar__buttons">
diff --git a/yarn.lock b/yarn.lock
index 155ce8634f1..2801f0f6c8b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7200,7 +7200,7 @@ hast-util-from-parse5@^5.0.0:
     web-namespaces "^1.1.2"
     xtend "^4.0.1"
 
-hast-util-is-element@^1.0.0, hast-util-is-element@^1.0.2:
+hast-util-is-element@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.0.4.tgz#059090a05cc02e275df1ad02caf8cb422fcd2e02"
   integrity sha512-NFR6ljJRvDcyPP5SbV7MyPBgF47X3BsskLnmw1U34yL+X6YC0MoBx9EyMg8Jtx4FzGH95jw8+c1VPLHaRA0wDQ==
@@ -7251,15 +7251,6 @@ hast-util-to-parse5@^5.0.0:
     xtend "^4.0.0"
     zwitch "^1.0.0"
 
-hast-util-to-text@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hast-util-to-text/-/hast-util-to-text-1.0.1.tgz#90d75c82084c10b260b6fe23a7a8f9b84d2d6b3c"
-  integrity sha512-Xvp9fWiWVb4WaHc1E1g6dtyYlcVwyjRT0CC9oXtVUNhbmIB1gqRVBuBIFJgrFkYxdo+T3UIl5i5ipPGaPRnUOw==
-  dependencies:
-    hast-util-is-element "^1.0.2"
-    repeat-string "^1.6.1"
-    unist-util-find-after "^2.0.3"
-
 hast-util-whitespace@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz#e4fe77c4a9ae1cb2e6c25e02df0043d0164f6e41"
@@ -9640,7 +9631,7 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
   integrity sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=
 
-lowlight@^1.10.0, lowlight@^1.2.0:
+lowlight@^1.2.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.13.1.tgz#c4f0e03906ebd23fedf2d258f6ab2f6324cf90eb"
   integrity sha512-kQ71/T6RksEVz9AlPq07/2m+SU/1kGvt9k39UtvHX760u4SaWakaYH7hYgH5n6sTsCWk4MVYzUzLU59aN5CSmQ==
@@ -13500,15 +13491,6 @@ regjsparser@^0.6.0:
   dependencies:
     jsesc "~0.5.0"
 
-rehype-highlight@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/rehype-highlight/-/rehype-highlight-3.1.0.tgz#99d4b8b79432ce07ed74c9c7497f7a094db77ad2"
-  integrity sha512-5MzqLWUUMS4II+jWisOzF4mIgXJxt+QI3yvXLO/tTdzXuwYMGA7vRR3H60BiGOtlL30N/2267oefm+zdh8lePw==
-  dependencies:
-    hast-util-to-text "^1.0.0"
-    lowlight "^1.10.0"
-    unist-util-visit "^1.1.0"
-
 rehype-raw@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-4.0.1.tgz#65e228469e129a2ca94fe47778132cb647fb9718"
@@ -15918,13 +15900,6 @@ unist-builder@^1.0.1:
   dependencies:
     object-assign "^4.1.0"
 
-unist-util-find-after@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/unist-util-find-after/-/unist-util-find-after-2.0.4.tgz#3fcccf0df3a2e7291fa119224c0f22158357cc10"
-  integrity sha512-zo0ShIr+E/aU9xSK7JC9Kb+WP9seTFCuqVYdo5+HJSjN009XMfhiA1FIExEKzdDP1UsgvKGleGlB/pSdTSqZww==
-  dependencies:
-    unist-util-is "^3.0.0"
-
 unist-util-find-all-after@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-1.0.5.tgz#5751a8608834f41d117ad9c577770c5f2f1b2899"

From c652d1c0a6d4439297d189ca2e22a4737940529e Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 12 May 2020 08:55:00 -0600
Subject: [PATCH 20/43] Markdown editor plugins (#3457)

* Refactored EuiMarkdownEditor and EuiMarkdownFormat to prep for future work

* pr feedback
---
 .../views/markdown_editor/markdown_editor.js  |   9 +-
 src/components/markdown_editor/index.ts       |   7 +-
 .../markdown_editor/markdown_editor.test.tsx  |   7 +-
 .../markdown_editor/markdown_editor.tsx       | 212 ++++++++++--------
 .../markdown_editor_toolbar.tsx               |  15 +-
 .../markdown_editor/markdown_format.tsx       |  50 +----
 .../markdown_editor/markdown_modes.ts         |  23 ++
 7 files changed, 183 insertions(+), 140 deletions(-)
 create mode 100644 src/components/markdown_editor/markdown_modes.ts

diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 088c46bae03..284cff072ee 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -1,11 +1,12 @@
 /* eslint-disable prettier/prettier */
-import React from 'react';
+import React, { useState } from 'react';
 
 import { EuiMarkdownEditor } from '../../../../src/components/markdown_editor';
 
 // eslint-disable-next-line
 const markdownExample = require('!!raw-loader!./markdown-example.md');
 
-export default () => (
-  <EuiMarkdownEditor initialValue={markdownExample} height={400} />
-);
+export default () => {
+  const [value, setValue] = useState(markdownExample);
+  return <EuiMarkdownEditor value={value} onChange={setValue} height={400} />;
+};
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
index a4edcc710c6..780bbb0324a 100644
--- a/src/components/markdown_editor/index.ts
+++ b/src/components/markdown_editor/index.ts
@@ -17,4 +17,9 @@
  * under the License.
  */
 
-export { EuiMarkdownEditor } from './markdown_editor';
+export {
+  EuiMarkdownEditor,
+  EuiMarkdownEditorProps,
+  defaultParsingPlugins,
+  defaultProcessingPlugins,
+} from './markdown_editor';
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index 6b20d8e4459..569039a6af1 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -26,7 +26,12 @@ import { EuiMarkdownEditor } from './markdown_editor';
 describe('EuiMarkdownEditor', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiMarkdownEditor editorId="editorId" {...requiredProps} />
+      <EuiMarkdownEditor
+        editorId="editorId"
+        value=""
+        onChange={() => null}
+        {...requiredProps}
+      />
     );
 
     expect(component).toMatchSnapshot();
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index aa7738cefb0..0bcf5e6a9f8 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -17,112 +17,146 @@
  * under the License.
  */
 
-import React, { Component, HTMLAttributes } from 'react';
+import React, {
+  createElement,
+  FunctionComponent,
+  HTMLAttributes,
+  useMemo,
+  useState,
+} from 'react';
+import unified, { PluggableList } from 'unified';
 import classNames from 'classnames';
+// @ts-ignore
+import emoji from 'remark-emoji';
+import markdown from 'remark-parse';
+// @ts-ignore
+import remark2rehype from 'remark-rehype';
+// @ts-ignore
+import highlight from 'remark-highlight.js';
+// @ts-ignore
+import rehype2react from 'rehype-react';
+
 import { CommonProps } from '../common';
 import MarkdownActions from './markdown_actions';
 import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
 import { EuiMarkdownFormat } from './markdown_format';
 import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone';
+import { htmlIdGenerator } from '../../services/accessibility';
+import { EuiLink } from '../link';
+import { EuiCodeBlock } from '../code';
+import { MARKDOWN_MODE, MODE_EDITING, MODE_VIEWING } from './markdown_modes';
+
+function storeMarkdownTree() {
+  return function(tree: any, file: any) {
+    file.data.markdownTree = JSON.parse(JSON.stringify(tree));
+  };
+}
+
+export const defaultParsingPlugins: PluggableList = [
+  [markdown, {}],
+  [highlight, {}],
+  [emoji, { emoticon: true }],
+  [storeMarkdownTree, {}],
+];
+
+export const defaultProcessingPlugins: PluggableList = [
+  [remark2rehype, { allowDangerousHTML: true }],
+  [
+    rehype2react,
+    {
+      createElement: createElement,
+      components: {
+        a: EuiLink,
+        code: (props: any) =>
+          // if has classNames is a codeBlock using highlight js
+          props.className ? (
+            <EuiCodeBlock {...props} />
+          ) : (
+            <code className="euiMarkdownFormat__code" {...props} />
+          ),
+      },
+    },
+  ],
+];
 
 export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     /** A unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
     editorId?: string;
-    /** A initial markdown content */
-    initialValue?: string;
-    /** The height of the content/preview area */
-    height: number;
-  };
-
-export interface MarkdownEditorState {
-  editorContent: string;
-  viewMarkdownPreview: boolean;
-  files: FileList | null;
-}
 
-export class EuiMarkdownEditor extends Component<
-  EuiMarkdownEditorProps,
-  MarkdownEditorState
-> {
-  editorId: string;
-  markdownActions: MarkdownActions;
+    /** A markdown content */
+    value: string;
 
-  static defaultProps = {
-    height: 150,
-  };
+    /** Callback function when markdown content is modified */
+    onChange: (value: string) => void;
 
-  constructor(props: EuiMarkdownEditorProps) {
-    super(props);
-
-    this.state = {
-      editorContent: this.props.initialValue!,
-      viewMarkdownPreview: false,
-      files: null,
-    };
-
-    // If an ID wasn't provided, just generate a rando
-    this.editorId =
-      this.props.editorId ||
-      Math.random()
-        .toString(35)
-        .substring(2, 10);
-    this.markdownActions = new MarkdownActions(this.editorId);
-
-    this.handleMdButtonClick = this.handleMdButtonClick.bind(this);
-  }
-
-  handleMdButtonClick = (mdButtonId: string) => {
-    this.markdownActions.do(mdButtonId);
-  };
+    /** The height of the content/preview area */
+    height?: number;
 
-  onClickPreview = () => {
-    this.setState({ viewMarkdownPreview: !this.state.viewMarkdownPreview });
-  };
+    /** array of unified plugins to parse content into an AST */
+    parsingPluginList?: PluggableList;
 
-  onAttachFiles = (files: FileList | null) => {
-    console.log('List of attached files -->', files);
-    this.setState({
-      files: files,
-    });
+    /** array of unified plugins to convert the AST into a ReactNode */
+    processingPluginList?: PluggableList;
   };
 
-  render() {
-    const { className, editorId, initialValue, height, ...rest } = this.props;
-
-    const { viewMarkdownPreview } = this.state;
-
-    const classes = classNames('euiMarkdownEditor', className);
-
-    return (
-      <div className={classes} {...rest}>
-        <EuiMarkdownEditorToolbar
-          markdownActions={this.markdownActions}
-          onClickPreview={this.onClickPreview}
-          viewMarkdownPreview={viewMarkdownPreview}
-        />
-
-        {this.state.viewMarkdownPreview ? (
-          <div
-            className="euiMarkdownEditor__previewContainer"
-            style={{ height: `${height}px` }}>
-            <EuiMarkdownFormat>{this.state.editorContent}</EuiMarkdownFormat>
-          </div>
-        ) : (
-          <EuiMarkdownEditorDropZone>
-            <EuiMarkdownEditorTextArea
-              height={height}
-              id={this.editorId}
-              onChange={(e: any) => {
-                this.setState({ editorContent: e.target.value });
-              }}
-              value={this.state.editorContent}
-            />
-          </EuiMarkdownEditorDropZone>
-        )}
-      </div>
-    );
-  }
-}
+export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
+  className,
+  editorId: _editorId,
+  value,
+  onChange,
+  height = 150,
+  parsingPluginList = defaultParsingPlugins,
+  processingPluginList = defaultProcessingPlugins,
+  ...rest
+}) => {
+  const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(MODE_EDITING);
+  const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [_editorId]);
+
+  const markdownActions = useMemo(() => new MarkdownActions(editorId), [
+    editorId,
+  ]);
+
+  const classes = classNames('euiMarkdownEditor', className);
+
+  const processor = useMemo(
+    () =>
+      unified()
+        .use(parsingPluginList)
+        .use(processingPluginList),
+    [parsingPluginList, processingPluginList]
+  );
+
+  const isPreviewing = viewMode === MODE_VIEWING;
+
+  return (
+    <div className={classes} {...rest}>
+      <EuiMarkdownEditorToolbar
+        markdownActions={markdownActions}
+        onClickPreview={() =>
+          setViewMode(isPreviewing ? MODE_EDITING : MODE_VIEWING)
+        }
+        viewMode={viewMode}
+      />
+
+      {isPreviewing ? (
+        <div
+          className="euiMarkdownEditor__previewContainer"
+          style={{ height: `${height}px` }}>
+          <EuiMarkdownFormat processor={processor}>{value}</EuiMarkdownFormat>
+        </div>
+      ) : (
+        <EuiMarkdownEditorDropZone>
+          <EuiMarkdownEditorTextArea
+            height={height}
+            id={editorId}
+            onChange={e => onChange(e.target.value)}
+            value={value}
+          />
+        </EuiMarkdownEditorDropZone>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index a6bd172de4f..25abfd8de52 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -23,11 +23,12 @@ import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiFlexItem, EuiFlexGroup } from '../flex';
 import { EuiI18n } from '../i18n';
 import { EuiToolTip } from '../tool_tip';
+import { MARKDOWN_MODE, MODE_VIEWING } from './markdown_modes';
 
 export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     markdownActions?: any;
-    viewMarkdownPreview?: boolean;
+    viewMode?: MARKDOWN_MODE;
     onClickPreview?: any;
   };
 
@@ -90,7 +91,9 @@ export class EuiMarkdownEditorToolbar extends Component<
   };
 
   render() {
-    const { viewMarkdownPreview, onClickPreview } = this.props;
+    const { viewMode, onClickPreview } = this.props;
+
+    const isPreviewing = viewMode === MODE_VIEWING;
 
     return (
       <div className="euiMarkdownEditor__toolbar">
@@ -108,7 +111,7 @@ export class EuiMarkdownEditorToolbar extends Component<
                   onClick={() => this.handleMdButtonClick(item.id)}
                   iconType={item.iconType}
                   aria-label={item.label}
-                  isDisabled={viewMarkdownPreview}
+                  isDisabled={isPreviewing}
                 />
               </EuiToolTip>
             ))}
@@ -120,7 +123,7 @@ export class EuiMarkdownEditorToolbar extends Component<
                   onClick={() => this.handleMdButtonClick(item.id)}
                   iconType={item.iconType}
                   aria-label={item.label}
-                  isDisabled={viewMarkdownPreview}
+                  isDisabled={isPreviewing}
                 />
               </EuiToolTip>
             ))}
@@ -132,7 +135,7 @@ export class EuiMarkdownEditorToolbar extends Component<
                   onClick={() => this.handleMdButtonClick(item.id)}
                   iconType={item.iconType}
                   aria-label={item.label}
-                  isDisabled={viewMarkdownPreview}
+                  isDisabled={isPreviewing}
                 />
               </EuiToolTip>
             ))}
@@ -140,7 +143,7 @@ export class EuiMarkdownEditorToolbar extends Component<
 
           <EuiFlexItem grow={false}>
             {/* The idea was to use the EuiButtonToggle but it doesn't work when pressing the enter key */}
-            {viewMarkdownPreview ? (
+            {isPreviewing ? (
               <EuiButtonEmpty
                 iconType="editorCodeBlock"
                 color="text"
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index f410f2516c5..40e4909af15 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -17,49 +17,21 @@
  * under the License.
  */
 
-import React, { createElement, FunctionComponent } from 'react';
-// @ts-ignore
-import emoji from 'remark-emoji';
-import unified from 'unified';
-import markdown from 'remark-parse';
-// @ts-ignore
-import remark2rehype from 'remark-rehype';
-// @ts-ignore
-import highlight from 'remark-highlight.js';
-// @ts-ignore
-import rehype2react from 'rehype-react';
-
-import { EuiCodeBlock } from '../code/code_block';
-import { EuiLink } from '../link/link';
-
-const processor = unified()
-  .use(markdown)
-  .use(highlight)
-  .use(emoji, { emoticon: true })
-  .use(remark2rehype, { allowDangerousHTML: true })
-  // .use(row)
-  .use(rehype2react, {
-    createElement: createElement,
-    components: {
-      a: EuiLink,
-      code: (props: any) =>
-        // if has classNames is a codeBlock using highlight js
-        props.className ? (
-          <EuiCodeBlock {...props} />
-        ) : (
-          <code className="euiMarkdownFormat__code" {...props} />
-        ),
-    },
-  });
+import React, { FunctionComponent, useMemo } from 'react';
+import { Processor } from 'unified';
 
 interface EuiMarkdownFormatProps {
   children: string;
+  processor: Processor;
 }
 
 export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   children,
-}) => (
-  <div className="euiMarkdownFormat">
-    {processor.processSync(children).contents}
-  </div>
-);
+  processor,
+}) => {
+  const result = useMemo(() => processor.processSync(children), [
+    processor,
+    children,
+  ]);
+  return <div className="euiMarkdownFormat">{result.contents}</div>;
+};
diff --git a/src/components/markdown_editor/markdown_modes.ts b/src/components/markdown_editor/markdown_modes.ts
new file mode 100644
index 00000000000..bd3c214195b
--- /dev/null
+++ b/src/components/markdown_editor/markdown_modes.ts
@@ -0,0 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const MODE_EDITING = 'editing';
+export const MODE_VIEWING = 'viewing';
+
+export type MARKDOWN_MODE = typeof MODE_EDITING | typeof MODE_VIEWING;

From 40f96423531534584603bfdd42c97b41736b6e49 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 15 May 2020 22:06:46 -0600
Subject: [PATCH 21/43] [markdown] chart & tooltip plugins (#3479)

* chart & tooltip plugins

* Change tooltip markdown plugin markdown format

* Fixed error with empty tooltip tag
---
 package.json                                  |   2 +-
 .../views/markdown_editor/markdown_editor.js  |  20 ++-
 .../markdown_editor/plugins/markdown_chart.js | 156 ++++++++++++++++++
 .../plugins/markdown_tooltip.js               | 101 ++++++++++++
 .../markdown_editor/markdown_actions.ts       |  31 ++--
 .../markdown_editor/markdown_editor.tsx       |  57 ++++++-
 .../markdown_editor_toolbar.tsx               |  20 ++-
 .../markdown_editor/markdown_types.ts         |  43 +++++
 yarn.lock                                     |  56 +++----
 9 files changed, 429 insertions(+), 57 deletions(-)
 create mode 100644 src-docs/src/views/markdown_editor/plugins/markdown_chart.js
 create mode 100644 src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
 create mode 100644 src/components/markdown_editor/markdown_types.ts

diff --git a/package.json b/package.json
index a9ab96d34ab..63fd08ddecc 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "remark-emoji": "^2.1.0",
     "remark-highlight.js": "^5.2.0",
     "remark-parse": "^7.0.2",
-    "remark-rehype": "^5.0.0",
+    "remark-rehype": "^6.0.0",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
     "unified": "^8.4.2",
diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 284cff072ee..f725cd89328 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -1,12 +1,26 @@
 /* eslint-disable prettier/prettier */
 import React, { useState } from 'react';
 
-import { EuiMarkdownEditor } from '../../../../src/components/markdown_editor';
+import { defaultParsingPlugins, defaultProcessingPlugins, EuiMarkdownEditor } from '../../../../src/components/markdown_editor';
+import * as MarkdownChart from './plugins/markdown_chart';
+import * as MarkdownTooltip from './plugins/markdown_tooltip';
 
-// eslint-disable-next-line
 const markdownExample = require('!!raw-loader!./markdown-example.md');
 
+const exampleParsingList = [
+  ...defaultParsingPlugins,
+  MarkdownChart.parser,
+  MarkdownTooltip.parser,
+];
+
+const exampleProcessingList = [...defaultProcessingPlugins]; // pretend mutation doesn't happen immediately next 😅
+exampleProcessingList[0][1].handlers.chartDemoPlugin = MarkdownChart.handler;
+exampleProcessingList[1][1].components.chartDemoPlugin = MarkdownChart.renderer;
+
+exampleProcessingList[0][1].handlers.tooltipPlugin = MarkdownTooltip.handler;
+exampleProcessingList[1][1].components.tooltipPlugin = MarkdownTooltip.renderer;
+
 export default () => {
   const [value, setValue] = useState(markdownExample);
-  return <EuiMarkdownEditor value={value} onChange={setValue} height={400} />;
+  return <EuiMarkdownEditor value={value} onChange={setValue} height={400} uiPlugins={[MarkdownChart.plugin, MarkdownTooltip.plugin]} parsingPluginList={exampleParsingList} processingPluginList={exampleProcessingList} />;
 };
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_chart.js b/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
new file mode 100644
index 00000000000..6587b56efae
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
@@ -0,0 +1,156 @@
+import React from 'react';
+import {
+  Chart,
+  Settings,
+  Axis,
+  BarSeries,
+  DataGenerator,
+} from '@elastic/charts';
+import { EUI_CHARTS_THEME_LIGHT } from '../../../../../src/themes/charts/themes';
+import {
+  euiPaletteColorBlind,
+  euiPaletteComplimentary,
+  euiPaletteCool,
+  euiPaletteForStatus,
+  euiPaletteForTemperature,
+  euiPaletteGray,
+  euiPaletteNegative,
+  euiPalettePositive,
+  euiPaletteWarm,
+} from '../../../../../src/services/color';
+
+const paletteData = {
+  euiPaletteColorBlind,
+  euiPaletteForStatus,
+  euiPaletteForTemperature,
+  euiPaletteComplimentary,
+  euiPaletteNegative,
+  euiPalettePositive,
+  euiPaletteCool,
+  euiPaletteWarm,
+  euiPaletteGray,
+};
+const paletteNames = Object.keys(paletteData);
+
+const dg = new DataGenerator();
+const data = dg.generateGroupedSeries(20, 5);
+
+const chartDemoPlugin = {
+  name: 'chartDemoPlugin',
+  button: {
+    label: 'Chart',
+    iconType: 'visArea',
+  },
+  formatting: {
+    prefix: '!{chart',
+    suffix: '}',
+    trimFirst: true,
+  },
+};
+
+function ChartParser() {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.inlineTokenizers;
+  const methods = Parser.prototype.inlineMethods;
+
+  function tokenizeChart(eat, value, silent) {
+    if (value.startsWith('!{chart') === false) return false;
+
+    const nextChar = value[7];
+
+    if (nextChar !== ' ' && nextChar !== '}') return false; // this isn't actually a chart
+
+    if (silent) {
+      return true;
+    }
+
+    // is there a configuration?
+    const hasConfiguration = nextChar === ' ';
+
+    let match = '!{chart';
+    let configuration = {};
+
+    if (hasConfiguration) {
+      match += ' ';
+      let configurationString = '';
+
+      let openObjects = 0;
+
+      for (let i = 8; i < value.length; i++) {
+        const char = value[i];
+        if (char === '{') {
+          openObjects++;
+          configurationString += char;
+        } else if (char === '}') {
+          openObjects--;
+          if (openObjects === -1) {
+            break;
+          }
+          configurationString += char;
+        } else {
+          configurationString += char;
+        }
+      }
+
+      match += configurationString;
+      try {
+        configuration = JSON.parse(configurationString);
+        // eslint-disable-next-line no-empty
+      } catch (e) {}
+    }
+
+    match += '}';
+    return eat(match)({
+      type: 'chartDemoPlugin',
+      configuration,
+    });
+  }
+  tokenizeChart.notInBlock = true;
+  tokenizeChart.notInList = true;
+  tokenizeChart.notInLink = true;
+
+  tokenizeChart.locator = function locateChart(value, fromIndex) {
+    return value.indexOf('!{chart', fromIndex);
+  };
+
+  tokenizers.chart = tokenizeChart;
+  methods.splice(methods.indexOf('text'), 0, 'chart');
+}
+
+const chartMarkdownHandler = (h, node) => {
+  return h(node.position, 'chartDemoPlugin', node.configuration, []);
+};
+const chartMarkdownRenderer = ({ height = 200, palette = 5 }) => {
+  const customColors = {
+    colors: {
+      vizColors: paletteData[paletteNames[palette]](5),
+    },
+  };
+  return (
+    <Chart size={{ height }}>
+      <Settings
+        theme={[customColors, EUI_CHARTS_THEME_LIGHT]}
+        showLegend={false}
+        showLegendDisplayValue={false}
+      />
+      <BarSeries
+        id="status"
+        name="Status"
+        data={data}
+        xAccessor={'x'}
+        yAccessors={['y']}
+        splitSeriesAccessors={['g']}
+        stackAccessors={['g']}
+      />
+      <Axis id="bottom-axis" position="bottom" showGridLines />
+      <Axis id="left-axis" position="left" showGridLines />
+    </Chart>
+  );
+};
+
+export {
+  chartDemoPlugin as plugin,
+  ChartParser as parser,
+  chartMarkdownHandler as handler,
+  chartMarkdownRenderer as renderer,
+};
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js b/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
new file mode 100644
index 00000000000..d98d60befae
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import all from 'mdast-util-to-hast/lib/all';
+import { EuiToolTip } from '../../../../../src';
+
+const tooltipPlugin = {
+  name: 'tooltipPlugin',
+  button: {
+    label: 'Tooltip',
+    iconType: 'flag',
+  },
+  formatting: {
+    prefix: '!{tooltip[',
+    suffix: ']()}',
+    trimFirst: true,
+  },
+};
+
+function TooltipParser() {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.inlineTokenizers;
+  const methods = Parser.prototype.inlineMethods;
+
+  function tokenizeTooltip(eat, value, silent) {
+    if (value.startsWith('!{tooltip') === false) return false;
+
+    const nextChar = value[9];
+
+    if (nextChar !== '[') return false; // this isn't actually a tooltip
+
+    let index = 9;
+    function readArg(open, close) {
+      if (value[index] !== open) throw 'Expected left bracket';
+      index++;
+
+      let body = '';
+      let openBrackets = 0;
+
+      for (index; index < value.length; index++) {
+        const char = value[index];
+
+        if (char === close && openBrackets === 0) {
+          index++;
+          return body;
+        } else if (char === close) {
+          openBrackets--;
+        } else if (char === open) {
+          openBrackets++;
+        }
+
+        body += char;
+      }
+
+      return '';
+    }
+    const tooltipAnchor = readArg('[', ']');
+    const tooltipText = readArg('(', ')');
+
+    if (!tooltipText || !tooltipAnchor) return false;
+
+    if (silent) {
+      return true;
+    }
+
+    const now = eat.now();
+    now.column += 11 + tooltipText.length;
+    now.offset += 11 + tooltipText.length;
+    const children = this.tokenizeInline(tooltipAnchor, now);
+
+    return eat(`!{tooltip[${tooltipAnchor}](${tooltipText})}`)({
+      type: 'tooltipPlugin',
+      configuration: { content: tooltipText },
+      children,
+    });
+  }
+  tokenizeTooltip.notInLink = true;
+
+  tokenizeTooltip.locator = function locateTooltip(value, fromIndex) {
+    return value.indexOf('!{tooltip', fromIndex);
+  };
+
+  tokenizers.tooltip = tokenizeTooltip;
+  methods.splice(methods.indexOf('text'), 0, 'tooltip');
+}
+
+const tooltipMarkdownHandler = (h, node) => {
+  return h(node.position, 'tooltipPlugin', node.configuration, all(h, node));
+};
+const tooltipMarkdownRenderer = ({ content, children }) => {
+  return (
+    <EuiToolTip content={content}>
+      <span>{children}</span>
+    </EuiToolTip>
+  );
+};
+
+export {
+  tooltipPlugin as plugin,
+  TooltipParser as parser,
+  tooltipMarkdownHandler as handler,
+  tooltipMarkdownRenderer as renderer,
+};
diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
index efad572d6f5..a5e5ba70f24 100644
--- a/src/components/markdown_editor/markdown_actions.ts
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -17,19 +17,10 @@
  * under the License.
  */
 
-interface StyleArgsToUpdate {
-  prefix?: string;
-  suffix?: string;
-  blockPrefix?: string;
-  blockSuffix?: string;
-  multiline?: boolean;
-  replaceNext?: string;
-  prefixSpace?: boolean;
-  scanFor?: string;
-  surroundWithNewlines?: boolean;
-  orderedList?: boolean;
-  trimFirst?: boolean;
-}
+import {
+  EuiMarkdownEditorUiPlugin,
+  EuiMarkdownFormatting,
+} from './markdown_types';
 
 /**
  * Class for applying styles to a text editor. Accepts the HTML ID for the textarea
@@ -39,17 +30,21 @@ interface StyleArgsToUpdate {
  * @param {string} editorID
  */
 class MarkdownActions {
-  editorID: string;
-  styles: Record<string, StyleArgsToUpdate>;
-
-  constructor(editorID: string) {
-    this.editorID = editorID;
+  styles: Record<string, EuiMarkdownFormatting>;
 
+  constructor(public editorID: string, uiPlugins: EuiMarkdownEditorUiPlugin[]) {
     /**
      * This object is in the format:
      * [nameOfAction]: {[styles to apply]}
      */
     this.styles = {
+      ...uiPlugins.reduce<MarkdownActions['styles']>(
+        (mappedPlugins, { name, formatting }) => {
+          mappedPlugins[name] = formatting;
+          return mappedPlugins;
+        },
+        {}
+      ),
       mdBold: {
         prefix: '**',
         suffix: '**',
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 0bcf5e6a9f8..e77b4fedcf8 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -46,6 +46,7 @@ import { htmlIdGenerator } from '../../services/accessibility';
 import { EuiLink } from '../link';
 import { EuiCodeBlock } from '../code';
 import { MARKDOWN_MODE, MODE_EDITING, MODE_VIEWING } from './markdown_modes';
+import { EuiMarkdownEditorUiPlugin } from './markdown_types';
 
 function storeMarkdownTree() {
   return function(tree: any, file: any) {
@@ -61,7 +62,13 @@ export const defaultParsingPlugins: PluggableList = [
 ];
 
 export const defaultProcessingPlugins: PluggableList = [
-  [remark2rehype, { allowDangerousHTML: true }],
+  [
+    remark2rehype,
+    {
+      allowDangerousHtml: true,
+      handlers: {},
+    },
+  ],
   [
     rehype2react,
     {
@@ -100,6 +107,8 @@ export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
 
     /** array of unified plugins to convert the AST into a ReactNode */
     processingPluginList?: PluggableList;
+
+    uiPlugins?: EuiMarkdownEditorUiPlugin[];
   };
 
 export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
@@ -110,14 +119,19 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
   height = 150,
   parsingPluginList = defaultParsingPlugins,
   processingPluginList = defaultProcessingPlugins,
+  uiPlugins = [],
   ...rest
 }) => {
   const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(MODE_EDITING);
   const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [_editorId]);
 
-  const markdownActions = useMemo(() => new MarkdownActions(editorId), [
-    editorId,
-  ]);
+  const markdownActions = useMemo(
+    () => new MarkdownActions(editorId, uiPlugins),
+
+    // uiPlugins _is_ accounted for
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [editorId, uiPlugins.map(({ name }) => name).join(',')]
+  );
 
   const classes = classNames('euiMarkdownEditor', className);
 
@@ -129,6 +143,40 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
     [parsingPluginList, processingPluginList]
   );
 
+  // const Compiler = (tree, file) => {
+  //   return JSON.stringify(tree, null, 2);
+  // }
+  //
+  // function stringify (options) {
+  //   this.Compiler = Compiler;
+  // }
+  //
+  // console.log(unified().use(parsingPluginList).use([remark2rehype, { allowDangerousHTML: true }]).use(rehypestringify).processSync(value));
+  // console.log(
+  //   JSON.parse(
+  //     unified()
+  //     .use(parsingPluginList)
+  //     .use(remark2rehype, {
+  //       allowDangerousHTML: true,
+  //       handlers: {
+  //         chart(h, node) {
+  //           console.log(h);
+  //           console.log(node);
+  //           return h(node.position, 'strong', {className: 'test'}, unistBuilder('test', 'HEY'));
+  //         }
+  //       },
+  //       unknownHandler(h, node) {
+  //         console.log(h);
+  //         console.log(node);
+  //         h(node.position, 'code', 'THIS IS A TEST');
+  //       }
+  //     })
+  //     .use(stringify)
+  //     .processSync(value)
+  //     .contents
+  //   )
+  // );
+
   const isPreviewing = viewMode === MODE_VIEWING;
 
   return (
@@ -139,6 +187,7 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
           setViewMode(isPreviewing ? MODE_EDITING : MODE_VIEWING)
         }
         viewMode={viewMode}
+        uiPlugins={uiPlugins}
       />
 
       {isPreviewing ? (
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 25abfd8de52..9f81a2d2e58 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -24,12 +24,14 @@ import { EuiFlexItem, EuiFlexGroup } from '../flex';
 import { EuiI18n } from '../i18n';
 import { EuiToolTip } from '../tool_tip';
 import { MARKDOWN_MODE, MODE_VIEWING } from './markdown_modes';
+import { EuiMarkdownEditorUiPlugin } from './markdown_types';
 
 export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     markdownActions?: any;
     viewMode?: MARKDOWN_MODE;
     onClickPreview?: any;
+    uiPlugins: EuiMarkdownEditorUiPlugin[];
   };
 
 export class EuiMarkdownEditorToolbar extends Component<
@@ -91,7 +93,7 @@ export class EuiMarkdownEditorToolbar extends Component<
   };
 
   render() {
-    const { viewMode, onClickPreview } = this.props;
+    const { viewMode, onClickPreview, uiPlugins } = this.props;
 
     const isPreviewing = viewMode === MODE_VIEWING;
 
@@ -139,6 +141,22 @@ export class EuiMarkdownEditorToolbar extends Component<
                 />
               </EuiToolTip>
             ))}
+            {uiPlugins.length > 0 ? (
+              <>
+                <span className="euiMarkdownEditor__toolbar__divider" />
+                {uiPlugins.map(({ name, button }) => (
+                  <EuiToolTip key={name} content={button.label} delay="long">
+                    <EuiButtonIcon
+                      color="text"
+                      onClick={() => this.handleMdButtonClick(name)}
+                      iconType={button.iconType}
+                      aria-label={button.label}
+                      isDisabled={isPreviewing}
+                    />
+                  </EuiToolTip>
+                ))}
+              </>
+            ) : null}
           </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
diff --git a/src/components/markdown_editor/markdown_types.ts b/src/components/markdown_editor/markdown_types.ts
new file mode 100644
index 00000000000..529d4f2fbd4
--- /dev/null
+++ b/src/components/markdown_editor/markdown_types.ts
@@ -0,0 +1,43 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { IconType } from '../icon';
+
+export interface EuiMarkdownEditorUiPlugin {
+  name: string;
+  button: {
+    label: string;
+    iconType: IconType;
+  };
+  formatting: EuiMarkdownFormatting;
+}
+
+export interface EuiMarkdownFormatting {
+  prefix?: string;
+  suffix?: string;
+  blockPrefix?: string;
+  blockSuffix?: string;
+  multiline?: boolean;
+  replaceNext?: string;
+  prefixSpace?: boolean;
+  scanFor?: string;
+  surroundWithNewlines?: boolean;
+  orderedList?: boolean;
+  trimFirst?: boolean;
+}
diff --git a/yarn.lock b/yarn.lock
index 6bd35224bbd..3f0f13734bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10057,29 +10057,27 @@ mdast-util-compact@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
-mdast-util-definitions@^1.2.0:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-1.2.5.tgz#3fe622a4171c774ebd06f11e9f8af7ec53ea5c74"
-  integrity sha512-CJXEdoLfiISCDc2JB6QLb79pYfI6+GcIH+W2ox9nMc7od0Pz+bovcHsiq29xAQY6ayqe/9CsK2VzkSJdg1pFYA==
+mdast-util-definitions@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-2.0.1.tgz#2c931d8665a96670639f17f98e32c3afcfee25f3"
+  integrity sha512-Co+DQ6oZlUzvUR7JCpP249PcexxygiaKk9axJh+eRzHDZJk2julbIdKB4PXHVxdBuLzvJ1Izb+YDpj2deGMOuA==
   dependencies:
-    unist-util-visit "^1.0.0"
+    unist-util-visit "^2.0.0"
 
-mdast-util-to-hast@^6.0.0:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-6.0.2.tgz#24a8791b7c624118637d70f03a9d29116e4311cf"
-  integrity sha512-GjcOimC9qHI0yNFAQdBesrZXzUkRdFleQlcoU8+TVNfDW6oLUazUx8MgUoTaUyCJzBOnE5AOgqhpURrSlf0QwQ==
+mdast-util-to-hast@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-8.2.0.tgz#adf9f824defcd382e53dd7bace4282a45602ac67"
+  integrity sha512-WjH/KXtqU66XyTJQ7tg7sjvTw1OQcVV0hKdFh3BgHPwZ96fSBCQ/NitEHsN70Mmnggt+5eUUC7pCnK+2qGQnCA==
   dependencies:
     collapse-white-space "^1.0.0"
     detab "^2.0.0"
-    mdast-util-definitions "^1.2.0"
-    mdurl "^1.0.1"
-    trim "0.0.1"
+    mdast-util-definitions "^2.0.0"
+    mdurl "^1.0.0"
     trim-lines "^1.0.0"
-    unist-builder "^1.0.1"
-    unist-util-generated "^1.1.0"
+    unist-builder "^2.0.0"
+    unist-util-generated "^1.0.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.0"
-    xtend "^4.0.1"
+    unist-util-visit "^2.0.0"
 
 mdn-data@2.0.4:
   version "2.0.4"
@@ -10091,7 +10089,7 @@ mdn-data@~1.1.0:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
   integrity sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==
 
-mdurl@^1.0.1:
+mdurl@^1.0.0, mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
@@ -13930,12 +13928,12 @@ remark-parse@^7.0.2:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-rehype@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-5.0.0.tgz#dcf85b481bfaadf262ddde9b4ecefbb7f2673e70"
-  integrity sha512-tgo+AeOotuh9FnGMkEPbE6C3OfdARqqSxT0H/KNGAiTwJLiDoRSm6x/ytqPZTyYSiQ/exbi/kx7k6uUvqYL1wQ==
+remark-rehype@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-6.0.0.tgz#dcd340ebee412709a81b15a69f4ae474a38aa72a"
+  integrity sha512-dt7cHCD2NbbmXoSnnNolk+MnWzylsOIEU07pyhZSM71Xy08xX07+yuCh+4rddyrB/a1hebygeteVEJieyCeDzg==
   dependencies:
-    mdast-util-to-hast "^6.0.0"
+    mdast-util-to-hast "^8.0.0"
 
 remark-stringify@^4.0.0:
   version "4.0.0"
@@ -16382,12 +16380,10 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
-unist-builder@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-1.0.4.tgz#e1808aed30bd72adc3607f25afecebef4dd59e17"
-  integrity sha512-v6xbUPP7ILrT15fHGrNyHc1Xda8H3xVhP7/HAIotHOhVPjH5dCXA097C3Rry1Q2O+HbOLCao4hfPB+EYEjHgVg==
-  dependencies:
-    object-assign "^4.1.0"
+unist-builder@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-2.0.3.tgz#77648711b5d86af0942f334397a33c5e91516436"
+  integrity sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==
 
 unist-util-find-all-after@^1.0.1:
   version "1.0.5"
@@ -16396,7 +16392,7 @@ unist-util-find-all-after@^1.0.1:
   dependencies:
     unist-util-is "^3.0.0"
 
-unist-util-generated@^1.1.0:
+unist-util-generated@^1.0.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.5.tgz#1e903e68467931ebfaea386dae9ea253628acd42"
   integrity sha512-1TC+NxQa4N9pNdayCYA1EGUOCAO0Le3fVp7Jzns6lnua/mYgwHo0tz5WUAfrdpNch1RZLHc61VZ1SDgrtNXLSw==
@@ -16457,7 +16453,7 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
   dependencies:
     unist-util-visit-parents "^2.0.0"
 
-unist-util-visit@^2.0.2:
+unist-util-visit@^2.0.0, unist-util-visit@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.2.tgz#3843782a517de3d2357b4c193b24af2d9366afb7"
   integrity sha512-HoHNhGnKj6y+Sq+7ASo2zpVdfdRifhTgX2KTU3B/sO/TTlZchp7E3S4vjRzDJ7L60KmrCPsQkVK3lEF3cz36XQ==

From 2d468c389f0afa52f45523d6a7793e01e11f3ca8 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 21 May 2020 14:16:37 -0600
Subject: [PATCH 22/43] [Markdown] Checkbox plugin (#3493)

* Checkbox plugin

* Better checkbox interaction formatting

* Use monospace font in markdown editor
---
 package.json                                  |  3 +-
 .../views/markdown_editor/markdown_editor.js  |  7 +-
 .../plugins/markdown_checkbox.js              | 88 +++++++++++++++++++
 .../plugins/markdown_tooltip.js               |  2 +-
 src/components/index.js                       |  7 +-
 .../_markdown_editor_text_area.scss           |  1 +
 src/components/markdown_editor/index.ts       |  1 +
 .../markdown_editor/markdown_editor.tsx       | 80 +++++++++++------
 yarn.lock                                     | 12 +++
 9 files changed, 170 insertions(+), 31 deletions(-)
 create mode 100644 src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js

diff --git a/package.json b/package.json
index 63fd08ddecc..7fe66492cfd 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "rehype-raw": "^4.0.1",
     "rehype-react": "^5.0.0",
     "rehype-stringify": "^6.0.1",
+    "remark-disable-tokenizers": "^1.0.24",
     "remark-emoji": "^2.1.0",
     "remark-highlight.js": "^5.2.0",
     "remark-parse": "^7.0.2",
@@ -99,11 +100,11 @@
     "@types/classnames": "^2.2.6",
     "@types/highlight.js": "^9.12.3",
     "@types/jest": "^24.0.6",
+    "@types/node": "10.17.5",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "@types/react-is": "^16.7.1",
     "@types/resize-observer-browser": "^0.1.1",
-    "@types/node": "10.17.5",
     "@types/tabbable": "^3.1.0",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index f725cd89328..90aa41f3ffe 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -1,9 +1,10 @@
 /* eslint-disable prettier/prettier */
 import React, { useState } from 'react';
 
-import { defaultParsingPlugins, defaultProcessingPlugins, EuiMarkdownEditor } from '../../../../src/components/markdown_editor';
+import { defaultParsingPlugins, defaultProcessingPlugins, EuiMarkdownEditor } from '../../../../src';
 import * as MarkdownChart from './plugins/markdown_chart';
 import * as MarkdownTooltip from './plugins/markdown_tooltip';
+import * as MarkdownCheckbox from './plugins/markdown_checkbox';
 
 const markdownExample = require('!!raw-loader!./markdown-example.md');
 
@@ -11,6 +12,7 @@ const exampleParsingList = [
   ...defaultParsingPlugins,
   MarkdownChart.parser,
   MarkdownTooltip.parser,
+  MarkdownCheckbox.parser,
 ];
 
 const exampleProcessingList = [...defaultProcessingPlugins]; // pretend mutation doesn't happen immediately next 😅
@@ -20,6 +22,9 @@ exampleProcessingList[1][1].components.chartDemoPlugin = MarkdownChart.renderer;
 exampleProcessingList[0][1].handlers.tooltipPlugin = MarkdownTooltip.handler;
 exampleProcessingList[1][1].components.tooltipPlugin = MarkdownTooltip.renderer;
 
+exampleProcessingList[0][1].handlers.checkboxPlugin = MarkdownCheckbox.handler;
+exampleProcessingList[1][1].components.checkboxPlugin = MarkdownCheckbox.renderer;
+
 export default () => {
   const [value, setValue] = useState(markdownExample);
   return <EuiMarkdownEditor value={value} onChange={setValue} height={400} uiPlugins={[MarkdownChart.plugin, MarkdownTooltip.plugin]} parsingPluginList={exampleParsingList} processingPluginList={exampleProcessingList} />;
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js b/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js
new file mode 100644
index 00000000000..5598ebfb128
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js
@@ -0,0 +1,88 @@
+import React, { useContext } from 'react';
+import all from 'mdast-util-to-hast/lib/all';
+import { EuiCheckbox, EuiMarkdownContext } from '../../../../../src';
+import { htmlIdGenerator } from '../../../../../src/services/accessibility';
+
+function CheckboxParser() {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.blockTokenizers;
+  const methods = Parser.prototype.blockMethods;
+
+  function tokenizeCheckbox(eat, value, silent) {
+    /**
+     * optional leading whitespace & single dash mix
+     * square brackets, optionally containing whitespace and `x`
+     * optional whitespace
+     * remainder of the line is consumed as the textbox label
+     */
+    const checkboxMatch = value.match(/^(\s*-\s*)?\[([\sx]*)\]\s*([^\r\n]+)/);
+    if (checkboxMatch == null) return false;
+
+    if (silent) {
+      return true;
+    }
+
+    const [match, , checkboxStatus, text] = checkboxMatch;
+    const isChecked = checkboxStatus.indexOf('x') !== -1;
+
+    const position = eat.now();
+
+    const now = eat.now();
+    const offset = match.length - text.length;
+    now.column += offset;
+    now.offset += offset;
+    const children = this.tokenizeInline(text, now);
+
+    return eat(match)({
+      type: 'checkboxPlugin',
+      configuration: { isChecked, position },
+      children,
+    });
+  }
+
+  tokenizers.checkbox = tokenizeCheckbox;
+  methods.splice(methods.indexOf('text'), 0, 'checkbox'); // Run it just before `text`.
+}
+
+const checkboxMarkdownHandler = (h, node) => {
+  return h(node.position, 'checkboxPlugin', node.configuration, all(h, node));
+};
+const CheckboxMarkdownRenderer = ({ position, isChecked, children }) => {
+  const { markdown, setMarkdown } = useContext(EuiMarkdownContext);
+  return (
+    <EuiCheckbox
+      id={htmlIdGenerator()()}
+      checked={isChecked}
+      label={children}
+      onChange={() => {
+        const leadingMarkdown = markdown.substr(0, position.offset);
+
+        let index = position.offset;
+        let leadIn = '';
+        let hasSeenBracket = false;
+        for (; index < markdown.length; index++) {
+          const char = markdown[index];
+          if (hasSeenBracket === false) {
+            if (char === '[') hasSeenBracket = true;
+            else leadIn += char;
+          } else {
+            if (char === ']') break;
+          }
+        }
+        index++; // still need to skip over the closing bracket
+
+        const checkMarkdown = `[${isChecked ? ' ' : 'x'}]`;
+        const trailingMarkdown = markdown.substr(index);
+        const nextMarkdown = `${leadingMarkdown}${leadIn}${checkMarkdown}${trailingMarkdown}`;
+
+        setMarkdown(nextMarkdown);
+      }}
+    />
+  );
+};
+
+export {
+  CheckboxParser as parser,
+  checkboxMarkdownHandler as handler,
+  CheckboxMarkdownRenderer as renderer,
+};
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js b/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
index d98d60befae..49206f65881 100644
--- a/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
@@ -35,7 +35,7 @@ function TooltipParser() {
       let body = '';
       let openBrackets = 0;
 
-      for (index; index < value.length; index++) {
+      for (; index < value.length; index++) {
         const char = value[index];
 
         if (char === close && openBrackets === 0) {
diff --git a/src/components/index.js b/src/components/index.js
index 28513af9923..28f1b223aa1 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -212,7 +212,12 @@ export {
   EuiPinnableListGroup,
 } from './list_group';
 
-export { EuiMarkdownEditor } from './markdown_editor';
+export {
+  EuiMarkdownEditor,
+  EuiMarkdownContext,
+  defaultProcessingPlugins,
+  defaultParsingPlugins,
+} from './markdown_editor';
 export { EuiMark } from './mark';
 
 export {
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index d8388a18fc8..faa86af0def 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -1,5 +1,6 @@
 .euiMarkdownEditor__textArea {
   @include euiFormControlText;
+  font-family: $euiCodeFontFamily;
   width: 100%;
   height: 100%;
   min-height: 150px;
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
index 780bbb0324a..2ed1db5490f 100644
--- a/src/components/markdown_editor/index.ts
+++ b/src/components/markdown_editor/index.ts
@@ -22,4 +22,5 @@ export {
   EuiMarkdownEditorProps,
   defaultParsingPlugins,
   defaultProcessingPlugins,
+  EuiMarkdownContext,
 } from './markdown_editor';
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index e77b4fedcf8..b514891066a 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -18,6 +18,7 @@
  */
 
 import React, {
+  createContext,
   createElement,
   FunctionComponent,
   HTMLAttributes,
@@ -30,6 +31,8 @@ import classNames from 'classnames';
 import emoji from 'remark-emoji';
 import markdown from 'remark-parse';
 // @ts-ignore
+import disableTokenizers from 'remark-disable-tokenizers';
+// @ts-ignore
 import remark2rehype from 'remark-rehype';
 // @ts-ignore
 import highlight from 'remark-highlight.js';
@@ -48,6 +51,15 @@ import { EuiCodeBlock } from '../code';
 import { MARKDOWN_MODE, MODE_EDITING, MODE_VIEWING } from './markdown_modes';
 import { EuiMarkdownEditorUiPlugin } from './markdown_types';
 
+interface ContextShape {
+  markdown: string;
+  setMarkdown(next: string): void;
+}
+export const EuiMarkdownContext = createContext<ContextShape>({
+  markdown: '',
+  setMarkdown() {},
+});
+
 function storeMarkdownTree() {
   return function(tree: any, file: any) {
     file.data.markdownTree = JSON.parse(JSON.stringify(tree));
@@ -56,6 +68,13 @@ function storeMarkdownTree() {
 
 export const defaultParsingPlugins: PluggableList = [
   [markdown, {}],
+  [
+    disableTokenizers,
+    {
+      // disable the built-in task list / checkbox plugin in favour of a custom one
+      block: ['list'],
+    },
+  ],
   [highlight, {}],
   [emoji, { emoticon: true }],
   [storeMarkdownTree, {}],
@@ -179,33 +198,40 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
 
   const isPreviewing = viewMode === MODE_VIEWING;
 
+  const contextValue = useMemo<ContextShape>(
+    () => ({ markdown: value, setMarkdown: onChange }),
+    [value, onChange]
+  );
+
   return (
-    <div className={classes} {...rest}>
-      <EuiMarkdownEditorToolbar
-        markdownActions={markdownActions}
-        onClickPreview={() =>
-          setViewMode(isPreviewing ? MODE_EDITING : MODE_VIEWING)
-        }
-        viewMode={viewMode}
-        uiPlugins={uiPlugins}
-      />
-
-      {isPreviewing ? (
-        <div
-          className="euiMarkdownEditor__previewContainer"
-          style={{ height: `${height}px` }}>
-          <EuiMarkdownFormat processor={processor}>{value}</EuiMarkdownFormat>
-        </div>
-      ) : (
-        <EuiMarkdownEditorDropZone>
-          <EuiMarkdownEditorTextArea
-            height={height}
-            id={editorId}
-            onChange={e => onChange(e.target.value)}
-            value={value}
-          />
-        </EuiMarkdownEditorDropZone>
-      )}
-    </div>
+    <EuiMarkdownContext.Provider value={contextValue}>
+      <div className={classes} {...rest}>
+        <EuiMarkdownEditorToolbar
+          markdownActions={markdownActions}
+          onClickPreview={() =>
+            setViewMode(isPreviewing ? MODE_EDITING : MODE_VIEWING)
+          }
+          viewMode={viewMode}
+          uiPlugins={uiPlugins}
+        />
+
+        {isPreviewing ? (
+          <div
+            className="euiMarkdownEditor__previewContainer"
+            style={{ height: `${height}px` }}>
+            <EuiMarkdownFormat processor={processor}>{value}</EuiMarkdownFormat>
+          </div>
+        ) : (
+          <EuiMarkdownEditorDropZone>
+            <EuiMarkdownEditorTextArea
+              height={height}
+              id={editorId}
+              onChange={e => onChange(e.target.value)}
+              value={value}
+            />
+          </EuiMarkdownEditorDropZone>
+        )}
+      </div>
+    </EuiMarkdownContext.Provider>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 3f0f13734bb..6ece7c771ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3532,6 +3532,11 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
   integrity sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=
 
+clone@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 cloneable-readable@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.0.0.tgz#a6290d413f217a61232f95e458ff38418cfb0117"
@@ -13869,6 +13874,13 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-disable-tokenizers@^1.0.24:
+  version "1.0.24"
+  resolved "https://registry.yarnpkg.com/remark-disable-tokenizers/-/remark-disable-tokenizers-1.0.24.tgz#98efd5ade2da46e8e6167cc3318c7cd93d15449d"
+  integrity sha512-HsAmBY5cNliHYAzba4zuskZzkDdp6sG+tRelDb4AoPo2YHNGHnxYsatShzTIsnRNLgCbsxycW5Ge6KigHn701A==
+  dependencies:
+    clone "^2.1.2"
+
 remark-emoji@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.1.0.tgz#69165d1181b98a54ad5d9ef811003d53d7ebc7db"

From 512914fb9953853f2c339b5574135270d1384c19 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@gmail.com>
Date: Fri, 29 May 2020 20:54:19 +0100
Subject: [PATCH 23/43] [EuiMarkdownEditor] Improve markdown editor font
 (#3525)

* Improving font family and text area font styles

* Text color and text babckground

* Adding eui font family

* euiFormControlText

* Small fix

* Refactoring some styles

* Removing unecessary padding
---
 src/components/markdown_editor/_index.scss    |  1 +
 .../markdown_editor/_markdown_editor.scss     | 19 +------------------
 .../_markdown_editor_preview.scss             |  7 +++++++
 .../_markdown_editor_text_area.scss           |  4 +++-
 .../markdown_editor/_markdown_format.scss     |  9 ++-------
 .../markdown_editor/markdown_editor.tsx       |  2 +-
 6 files changed, 15 insertions(+), 27 deletions(-)
 create mode 100644 src/components/markdown_editor/_markdown_editor_preview.scss

diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index 521d3610e10..1611b7ef445 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -1,5 +1,6 @@
 @import 'markdown_editor';
 @import 'markdown_editor_drop_zone';
 @import 'markdown_format';
+@import 'markdown_editor_preview';
 @import 'markdown_editor_text_area';
 @import 'markdown_editor_toolbar';
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index aa882a23c70..e03f34d7a71 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -2,21 +2,4 @@
   &:focus-within {
     @include euiSlightShadowHover;
   }
-
-  .euiMarkdownEditor__textArea,
-  .euiMarkdownEditor__previewContainer {
-    padding: $euiSizeM;
-  }
-}
-
-.euiMarkdownEditor__previewContainer {
-  @include euiScrollBar;
-  background: $euiColorEmptyShade;
-  height: 150px;
-  overflow-y: auto;
-  border: $euiBorderThin;
-}
-
-.euiMarkdownEditor__textArea {
-  background: $euiColorEmptyShade;
-}
+}
\ No newline at end of file
diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss
new file mode 100644
index 00000000000..74707692d30
--- /dev/null
+++ b/src/components/markdown_editor/_markdown_editor_preview.scss
@@ -0,0 +1,7 @@
+.euiMarkdownEditor__preview {
+  @include euiScrollBar;
+  height: 150px;
+  overflow-y: auto;
+  border: $euiBorderThin;
+  padding: $euiSizeM;
+}
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index faa86af0def..023518bf916 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -1,13 +1,15 @@
 .euiMarkdownEditor__textArea {
   @include euiFormControlText;
-  font-family: $euiCodeFontFamily;
   width: 100%;
   height: 100%;
   min-height: 150px;
+  padding: $euiSizeM;
   background-color: $euiFormBackgroundColor;
   border: $euiBorderThin;
   border-bottom: 1px dashed $euiColorLightShade;
   border-color: $euiColorLightShade;
+  // Overrides the euiFormControlText line-height that is very small
+  line-height: $euiLineHeight;
   resize: vertical;
 
   &:focus {
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 4990ce7bead..aee97c47f0a 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -18,9 +18,8 @@ $euiDefaultFontSize: 14px;
 }
 
 .euiMarkdownFormat {
-  // sass-lint:disable-block indentation
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  @include euiFont;
+  @include euiText;
 
   // Font size variables
   $euiMarkdownFontSizeS: canvasToEm(12px);
@@ -46,10 +45,6 @@ $euiDefaultFontSize: 14px;
   $euiMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
   $euiMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);
 
-  &--reversed {
-    color: $euiColorLightestShade;
-  }
-
   > *:first-child {
     // sass-lint:disable-block no-important
     margin-top: 0 !important;
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index b514891066a..bcf05dd18c7 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -217,7 +217,7 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
 
         {isPreviewing ? (
           <div
-            className="euiMarkdownEditor__previewContainer"
+            className="euiMarkdownEditor__preview"
             style={{ height: `${height}px` }}>
             <EuiMarkdownFormat processor={processor}>{value}</EuiMarkdownFormat>
           </div>

From d0bf6ac7dca34f03618f5484299e6f8d09a9cdef Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 1 Jun 2020 14:56:52 -0600
Subject: [PATCH 24/43] Re-enable default markdown list parsing (#3531)

* [Markdown] Allow toolbar buttons to present modals to create/edit tags (#3506)

* Allow EuiMarkdownEditor's ui buttons trigger interactive modals for creating & editing tags

* export two internal markdown types that are needed externally when generating eui.d.ts

* Re-enable the default markdown list parsing/display, but keep EUI's checkbox override

* Give EuiMarkdownEditorTextArea a displayName
---
 package.json                                  |   1 -
 .../markdown_editor/plugins/markdown_chart.js |  97 ++++--
 .../plugins/markdown_checkbox.js              |  46 +--
 .../plugins/markdown_tooltip.js               |   8 +-
 src/components/markdown_editor/index.ts       |   2 +-
 .../markdown_editor/markdown_actions.ts       |  97 ++++--
 .../markdown_editor/markdown_context.ts       |  36 ++
 .../markdown_editor/markdown_editor.tsx       | 191 +++++++----
 .../markdown_editor_text_area.tsx             |  69 ++--
 .../markdown_editor_toolbar.tsx               | 307 +++++++++---------
 .../markdown_editor/markdown_types.ts         |  28 +-
 yarn.lock                                     |  12 -
 12 files changed, 541 insertions(+), 353 deletions(-)
 create mode 100644 src/components/markdown_editor/markdown_context.ts

diff --git a/package.json b/package.json
index 92e4822d2a9..566333a9665 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,6 @@
     "rehype-raw": "^4.0.1",
     "rehype-react": "^5.0.0",
     "rehype-stringify": "^6.0.1",
-    "remark-disable-tokenizers": "^1.0.24",
     "remark-emoji": "^2.1.0",
     "remark-highlight.js": "^5.2.0",
     "remark-parse": "^7.0.2",
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_chart.js b/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
index 6587b56efae..d5de9a3d54e 100644
--- a/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Chart,
   Settings,
@@ -7,6 +7,18 @@ import {
   DataGenerator,
 } from '@elastic/charts';
 import { EUI_CHARTS_THEME_LIGHT } from '../../../../../src/themes/charts/themes';
+import {
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiForm,
+  EuiFormRow,
+  EuiSelect,
+  EuiRange,
+} from '../../../../../src/components';
 import {
   euiPaletteColorBlind,
   euiPaletteComplimentary,
@@ -41,42 +53,90 @@ const chartDemoPlugin = {
     label: 'Chart',
     iconType: 'visArea',
   },
-  formatting: {
-    prefix: '!{chart',
-    suffix: '}',
-    trimFirst: true,
+  editor: function ChartEditor({ node, onSave, onCancel }) {
+    const [palette, setPalette] = useState((node && node.palette) || 4);
+    const [height, setHeight] = useState((node && node.height) || 300);
+
+    return (
+      <>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Chart data</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <>
+            <EuiForm>
+              <EuiFormRow label="Palette">
+                <EuiSelect
+                  options={[
+                    { value: 4, text: 'red' },
+                    { value: 5, text: 'green' },
+                  ]}
+                  value={palette}
+                  onChange={e => setPalette(parseInt(e.target.value, 10))}
+                />
+              </EuiFormRow>
+
+              <EuiFormRow label="Height">
+                <EuiRange
+                  value={height}
+                  min={100}
+                  max={500}
+                  step={10}
+                  showValue
+                  valueAppend="px"
+                  onChange={e => setHeight(parseInt(e.target.value, 10))}
+                />
+              </EuiFormRow>
+            </EuiForm>
+            <ChartMarkdownRenderer palette={palette} height={height} />
+          </>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
+
+          <EuiButton
+            onClick={() =>
+              onSave(`!{chart${JSON.stringify({ palette, height })}}`)
+            }
+            fill>
+            Save
+          </EuiButton>
+        </EuiModalFooter>
+      </>
+    );
   },
 };
 
 function ChartParser() {
   const Parser = this.Parser;
-  const tokenizers = Parser.prototype.inlineTokenizers;
-  const methods = Parser.prototype.inlineMethods;
+  const tokenizers = Parser.prototype.blockTokenizers;
+  const methods = Parser.prototype.blockMethods;
 
   function tokenizeChart(eat, value, silent) {
     if (value.startsWith('!{chart') === false) return false;
 
     const nextChar = value[7];
 
-    if (nextChar !== ' ' && nextChar !== '}') return false; // this isn't actually a chart
+    if (nextChar !== '{' && nextChar !== '}') return false; // this isn't actually a chart
 
     if (silent) {
       return true;
     }
 
     // is there a configuration?
-    const hasConfiguration = nextChar === ' ';
+    const hasConfiguration = nextChar === '{';
 
     let match = '!{chart';
     let configuration = {};
 
     if (hasConfiguration) {
-      match += ' ';
       let configurationString = '';
 
       let openObjects = 0;
 
-      for (let i = 8; i < value.length; i++) {
+      for (let i = 7; i < value.length; i++) {
         const char = value[i];
         if (char === '{') {
           openObjects++;
@@ -102,25 +162,18 @@ function ChartParser() {
     match += '}';
     return eat(match)({
       type: 'chartDemoPlugin',
-      configuration,
+      ...configuration,
     });
   }
-  tokenizeChart.notInBlock = true;
-  tokenizeChart.notInList = true;
-  tokenizeChart.notInLink = true;
-
-  tokenizeChart.locator = function locateChart(value, fromIndex) {
-    return value.indexOf('!{chart', fromIndex);
-  };
 
   tokenizers.chart = tokenizeChart;
   methods.splice(methods.indexOf('text'), 0, 'chart');
 }
 
 const chartMarkdownHandler = (h, node) => {
-  return h(node.position, 'chartDemoPlugin', node.configuration, []);
+  return h(node.position, 'chartDemoPlugin', node, []);
 };
-const chartMarkdownRenderer = ({ height = 200, palette = 5 }) => {
+const ChartMarkdownRenderer = ({ height = 200, palette = 5 }) => {
   const customColors = {
     colors: {
       vizColors: paletteData[paletteNames[palette]](5),
@@ -152,5 +205,5 @@ export {
   chartDemoPlugin as plugin,
   ChartParser as parser,
   chartMarkdownHandler as handler,
-  chartMarkdownRenderer as renderer,
+  ChartMarkdownRenderer as renderer,
 };
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js b/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js
index 5598ebfb128..347807b37bf 100644
--- a/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js
@@ -15,18 +15,16 @@ function CheckboxParser() {
      * optional whitespace
      * remainder of the line is consumed as the textbox label
      */
-    const checkboxMatch = value.match(/^(\s*-\s*)?\[([\sx]*)\]\s*([^\r\n]+)/);
+    const checkboxMatch = value.match(/^(\s*-\s*)?\[([\sx]*)\](.+)/);
     if (checkboxMatch == null) return false;
 
     if (silent) {
       return true;
     }
 
-    const [match, , checkboxStatus, text] = checkboxMatch;
+    const [match, lead = '', checkboxStatus, text] = checkboxMatch;
     const isChecked = checkboxStatus.indexOf('x') !== -1;
 
-    const position = eat.now();
-
     const now = eat.now();
     const offset = match.length - text.length;
     now.column += offset;
@@ -35,47 +33,35 @@ function CheckboxParser() {
 
     return eat(match)({
       type: 'checkboxPlugin',
-      configuration: { isChecked, position },
+      lead,
+      label: text,
+      isChecked,
       children,
     });
   }
 
   tokenizers.checkbox = tokenizeCheckbox;
-  methods.splice(methods.indexOf('text'), 0, 'checkbox'); // Run it just before `text`.
+  methods.splice(methods.indexOf('list'), 0, 'checkbox'); // Run it just before default `list` plugin to inject our own idea of checkboxes.
 }
 
 const checkboxMarkdownHandler = (h, node) => {
-  return h(node.position, 'checkboxPlugin', node.configuration, all(h, node));
+  return h(node.position, 'checkboxPlugin', node, all(h, node));
 };
-const CheckboxMarkdownRenderer = ({ position, isChecked, children }) => {
-  const { markdown, setMarkdown } = useContext(EuiMarkdownContext);
+const CheckboxMarkdownRenderer = ({
+  position,
+  lead,
+  label,
+  isChecked,
+  children,
+}) => {
+  const { replaceNode } = useContext(EuiMarkdownContext);
   return (
     <EuiCheckbox
       id={htmlIdGenerator()()}
       checked={isChecked}
       label={children}
       onChange={() => {
-        const leadingMarkdown = markdown.substr(0, position.offset);
-
-        let index = position.offset;
-        let leadIn = '';
-        let hasSeenBracket = false;
-        for (; index < markdown.length; index++) {
-          const char = markdown[index];
-          if (hasSeenBracket === false) {
-            if (char === '[') hasSeenBracket = true;
-            else leadIn += char;
-          } else {
-            if (char === ']') break;
-          }
-        }
-        index++; // still need to skip over the closing bracket
-
-        const checkMarkdown = `[${isChecked ? ' ' : 'x'}]`;
-        const trailingMarkdown = markdown.substr(index);
-        const nextMarkdown = `${leadingMarkdown}${leadIn}${checkMarkdown}${trailingMarkdown}`;
-
-        setMarkdown(nextMarkdown);
+        replaceNode(position, `${lead}[${isChecked ? ' ' : 'x'}]${label}`);
       }}
     />
   );
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js b/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
index 49206f65881..e84677a7b08 100644
--- a/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
@@ -62,13 +62,13 @@ function TooltipParser() {
     }
 
     const now = eat.now();
-    now.column += 11 + tooltipText.length;
-    now.offset += 11 + tooltipText.length;
+    now.column += 10;
+    now.offset += 10;
     const children = this.tokenizeInline(tooltipAnchor, now);
 
     return eat(`!{tooltip[${tooltipAnchor}](${tooltipText})}`)({
       type: 'tooltipPlugin',
-      configuration: { content: tooltipText },
+      content: tooltipText,
       children,
     });
   }
@@ -83,7 +83,7 @@ function TooltipParser() {
 }
 
 const tooltipMarkdownHandler = (h, node) => {
-  return h(node.position, 'tooltipPlugin', node.configuration, all(h, node));
+  return h(node.position, 'tooltipPlugin', node, all(h, node));
 };
 const tooltipMarkdownRenderer = ({ content, children }) => {
   return (
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
index 2ed1db5490f..49cda3bc240 100644
--- a/src/components/markdown_editor/index.ts
+++ b/src/components/markdown_editor/index.ts
@@ -22,5 +22,5 @@ export {
   EuiMarkdownEditorProps,
   defaultParsingPlugins,
   defaultProcessingPlugins,
-  EuiMarkdownContext,
 } from './markdown_editor';
+export { EuiMarkdownContext } from './markdown_context';
diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
index a5e5ba70f24..fac99205526 100644
--- a/src/components/markdown_editor/markdown_actions.ts
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -20,6 +20,7 @@
 import {
   EuiMarkdownEditorUiPlugin,
   EuiMarkdownFormatting,
+  isPluginWithImmediateFormatting,
 } from './markdown_types';
 
 /**
@@ -30,7 +31,7 @@ import {
  * @param {string} editorID
  */
 class MarkdownActions {
-  styles: Record<string, EuiMarkdownFormatting>;
+  styles: Record<string, EuiMarkdownEditorUiPlugin>;
 
   constructor(public editorID: string, uiPlugins: EuiMarkdownEditorUiPlugin[]) {
     /**
@@ -39,48 +40,76 @@ class MarkdownActions {
      */
     this.styles = {
       ...uiPlugins.reduce<MarkdownActions['styles']>(
-        (mappedPlugins, { name, formatting }) => {
-          mappedPlugins[name] = formatting;
+        (mappedPlugins, plugin) => {
+          mappedPlugins[plugin.name] = plugin;
           return mappedPlugins;
         },
         {}
       ),
       mdBold: {
-        prefix: '**',
-        suffix: '**',
-        trimFirst: true,
+        name: 'mdBold',
+        button: { label: '', iconType: '' },
+        formatting: {
+          prefix: '**',
+          suffix: '**',
+          trimFirst: true,
+        },
       },
       mdItalic: {
-        prefix: '_',
-        suffix: '_',
-        trimFirst: true,
+        name: 'mdItalic',
+        button: { label: '', iconType: '' },
+        formatting: {
+          prefix: '_',
+          suffix: '_',
+          trimFirst: true,
+        },
       },
       mdQuote: {
-        prefix: '> ',
-        multiline: true,
-        surroundWithNewlines: true,
+        name: 'mdQuote',
+        button: { label: '', iconType: '' },
+        formatting: {
+          prefix: '> ',
+          multiline: true,
+          surroundWithNewlines: true,
+        },
       },
       mdCode: {
-        prefix: '`',
-        suffix: '`',
-        blockPrefix: '```',
-        blockSuffix: '```',
+        name: 'mdCode',
+        button: { label: '', iconType: '' },
+        formatting: {
+          prefix: '`',
+          suffix: '`',
+          blockPrefix: '```',
+          blockSuffix: '```',
+        },
       },
       mdLink: {
-        prefix: '[',
-        suffix: '](url)',
-        replaceNext: 'url',
-        scanFor: 'https?://',
+        name: 'mdLink',
+        button: { label: '', iconType: '' },
+        formatting: {
+          prefix: '[',
+          suffix: '](url)',
+          replaceNext: 'url',
+          scanFor: 'https?://',
+        },
       },
       mdUl: {
-        prefix: '- ',
-        multiline: true,
-        surroundWithNewlines: true,
+        name: 'mdUl',
+        button: { label: '', iconType: '' },
+        formatting: {
+          prefix: '- ',
+          multiline: true,
+          surroundWithNewlines: true,
+        },
       },
       mdOl: {
-        prefix: '1. ',
-        multiline: true,
-        orderedList: true,
+        name: 'mdOl',
+        button: { label: '', iconType: '' },
+        formatting: {
+          prefix: '1. ',
+          multiline: true,
+          orderedList: true,
+        },
       },
     };
   }
@@ -89,11 +118,17 @@ class MarkdownActions {
    * .do() accepts a string and retrieves the correlating style object (defined in the
    * constructor). It passes this to applyStyle() that does the text manipulation.
    *
-   * @param {string} action
+   * @param {string} pluginName
    * @memberof MarkdownActions
    */
-  do(action: string) {
-    this.applyStyle(this.styles[action]);
+  do(pluginName: string) {
+    const plugin = this.styles[pluginName];
+    if (isPluginWithImmediateFormatting(plugin)) {
+      this.applyStyle(plugin.formatting);
+      return true;
+    } else {
+      return plugin;
+    }
   }
 
   /**
@@ -103,7 +138,7 @@ class MarkdownActions {
    * @param {object} incomingStyle
    * @memberof MarkdownActions
    */
-  applyStyle(incomingStyle: object) {
+  applyStyle(incomingStyle: EuiMarkdownFormatting) {
     const defaults = {
       prefix: '',
       suffix: '',
@@ -200,7 +235,7 @@ let canInsertText: boolean | null = null;
  * above doesn't work. Although all modern browsers, including IE, seem to be fine:
  * https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
  */
-function insertText(
+export function insertText(
   textarea: HTMLTextAreaElement,
   { text, selectionStart, selectionEnd }: SelectionRange
 ) {
diff --git a/src/components/markdown_editor/markdown_context.ts b/src/components/markdown_editor/markdown_context.ts
new file mode 100644
index 00000000000..efe8250ffaf
--- /dev/null
+++ b/src/components/markdown_editor/markdown_context.ts
@@ -0,0 +1,36 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createContext } from 'react';
+import { EuiMarkdownEditorUiPlugin } from './markdown_types';
+
+interface MarkdownPosition {
+  start: { line: number; column: number; offset: number };
+  end: { line: number; column: number; offset: number };
+}
+
+export interface ContextShape {
+  openPluginEditor: (plugin: EuiMarkdownEditorUiPlugin) => void;
+  replaceNode(position: MarkdownPosition, next: string): void;
+}
+
+export const EuiMarkdownContext = createContext<ContextShape>({
+  openPluginEditor: () => {},
+  replaceNode() {},
+});
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index bcf05dd18c7..7230e039ccd 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -18,21 +18,19 @@
  */
 
 import React, {
-  createContext,
   createElement,
   FunctionComponent,
   HTMLAttributes,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
-import unified, { PluggableList } from 'unified';
+import unified, { PluggableList, Processor } from 'unified';
 import classNames from 'classnames';
 // @ts-ignore
 import emoji from 'remark-emoji';
 import markdown from 'remark-parse';
 // @ts-ignore
-import disableTokenizers from 'remark-disable-tokenizers';
-// @ts-ignore
 import remark2rehype from 'remark-rehype';
 // @ts-ignore
 import highlight from 'remark-highlight.js';
@@ -40,7 +38,7 @@ import highlight from 'remark-highlight.js';
 import rehype2react from 'rehype-react';
 
 import { CommonProps } from '../common';
-import MarkdownActions from './markdown_actions';
+import MarkdownActions, { insertText } from './markdown_actions';
 import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
 import { EuiMarkdownFormat } from './markdown_format';
@@ -50,34 +48,14 @@ import { EuiLink } from '../link';
 import { EuiCodeBlock } from '../code';
 import { MARKDOWN_MODE, MODE_EDITING, MODE_VIEWING } from './markdown_modes';
 import { EuiMarkdownEditorUiPlugin } from './markdown_types';
-
-interface ContextShape {
-  markdown: string;
-  setMarkdown(next: string): void;
-}
-export const EuiMarkdownContext = createContext<ContextShape>({
-  markdown: '',
-  setMarkdown() {},
-});
-
-function storeMarkdownTree() {
-  return function(tree: any, file: any) {
-    file.data.markdownTree = JSON.parse(JSON.stringify(tree));
-  };
-}
+import { EuiOverlayMask } from '../overlay_mask';
+import { EuiModal } from '../modal';
+import { ContextShape, EuiMarkdownContext } from './markdown_context';
 
 export const defaultParsingPlugins: PluggableList = [
   [markdown, {}],
-  [
-    disableTokenizers,
-    {
-      // disable the built-in task list / checkbox plugin in favour of a custom one
-      block: ['list'],
-    },
-  ],
   [highlight, {}],
   [emoji, { emoticon: true }],
-  [storeMarkdownTree, {}],
 ];
 
 export const defaultProcessingPlugins: PluggableList = [
@@ -144,9 +122,12 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
   const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(MODE_EDITING);
   const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [_editorId]);
 
+  const [pluginEditorPlugin, setPluginEditorPlugin] = useState<
+    EuiMarkdownEditorUiPlugin | undefined
+  >(undefined);
+
   const markdownActions = useMemo(
     () => new MarkdownActions(editorId, uiPlugins),
-
     // uiPlugins _is_ accounted for
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [editorId, uiPlugins.map(({ name }) => name).join(',')]
@@ -154,6 +135,21 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
 
   const classes = classNames('euiMarkdownEditor', className);
 
+  const parser = useMemo(() => {
+    const Compiler = (tree: any) => {
+      return tree;
+    };
+
+    function identityCompiler(this: Processor) {
+      this.Compiler = Compiler;
+    }
+    return unified()
+      .use(parsingPluginList)
+      .use(identityCompiler);
+  }, [parsingPluginList]);
+
+  const parsed = useMemo(() => parser.processSync(value), [parser, value]);
+
   const processor = useMemo(
     () =>
       unified()
@@ -162,51 +158,68 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
     [parsingPluginList, processingPluginList]
   );
 
-  // const Compiler = (tree, file) => {
-  //   return JSON.stringify(tree, null, 2);
-  // }
-  //
-  // function stringify (options) {
-  //   this.Compiler = Compiler;
-  // }
-  //
-  // console.log(unified().use(parsingPluginList).use([remark2rehype, { allowDangerousHTML: true }]).use(rehypestringify).processSync(value));
-  // console.log(
-  //   JSON.parse(
-  //     unified()
-  //     .use(parsingPluginList)
-  //     .use(remark2rehype, {
-  //       allowDangerousHTML: true,
-  //       handlers: {
-  //         chart(h, node) {
-  //           console.log(h);
-  //           console.log(node);
-  //           return h(node.position, 'strong', {className: 'test'}, unistBuilder('test', 'HEY'));
-  //         }
-  //       },
-  //       unknownHandler(h, node) {
-  //         console.log(h);
-  //         console.log(node);
-  //         h(node.position, 'code', 'THIS IS A TEST');
-  //       }
-  //     })
-  //     .use(stringify)
-  //     .processSync(value)
-  //     .contents
-  //   )
-  // );
-
   const isPreviewing = viewMode === MODE_VIEWING;
 
   const contextValue = useMemo<ContextShape>(
-    () => ({ markdown: value, setMarkdown: onChange }),
+    () => ({
+      openPluginEditor: (plugin: EuiMarkdownEditorUiPlugin) =>
+        setPluginEditorPlugin(() => plugin),
+      replaceNode: (position, next) => {
+        const leading = value.substr(0, position.start.offset);
+        const trailing = value.substr(position.end.offset);
+        onChange(`${leading}${next}${trailing}`);
+      },
+    }),
     [value, onChange]
   );
 
+  const [selectedNode, setSelectedNode] = useState();
+
+  const [textareaRef, setTextareaRef] = useState<HTMLTextAreaElement | null>(
+    null
+  );
+  useEffect(() => {
+    if (textareaRef == null) return;
+
+    const getCursorNode = () => {
+      const { selectionStart } = textareaRef;
+
+      let node: any = parsed.contents;
+
+      outer: while (true) {
+        if (node.children) {
+          for (let i = 0; i < node.children.length; i++) {
+            const child = node.children[i];
+            if (
+              child.position.start.offset < selectionStart &&
+              selectionStart < child.position.end.offset
+            ) {
+              if (child.type === 'text') break outer; // don't dive into `text` nodes
+              node = child;
+              continue outer;
+            }
+          }
+        }
+        break;
+      }
+
+      setSelectedNode(node);
+    };
+
+    textareaRef.addEventListener('keyup', getCursorNode);
+    textareaRef.addEventListener('mouseup', getCursorNode);
+
+    return () => {
+      textareaRef.removeEventListener('keyup', getCursorNode);
+      textareaRef.removeEventListener('mouseup', getCursorNode);
+    };
+  }, [textareaRef, parsed]);
+
   return (
     <EuiMarkdownContext.Provider value={contextValue}>
       <div className={classes} {...rest}>
         <EuiMarkdownEditorToolbar
+          selectedNode={selectedNode}
           markdownActions={markdownActions}
           onClickPreview={() =>
             setViewMode(isPreviewing ? MODE_EDITING : MODE_VIEWING)
@@ -222,14 +235,48 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
             <EuiMarkdownFormat processor={processor}>{value}</EuiMarkdownFormat>
           </div>
         ) : (
-          <EuiMarkdownEditorDropZone>
-            <EuiMarkdownEditorTextArea
-              height={height}
-              id={editorId}
-              onChange={e => onChange(e.target.value)}
-              value={value}
-            />
-          </EuiMarkdownEditorDropZone>
+          <>
+            <EuiMarkdownEditorDropZone>
+              <EuiMarkdownEditorTextArea
+                ref={setTextareaRef}
+                height={height}
+                id={editorId}
+                onChange={e => onChange(e.target.value)}
+                value={value}
+              />
+            </EuiMarkdownEditorDropZone>
+            {textareaRef && pluginEditorPlugin && (
+              <EuiOverlayMask>
+                <EuiModal onClose={() => setPluginEditorPlugin(undefined)}>
+                  {createElement(pluginEditorPlugin.editor!, {
+                    node:
+                      selectedNode &&
+                      selectedNode.type === pluginEditorPlugin.name
+                        ? selectedNode
+                        : null,
+                    onCancel: () => setPluginEditorPlugin(undefined),
+                    onSave: markdown => {
+                      if (
+                        selectedNode &&
+                        selectedNode.type === pluginEditorPlugin.name
+                      ) {
+                        textareaRef.setSelectionRange(
+                          selectedNode.position.start.offset,
+                          selectedNode.position.end.offset
+                        );
+                      }
+                      insertText(textareaRef, {
+                        text: markdown,
+                        selectionStart: undefined,
+                        selectionEnd: undefined,
+                      });
+                      setPluginEditorPlugin(undefined);
+                    },
+                  })}
+                </EuiModal>
+              </EuiOverlayMask>
+            )}
+          </>
         )}
       </div>
     </EuiMarkdownContext.Provider>
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index 15cebac258c..8786e66705a 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { TextareaHTMLAttributes, Ref, FunctionComponent } from 'react';
+import React, { TextareaHTMLAttributes, forwardRef } from 'react';
 import { CommonProps } from '../common';
 
 export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
@@ -33,8 +33,6 @@ export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
      */
     resize?: keyof typeof resizeToClassNameMap;
 
-    inputRef?: Ref<HTMLTextAreaElement>;
-
     height: number;
   };
 
@@ -47,34 +45,41 @@ const resizeToClassNameMap = {
 
 export const RESIZE = Object.keys(resizeToClassNameMap);
 
-export const EuiMarkdownEditorTextArea: FunctionComponent<
+export const EuiMarkdownEditorTextArea = forwardRef<
+  HTMLTextAreaElement,
   EuiMarkdownEditorTextAreaProps
-> = ({
-  children,
-  className,
-  compressed,
-  id,
-  inputRef,
-  isInvalid,
-  name,
-  placeholder,
-  rows,
-  height,
-  ...rest
-}) => {
-  const dropZoneButtonHeight = 32;
+>(
+  (
+    {
+      children,
+      className,
+      compressed,
+      id,
+      isInvalid,
+      name,
+      placeholder,
+      rows,
+      height,
+      ...rest
+    },
+    ref
+  ) => {
+    const dropZoneButtonHeight = 32;
 
-  return (
-    <textarea
-      style={{ height: `calc(${height - dropZoneButtonHeight}px` }}
-      className="euiMarkdownEditor__textArea"
-      {...rest}
-      rows={6}
-      name={name}
-      id={id}
-      ref={inputRef}
-      placeholder={placeholder}>
-      {children}
-    </textarea>
-  );
-};
+    return (
+      <textarea
+        ref={ref}
+        style={{ height: `calc(${height - dropZoneButtonHeight}px` }}
+        className="euiMarkdownEditor__textArea"
+        {...rest}
+        rows={6}
+        name={name}
+        id={id}
+        placeholder={placeholder}>
+        {children}
+      </textarea>
+    );
+  }
+);
+
+EuiMarkdownEditorTextArea.displayName = 'EuiMarkdownEditorTextArea';
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 9f81a2d2e58..4ec22157ff6 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { Component, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
 import { CommonProps } from '../common';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiFlexItem, EuiFlexGroup } from '../flex';
@@ -25,168 +25,185 @@ import { EuiI18n } from '../i18n';
 import { EuiToolTip } from '../tool_tip';
 import { MARKDOWN_MODE, MODE_VIEWING } from './markdown_modes';
 import { EuiMarkdownEditorUiPlugin } from './markdown_types';
+import { EuiMarkdownContext } from './markdown_context';
+import MarkdownActions from './markdown_actions';
 
 export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
-    markdownActions?: any;
-    viewMode?: MARKDOWN_MODE;
-    onClickPreview?: any;
+    selectedNode?: null | any;
+    markdownActions: MarkdownActions;
+    viewMode: MARKDOWN_MODE;
+    onClickPreview: any;
     uiPlugins: EuiMarkdownEditorUiPlugin[];
   };
 
-export class EuiMarkdownEditorToolbar extends Component<
-  EuiMarkdownEditorToolbarProps
-> {
-  boldItalicButtons = [
-    {
-      id: 'mdBold',
-      label: 'Bold',
-      name: 'bold',
-      iconType: 'editorBold',
-    },
-    {
-      id: 'mdItalic',
-      label: 'Italic',
-      name: 'italic',
-      iconType: 'editorItalic',
-    },
-  ];
+const boldItalicButtons = [
+  {
+    id: 'mdBold',
+    label: 'Bold',
+    name: 'bold',
+    iconType: 'editorBold',
+  },
+  {
+    id: 'mdItalic',
+    label: 'Italic',
+    name: 'italic',
+    iconType: 'editorItalic',
+  },
+];
 
-  listButtons = [
-    {
-      id: 'mdUl',
-      label: 'Unordered list',
-      name: 'ul',
-      iconType: 'editorUnorderedList',
-    },
-    {
-      id: 'mdOl',
-      label: 'Ordered list',
-      name: 'ol',
-      iconType: 'editorOrderedList',
-    },
-  ];
+const listButtons = [
+  {
+    id: 'mdUl',
+    label: 'Unordered list',
+    name: 'ul',
+    iconType: 'editorUnorderedList',
+  },
+  {
+    id: 'mdOl',
+    label: 'Ordered list',
+    name: 'ol',
+    iconType: 'editorOrderedList',
+  },
+];
 
-  quoteCodeLinkButtons = [
-    {
-      id: 'mdQuote',
-      label: 'Quote',
-      name: 'quote',
-      iconType: 'editorComment',
-    },
-    {
-      id: 'mdCode',
-      label: 'Code',
-      name: 'code',
-      iconType: 'editorCodeBlock',
-    },
-    {
-      id: 'mdLink',
-      label: 'Link',
-      name: 'link',
-      iconType: 'editorLink',
-    },
-  ];
+const quoteCodeLinkButtons = [
+  {
+    id: 'mdQuote',
+    label: 'Quote',
+    name: 'quote',
+    iconType: 'editorComment',
+  },
+  {
+    id: 'mdCode',
+    label: 'Code',
+    name: 'code',
+    iconType: 'editorCodeBlock',
+  },
+  {
+    id: 'mdLink',
+    label: 'Link',
+    name: 'link',
+    iconType: 'editorLink',
+  },
+];
 
-  handleMdButtonClick = (mdButtonId: string) => {
-    this.props.markdownActions.do(mdButtonId);
-  };
+export const EuiMarkdownEditorToolbar: FunctionComponent<
+  EuiMarkdownEditorToolbarProps
+> = ({
+  markdownActions,
+  viewMode,
+  onClickPreview,
+  uiPlugins,
+  selectedNode,
+}) => {
+  const { openPluginEditor } = useContext(EuiMarkdownContext);
 
-  render() {
-    const { viewMode, onClickPreview, uiPlugins } = this.props;
+  const handleMdButtonClick = (mdButtonId: string) => {
+    const actionResult = markdownActions.do(mdButtonId);
+    if (actionResult !== true) openPluginEditor(actionResult);
+  };
 
-    const isPreviewing = viewMode === MODE_VIEWING;
+  const isPreviewing = viewMode === MODE_VIEWING;
 
-    return (
-      <div className="euiMarkdownEditor__toolbar">
-        <EuiFlexGroup
-          justifyContent="spaceBetween"
-          alignItems="center"
-          responsive={false}>
-          <EuiFlexItem
-            grow={false}
-            className="euiMarkdownEditor__toolbar__buttons">
-            {this.boldItalicButtons.map(item => (
-              <EuiToolTip key={item.id} content={item.label} delay="long">
-                <EuiButtonIcon
-                  color="text"
-                  onClick={() => this.handleMdButtonClick(item.id)}
-                  iconType={item.iconType}
-                  aria-label={item.label}
-                  isDisabled={isPreviewing}
-                />
-              </EuiToolTip>
-            ))}
-            <span className="euiMarkdownEditor__toolbar__divider" />
-            {this.listButtons.map(item => (
-              <EuiToolTip key={item.id} content={item.label} delay="long">
-                <EuiButtonIcon
-                  color="text"
-                  onClick={() => this.handleMdButtonClick(item.id)}
-                  iconType={item.iconType}
-                  aria-label={item.label}
-                  isDisabled={isPreviewing}
-                />
-              </EuiToolTip>
-            ))}
-            <span className="euiMarkdownEditor__toolbar__divider" />
-            {this.quoteCodeLinkButtons.map(item => (
-              <EuiToolTip key={item.id} content={item.label} delay="long">
-                <EuiButtonIcon
-                  color="text"
-                  onClick={() => this.handleMdButtonClick(item.id)}
-                  iconType={item.iconType}
-                  aria-label={item.label}
-                  isDisabled={isPreviewing}
-                />
-              </EuiToolTip>
-            ))}
-            {uiPlugins.length > 0 ? (
-              <>
-                <span className="euiMarkdownEditor__toolbar__divider" />
-                {uiPlugins.map(({ name, button }) => (
+  return (
+    <div className="euiMarkdownEditor__toolbar">
+      <EuiFlexGroup
+        justifyContent="spaceBetween"
+        alignItems="center"
+        responsive={false}>
+        <EuiFlexItem
+          grow={false}
+          className="euiMarkdownEditor__toolbar__buttons">
+          {boldItalicButtons.map(item => (
+            <EuiToolTip key={item.id} content={item.label} delay="long">
+              <EuiButtonIcon
+                color="text"
+                onClick={() => handleMdButtonClick(item.id)}
+                iconType={item.iconType}
+                aria-label={item.label}
+                isDisabled={isPreviewing}
+              />
+            </EuiToolTip>
+          ))}
+          <span className="euiMarkdownEditor__toolbar__divider" />
+          {listButtons.map(item => (
+            <EuiToolTip key={item.id} content={item.label} delay="long">
+              <EuiButtonIcon
+                color="text"
+                onClick={() => handleMdButtonClick(item.id)}
+                iconType={item.iconType}
+                aria-label={item.label}
+                isDisabled={isPreviewing}
+              />
+            </EuiToolTip>
+          ))}
+          <span className="euiMarkdownEditor__toolbar__divider" />
+          {quoteCodeLinkButtons.map(item => (
+            <EuiToolTip key={item.id} content={item.label} delay="long">
+              <EuiButtonIcon
+                color="text"
+                onClick={() => handleMdButtonClick(item.id)}
+                iconType={item.iconType}
+                aria-label={item.label}
+                isDisabled={isPreviewing}
+              />
+            </EuiToolTip>
+          ))}
+          {uiPlugins.length > 0 ? (
+            <>
+              <span className="euiMarkdownEditor__toolbar__divider" />
+              {uiPlugins.map(({ name, button }) => {
+                const isSelectedNodeType =
+                  selectedNode && selectedNode.type === name;
+                return (
                   <EuiToolTip key={name} content={button.label} delay="long">
                     <EuiButtonIcon
                       color="text"
-                      onClick={() => this.handleMdButtonClick(name)}
+                      {...(isSelectedNodeType
+                        ? {
+                            style: { background: 'rgba(0, 0, 0, 0.15)' },
+                          }
+                        : null)}
+                      onClick={() => handleMdButtonClick(name)}
                       iconType={button.iconType}
                       aria-label={button.label}
                       isDisabled={isPreviewing}
                     />
                   </EuiToolTip>
-                ))}
-              </>
-            ) : null}
-          </EuiFlexItem>
+                );
+              })}
+            </>
+          ) : null}
+        </EuiFlexItem>
 
-          <EuiFlexItem grow={false}>
-            {/* The idea was to use the EuiButtonToggle but it doesn't work when pressing the enter key */}
-            {isPreviewing ? (
-              <EuiButtonEmpty
-                iconType="editorCodeBlock"
-                color="text"
-                size="s"
-                onClick={onClickPreview}>
-                <EuiI18n
-                  token="euiMarkdownEditorToolbar.editor"
-                  default="Editor"
-                />
-              </EuiButtonEmpty>
-            ) : (
-              <EuiButtonEmpty
-                iconType="eye"
-                color="text"
-                size="s"
-                onClick={onClickPreview}>
-                <EuiI18n
-                  token="euiMarkdownEditorToolbar.previewMarkdown"
-                  default="Preview"
-                />
-              </EuiButtonEmpty>
-            )}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </div>
-    );
-  }
-}
+        <EuiFlexItem grow={false}>
+          {/* The idea was to use the EuiButtonToggle but it doesn't work when pressing the enter key */}
+          {isPreviewing ? (
+            <EuiButtonEmpty
+              iconType="editorCodeBlock"
+              color="text"
+              size="s"
+              onClick={onClickPreview}>
+              <EuiI18n
+                token="euiMarkdownEditorToolbar.editor"
+                default="Editor"
+              />
+            </EuiButtonEmpty>
+          ) : (
+            <EuiButtonEmpty
+              iconType="eye"
+              color="text"
+              size="s"
+              onClick={onClickPreview}>
+              <EuiI18n
+                token="euiMarkdownEditorToolbar.previewMarkdown"
+                default="Preview"
+              />
+            </EuiButtonEmpty>
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
+};
diff --git a/src/components/markdown_editor/markdown_types.ts b/src/components/markdown_editor/markdown_types.ts
index 529d4f2fbd4..ad6605d17e6 100644
--- a/src/components/markdown_editor/markdown_types.ts
+++ b/src/components/markdown_editor/markdown_types.ts
@@ -18,15 +18,37 @@
  */
 
 import { IconType } from '../icon';
+import { ComponentType } from 'react';
 
-export interface EuiMarkdownEditorUiPlugin {
+export interface EuiMarkdownEditorUiPluginEditorProps {
+  node?: object | null;
+  onCancel: () => void;
+  onSave: (markdown: string) => void;
+}
+
+export const isPluginWithImmediateFormatting = (
+  x: PluginWithImmediateFormatting | PluginWithDelayedFormatting
+): x is PluginWithImmediateFormatting => {
+  return x.hasOwnProperty('formatting');
+};
+
+export interface PluginWithImmediateFormatting {
+  formatting: EuiMarkdownFormatting;
+  editor?: never;
+}
+
+export interface PluginWithDelayedFormatting {
+  formatting?: never;
+  editor: ComponentType<EuiMarkdownEditorUiPluginEditorProps>;
+}
+
+export type EuiMarkdownEditorUiPlugin = {
   name: string;
   button: {
     label: string;
     iconType: IconType;
   };
-  formatting: EuiMarkdownFormatting;
-}
+} & (PluginWithImmediateFormatting | PluginWithDelayedFormatting);
 
 export interface EuiMarkdownFormatting {
   prefix?: string;
diff --git a/yarn.lock b/yarn.lock
index b527b774eb1..47505d6b23c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3517,11 +3517,6 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
   integrity sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=
 
-clone@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
-  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
-
 cloneable-readable@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.0.0.tgz#a6290d413f217a61232f95e458ff38418cfb0117"
@@ -13833,13 +13828,6 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
-remark-disable-tokenizers@^1.0.24:
-  version "1.0.24"
-  resolved "https://registry.yarnpkg.com/remark-disable-tokenizers/-/remark-disable-tokenizers-1.0.24.tgz#98efd5ade2da46e8e6167cc3318c7cd93d15449d"
-  integrity sha512-HsAmBY5cNliHYAzba4zuskZzkDdp6sG+tRelDb4AoPo2YHNGHnxYsatShzTIsnRNLgCbsxycW5Ge6KigHn701A==
-  dependencies:
-    clone "^2.1.2"
-
 remark-emoji@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.1.0.tgz#69165d1181b98a54ad5d9ef811003d53d7ebc7db"

From dc8fee5c0b79e6c04ba0b310be31b5d6f4f8d102 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 15 Jun 2020 11:55:23 -0600
Subject: [PATCH 25/43] Enable undo/redo for markdown editor, apart from
 firefox (#3582)

* Enable undo/redo for markdown editor, apart from firefox

* Add test-and-retry logic to insertText to account for ability to focus the text area before brute forcing
---
 .../markdown_editor.test.tsx.snap             | 54 ++++++------
 .../markdown_editor/markdown_actions.ts       | 75 +++++++++-------
 .../markdown_editor/markdown_editor.tsx       | 86 +++++++++----------
 3 files changed, 114 insertions(+), 101 deletions(-)

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 5c1842a7c09..20cafbacfc1 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -153,35 +153,39 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
     </div>
   </div>
   <div
-    class="euiMarkdownEditor__dropZone"
+    style="display:block"
   >
-    <textarea
-      class="euiMarkdownEditor__textArea"
-      id="editorId"
-      rows="6"
-      style="height:calc(118px"
-    />
-    <button
-      class="euiMarkdownEditor__dropZone__button"
+    <div
+      class="euiMarkdownEditor__dropZone"
     >
-      <div
-        aria-hidden="true"
-        class="euiMarkdownEditor__dropZone__icon"
-        data-euiicon-type="paperClip"
+      <textarea
+        class="euiMarkdownEditor__textArea"
+        id="editorId"
+        rows="6"
+        style="height:calc(118px"
       />
-      <div
-        class="euiMarkdownEditor__dropZone__text"
+      <button
+        class="euiMarkdownEditor__dropZone__button"
       >
-        Attach files by dragging & dropping or by clicking this area
-      </div>
-    </button>
-    <input
-      autocomplete="off"
-      multiple=""
-      style="display:none"
-      tabindex="-1"
-      type="file"
-    />
+        <div
+          aria-hidden="true"
+          class="euiMarkdownEditor__dropZone__icon"
+          data-euiicon-type="paperClip"
+        />
+        <div
+          class="euiMarkdownEditor__dropZone__text"
+        >
+          Attach files by dragging & dropping or by clicking this area
+        </div>
+      </button>
+      <input
+        autocomplete="off"
+        multiple=""
+        style="display:none"
+        tabindex="-1"
+        type="file"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
index fac99205526..8c12248a464 100644
--- a/src/components/markdown_editor/markdown_actions.ts
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -227,14 +227,8 @@ function wordSelectionEnd(text: string, i: number, multiline: boolean): number {
   return index;
 }
 
-let canInsertText: boolean | null = null;
-
-/**
- * Note that we're using the native HTMLTextAreaElement.set() method to play nicely with
- * React's synthetic event system. We fallback to a brute force way of doing it if the
- * above doesn't work. Although all modern browsers, including IE, seem to be fine:
- * https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- */
+const MAX_TRIES = 10;
+const TRY_TIMEOUT = 10 /*ms*/;
 export function insertText(
   textarea: HTMLTextAreaElement,
   { text, selectionStart, selectionEnd }: SelectionRange
@@ -242,39 +236,54 @@ export function insertText(
   const originalSelectionStart = textarea.selectionStart;
   const before = textarea.value.slice(0, originalSelectionStart);
   const after = textarea.value.slice(textarea.selectionEnd);
-  const inputEvent = new Event('input', { bubbles: true });
-
-  if (canInsertText === null || canInsertText === true) {
-    canInsertText = true;
 
-    const nativeInputValueSetter =
-      // @ts-ignore
-      Object.getOwnPropertyDescriptor(
+  // configuration modal/dialog will continue intercepting focus in Safari
+  // need to wait until the textarea can receive focus
+  let tries = 0;
+
+  const insertText = () => {
+    const insertResult = document.execCommand('insertText', false, text);
+
+    if (insertResult === false) {
+      /**
+       * Fallback for Firefox; this kills undo/redo but at least updates the value
+       *
+       * Note that we're using the native HTMLTextAreaElement.set() method to play nicely with
+       * React's synthetic event system.
+       * https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
+       */
+      const inputEvent = new Event('input', { bubbles: true });
+      const nativeInputValueSetter =
         // @ts-ignore
-        window.HTMLTextAreaElement.prototype,
-        'value'
-      ).set;
-    try {
+        Object.getOwnPropertyDescriptor(
+          // @ts-ignore
+          window.HTMLTextAreaElement.prototype,
+          'value'
+        ).set;
       // @ts-ignore
       nativeInputValueSetter.call(textarea, before + text + after);
-
       textarea.dispatchEvent(inputEvent);
-    } catch (error) {
-      canInsertText = false;
     }
-  }
 
-  if (!canInsertText) {
-    // If calling [HTMLTextAreaElement.set()] fails, just brute-force it
-    textarea.value = before + text + after;
-    textarea.dispatchEvent(inputEvent);
-  }
+    if (selectionStart != null && selectionEnd != null) {
+      textarea.setSelectionRange(selectionStart, selectionEnd);
+    } else {
+      textarea.setSelectionRange(originalSelectionStart, textarea.selectionEnd);
+    }
+  };
+
+  const focusTextarea = () => {
+    textarea.focus();
+    if (document.activeElement === textarea) {
+      insertText();
+    } else if (++tries === MAX_TRIES) {
+      insertText();
+    } else {
+      setTimeout(focusTextarea, TRY_TIMEOUT);
+    }
+  };
 
-  if (selectionStart != null && selectionEnd != null) {
-    textarea.setSelectionRange(selectionStart, selectionEnd);
-  } else {
-    textarea.setSelectionRange(originalSelectionStart, textarea.selectionEnd);
-  }
+  focusTextarea();
 }
 
 function styleSelectedText(
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 7230e039ccd..3bcde41413d 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -228,56 +228,56 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
           uiPlugins={uiPlugins}
         />
 
-        {isPreviewing ? (
+        {isPreviewing && (
           <div
             className="euiMarkdownEditor__preview"
             style={{ height: `${height}px` }}>
             <EuiMarkdownFormat processor={processor}>{value}</EuiMarkdownFormat>
           </div>
-        ) : (
-          <>
-            <EuiMarkdownEditorDropZone>
-              <EuiMarkdownEditorTextArea
-                ref={setTextareaRef}
-                height={height}
-                id={editorId}
-                onChange={e => onChange(e.target.value)}
-                value={value}
-              />
-            </EuiMarkdownEditorDropZone>
-            {textareaRef && pluginEditorPlugin && (
-              <EuiOverlayMask>
-                <EuiModal onClose={() => setPluginEditorPlugin(undefined)}>
-                  {createElement(pluginEditorPlugin.editor!, {
-                    node:
+        )}
+        {/* Toggle the editor's display instead of unmounting to retain its undo/redo history */}
+        <div style={{ display: isPreviewing ? 'none' : 'block' }}>
+          <EuiMarkdownEditorDropZone>
+            <EuiMarkdownEditorTextArea
+              ref={setTextareaRef}
+              height={height}
+              id={editorId}
+              onChange={e => onChange(e.target.value)}
+              value={value}
+            />
+          </EuiMarkdownEditorDropZone>
+          {textareaRef && pluginEditorPlugin && (
+            <EuiOverlayMask>
+              <EuiModal onClose={() => setPluginEditorPlugin(undefined)}>
+                {createElement(pluginEditorPlugin.editor!, {
+                  node:
+                    selectedNode &&
+                    selectedNode.type === pluginEditorPlugin.name
+                      ? selectedNode
+                      : null,
+                  onCancel: () => setPluginEditorPlugin(undefined),
+                  onSave: markdown => {
+                    if (
                       selectedNode &&
                       selectedNode.type === pluginEditorPlugin.name
-                        ? selectedNode
-                        : null,
-                    onCancel: () => setPluginEditorPlugin(undefined),
-                    onSave: markdown => {
-                      if (
-                        selectedNode &&
-                        selectedNode.type === pluginEditorPlugin.name
-                      ) {
-                        textareaRef.setSelectionRange(
-                          selectedNode.position.start.offset,
-                          selectedNode.position.end.offset
-                        );
-                      }
-                      insertText(textareaRef, {
-                        text: markdown,
-                        selectionStart: undefined,
-                        selectionEnd: undefined,
-                      });
-                      setPluginEditorPlugin(undefined);
-                    },
-                  })}
-                </EuiModal>
-              </EuiOverlayMask>
-            )}
-          </>
-        )}
+                    ) {
+                      textareaRef.setSelectionRange(
+                        selectedNode.position.start.offset,
+                        selectedNode.position.end.offset
+                      );
+                    }
+                    insertText(textareaRef, {
+                      text: markdown,
+                      selectionStart: undefined,
+                      selectionEnd: undefined,
+                    });
+                    setPluginEditorPlugin(undefined);
+                  },
+                })}
+              </EuiModal>
+            </EuiOverlayMask>
+          )}
+        </div>
       </div>
     </EuiMarkdownContext.Provider>
   );

From a35fc03b06cbb2d2332d634aa9439eb30d8214d1 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 16 Jun 2020 11:57:35 -0600
Subject: [PATCH 26/43] Added AST & info/fail message reporting to application;
 added info messages to tooltip plugin and fail message to chart configuration
 parsing (#3602)

---
 .../views/markdown_editor/markdown_editor.js  | 40 ++++++++++++++++---
 .../markdown_editor/plugins/markdown_chart.js |  9 ++++-
 .../plugins/markdown_tooltip.js               | 16 +++++++-
 .../markdown_editor/markdown_editor.tsx       | 32 ++++++++++++++-
 .../markdown_editor/markdown_format.tsx       | 13 +++---
 5 files changed, 96 insertions(+), 14 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 90aa41f3ffe..5e0ab667094 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -1,7 +1,13 @@
-/* eslint-disable prettier/prettier */
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
-import { defaultParsingPlugins, defaultProcessingPlugins, EuiMarkdownEditor } from '../../../../src';
+import {
+  defaultParsingPlugins,
+  defaultProcessingPlugins,
+  EuiMarkdownEditor,
+  EuiSpacer,
+  EuiText,
+  EuiCodeBlock,
+} from '../../../../src';
 import * as MarkdownChart from './plugins/markdown_chart';
 import * as MarkdownTooltip from './plugins/markdown_tooltip';
 import * as MarkdownCheckbox from './plugins/markdown_checkbox';
@@ -23,9 +29,33 @@ exampleProcessingList[0][1].handlers.tooltipPlugin = MarkdownTooltip.handler;
 exampleProcessingList[1][1].components.tooltipPlugin = MarkdownTooltip.renderer;
 
 exampleProcessingList[0][1].handlers.checkboxPlugin = MarkdownCheckbox.handler;
-exampleProcessingList[1][1].components.checkboxPlugin = MarkdownCheckbox.renderer;
+exampleProcessingList[1][1].components.checkboxPlugin =
+  MarkdownCheckbox.renderer;
 
 export default () => {
   const [value, setValue] = useState(markdownExample);
-  return <EuiMarkdownEditor value={value} onChange={setValue} height={400} uiPlugins={[MarkdownChart.plugin, MarkdownTooltip.plugin]} parsingPluginList={exampleParsingList} processingPluginList={exampleProcessingList} />;
+  const [messages, setMessages] = useState([]);
+  const [ast, setAst] = useState(null);
+  const onParse = useCallback((err, { messages, ast }) => {
+    setMessages(err ? [err] : messages);
+    setAst(JSON.stringify(ast, null, 2));
+  }, []);
+  return (
+    <>
+      <EuiMarkdownEditor
+        value={value}
+        onChange={setValue}
+        height={400}
+        uiPlugins={[MarkdownChart.plugin, MarkdownTooltip.plugin]}
+        parsingPluginList={exampleParsingList}
+        processingPluginList={exampleProcessingList}
+        onParse={onParse}
+      />
+      <EuiSpacer />
+      {messages.map((message, idx) => (
+        <EuiText key={idx}>{message.toString()}</EuiText>
+      ))}
+      <EuiCodeBlock language="json">{ast}</EuiCodeBlock>
+    </>
+  );
 };
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_chart.js b/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
index d5de9a3d54e..111abf1eeda 100644
--- a/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
@@ -155,8 +155,13 @@ function ChartParser() {
       match += configurationString;
       try {
         configuration = JSON.parse(configurationString);
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
+      } catch (e) {
+        const now = eat.now();
+        this.file.fail(`Unable to parse chart JSON configuration: ${e}`, {
+          line: now.line,
+          column: now.column + 7,
+        });
+      }
     }
 
     match += '}';
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js b/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
index e84677a7b08..7a47311d254 100644
--- a/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
@@ -55,13 +55,27 @@ function TooltipParser() {
     const tooltipAnchor = readArg('[', ']');
     const tooltipText = readArg('(', ')');
 
+    const now = eat.now();
+
+    if (!tooltipAnchor) {
+      this.file.info('No tooltip anchor found', {
+        line: now.line,
+        column: now.column + 10,
+      });
+    }
+    if (!tooltipText) {
+      this.file.info('No tooltip text found', {
+        line: now.line,
+        column: now.column + 12 + tooltipAnchor.length,
+      });
+    }
+
     if (!tooltipText || !tooltipAnchor) return false;
 
     if (silent) {
       return true;
     }
 
-    const now = eat.now();
     now.column += 10;
     now.offset += 10;
     const children = this.tokenizeInline(tooltipAnchor, now);
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 3bcde41413d..c89f3d7d167 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -26,6 +26,7 @@ import React, {
   useState,
 } from 'react';
 import unified, { PluggableList, Processor } from 'unified';
+import { VFileMessage } from 'vfile-message';
 import classNames from 'classnames';
 // @ts-ignore
 import emoji from 'remark-emoji';
@@ -105,7 +106,17 @@ export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
     /** array of unified plugins to convert the AST into a ReactNode */
     processingPluginList?: PluggableList;
 
+    /** array of toolbar plugins **/
     uiPlugins?: EuiMarkdownEditorUiPlugin[];
+
+    /** callback triggered when parsing results are available **/
+    onParse?: (
+      error: any | null,
+      data: {
+        messages: VFileMessage[];
+        ast: any;
+      }
+    ) => void;
   };
 
 export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
@@ -117,6 +128,7 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
   parsingPluginList = defaultParsingPlugins,
   processingPluginList = defaultProcessingPlugins,
   uiPlugins = [],
+  onParse,
   ...rest
 }) => {
   const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(MODE_EDITING);
@@ -148,7 +160,16 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
       .use(identityCompiler);
   }, [parsingPluginList]);
 
-  const parsed = useMemo(() => parser.processSync(value), [parser, value]);
+  const [parsed, parseError] = useMemo<
+    [any | null, VFileMessage | null]
+  >(() => {
+    try {
+      const parsed = parser.processSync(value);
+      return [parsed, null];
+    } catch (e) {
+      return [null, e];
+    }
+  }, [parser, value]);
 
   const processor = useMemo(
     () =>
@@ -180,6 +201,7 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
   );
   useEffect(() => {
     if (textareaRef == null) return;
+    if (parsed == null) return;
 
     const getCursorNode = () => {
       const { selectionStart } = textareaRef;
@@ -215,6 +237,14 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
     };
   }, [textareaRef, parsed]);
 
+  useEffect(() => {
+    if (onParse) {
+      const messages = parsed ? parsed.messages : [];
+      const ast = parsed ? parsed.contents : null;
+      onParse(parseError, { messages, ast });
+    }
+  }, [onParse, parsed, parseError]);
+
   return (
     <EuiMarkdownContext.Provider value={contextValue}>
       <div className={classes} {...rest}>
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 40e4909af15..decdac83182 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -29,9 +29,12 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   children,
   processor,
 }) => {
-  const result = useMemo(() => processor.processSync(children), [
-    processor,
-    children,
-  ]);
-  return <div className="euiMarkdownFormat">{result.contents}</div>;
+  const result = useMemo(() => {
+    try {
+      return processor.processSync(children).contents;
+    } catch (e) {
+      return children;
+    }
+  }, [processor, children]);
+  return <div className="euiMarkdownFormat">{result}</div>;
 };

From 652a607205c66384390e79d57e32f91fcf95e1dd Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 18 Jun 2020 07:59:35 -0600
Subject: [PATCH 27/43] Add an imperative ref to EuiMarkdownEditor (#3622)

* Add an imperative ref to EuiMarkdownEditor, exposing the textarea element and replaceNode method

* Remove textareaRef from two hook dependency arrays
---
 .../markdown_editor/markdown_editor.tsx       | 386 ++++++++++--------
 1 file changed, 207 insertions(+), 179 deletions(-)

diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index c89f3d7d167..3965a8cd186 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -22,8 +22,12 @@ import React, {
   FunctionComponent,
   HTMLAttributes,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useState,
+  forwardRef,
+  useCallback,
+  useRef,
 } from 'react';
 import unified, { PluggableList, Processor } from 'unified';
 import { VFileMessage } from 'vfile-message';
@@ -119,196 +123,220 @@ export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
     ) => void;
   };
 
-export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
-  className,
-  editorId: _editorId,
-  value,
-  onChange,
-  height = 150,
-  parsingPluginList = defaultParsingPlugins,
-  processingPluginList = defaultProcessingPlugins,
-  uiPlugins = [],
-  onParse,
-  ...rest
-}) => {
-  const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(MODE_EDITING);
-  const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [_editorId]);
-
-  const [pluginEditorPlugin, setPluginEditorPlugin] = useState<
-    EuiMarkdownEditorUiPlugin | undefined
-  >(undefined);
-
-  const markdownActions = useMemo(
-    () => new MarkdownActions(editorId, uiPlugins),
-    // uiPlugins _is_ accounted for
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [editorId, uiPlugins.map(({ name }) => name).join(',')]
-  );
-
-  const classes = classNames('euiMarkdownEditor', className);
-
-  const parser = useMemo(() => {
-    const Compiler = (tree: any) => {
-      return tree;
-    };
-
-    function identityCompiler(this: Processor) {
-      this.Compiler = Compiler;
-    }
-    return unified()
-      .use(parsingPluginList)
-      .use(identityCompiler);
-  }, [parsingPluginList]);
-
-  const [parsed, parseError] = useMemo<
-    [any | null, VFileMessage | null]
-  >(() => {
-    try {
-      const parsed = parser.processSync(value);
-      return [parsed, null];
-    } catch (e) {
-      return [null, e];
-    }
-  }, [parser, value]);
-
-  const processor = useMemo(
-    () =>
-      unified()
+export const EuiMarkdownEditor: FunctionComponent<
+  EuiMarkdownEditorProps
+> = forwardRef(
+  (
+    {
+      className,
+      editorId: _editorId,
+      value,
+      onChange,
+      height = 150,
+      parsingPluginList = defaultParsingPlugins,
+      processingPluginList = defaultProcessingPlugins,
+      uiPlugins = [],
+      onParse,
+      ...rest
+    },
+    ref
+  ) => {
+    const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(MODE_EDITING);
+    const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [
+      _editorId,
+    ]);
+
+    const [pluginEditorPlugin, setPluginEditorPlugin] = useState<
+      EuiMarkdownEditorUiPlugin | undefined
+    >(undefined);
+
+    const markdownActions = useMemo(
+      () => new MarkdownActions(editorId, uiPlugins),
+      // uiPlugins _is_ accounted for
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [editorId, uiPlugins.map(({ name }) => name).join(',')]
+    );
+
+    const classes = classNames('euiMarkdownEditor', className);
+
+    const parser = useMemo(() => {
+      const Compiler = (tree: any) => {
+        return tree;
+      };
+
+      function identityCompiler(this: Processor) {
+        this.Compiler = Compiler;
+      }
+      return unified()
         .use(parsingPluginList)
-        .use(processingPluginList),
-    [parsingPluginList, processingPluginList]
-  );
+        .use(identityCompiler);
+    }, [parsingPluginList]);
+
+    const [parsed, parseError] = useMemo<
+      [any | null, VFileMessage | null]
+    >(() => {
+      try {
+        const parsed = parser.processSync(value);
+        return [parsed, null];
+      } catch (e) {
+        return [null, e];
+      }
+    }, [parser, value]);
+
+    const processor = useMemo(
+      () =>
+        unified()
+          .use(parsingPluginList)
+          .use(processingPluginList),
+      [parsingPluginList, processingPluginList]
+    );
 
-  const isPreviewing = viewMode === MODE_VIEWING;
+    const isPreviewing = viewMode === MODE_VIEWING;
 
-  const contextValue = useMemo<ContextShape>(
-    () => ({
-      openPluginEditor: (plugin: EuiMarkdownEditorUiPlugin) =>
-        setPluginEditorPlugin(() => plugin),
-      replaceNode: (position, next) => {
+    const replaceNode = useCallback(
+      (position, next) => {
         const leading = value.substr(0, position.start.offset);
         const trailing = value.substr(position.end.offset);
         onChange(`${leading}${next}${trailing}`);
       },
-    }),
-    [value, onChange]
-  );
-
-  const [selectedNode, setSelectedNode] = useState();
-
-  const [textareaRef, setTextareaRef] = useState<HTMLTextAreaElement | null>(
-    null
-  );
-  useEffect(() => {
-    if (textareaRef == null) return;
-    if (parsed == null) return;
-
-    const getCursorNode = () => {
-      const { selectionStart } = textareaRef;
-
-      let node: any = parsed.contents;
-
-      outer: while (true) {
-        if (node.children) {
-          for (let i = 0; i < node.children.length; i++) {
-            const child = node.children[i];
-            if (
-              child.position.start.offset < selectionStart &&
-              selectionStart < child.position.end.offset
-            ) {
-              if (child.type === 'text') break outer; // don't dive into `text` nodes
-              node = child;
-              continue outer;
+      [value, onChange]
+    );
+
+    const contextValue = useMemo<ContextShape>(
+      () => ({
+        openPluginEditor: (plugin: EuiMarkdownEditorUiPlugin) =>
+          setPluginEditorPlugin(() => plugin),
+        replaceNode,
+      }),
+      [replaceNode]
+    );
+
+    const [selectedNode, setSelectedNode] = useState();
+
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    useEffect(() => {
+      if (textareaRef == null) return;
+      if (parsed == null) return;
+
+      const getCursorNode = () => {
+        const { selectionStart } = textareaRef.current!;
+
+        let node: any = parsed.contents;
+
+        outer: while (true) {
+          if (node.children) {
+            for (let i = 0; i < node.children.length; i++) {
+              const child = node.children[i];
+              if (
+                child.position.start.offset < selectionStart &&
+                selectionStart < child.position.end.offset
+              ) {
+                if (child.type === 'text') break outer; // don't dive into `text` nodes
+                node = child;
+                continue outer;
+              }
             }
           }
+          break;
         }
-        break;
-      }
 
-      setSelectedNode(node);
-    };
-
-    textareaRef.addEventListener('keyup', getCursorNode);
-    textareaRef.addEventListener('mouseup', getCursorNode);
-
-    return () => {
-      textareaRef.removeEventListener('keyup', getCursorNode);
-      textareaRef.removeEventListener('mouseup', getCursorNode);
-    };
-  }, [textareaRef, parsed]);
-
-  useEffect(() => {
-    if (onParse) {
-      const messages = parsed ? parsed.messages : [];
-      const ast = parsed ? parsed.contents : null;
-      onParse(parseError, { messages, ast });
-    }
-  }, [onParse, parsed, parseError]);
-
-  return (
-    <EuiMarkdownContext.Provider value={contextValue}>
-      <div className={classes} {...rest}>
-        <EuiMarkdownEditorToolbar
-          selectedNode={selectedNode}
-          markdownActions={markdownActions}
-          onClickPreview={() =>
-            setViewMode(isPreviewing ? MODE_EDITING : MODE_VIEWING)
-          }
-          viewMode={viewMode}
-          uiPlugins={uiPlugins}
-        />
-
-        {isPreviewing && (
-          <div
-            className="euiMarkdownEditor__preview"
-            style={{ height: `${height}px` }}>
-            <EuiMarkdownFormat processor={processor}>{value}</EuiMarkdownFormat>
-          </div>
-        )}
-        {/* Toggle the editor's display instead of unmounting to retain its undo/redo history */}
-        <div style={{ display: isPreviewing ? 'none' : 'block' }}>
-          <EuiMarkdownEditorDropZone>
-            <EuiMarkdownEditorTextArea
-              ref={setTextareaRef}
-              height={height}
-              id={editorId}
-              onChange={e => onChange(e.target.value)}
-              value={value}
-            />
-          </EuiMarkdownEditorDropZone>
-          {textareaRef && pluginEditorPlugin && (
-            <EuiOverlayMask>
-              <EuiModal onClose={() => setPluginEditorPlugin(undefined)}>
-                {createElement(pluginEditorPlugin.editor!, {
-                  node:
-                    selectedNode &&
-                    selectedNode.type === pluginEditorPlugin.name
-                      ? selectedNode
-                      : null,
-                  onCancel: () => setPluginEditorPlugin(undefined),
-                  onSave: markdown => {
-                    if (
+        setSelectedNode(node);
+      };
+
+      const textarea = textareaRef.current!;
+
+      textarea.addEventListener('keyup', getCursorNode);
+      textarea.addEventListener('mouseup', getCursorNode);
+
+      return () => {
+        textarea.removeEventListener('keyup', getCursorNode);
+        textarea.removeEventListener('mouseup', getCursorNode);
+      };
+    }, [parsed]);
+
+    useEffect(() => {
+      if (onParse) {
+        const messages = parsed ? parsed.messages : [];
+        const ast = parsed ? parsed.contents : null;
+        onParse(parseError, { messages, ast });
+      }
+    }, [onParse, parsed, parseError]);
+
+    useImperativeHandle(
+      ref,
+      () => ({ textarea: textareaRef.current, replaceNode }),
+      [replaceNode]
+    );
+
+    return (
+      <EuiMarkdownContext.Provider value={contextValue}>
+        <div className={classes} {...rest}>
+          <EuiMarkdownEditorToolbar
+            selectedNode={selectedNode}
+            markdownActions={markdownActions}
+            onClickPreview={() =>
+              setViewMode(isPreviewing ? MODE_EDITING : MODE_VIEWING)
+            }
+            viewMode={viewMode}
+            uiPlugins={uiPlugins}
+          />
+
+          {isPreviewing && (
+            <div
+              className="euiMarkdownEditor__preview"
+              style={{ height: `${height}px` }}>
+              <EuiMarkdownFormat processor={processor}>
+                {value}
+              </EuiMarkdownFormat>
+            </div>
+          )}
+          {/* Toggle the editor's display instead of unmounting to retain its undo/redo history */}
+          <div style={{ display: isPreviewing ? 'none' : 'block' }}>
+            <EuiMarkdownEditorDropZone>
+              <EuiMarkdownEditorTextArea
+                ref={textareaRef}
+                height={height}
+                id={editorId}
+                onChange={e => onChange(e.target.value)}
+                value={value}
+              />
+            </EuiMarkdownEditorDropZone>
+            {pluginEditorPlugin && (
+              <EuiOverlayMask>
+                <EuiModal onClose={() => setPluginEditorPlugin(undefined)}>
+                  {createElement(pluginEditorPlugin.editor!, {
+                    node:
                       selectedNode &&
                       selectedNode.type === pluginEditorPlugin.name
-                    ) {
-                      textareaRef.setSelectionRange(
-                        selectedNode.position.start.offset,
-                        selectedNode.position.end.offset
-                      );
-                    }
-                    insertText(textareaRef, {
-                      text: markdown,
-                      selectionStart: undefined,
-                      selectionEnd: undefined,
-                    });
-                    setPluginEditorPlugin(undefined);
-                  },
-                })}
-              </EuiModal>
-            </EuiOverlayMask>
-          )}
+                        ? selectedNode
+                        : null,
+                    onCancel: () => setPluginEditorPlugin(undefined),
+                    onSave: markdown => {
+                      if (
+                        selectedNode &&
+                        selectedNode.type === pluginEditorPlugin.name
+                      ) {
+                        textareaRef.current!.setSelectionRange(
+                          selectedNode.position.start.offset,
+                          selectedNode.position.end.offset
+                        );
+                      }
+                      insertText(textareaRef.current!, {
+                        text: markdown,
+                        selectionStart: undefined,
+                        selectionEnd: undefined,
+                      });
+                      setPluginEditorPlugin(undefined);
+                    },
+                  })}
+                </EuiModal>
+              </EuiOverlayMask>
+            )}
+          </div>
         </div>
-      </div>
-    </EuiMarkdownContext.Provider>
-  );
-};
+      </EuiMarkdownContext.Provider>
+    );
+  }
+);
+EuiMarkdownEditor.displayName = 'EuiMarkdownEditor';

From 136f5b0987ff15bb78be032b9c5c87e5e59dd2df Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 18 Jun 2020 11:50:42 -0600
Subject: [PATCH 28/43] eslint errors

---
 src/components/markdown_editor/markdown_actions.ts | 8 ++++----
 src/components/markdown_editor/markdown_editor.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
index 8c12248a464..571320965ad 100644
--- a/src/components/markdown_editor/markdown_actions.ts
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -161,7 +161,7 @@ class MarkdownActions {
 
     if (editor) {
       editor.focus();
-      // @ts-ignore
+      // @ts-ignore TODO
       styleSelectedText(editor, outgoingStyle);
     }
   }
@@ -254,13 +254,13 @@ export function insertText(
        */
       const inputEvent = new Event('input', { bubbles: true });
       const nativeInputValueSetter =
-        // @ts-ignore
+        // @ts-ignore TODO
         Object.getOwnPropertyDescriptor(
-          // @ts-ignore
+          // @ts-ignore TODO
           window.HTMLTextAreaElement.prototype,
           'value'
         ).set;
-      // @ts-ignore
+      // @ts-ignore TODO
       nativeInputValueSetter.call(textarea, before + text + after);
       textarea.dispatchEvent(inputEvent);
     }
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 3965a8cd186..18ba103479f 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -32,14 +32,14 @@ import React, {
 import unified, { PluggableList, Processor } from 'unified';
 import { VFileMessage } from 'vfile-message';
 import classNames from 'classnames';
-// @ts-ignore
+// @ts-ignore TODO
 import emoji from 'remark-emoji';
 import markdown from 'remark-parse';
-// @ts-ignore
+// @ts-ignore TODO
 import remark2rehype from 'remark-rehype';
-// @ts-ignore
+// @ts-ignore TODO
 import highlight from 'remark-highlight.js';
-// @ts-ignore
+// @ts-ignore TODO
 import rehype2react from 'rehype-react';
 
 import { CommonProps } from '../common';

From 59c623d79f1480925ca7fd5f1aba4c4d0e948984 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 1 Jul 2020 13:23:12 -0600
Subject: [PATCH 29/43] Add a markdown help modal, move tooltip & checkbox
 plugins into src (#3636)

* Move checkbox and tooltip markdown plugins into eui src, add helpText to ui plugins

* Adding footer initial styles

* Adding error popover

* Fixing uploading files icon

* wire up errors

* modal help text

* better modal text

* blerg, react color

* toggle button for editor ast

* Ignoring ts errors and fixing sass lint errors

* Displaying always error info

* Adding checkmark button

* fix markdown test

* Added aria-label and aria-labelledby props to markdown editor

* Fix i18n token name for markdown errors title

* Reverting displaying errors

Co-authored-by: miukimiu <elizabet.oliveira@elastic.co>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
---
 package.json                                  |   2 +-
 .../views/markdown_editor/markdown_editor.js  |  40 ++--
 .../markdown_editor/plugins/markdown_chart.js |  23 +++
 .../plugins/markdown_checkbox.js              |  74 -------
 src/components/icon/icon.testenv.tsx          |   7 +-
 .../markdown_editor.test.tsx.snap             |  73 +++++--
 src/components/markdown_editor/_index.scss    |   3 +-
 .../_markdown_editor_drop_zone.scss           |  32 +--
 .../_markdown_editor_footer.scss              |  39 ++++
 .../_markdown_editor_text_area.scss           |   2 +-
 .../icons/markdown_checkmark.js               |  36 ++++
 .../markdown_editor/icons/markdown_logo.js    |  36 ++++
 .../markdown_editor/markdown_actions.ts       |   9 +
 .../markdown_editor/markdown_editor.tsx       |  49 ++++-
 .../markdown_editor_drop_zone.tsx             |  52 ++---
 .../markdown_editor_footer.tsx                | 182 ++++++++++++++++++
 .../markdown_editor_toolbar.tsx               |  11 +-
 .../markdown_editor/markdown_types.ts         |  29 ++-
 .../plugins/markdown_checkbox.tsx             | 108 +++++++++++
 .../plugins/markdown_tooltip.tsx              |  65 +++++--
 yarn.lock                                     |  21 +-
 21 files changed, 685 insertions(+), 208 deletions(-)
 delete mode 100644 src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js
 create mode 100644 src/components/markdown_editor/_markdown_editor_footer.scss
 create mode 100644 src/components/markdown_editor/icons/markdown_checkmark.js
 create mode 100644 src/components/markdown_editor/icons/markdown_logo.js
 create mode 100644 src/components/markdown_editor/markdown_editor_footer.tsx
 create mode 100644 src/components/markdown_editor/plugins/markdown_checkbox.tsx
 rename src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js => src/components/markdown_editor/plugins/markdown_tooltip.tsx (56%)

diff --git a/package.json b/package.json
index babe1eb83fe..1e57a872822 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "react-is": "~16.3.0",
     "react-virtualized": "^9.21.2",
     "rehype-raw": "^4.0.1",
-    "rehype-react": "^5.0.0",
+    "rehype-react": "^6.0.0",
     "rehype-stringify": "^6.0.1",
     "remark-emoji": "^2.1.0",
     "remark-highlight.js": "^5.2.0",
diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 5e0ab667094..2dd2ce8ffc7 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -5,37 +5,24 @@ import {
   defaultProcessingPlugins,
   EuiMarkdownEditor,
   EuiSpacer,
-  EuiText,
   EuiCodeBlock,
+  EuiButtonToggle,
 } from '../../../../src';
 import * as MarkdownChart from './plugins/markdown_chart';
-import * as MarkdownTooltip from './plugins/markdown_tooltip';
-import * as MarkdownCheckbox from './plugins/markdown_checkbox';
 
 const markdownExample = require('!!raw-loader!./markdown-example.md');
 
-const exampleParsingList = [
-  ...defaultParsingPlugins,
-  MarkdownChart.parser,
-  MarkdownTooltip.parser,
-  MarkdownCheckbox.parser,
-];
+const exampleParsingList = [...defaultParsingPlugins, MarkdownChart.parser];
 
 const exampleProcessingList = [...defaultProcessingPlugins]; // pretend mutation doesn't happen immediately next 😅
 exampleProcessingList[0][1].handlers.chartDemoPlugin = MarkdownChart.handler;
 exampleProcessingList[1][1].components.chartDemoPlugin = MarkdownChart.renderer;
 
-exampleProcessingList[0][1].handlers.tooltipPlugin = MarkdownTooltip.handler;
-exampleProcessingList[1][1].components.tooltipPlugin = MarkdownTooltip.renderer;
-
-exampleProcessingList[0][1].handlers.checkboxPlugin = MarkdownCheckbox.handler;
-exampleProcessingList[1][1].components.checkboxPlugin =
-  MarkdownCheckbox.renderer;
-
 export default () => {
   const [value, setValue] = useState(markdownExample);
   const [messages, setMessages] = useState([]);
   const [ast, setAst] = useState(null);
+  const [isAstShowing, setIsAstShowing] = useState(false);
   const onParse = useCallback((err, { messages, ast }) => {
     setMessages(err ? [err] : messages);
     setAst(JSON.stringify(ast, null, 2));
@@ -43,19 +30,28 @@ export default () => {
   return (
     <>
       <EuiMarkdownEditor
+        aria-label="EUI markdown editor demo"
         value={value}
         onChange={setValue}
         height={400}
-        uiPlugins={[MarkdownChart.plugin, MarkdownTooltip.plugin]}
+        uiPlugins={[MarkdownChart.plugin]}
         parsingPluginList={exampleParsingList}
         processingPluginList={exampleProcessingList}
         onParse={onParse}
+        errors={messages}
       />
-      <EuiSpacer />
-      {messages.map((message, idx) => (
-        <EuiText key={idx}>{message.toString()}</EuiText>
-      ))}
-      <EuiCodeBlock language="json">{ast}</EuiCodeBlock>
+      <EuiSpacer size="s" />
+      <div className="eui-textRight">
+        <EuiButtonToggle
+          label={isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
+          size="s"
+          isEmpty
+          iconType={isAstShowing ? 'eyeClosed' : 'eye'}
+          onChange={() => setIsAstShowing(!isAstShowing)}
+          isSelected={isAstShowing}
+        />
+      </div>
+      {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
     </>
   );
 };
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_chart.js b/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
index 111abf1eeda..081555924b7 100644
--- a/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
+++ b/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
@@ -18,6 +18,9 @@ import {
   EuiFormRow,
   EuiSelect,
   EuiRange,
+  EuiCodeBlock,
+  EuiText,
+  EuiSpacer,
 } from '../../../../../src/components';
 import {
   euiPaletteColorBlind,
@@ -53,6 +56,26 @@ const chartDemoPlugin = {
     label: 'Chart',
     iconType: 'visArea',
   },
+  helpText: (
+    <div>
+      <EuiCodeBlock language="md" fontSize="l" paddingSize="s" isCopyable>
+        {'!{chart{options}}'}
+      </EuiCodeBlock>
+      <EuiSpacer size="s" />
+      <EuiText size="xs" style={{ marginLeft: 16 }}>
+        <p>Where options can contain:</p>
+        <ul>
+          <li>
+            <strong>palette: </strong>A number between 1-9 for each palette.
+          </li>
+          <li>
+            <strong>height: </strong>
+            The height of the chart
+          </li>
+        </ul>
+      </EuiText>
+    </div>
+  ),
   editor: function ChartEditor({ node, onSave, onCancel }) {
     const [palette, setPalette] = useState((node && node.palette) || 4);
     const [height, setHeight] = useState((node && node.height) || 300);
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js b/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js
deleted file mode 100644
index 347807b37bf..00000000000
--- a/src-docs/src/views/markdown_editor/plugins/markdown_checkbox.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { useContext } from 'react';
-import all from 'mdast-util-to-hast/lib/all';
-import { EuiCheckbox, EuiMarkdownContext } from '../../../../../src';
-import { htmlIdGenerator } from '../../../../../src/services/accessibility';
-
-function CheckboxParser() {
-  const Parser = this.Parser;
-  const tokenizers = Parser.prototype.blockTokenizers;
-  const methods = Parser.prototype.blockMethods;
-
-  function tokenizeCheckbox(eat, value, silent) {
-    /**
-     * optional leading whitespace & single dash mix
-     * square brackets, optionally containing whitespace and `x`
-     * optional whitespace
-     * remainder of the line is consumed as the textbox label
-     */
-    const checkboxMatch = value.match(/^(\s*-\s*)?\[([\sx]*)\](.+)/);
-    if (checkboxMatch == null) return false;
-
-    if (silent) {
-      return true;
-    }
-
-    const [match, lead = '', checkboxStatus, text] = checkboxMatch;
-    const isChecked = checkboxStatus.indexOf('x') !== -1;
-
-    const now = eat.now();
-    const offset = match.length - text.length;
-    now.column += offset;
-    now.offset += offset;
-    const children = this.tokenizeInline(text, now);
-
-    return eat(match)({
-      type: 'checkboxPlugin',
-      lead,
-      label: text,
-      isChecked,
-      children,
-    });
-  }
-
-  tokenizers.checkbox = tokenizeCheckbox;
-  methods.splice(methods.indexOf('list'), 0, 'checkbox'); // Run it just before default `list` plugin to inject our own idea of checkboxes.
-}
-
-const checkboxMarkdownHandler = (h, node) => {
-  return h(node.position, 'checkboxPlugin', node, all(h, node));
-};
-const CheckboxMarkdownRenderer = ({
-  position,
-  lead,
-  label,
-  isChecked,
-  children,
-}) => {
-  const { replaceNode } = useContext(EuiMarkdownContext);
-  return (
-    <EuiCheckbox
-      id={htmlIdGenerator()()}
-      checked={isChecked}
-      label={children}
-      onChange={() => {
-        replaceNode(position, `${lead}[${isChecked ? ' ' : 'x'}]${label}`);
-      }}
-    />
-  );
-};
-
-export {
-  CheckboxParser as parser,
-  checkboxMarkdownHandler as handler,
-  CheckboxMarkdownRenderer as renderer,
-};
diff --git a/src/components/icon/icon.testenv.tsx b/src/components/icon/icon.testenv.tsx
index e387b999f7e..79238e13d4c 100644
--- a/src/components/icon/icon.testenv.tsx
+++ b/src/components/icon/icon.testenv.tsx
@@ -20,7 +20,12 @@
 import React, { ComponentType } from 'react';
 
 export const EuiIcon = ({ type, ...rest }: any) => (
-  <div data-euiicon-type={type} {...rest} />
+  <div
+    data-euiicon-type={
+      typeof type === 'string' ? type : type.displayName || type.name
+    }
+    {...rest}
+  />
 );
 
 export const appendIconComponentCache = (_: {
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 20cafbacfc1..6d10fef2507 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`EuiMarkdownEditor is rendered 1`] = `
 <div
-  aria-label="aria-label"
   class="euiMarkdownEditor testClass1 testClass2"
   data-test-subj="test subject string"
 >
@@ -78,6 +77,21 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
             />
           </button>
         </span>
+        <span
+          class="euiToolTipAnchor"
+        >
+          <button
+            aria-label="Task list"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="MarkdownCheckmark"
+            />
+          </button>
+        </span>
         <span
           class="euiMarkdownEditor__toolbar__divider"
         />
@@ -92,7 +106,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
             <div
               aria-hidden="true"
               class="euiButtonIcon__icon"
-              data-euiicon-type="editorComment"
+              data-euiicon-type="quote"
             />
           </button>
         </span>
@@ -126,6 +140,24 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
             />
           </button>
         </span>
+        <span
+          class="euiMarkdownEditor__toolbar__divider"
+        />
+        <span
+          class="euiToolTipAnchor"
+        >
+          <button
+            aria-label="Tooltip"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="editorComment"
+            />
+          </button>
+        </span>
       </div>
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -159,25 +191,42 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       class="euiMarkdownEditor__dropZone"
     >
       <textarea
+        aria-label="aria-label"
         class="euiMarkdownEditor__textArea"
         id="editorId"
         rows="6"
         style="height:calc(118px"
       />
-      <button
-        class="euiMarkdownEditor__dropZone__button"
+      <footer
+        class="euiMarkdownEditor__footer"
       >
         <div
-          aria-hidden="true"
-          class="euiMarkdownEditor__dropZone__icon"
-          data-euiicon-type="paperClip"
-        />
-        <div
-          class="euiMarkdownEditor__dropZone__text"
+          class="euiMarkdownEditor__footerActions"
         >
-          Attach files by dragging & dropping or by clicking this area
+          <button
+            aria-label="Open upload files modal"
+            class="euiButtonIcon euiButtonIcon--text"
+            type="button"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              data-euiicon-type="paperClip"
+            />
+          </button>
         </div>
-      </button>
+        <button
+          aria-label="Show markdown help"
+          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditor__footerHelp"
+          type="button"
+        >
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownLogo"
+          />
+        </button>
+      </footer>
       <input
         autocomplete="off"
         multiple=""
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index 1611b7ef445..194529e7f04 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -1,6 +1,7 @@
 @import 'markdown_editor';
 @import 'markdown_editor_drop_zone';
 @import 'markdown_format';
+@import 'markdown_editor_footer';
 @import 'markdown_editor_preview';
 @import 'markdown_editor_text_area';
-@import 'markdown_editor_toolbar';
+@import 'markdown_editor_toolbar';
\ No newline at end of file
diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
index fddb8e54cb5..280f9b45d8a 100644
--- a/src/components/markdown_editor/_markdown_editor_drop_zone.scss
+++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
@@ -24,41 +24,13 @@
     }
   }
 
-  &__button {
-    display: inline-flex;
-    height: $euiSizeXL;
-    padding: 0 $euiSizeS;
-    border: $euiBorderThin;
-    border-top: none;
-    align-items: center;
-    background: $euiPageBackgroundColor;
-
-    &:focus {
-      background-color: transparentize($euiColorPrimary, .88);
-    }
-  }
-
-  &__icon {
-    align-self: center;
-    margin-right: $euiSizeXS;
-    width: 12px;
-    height: 12px;
-  }
-
-  &__text {
-    @include euiFontSizeS;
-    @include euiTextTruncate;
-    line-height: $euiSize;
-    display: block;
-  }
-
   &--isDragging {
     .euiMarkdownEditor__textArea,
-    .euiMarkdownEditor__dropZone__button {
+    .euiMarkdownEditor__footer {
       background-color: transparentize($euiColorSecondary, .88);
     }
 
-    .euiMarkdownEditor__dropZone__button {
+    .euiMarkdownEditor__footer {
       border-top-color: $euiColorSecondary;
     }
   }
diff --git a/src/components/markdown_editor/_markdown_editor_footer.scss b/src/components/markdown_editor/_markdown_editor_footer.scss
new file mode 100644
index 00000000000..be3174b5bb5
--- /dev/null
+++ b/src/components/markdown_editor/_markdown_editor_footer.scss
@@ -0,0 +1,39 @@
+.euiMarkdownEditor__footer {
+  display: inline-flex;
+  padding: $euiSizeXS;
+  border: $euiBorderThin;
+  border-top: none;
+  align-items: center;
+  background: $euiPageBackgroundColor;
+}
+
+.euiMarkdownEditor__footerPopover {
+  width: 300px;
+}
+
+.euiMarkdownEditor__footerActions {
+  flex: 1;
+  display: inline-flex;
+
+  > button,
+  > span {
+    margin-right: $euiSizeXS;
+    align-self: center;
+  }
+}
+
+.euiMarkdownEditor__footerHelp {
+  justify-self: flex-end;
+
+  // overrides the default button icon width size
+  > svg {
+    width: 26px;
+  }
+}
+
+.euiMarkdownEditor__footerErrors {
+  // overrides the default button icon width size
+  > svg {
+    color: $euiTextSubduedColor;
+  }
+}
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index 023518bf916..e59e87713f9 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -1,12 +1,12 @@
 .euiMarkdownEditor__textArea {
   @include euiFormControlText;
+  @include euiScrollBar;
   width: 100%;
   height: 100%;
   min-height: 150px;
   padding: $euiSizeM;
   background-color: $euiFormBackgroundColor;
   border: $euiBorderThin;
-  border-bottom: 1px dashed $euiColorLightShade;
   border-color: $euiColorLightShade;
   // Overrides the euiFormControlText line-height that is very small
   line-height: $euiLineHeight;
diff --git a/src/components/markdown_editor/icons/markdown_checkmark.js b/src/components/markdown_editor/icons/markdown_checkmark.js
new file mode 100644
index 00000000000..2b7502e4911
--- /dev/null
+++ b/src/components/markdown_editor/icons/markdown_checkmark.js
@@ -0,0 +1,36 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+const MarkdownCheckmark = ({ title, titleId, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M11.828 13H4.172A1.173 1.173 0 013 11.828V4.172C3 3.526 3.526 3 4.172 3h7.656C12.474 3 13 3.526 13 4.172v7.656c0 .646-.526 1.172-1.172 1.172zM4.172 3.781a.391.391 0 00-.39.39v7.657c0 .216.175.39.39.39h7.656a.39.39 0 00.39-.39V4.172a.391.391 0 00-.39-.39H4.172zm7.244 2.175l-.582-.521L7.22 9.469 5.125 7.476l-.539.566 2.68 2.548 4.15-4.634z" />
+  </svg>
+);
+
+export default MarkdownCheckmark;
diff --git a/src/components/markdown_editor/icons/markdown_logo.js b/src/components/markdown_editor/icons/markdown_logo.js
new file mode 100644
index 00000000000..9dc3371a450
--- /dev/null
+++ b/src/components/markdown_editor/icons/markdown_logo.js
@@ -0,0 +1,36 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+const MarkdownLogo = ({ title, titleId, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="26"
+    height="16"
+    fill="none"
+    viewBox="0 0 26 16"
+    aria-labelledby={titleId}
+    {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M1.25 1.875c0-.345.28-.625.625-.625h22.25c.345 0 .625.28.625.625v12.25c0 .345-.28.625-.625.625H1.875a.625.625 0 01-.625-.625V1.875zM1.875 0C.839 0 0 .84 0 1.875v12.25C0 15.161.84 16 1.875 16h22.25C25.16 16 26 15.16 26 14.125V1.875C26 .839 25.16 0 24.125 0H1.875zM3.75 3.75v8.5h2.5V7.375l2.5 3.125 2.5-3.125v4.875h2.5v-8.5h-2.5l-2.5 3.125-2.5-3.125h-2.5zm11.875 4.375l3.75 4.125 3.75-4.125h-2.5V3.75h-2.5v4.375h-2.5z" />
+  </svg>
+);
+
+export default MarkdownLogo;
diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
index 571320965ad..2946e245626 100644
--- a/src/components/markdown_editor/markdown_actions.ts
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -111,6 +111,15 @@ class MarkdownActions {
           orderedList: true,
         },
       },
+      mdTl: {
+        name: 'mdTl',
+        button: { label: '', iconType: '' },
+        formatting: {
+          prefix: '- [ ] ',
+          multiline: true,
+          surroundWithNewlines: true,
+        },
+      },
     };
   }
 
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 18ba103479f..4318934ad70 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -39,10 +39,9 @@ import markdown from 'remark-parse';
 import remark2rehype from 'remark-rehype';
 // @ts-ignore TODO
 import highlight from 'remark-highlight.js';
-// @ts-ignore TODO
 import rehype2react from 'rehype-react';
 
-import { CommonProps } from '../common';
+import { CommonProps, OneOf } from '../common';
 import MarkdownActions, { insertText } from './markdown_actions';
 import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
@@ -56,11 +55,15 @@ import { EuiMarkdownEditorUiPlugin } from './markdown_types';
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiModal } from '../modal';
 import { ContextShape, EuiMarkdownContext } from './markdown_context';
+import * as MarkdownTooltip from './plugins/markdown_tooltip';
+import * as MarkdownCheckbox from './plugins/markdown_checkbox';
 
 export const defaultParsingPlugins: PluggableList = [
   [markdown, {}],
   [highlight, {}],
   [emoji, { emoticon: true }],
+  [MarkdownTooltip.parser, {}],
+  [MarkdownCheckbox.parser, {}],
 ];
 
 export const defaultProcessingPlugins: PluggableList = [
@@ -68,7 +71,10 @@ export const defaultProcessingPlugins: PluggableList = [
     remark2rehype,
     {
       allowDangerousHtml: true,
-      handlers: {},
+      handlers: {
+        tooltipPlugin: MarkdownTooltip.handler,
+        checkboxPlugin: MarkdownCheckbox.handler,
+      },
     },
   ],
   [
@@ -84,12 +90,14 @@ export const defaultProcessingPlugins: PluggableList = [
           ) : (
             <code className="euiMarkdownFormat__code" {...props} />
           ),
+        tooltipPlugin: MarkdownTooltip.renderer,
+        checkboxPlugin: MarkdownCheckbox.renderer,
       },
     },
   ],
 ];
 
-export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
+type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     /** A unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
@@ -113,6 +121,9 @@ export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
     /** array of toolbar plugins **/
     uiPlugins?: EuiMarkdownEditorUiPlugin[];
 
+    /** Errors to buble up */
+    errors?: any;
+
     /** callback triggered when parsing results are available **/
     onParse?: (
       error: any | null,
@@ -122,6 +133,10 @@ export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
       }
     ) => void;
   };
+export type EuiMarkdownEditorProps = OneOf<
+  CommonMarkdownEditorProps,
+  'aria-label' | 'aria-labelledby'
+>;
 
 export const EuiMarkdownEditor: FunctionComponent<
   EuiMarkdownEditorProps
@@ -137,6 +152,9 @@ export const EuiMarkdownEditor: FunctionComponent<
       processingPluginList = defaultProcessingPlugins,
       uiPlugins = [],
       onParse,
+      errors = [],
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
       ...rest
     },
     ref
@@ -150,11 +168,13 @@ export const EuiMarkdownEditor: FunctionComponent<
       EuiMarkdownEditorUiPlugin | undefined
     >(undefined);
 
+    const toolbarPlugins = [MarkdownTooltip.plugin, ...uiPlugins];
+
     const markdownActions = useMemo(
-      () => new MarkdownActions(editorId, uiPlugins),
-      // uiPlugins _is_ accounted for
+      () => new MarkdownActions(editorId, toolbarPlugins),
+      // toolbarPlugins _is_ accounted for
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [editorId, uiPlugins.map(({ name }) => name).join(',')]
+      [editorId, toolbarPlugins.map(({ name }) => name).join(',')]
     );
 
     const classes = classNames('euiMarkdownEditor', className);
@@ -279,7 +299,7 @@ export const EuiMarkdownEditor: FunctionComponent<
               setViewMode(isPreviewing ? MODE_EDITING : MODE_VIEWING)
             }
             viewMode={viewMode}
-            uiPlugins={uiPlugins}
+            uiPlugins={toolbarPlugins}
           />
 
           {isPreviewing && (
@@ -293,21 +313,29 @@ export const EuiMarkdownEditor: FunctionComponent<
           )}
           {/* Toggle the editor's display instead of unmounting to retain its undo/redo history */}
           <div style={{ display: isPreviewing ? 'none' : 'block' }}>
-            <EuiMarkdownEditorDropZone>
+            <EuiMarkdownEditorDropZone
+              uiPlugins={toolbarPlugins}
+              errors={errors}>
               <EuiMarkdownEditorTextArea
                 ref={textareaRef}
                 height={height}
                 id={editorId}
                 onChange={e => onChange(e.target.value)}
                 value={value}
+                {...{
+                  'aria-label': ariaLabel,
+                  'aria-labelledby': ariaLabelledBy,
+                }}
               />
             </EuiMarkdownEditorDropZone>
+
             {pluginEditorPlugin && (
               <EuiOverlayMask>
                 <EuiModal onClose={() => setPluginEditorPlugin(undefined)}>
                   {createElement(pluginEditorPlugin.editor!, {
                     node:
                       selectedNode &&
+                      // @ts-ignore TODO
                       selectedNode.type === pluginEditorPlugin.name
                         ? selectedNode
                         : null,
@@ -315,10 +343,13 @@ export const EuiMarkdownEditor: FunctionComponent<
                     onSave: markdown => {
                       if (
                         selectedNode &&
+                        // @ts-ignore TODO
                         selectedNode.type === pluginEditorPlugin.name
                       ) {
                         textareaRef.current!.setSelectionRange(
+                          // @ts-ignore TODO
                           selectedNode.position.start.offset,
+                          // @ts-ignore TODO
                           selectedNode.position.end.offset
                         );
                       }
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index fc847bd449a..2cea6739627 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -17,21 +17,27 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { useDropzone } from 'react-dropzone';
-import { EuiIcon } from '../icon';
-import { EuiLoadingSpinner } from '../loading';
+import { EuiMarkdownEditorFooter } from './markdown_editor_footer';
+import { EuiMarkdownEditorUiPlugin } from './markdown_types';
 
-export const EuiMarkdownEditorDropZone = (props: any) => {
+interface EuiMarkdownEditorDropZoneProps {
+  uiPlugins: EuiMarkdownEditorUiPlugin[];
+  errors: any;
+}
+
+export const EuiMarkdownEditorDropZone: FunctionComponent<
+  EuiMarkdownEditorDropZoneProps
+> = props => {
   const [isDragging, toggleDragging] = React.useState(false);
   const [isUploadingFiles, toggleUploadingFiles] = React.useState(false);
 
-  const { children, className } = props;
+  const { children, uiPlugins, errors } = props;
 
   const classes = classNames('euiMarkdownEditor__dropZone', {
     'euiMarkdownEditor__dropZone--isDragging': isDragging,
-    className,
   });
 
   const { getRootProps, getInputProps, open } = useDropzone({
@@ -56,37 +62,15 @@ export const EuiMarkdownEditorDropZone = (props: any) => {
     },
   });
 
-  let buttonIcon;
-
-  if (isUploadingFiles) {
-    buttonIcon = (
-      <EuiLoadingSpinner
-        className="euiMarkdownEditor__dropZone__icon"
-        size="m"
-      />
-    );
-  } else {
-    buttonIcon = (
-      <EuiIcon
-        className="euiMarkdownEditor__dropZone__icon"
-        type="paperClip"
-        size="s"
-        aria-hidden="true"
-      />
-    );
-  }
-
   return (
     <div {...getRootProps()} className={classes}>
       {children}
-      <button className="euiMarkdownEditor__dropZone__button" onClick={open}>
-        {buttonIcon}
-        <div className="euiMarkdownEditor__dropZone__text">
-          {isUploadingFiles
-            ? 'Uploading your files...'
-            : 'Attach files by dragging & dropping or by clicking this area'}
-        </div>
-      </button>
+      <EuiMarkdownEditorFooter
+        uiPlugins={uiPlugins}
+        openFiles={open}
+        isUploadingFiles={isUploadingFiles}
+        errors={errors}
+      />
       <input {...getInputProps()} />
     </div>
   );
diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx
new file mode 100644
index 00000000000..fabd5ac45dc
--- /dev/null
+++ b/src/components/markdown_editor/markdown_editor_footer.tsx
@@ -0,0 +1,182 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, {
+  FunctionComponent,
+  useState,
+  Fragment,
+  ReactChild,
+} from 'react';
+import { EuiLoadingSpinner } from '../loading';
+import { EuiButtonEmpty, EuiButtonIcon } from '../button';
+import { EuiOverlayMask } from '../overlay_mask';
+import { EuiTitle } from '../title';
+import { EuiModal, EuiModalBody, EuiModalHeader } from '../modal';
+import { EuiI18n } from '../i18n';
+import { EuiMarkdownEditorUiPlugin } from './markdown_types';
+import { EuiPopover, EuiPopoverTitle } from '../popover';
+import { EuiText } from '../text';
+import { EuiSpacer } from '../spacer';
+// @ts-ignore a react svg
+import MarkdownLogo from './icons/markdown_logo';
+import { EuiHorizontalRule } from '../horizontal_rule';
+
+interface EuiMarkdownEditorFooterProps {
+  uiPlugins: EuiMarkdownEditorUiPlugin[];
+  isUploadingFiles: boolean;
+  openFiles: () => void;
+  errors: any;
+}
+
+export const EuiMarkdownEditorFooter: FunctionComponent<
+  EuiMarkdownEditorFooterProps
+> = props => {
+  const { uiPlugins, isUploadingFiles, openFiles, errors } = props;
+  const [isShowingHelp, setIsShowingHelp] = useState(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const onButtonClick = () => setIsPopoverOpen(isPopoverOpen => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  let uploadButton;
+
+  if (isUploadingFiles) {
+    uploadButton = (
+      <EuiButtonIcon
+        iconType={EuiLoadingSpinner}
+        aria-label="Uploading files"
+      />
+    );
+  } else {
+    uploadButton = (
+      <EuiButtonIcon
+        iconType="paperClip"
+        color="text"
+        aria-label="Open upload files modal"
+        onClick={openFiles}
+      />
+    );
+  }
+
+  let errorsButton;
+  if (errors && errors.length) {
+    errorsButton = (
+      <EuiPopover
+        button={
+          <EuiButtonEmpty
+            iconType="crossInACircleFilled"
+            size="s"
+            color="danger"
+            aria-label="Show errors"
+            onClick={onButtonClick}>
+            {errors.length}
+          </EuiButtonEmpty>
+        }
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        anchorPosition="upCenter">
+        <div className="euiMarkdownEditor__footerPopover">
+          <EuiPopoverTitle>
+            <EuiI18n
+              token="euiMarkdownEditorFooter.errorsTitle"
+              default="Errors"
+            />
+          </EuiPopoverTitle>
+          {errors.map((message: any, idx: any) => (
+            <EuiText key={idx}>{message.toString()}</EuiText>
+          ))}
+        </div>
+      </EuiPopover>
+    );
+  }
+
+  return (
+    <footer className="euiMarkdownEditor__footer">
+      <div className="euiMarkdownEditor__footerActions">
+        {uploadButton}
+        {errorsButton}
+      </div>
+
+      <EuiButtonIcon
+        className="euiMarkdownEditor__footerHelp"
+        iconType={MarkdownLogo}
+        color="text"
+        aria-label="Show markdown help"
+        onClick={() => setIsShowingHelp(!isShowingHelp)}
+      />
+      {isShowingHelp && (
+        <EuiOverlayMask onClick={() => setIsShowingHelp(false)}>
+          <EuiModal onClose={() => setIsShowingHelp(false)}>
+            <EuiModalHeader>
+              <EuiTitle>
+                <h3>
+                  <EuiI18n
+                    token="euiMarkdownEditorFooter.syntaxTitle"
+                    default="Syntax help"
+                  />
+                </h3>
+              </EuiTitle>
+            </EuiModalHeader>
+            <EuiModalBody>
+              <Fragment>
+                <EuiText>
+                  <EuiI18n
+                    tokens={[
+                      'euiMarkdownEditorFooter.descriptionPrefix',
+                      'euiMarkdownEditorFooter.descriptionSuffix',
+                    ]}
+                    defaults={[
+                      'This editor uses',
+                      'You can also utilize these additional syntax plugins to add rich content to your text.',
+                    ]}>
+                    {([descriptionPrefix, descriptionSuffix]: ReactChild[]) => (
+                      <p>
+                        {descriptionPrefix}{' '}
+                        <a
+                          href="https://github.github.com/gfm/"
+                          target="_blank">
+                          Github flavored markdown
+                        </a>
+                        . {descriptionSuffix}
+                      </p>
+                    )}
+                  </EuiI18n>
+                </EuiText>
+                <EuiHorizontalRule />
+                {uiPlugins
+                  .filter(({ helpText }) => !!helpText)
+                  .map(({ name, helpText }) => (
+                    <Fragment key={name}>
+                      <EuiTitle size="xxs">
+                        <p>
+                          <strong>{name}</strong>
+                        </p>
+                      </EuiTitle>
+                      <EuiSpacer size="s" />
+                      {helpText}
+                      <EuiSpacer size="l" />
+                    </Fragment>
+                  ))}
+              </Fragment>
+            </EuiModalBody>
+          </EuiModal>
+        </EuiOverlayMask>
+      )}
+    </footer>
+  );
+};
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 4ec22157ff6..87f090deead 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -27,6 +27,8 @@ import { MARKDOWN_MODE, MODE_VIEWING } from './markdown_modes';
 import { EuiMarkdownEditorUiPlugin } from './markdown_types';
 import { EuiMarkdownContext } from './markdown_context';
 import MarkdownActions from './markdown_actions';
+// @ts-ignore TODO
+import MarkdownCheckmarkIcon from './icons/markdown_checkmark';
 
 export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
@@ -65,6 +67,12 @@ const listButtons = [
     name: 'ol',
     iconType: 'editorOrderedList',
   },
+  {
+    id: 'mdTl',
+    label: 'Task list',
+    name: 'tl',
+    iconType: MarkdownCheckmarkIcon,
+  },
 ];
 
 const quoteCodeLinkButtons = [
@@ -72,7 +80,7 @@ const quoteCodeLinkButtons = [
     id: 'mdQuote',
     label: 'Quote',
     name: 'quote',
-    iconType: 'editorComment',
+    iconType: 'quote',
   },
   {
     id: 'mdCode',
@@ -150,6 +158,7 @@ export const EuiMarkdownEditorToolbar: FunctionComponent<
               />
             </EuiToolTip>
           ))}
+
           {uiPlugins.length > 0 ? (
             <>
               <span className="euiMarkdownEditor__toolbar__divider" />
diff --git a/src/components/markdown_editor/markdown_types.ts b/src/components/markdown_editor/markdown_types.ts
index ad6605d17e6..8ad9762fb7d 100644
--- a/src/components/markdown_editor/markdown_types.ts
+++ b/src/components/markdown_editor/markdown_types.ts
@@ -17,8 +17,34 @@
  * under the License.
  */
 
+import { ComponentType, ReactNode } from 'react';
+import { VFile } from 'vfile';
 import { IconType } from '../icon';
-import { ComponentType } from 'react';
+
+export interface RemarkParser {
+  Parser: any;
+  tokenizeInline: Function;
+  file: VFile;
+}
+export interface RemarkTokenizer {
+  (
+    this: RemarkParser,
+    eat: Function & { now: Function },
+    value: string,
+    silent: boolean
+  ): boolean | void;
+
+  locator?: (value: string, fromIndex: number) => number;
+
+  notInLink?: boolean;
+}
+export interface RemarkRehypeHandler {
+  (h: any, node: any): any;
+}
+export interface AstNodePosition {
+  start: { line: number; column: number; offset: number };
+  end: { line: number; column: number; offset: number };
+}
 
 export interface EuiMarkdownEditorUiPluginEditorProps {
   node?: object | null;
@@ -48,6 +74,7 @@ export type EuiMarkdownEditorUiPlugin = {
     label: string;
     iconType: IconType;
   };
+  helpText?: ReactNode;
 } & (PluginWithImmediateFormatting | PluginWithDelayedFormatting);
 
 export interface EuiMarkdownFormatting {
diff --git a/src/components/markdown_editor/plugins/markdown_checkbox.tsx b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
new file mode 100644
index 00000000000..df592d4eb75
--- /dev/null
+++ b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
@@ -0,0 +1,108 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FunctionComponent, useContext } from 'react';
+// @ts-ignore TODO
+import all from 'mdast-util-to-hast/lib/all';
+import { EuiCheckbox } from '../../form/checkbox';
+import { EuiMarkdownContext } from '../markdown_context';
+import { htmlIdGenerator } from '../../../services/accessibility';
+import {
+  AstNodePosition,
+  RemarkParser,
+  RemarkRehypeHandler,
+  RemarkTokenizer,
+} from '../markdown_types';
+
+interface CheckboxNodeDetails {
+  type: 'checkboxPlugin';
+  lead: string;
+  label: string;
+  isChecked: boolean;
+}
+
+function CheckboxParser(this: RemarkParser) {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.blockTokenizers;
+  const methods = Parser.prototype.blockMethods;
+
+  const tokenizeCheckbox: RemarkTokenizer = function tokenizeCheckbox(
+    eat,
+    value,
+    silent
+  ) {
+    /**
+     * optional leading whitespace & single dash mix
+     * square brackets, optionally containing whitespace and `x`
+     * optional whitespace
+     * remainder of the line is consumed as the textbox label
+     */
+    const checkboxMatch = value.match(/^(\s*-\s*)?\[([\sx]*)\](.+)/);
+    if (checkboxMatch == null) return false;
+
+    if (silent) {
+      return true;
+    }
+
+    const [match, lead = '', checkboxStatus, text] = checkboxMatch;
+    const isChecked = checkboxStatus.indexOf('x') !== -1;
+
+    const now = eat.now();
+    const offset = match.length - text.length;
+    now.column += offset;
+    now.offset += offset;
+    const children = this.tokenizeInline(text, now);
+
+    return eat(match)({
+      type: 'checkboxPlugin',
+      lead,
+      label: text,
+      isChecked,
+      children,
+    } as CheckboxNodeDetails);
+  };
+
+  tokenizers.checkbox = tokenizeCheckbox;
+  methods.splice(methods.indexOf('list'), 0, 'checkbox'); // Run it just before default `list` plugin to inject our own idea of checkboxes.
+}
+
+const checkboxMarkdownHandler: RemarkRehypeHandler = (h, node) => {
+  return h(node.position, 'checkboxPlugin', node, all(h, node));
+};
+const CheckboxMarkdownRenderer: FunctionComponent<
+  CheckboxNodeDetails & { position: AstNodePosition }
+> = ({ position, lead, label, isChecked, children }) => {
+  const { replaceNode } = useContext(EuiMarkdownContext);
+  return (
+    <EuiCheckbox
+      id={htmlIdGenerator()()}
+      checked={isChecked}
+      label={children}
+      onChange={() => {
+        replaceNode(position, `${lead}[${isChecked ? ' ' : 'x'}]${label}`);
+      }}
+    />
+  );
+};
+
+export {
+  CheckboxParser as parser,
+  checkboxMarkdownHandler as handler,
+  CheckboxMarkdownRenderer as renderer,
+};
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
similarity index 56%
rename from src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
rename to src/components/markdown_editor/plugins/markdown_tooltip.tsx
index 7a47311d254..7eceaaa40d2 100644
--- a/src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
+++ b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
@@ -1,26 +1,67 @@
-import React from 'react';
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FunctionComponent } from 'react';
+// @ts-ignore TODO
 import all from 'mdast-util-to-hast/lib/all';
-import { EuiToolTip } from '../../../../../src';
+import {
+  AstNodePosition,
+  RemarkParser,
+  RemarkRehypeHandler,
+  RemarkTokenizer,
+} from '../markdown_types';
+import { EuiToolTip } from '../../tool_tip';
+import { EuiCodeBlock } from '../../code';
+
+interface TooltipNodeDetails {
+  type: 'tooltipPlugin';
+  content: string;
+}
 
 const tooltipPlugin = {
   name: 'tooltipPlugin',
   button: {
     label: 'Tooltip',
-    iconType: 'flag',
+    iconType: 'editorComment',
   },
   formatting: {
     prefix: '!{tooltip[',
     suffix: ']()}',
     trimFirst: true,
   },
+  helpText: (
+    <EuiCodeBlock language="md" paddingSize="s" fontSize="l">
+      {'!{tooltip[anchor text](helpful description)}'}
+    </EuiCodeBlock>
+  ),
 };
 
-function TooltipParser() {
+function TooltipParser(this: RemarkParser) {
   const Parser = this.Parser;
   const tokenizers = Parser.prototype.inlineTokenizers;
   const methods = Parser.prototype.inlineMethods;
 
-  function tokenizeTooltip(eat, value, silent) {
+  const tokenizeTooltip: RemarkTokenizer = function tokenizeTooltip(
+    eat,
+    value,
+    silent
+  ) {
     if (value.startsWith('!{tooltip') === false) return false;
 
     const nextChar = value[9];
@@ -28,7 +69,7 @@ function TooltipParser() {
     if (nextChar !== '[') return false; // this isn't actually a tooltip
 
     let index = 9;
-    function readArg(open, close) {
+    function readArg(open: string, close: string) {
       if (value[index] !== open) throw 'Expected left bracket';
       index++;
 
@@ -84,11 +125,11 @@ function TooltipParser() {
       type: 'tooltipPlugin',
       content: tooltipText,
       children,
-    });
-  }
+    } as TooltipNodeDetails);
+  };
   tokenizeTooltip.notInLink = true;
 
-  tokenizeTooltip.locator = function locateTooltip(value, fromIndex) {
+  tokenizeTooltip.locator = (value, fromIndex) => {
     return value.indexOf('!{tooltip', fromIndex);
   };
 
@@ -96,10 +137,12 @@ function TooltipParser() {
   methods.splice(methods.indexOf('text'), 0, 'tooltip');
 }
 
-const tooltipMarkdownHandler = (h, node) => {
+const tooltipMarkdownHandler: RemarkRehypeHandler = (h, node) => {
   return h(node.position, 'tooltipPlugin', node, all(h, node));
 };
-const tooltipMarkdownRenderer = ({ content, children }) => {
+const tooltipMarkdownRenderer: FunctionComponent<
+  TooltipNodeDetails & { position: AstNodePosition }
+> = ({ content, children }) => {
   return (
     <EuiToolTip content={content}>
       <span>{children}</span>
diff --git a/yarn.lock b/yarn.lock
index 6dd6ee1cc84..eff09ee2e1b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1339,7 +1339,7 @@
   resolved "https://registry.yarnpkg.com/@types/tabbable/-/tabbable-3.1.0.tgz#540d4c2729872560badcc220e73c9412c1d2bffe"
   integrity sha512-LL0q/bTlzseaXQ8j91eZ+Z8FQUzo0nwkng00B8365qULvFyiSOWylxV8m31Gmee3QuidkDqR72a9NRfR8s4qTw==
 
-"@types/unist@^2.0.0", "@types/unist@^2.0.2":
+"@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
@@ -7621,11 +7621,12 @@ hast-to-hyperscript@^7.0.0:
     unist-util-is "^3.0.0"
     web-namespaces "^1.1.2"
 
-hast-to-hyperscript@^8.0.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-8.1.1.tgz#081e5a98d961ab46277a844f97dfe8dae05a8479"
-  integrity sha512-IsVTowDrvX4n+Nt+zP0VLQmh/ddVtnFSLUv1gb/706ovL2VgFdnE5ior2fDHSp1Bc0E5GidF2ax+PMjd+TW7gA==
+hast-to-hyperscript@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-9.0.0.tgz#768fb557765fe28749169c885056417342d71e83"
+  integrity sha512-NJvMYU3GlMLs7hN3CRbsNlMzusVNkYBogVWDGybsuuVQ336gFLiD+q9qtFZT2meSHzln3pNISZWTASWothMSMg==
   dependencies:
+    "@types/unist" "^2.0.3"
     comma-separated-tokens "^1.0.0"
     property-information "^5.3.0"
     space-separated-tokens "^1.0.0"
@@ -14359,13 +14360,13 @@ rehype-raw@^4.0.1:
   dependencies:
     hast-util-raw "^5.0.0"
 
-rehype-react@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/rehype-react/-/rehype-react-5.0.1.tgz#6934c90101a140328fffe22b9569b86cdeac1d73"
-  integrity sha512-vv/uqHROopaPimIw6Ip4Mx5+YySLClC7pSFJSW3QkwVYvguqbm5N+Cu4yJgt6nvDmOsP66GnQtDlU+tI6bhigQ==
+rehype-react@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-react/-/rehype-react-6.0.0.tgz#275b5fa32d5a296fc0bacac8e3c003b2fa32f916"
+  integrity sha512-66Z85/Sp/Aa2fjIQbVxIkcXgWsPDZ89e0uKiGvyCc4eSQCVj8kzHWDa8c0coxUZsGLkyzYvPF6F5txbFhRpFCQ==
   dependencies:
     "@mapbox/hast-util-table-cell-style" "^0.1.3"
-    hast-to-hyperscript "^8.0.0"
+    hast-to-hyperscript "^9.0.0"
 
 rehype-stringify@^6.0.1:
   version "6.0.1"

From 2873e6080b2711e7893d93a5a62dcdededa3c6c1 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@gmail.com>
Date: Fri, 3 Jul 2020 13:28:31 +0100
Subject: [PATCH 30/43] [EuiMarkdownEditor] Improving markdown format styles
 (#3534)

* Improving markdown format styles

* Transforming px to em

* Renaming variable

* Adding descriptions and alpha values

* hr more similar to EuiHorizontalRule
---
 .../views/markdown_editor/markdown-example.md |   6 +
 .../markdown_editor/_markdown_format.scss     | 114 +++++++++---------
 2 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown-example.md b/src-docs/src/views/markdown_editor/markdown-example.md
index 7b48ac21afa..56f9fbdd166 100644
--- a/src-docs/src/views/markdown_editor/markdown-example.md
+++ b/src-docs/src/views/markdown_editor/markdown-example.md
@@ -60,6 +60,12 @@ Ordered
 - [x] Give your project a name
 - [ ] Add a new column
 
+## Another Task Lists
+
+* [x] Create a new project
+* [x] Give your project a name
+* [ ] Add a new column
+
 
 ## Code
 
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index aee97c47f0a..51a3cd25244 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -1,39 +1,48 @@
-// Default styles for Markdown element
-//
-// 1. Links (EuiLink)
-// 2. Headings
-// 3. Images
-// 4. Blockquotes
-// 5. Horizontal rules
-// 6. Lists
-// 7. Tables
-// 8. Code
-
-// Functions
-// Note: The inlined base font size is set in common/functions/font.js. It should match $euiMdFontSize.
-$euiDefaultFontSize: 14px;
-
-@function canvasToEm($size) {
-  @return #{$size / $euiDefaultFontSize}em;
+// Default styles for Markdown Format
+// 1. Headings
+// 2. Images
+// 3. Blockquotes
+// 4. Horizontal rules
+// 5. Lists
+// 6. Tables
+// 7. Code
+
+// The Markdown Format uses by default a few EUI components
+// to render elements: EuiLink and EuiCode.
+
+$browserDefaultFontSize: 16px;
+
+// We're setting a function o transform px in em 
+// because it's easier to think in px 
+@function em($pixels, $context: $browserDefaultFontSize) {
+  @return #{$pixels/$context}em;
 }
 
 .euiMarkdownFormat {
   @include euiFont;
   @include euiText;
 
+  // We're using `em` values to support apps where consumers might adjust sizes 
+  // and consequently the markdown needs to adjust to these changes
+
   // Font size variables
-  $euiMarkdownFontSizeS: canvasToEm(12px);
-  $euiMarkdownFontSize: canvasToEm(14px);
-  $euiMarkdownFontSizeL: canvasToEm(20px);
-  $euiMarkdownFontSizeXL: canvasToEm(28px);
-  $euiMarkdownFontSizeXXL: canvasToEm(36px);
+  $euiMarkdownFontSizeXS: em(12px);
+  $euiMarkdownFontSizeS: em(14px);
+  $euiMarkdownFontSize: em(16px);
+  $euiMarkdownFontSizeM:  em(18px);
+  $euiMarkdownFontSizeL: em(20px);
+  $euiMarkdownFontSizeXL: em(28px);
+  $euiMarkdownFontSizeXXL: em(36px);
 
   // Spacing variables
-  $euiMarkdownSizeL: canvasToEm(24px);
-  $euiMarkdownSize: canvasToEm(16px);
-  $euiMarkdownSizeS: canvasToEm(12px);
-  $euiMarkdownSizeXS: canvasToEm(8px);
-  $euiMarkdownSizeXXS: canvasToEm(4px);
+  $euiMarkdownSizeXXS: em(4px);
+  $euiMarkdownSizeXS: em(8px);
+  $euiMarkdownSizeS: em(12px);
+  $euiMarkdownSize: em(16px);
+  $euiMarkdownSizeL: em(24px);
+
+  // We're using alpha values to support apps that 
+  // display markdown on backgrounds of various colors
 
   // Grayscale variables
   $euiMarkdownAlphaLightestShade: rgba($euiColorFullShade, .05);
@@ -45,6 +54,10 @@ $euiDefaultFontSize: 14px;
   $euiMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
   $euiMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);
 
+  &--reversed {
+    color: $euiColorLightestShade;
+  }
+
   > *:first-child {
     // sass-lint:disable-block no-important
     margin-top: 0 !important;
@@ -107,24 +120,18 @@ $euiDefaultFontSize: 14px;
   }
 
   h5 {
-    font-size: $euiMarkdownFontSize;
+    font-size: $euiMarkdownFontSizeS;
     line-height: 1.142857em;
     font-weight: 700;
   }
 
   h6 {
-    font-size: $euiMarkdownFontSizeS;
+    font-size: $euiMarkdownFontSizeXS;
     line-height: 1.333333em;
     font-weight: 700;
     text-transform: uppercase;
   }
 
-  h1,
-  h2 {
-    padding-bottom: .3em;
-    border-bottom: 1px solid $euiMarkdownAlphaLightShade;
-  }
-
   // 3. Images
   img {
     max-width: 100%;
@@ -144,13 +151,10 @@ $euiDefaultFontSize: 14px;
 
   // 5. Horizontal rules
   hr {
-    overflow: hidden;
-    background: transparent;
-    height: 2px;
-    padding: 0;
-    margin: $euiMarkdownSizeL 0;
-    background-color: $euiMarkdownAlphaLightShade;
     border: none;
+    height: 1px;
+    background-color: $euiMarkdownAlphaLightShade;
+    margin: $euiMarkdownSizeL 0;
   }
 
   hr::before {
@@ -246,7 +250,7 @@ $euiDefaultFontSize: 14px;
 
   table th,
   table td {
-    padding: $euiMarkdownSizeXXS $euiMarkdownSizeS;
+    padding: $euiMarkdownSizeXXS $euiMarkdownSizeXS;
     border-top: 1px solid $euiMarkdownAlphaLightShade;
     border-bottom: 1px solid $euiMarkdownAlphaLightShade;
 
@@ -261,34 +265,24 @@ $euiDefaultFontSize: 14px;
   }
 
   // 8. Code
-  .euiMarkdownFormat__code {
+  // the markdown editor adds a EuiCodeBlock when consumers specify the language
+  // when no language is specified it gets the .euiMarkdownFormat__code styles
+  &__code {
     @include euiCodeFont;
     color: $euiCodeBlockColor;
-    font-size: $euiFontSizeXS;
+    font-size: $euiMarkdownFontSizeXS;
     padding: $euiMarkdownSizeXXS 0;
     margin-bottom: $euiMarkdownSizeXS;
-    border-radius: $euiMarkdownSizeXXS;
-    background: $euiCodeBlockBackgroundColor;
-  }
-
-  .euiMarkdownFormat__code::before,
-  .euiMarkdownFormat__code::after {
-    letter-spacing: -.2em;
-    content: '\00a0';
+    background-color: $euiMarkdownAlphaLightestShade;
   }
 
-  // code block
-  pre .euiMarkdownFormat__code {
+  // default styles for code blocks
+  pre &__code {
     display: block;
-    padding: $euiSizeL;
+    padding: $euiMarkdownFontSizeL;
     overflow: visible;
     line-height: inherit;
     word-wrap: normal;
     white-space: pre;
   }
-
-  pre .euiMarkdownFormat__code::before,
-  pre .euiMarkdownFormat__code::after {
-    content: normal;
-  }
 }

From 779df96120626abc9e1e32ea9fb588ba26fad436 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@gmail.com>
Date: Tue, 7 Jul 2020 22:38:15 +0100
Subject: [PATCH 31/43] [EuiMarkdownEditor] Better styles and class names
 (#3697)

* Better styles and classnames

* md footer height

* snapshot

* preventing the text area of loosing focus when clicking on an action button
---
 .../markdown_editor.test.tsx.snap             | 322 +++++++++---------
 .../markdown_editor/_markdown_editor.scss     |   3 +
 .../_markdown_editor_drop_zone.scss           |  10 +-
 .../_markdown_editor_footer.scss              |  11 +-
 .../_markdown_editor_preview.scss             |   2 +-
 .../_markdown_editor_text_area.scss           |  26 +-
 .../_markdown_editor_toolbar.scss             |   9 +-
 .../markdown_editor/markdown_editor.tsx       |   2 +-
 .../markdown_editor_drop_zone.tsx             |   4 +-
 .../markdown_editor_footer.tsx                |   8 +-
 .../markdown_editor_text_area.tsx             |   6 +-
 .../markdown_editor_toolbar.tsx               | 180 +++++-----
 12 files changed, 287 insertions(+), 296 deletions(-)

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 6d10fef2507..58a21b849d3 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -6,202 +6,194 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiMarkdownEditor__toolbar"
+    class="euiMarkdownEditorToolbar"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+      class="euiMarkdownEditorToolbar__buttons"
     >
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero euiMarkdownEditor__toolbar__buttons"
+      <span
+        class="euiToolTipAnchor"
       >
-        <span
-          class="euiToolTipAnchor"
-        >
-          <button
-            aria-label="Bold"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorBold"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+        <button
+          aria-label="Bold"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Italic"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorItalic"
-            />
-          </button>
-        </span>
-        <span
-          class="euiMarkdownEditor__toolbar__divider"
-        />
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorBold"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Italic"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Unordered list"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorUnorderedList"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorItalic"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Unordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Ordered list"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorOrderedList"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorUnorderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Ordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Task list"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="MarkdownCheckmark"
-            />
-          </button>
-        </span>
-        <span
-          class="euiMarkdownEditor__toolbar__divider"
-        />
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorOrderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Task list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Quote"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="quote"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownCheckmark"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Quote"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Code"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorCodeBlock"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="quote"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Code"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Link"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorLink"
-            />
-          </button>
-        </span>
-        <span
-          class="euiMarkdownEditor__toolbar__divider"
-        />
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorCodeBlock"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Link"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Tooltip"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorComment"
-            />
-          </button>
-        </span>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorLink"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+          aria-label="Tooltip"
+          class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <span
-            class="euiButtonEmpty__content"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
-              data-euiicon-type="eye"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              Preview
-            </span>
-          </span>
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorComment"
+          />
         </button>
-      </div>
+      </span>
     </div>
+    <button
+      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+      type="button"
+    >
+      <span
+        class="euiButtonEmpty__content"
+      >
+        <div
+          aria-hidden="true"
+          class="euiButtonEmpty__icon"
+          data-euiicon-type="eye"
+        />
+        <span
+          class="euiButtonEmpty__text"
+        >
+          Preview
+        </span>
+      </span>
+    </button>
   </div>
   <div
     style="display:block"
   >
     <div
-      class="euiMarkdownEditor__dropZone"
+      class="euiMarkdownEditorDropZone"
     >
       <textarea
         aria-label="aria-label"
-        class="euiMarkdownEditor__textArea"
+        class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(118px"
+        style="height:calc(116px"
       />
       <footer
-        class="euiMarkdownEditor__footer"
+        class="euiMarkdownEditorFooter"
       >
         <div
-          class="euiMarkdownEditor__footerActions"
+          class="euiMarkdownEditorFooter__actions"
         >
           <button
             aria-label="Open upload files modal"
@@ -217,7 +209,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         </div>
         <button
           aria-label="Show markdown help"
-          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditor__footerHelp"
+          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
           type="button"
         >
           <div
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index e03f34d7a71..f88bb5d63a0 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -1,4 +1,7 @@
 .euiMarkdownEditor {
+  transition:
+  box-shadow $euiAnimSpeedFast ease-in;
+
   &:focus-within {
     @include euiSlightShadowHover;
   }
diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
index 280f9b45d8a..cf8e2d629f9 100644
--- a/src/components/markdown_editor/_markdown_editor_drop_zone.scss
+++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
@@ -1,4 +1,4 @@
-.euiMarkdownEditor__dropZone {
+.euiMarkdownEditorDropZone {
   @include euiFormControlDefaultShadow;
   display: flex;
   position: relative;
@@ -25,13 +25,9 @@
   }
 
   &--isDragging {
-    .euiMarkdownEditor__textArea,
-    .euiMarkdownEditor__footer {
+    .euiMarkdownEditorTextArea,
+    .euiMarkdownEditorFooter {
       background-color: transparentize($euiColorSecondary, .88);
     }
-
-    .euiMarkdownEditor__footer {
-      border-top-color: $euiColorSecondary;
-    }
   }
 }
diff --git a/src/components/markdown_editor/_markdown_editor_footer.scss b/src/components/markdown_editor/_markdown_editor_footer.scss
index be3174b5bb5..b0b0b7136a6 100644
--- a/src/components/markdown_editor/_markdown_editor_footer.scss
+++ b/src/components/markdown_editor/_markdown_editor_footer.scss
@@ -1,17 +1,16 @@
-.euiMarkdownEditor__footer {
+.euiMarkdownEditorFooter {
   display: inline-flex;
   padding: $euiSizeXS;
   border: $euiBorderThin;
-  border-top: none;
   align-items: center;
   background: $euiPageBackgroundColor;
 }
 
-.euiMarkdownEditor__footerPopover {
+.euiMarkdownEditorFooter__popover {
   width: 300px;
 }
 
-.euiMarkdownEditor__footerActions {
+.euiMarkdownEditorFooter__actions {
   flex: 1;
   display: inline-flex;
 
@@ -22,7 +21,7 @@
   }
 }
 
-.euiMarkdownEditor__footerHelp {
+.euiMarkdownEditorFooter__help {
   justify-self: flex-end;
 
   // overrides the default button icon width size
@@ -31,7 +30,7 @@
   }
 }
 
-.euiMarkdownEditor__footerErrors {
+.euiMarkdownEditorFooter__errors {
   // overrides the default button icon width size
   > svg {
     color: $euiTextSubduedColor;
diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss
index 74707692d30..1762bb327bd 100644
--- a/src/components/markdown_editor/_markdown_editor_preview.scss
+++ b/src/components/markdown_editor/_markdown_editor_preview.scss
@@ -1,4 +1,4 @@
-.euiMarkdownEditor__preview {
+.euiMarkdownEditorPreview {
   @include euiScrollBar;
   height: 150px;
   overflow-y: auto;
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index e59e87713f9..46369729712 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -1,22 +1,32 @@
-.euiMarkdownEditor__textArea {
+.euiMarkdownEditorTextArea {
   @include euiFormControlText;
   @include euiScrollBar;
   width: 100%;
   height: 100%;
   min-height: 150px;
   padding: $euiSizeM;
-  background-color: $euiFormBackgroundColor;
   border: $euiBorderThin;
-  border-color: $euiColorLightShade;
+  border-bottom: none;
   // Overrides the euiFormControlText line-height that is very small
   line-height: $euiLineHeight;
   resize: vertical;
+  background-color: $euiFormBackgroundColor;
+  background-repeat: no-repeat;
+  background-size: 0% 100%;
 
-  &:focus {
-    background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
+  // sass-lint:disable-block indentation
+  transition:
+    box-shadow $euiAnimSpeedFast ease-in,
+    background-image $euiAnimSpeedFast ease-in,
+    background-size $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in;
 
-    + .euiMarkdownEditor__dropZone__button {
-      background-image: euiFormControlGradient();
-    }
+  &:focus,
+  // preventing the text area of loosing focus when clicking on an action button
+  // from the toolbar
+  .euiMarkdownEditor:focus-within &  {
+    background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
+    background-image: euiFormControlGradient();
+    background-size: 100% 100%;
   }
 }
diff --git a/src/components/markdown_editor/_markdown_editor_toolbar.scss b/src/components/markdown_editor/_markdown_editor_toolbar.scss
index 64c4545cc55..33350e5752d 100644
--- a/src/components/markdown_editor/_markdown_editor_toolbar.scss
+++ b/src/components/markdown_editor/_markdown_editor_toolbar.scss
@@ -1,4 +1,6 @@
-.euiMarkdownEditor__toolbar {
+.euiMarkdownEditorToolbar {
+  display: flex;
+  flex-wrap: wrap;
   background: $euiColorLightestShade;
   border: $euiBorderThin;
   border-color: $euiColorLightShade;
@@ -6,7 +8,10 @@
   padding: $euiSizeXS;
 
   &__buttons {
-    flex-direction: row;
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    align-items: center;
 
     > * {
       margin-right: $euiSizeXS;
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 4318934ad70..8e7f619391a 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -304,7 +304,7 @@ export const EuiMarkdownEditor: FunctionComponent<
 
           {isPreviewing && (
             <div
-              className="euiMarkdownEditor__preview"
+              className="euiMarkdownEditorPreview"
               style={{ height: `${height}px` }}>
               <EuiMarkdownFormat processor={processor}>
                 {value}
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index 2cea6739627..0e47248ef87 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -36,8 +36,8 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<
 
   const { children, uiPlugins, errors } = props;
 
-  const classes = classNames('euiMarkdownEditor__dropZone', {
-    'euiMarkdownEditor__dropZone--isDragging': isDragging,
+  const classes = classNames('euiMarkdownEditorDropZone', {
+    'euiMarkdownEditorDropZone--isDragging': isDragging,
   });
 
   const { getRootProps, getInputProps, open } = useDropzone({
diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx
index fabd5ac45dc..e011d45ebe0 100644
--- a/src/components/markdown_editor/markdown_editor_footer.tsx
+++ b/src/components/markdown_editor/markdown_editor_footer.tsx
@@ -90,7 +90,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent<
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         anchorPosition="upCenter">
-        <div className="euiMarkdownEditor__footerPopover">
+        <div className="euiMarkdownEditorFooter__popover">
           <EuiPopoverTitle>
             <EuiI18n
               token="euiMarkdownEditorFooter.errorsTitle"
@@ -106,14 +106,14 @@ export const EuiMarkdownEditorFooter: FunctionComponent<
   }
 
   return (
-    <footer className="euiMarkdownEditor__footer">
-      <div className="euiMarkdownEditor__footerActions">
+    <footer className="euiMarkdownEditorFooter">
+      <div className="euiMarkdownEditorFooter__actions">
         {uploadButton}
         {errorsButton}
       </div>
 
       <EuiButtonIcon
-        className="euiMarkdownEditor__footerHelp"
+        className="euiMarkdownEditorFooter__help"
         iconType={MarkdownLogo}
         color="text"
         aria-label="Show markdown help"
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index 8786e66705a..a9576c90467 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -64,13 +64,13 @@ export const EuiMarkdownEditorTextArea = forwardRef<
     },
     ref
   ) => {
-    const dropZoneButtonHeight = 32;
+    const markdownFooterHeight = 34;
 
     return (
       <textarea
         ref={ref}
-        style={{ height: `calc(${height - dropZoneButtonHeight}px` }}
-        className="euiMarkdownEditor__textArea"
+        style={{ height: `calc(${height - markdownFooterHeight}px` }}
+        className="euiMarkdownEditorTextArea"
         {...rest}
         rows={6}
         name={name}
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 87f090deead..6fb77e3548d 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -20,7 +20,6 @@
 import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
 import { CommonProps } from '../common';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
-import { EuiFlexItem, EuiFlexGroup } from '../flex';
 import { EuiI18n } from '../i18n';
 import { EuiToolTip } from '../tool_tip';
 import { MARKDOWN_MODE, MODE_VIEWING } from './markdown_modes';
@@ -115,104 +114,91 @@ export const EuiMarkdownEditorToolbar: FunctionComponent<
   const isPreviewing = viewMode === MODE_VIEWING;
 
   return (
-    <div className="euiMarkdownEditor__toolbar">
-      <EuiFlexGroup
-        justifyContent="spaceBetween"
-        alignItems="center"
-        responsive={false}>
-        <EuiFlexItem
-          grow={false}
-          className="euiMarkdownEditor__toolbar__buttons">
-          {boldItalicButtons.map(item => (
-            <EuiToolTip key={item.id} content={item.label} delay="long">
-              <EuiButtonIcon
-                color="text"
-                onClick={() => handleMdButtonClick(item.id)}
-                iconType={item.iconType}
-                aria-label={item.label}
-                isDisabled={isPreviewing}
-              />
-            </EuiToolTip>
-          ))}
-          <span className="euiMarkdownEditor__toolbar__divider" />
-          {listButtons.map(item => (
-            <EuiToolTip key={item.id} content={item.label} delay="long">
-              <EuiButtonIcon
-                color="text"
-                onClick={() => handleMdButtonClick(item.id)}
-                iconType={item.iconType}
-                aria-label={item.label}
-                isDisabled={isPreviewing}
-              />
-            </EuiToolTip>
-          ))}
-          <span className="euiMarkdownEditor__toolbar__divider" />
-          {quoteCodeLinkButtons.map(item => (
-            <EuiToolTip key={item.id} content={item.label} delay="long">
-              <EuiButtonIcon
-                color="text"
-                onClick={() => handleMdButtonClick(item.id)}
-                iconType={item.iconType}
-                aria-label={item.label}
-                isDisabled={isPreviewing}
-              />
-            </EuiToolTip>
-          ))}
-
-          {uiPlugins.length > 0 ? (
-            <>
-              <span className="euiMarkdownEditor__toolbar__divider" />
-              {uiPlugins.map(({ name, button }) => {
-                const isSelectedNodeType =
-                  selectedNode && selectedNode.type === name;
-                return (
-                  <EuiToolTip key={name} content={button.label} delay="long">
-                    <EuiButtonIcon
-                      color="text"
-                      {...(isSelectedNodeType
-                        ? {
-                            style: { background: 'rgba(0, 0, 0, 0.15)' },
-                          }
-                        : null)}
-                      onClick={() => handleMdButtonClick(name)}
-                      iconType={button.iconType}
-                      aria-label={button.label}
-                      isDisabled={isPreviewing}
-                    />
-                  </EuiToolTip>
-                );
-              })}
-            </>
-          ) : null}
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          {/* The idea was to use the EuiButtonToggle but it doesn't work when pressing the enter key */}
-          {isPreviewing ? (
-            <EuiButtonEmpty
-              iconType="editorCodeBlock"
+    <div className="euiMarkdownEditorToolbar">
+      <div className="euiMarkdownEditorToolbar__buttons">
+        {boldItalicButtons.map(item => (
+          <EuiToolTip key={item.id} content={item.label} delay="long">
+            <EuiButtonIcon
+              color="text"
+              onClick={() => handleMdButtonClick(item.id)}
+              iconType={item.iconType}
+              aria-label={item.label}
+              isDisabled={isPreviewing}
+            />
+          </EuiToolTip>
+        ))}
+        <span className="euiMarkdownEditorToolbar__divider" />
+        {listButtons.map(item => (
+          <EuiToolTip key={item.id} content={item.label} delay="long">
+            <EuiButtonIcon
               color="text"
-              size="s"
-              onClick={onClickPreview}>
-              <EuiI18n
-                token="euiMarkdownEditorToolbar.editor"
-                default="Editor"
-              />
-            </EuiButtonEmpty>
-          ) : (
-            <EuiButtonEmpty
-              iconType="eye"
+              onClick={() => handleMdButtonClick(item.id)}
+              iconType={item.iconType}
+              aria-label={item.label}
+              isDisabled={isPreviewing}
+            />
+          </EuiToolTip>
+        ))}
+        <span className="euiMarkdownEditorToolbar__divider" />
+        {quoteCodeLinkButtons.map(item => (
+          <EuiToolTip key={item.id} content={item.label} delay="long">
+            <EuiButtonIcon
               color="text"
-              size="s"
-              onClick={onClickPreview}>
-              <EuiI18n
-                token="euiMarkdownEditorToolbar.previewMarkdown"
-                default="Preview"
-              />
-            </EuiButtonEmpty>
-          )}
-        </EuiFlexItem>
-      </EuiFlexGroup>
+              onClick={() => handleMdButtonClick(item.id)}
+              iconType={item.iconType}
+              aria-label={item.label}
+              isDisabled={isPreviewing}
+            />
+          </EuiToolTip>
+        ))}
+
+        {uiPlugins.length > 0 ? (
+          <>
+            <span className="euiMarkdownEditorToolbar__divider" />
+            {uiPlugins.map(({ name, button }) => {
+              const isSelectedNodeType =
+                selectedNode && selectedNode.type === name;
+              return (
+                <EuiToolTip key={name} content={button.label} delay="long">
+                  <EuiButtonIcon
+                    color="text"
+                    {...(isSelectedNodeType
+                      ? {
+                          style: { background: 'rgba(0, 0, 0, 0.15)' },
+                        }
+                      : null)}
+                    onClick={() => handleMdButtonClick(name)}
+                    iconType={button.iconType}
+                    aria-label={button.label}
+                    isDisabled={isPreviewing}
+                  />
+                </EuiToolTip>
+              );
+            })}
+          </>
+        ) : null}
+      </div>
+
+      {isPreviewing ? (
+        <EuiButtonEmpty
+          iconType="editorCodeBlock"
+          color="text"
+          size="s"
+          onClick={onClickPreview}>
+          <EuiI18n token="euiMarkdownEditorToolbar.editor" default="Editor" />
+        </EuiButtonEmpty>
+      ) : (
+        <EuiButtonEmpty
+          iconType="eye"
+          color="text"
+          size="s"
+          onClick={onClickPreview}>
+          <EuiI18n
+            token="euiMarkdownEditorToolbar.previewMarkdown"
+            default="Preview"
+          />
+        </EuiButtonEmpty>
+      )}
     </div>
   );
 };

From 47107820f009fbe3e355e4f82817e7fefbf7ee45 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 8 Jul 2020 12:13:45 -0600
Subject: [PATCH 32/43] Add types to markdown editor (#3703)

* Plugin types

* Rehype / hast / unist node types

* Make typescript happy with markdown editor and dependencies

* Types for markdown AST nodes and errors

* Don't scan any .d.ts file for internationalization strings
---
 package.json                                  |  2 +-
 scripts/babel/fetch-i18n-strings.js           |  2 +-
 src/components/markdown_editor/index.ts       |  8 +++
 .../markdown_editor/markdown_actions.ts       | 19 +++----
 .../markdown_editor/markdown_editor.tsx       | 29 +++++------
 .../markdown_editor_drop_zone.tsx             |  7 ++-
 .../markdown_editor_footer.tsx                |  9 ++--
 .../markdown_editor_toolbar.tsx               | 11 +++--
 .../markdown_editor/markdown_types.ts         | 33 ++++++++++---
 .../plugins/markdown_checkbox.tsx             | 13 +++--
 .../plugins/markdown_tooltip.tsx              | 13 +++--
 .../markdown_editor/unified-plugins.d.ts      | 49 +++++++++++++++++++
 yarn.lock                                     | 39 +++++++++------
 13 files changed, 162 insertions(+), 72 deletions(-)
 create mode 100644 src/components/markdown_editor/unified-plugins.d.ts

diff --git a/package.json b/package.json
index 1e57a872822..e6c5c73a557 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "remark-emoji": "^2.1.0",
     "remark-highlight.js": "^5.2.0",
     "remark-parse": "^7.0.2",
-    "remark-rehype": "^6.0.0",
+    "remark-rehype": "^7.0.0",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
     "text-diff": "^1.0.1",
diff --git a/scripts/babel/fetch-i18n-strings.js b/scripts/babel/fetch-i18n-strings.js
index cfca578162a..0ee92a3f56e 100644
--- a/scripts/babel/fetch-i18n-strings.js
+++ b/scripts/babel/fetch-i18n-strings.js
@@ -85,7 +85,7 @@ const files = glob.sync(
   '**/*.@(js|ts|tsx)',
   { cwd: srcDir, realpath: true },
 ).filter(filepath => {
-  if (filepath.endsWith('index.d.ts')) return false;
+  if (filepath.endsWith('.d.ts')) return false;
   if (filepath.endsWith('test.ts')) return false;
   if (filepath.endsWith('test.tsx')) return false;
   if (filepath.endsWith('test.js')) return false;
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
index 49cda3bc240..5c1f4b4a7f4 100644
--- a/src/components/markdown_editor/index.ts
+++ b/src/components/markdown_editor/index.ts
@@ -24,3 +24,11 @@ export {
   defaultProcessingPlugins,
 } from './markdown_editor';
 export { EuiMarkdownContext } from './markdown_context';
+export {
+  EuiMarkdownParseError,
+  EuiMarkdownAstNode,
+  EuiMarkdownAstNodePosition,
+  EuiMarkdownFormatting,
+  EuiMarkdownEditorUiPlugin,
+  RemarkRehypeHandler,
+} from './markdown_types';
diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
index 2946e245626..2d522fa8ef2 100644
--- a/src/components/markdown_editor/markdown_actions.ts
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -166,11 +166,12 @@ class MarkdownActions {
       ...defaults,
       ...incomingStyle,
     };
-    const editor = document.getElementById(this.editorID);
+    const editor = document.getElementById(
+      this.editorID
+    ) as HTMLTextAreaElement;
 
     if (editor) {
       editor.focus();
-      // @ts-ignore TODO
       styleSelectedText(editor, outgoingStyle);
     }
   }
@@ -262,15 +263,11 @@ export function insertText(
        * https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
        */
       const inputEvent = new Event('input', { bubbles: true });
-      const nativeInputValueSetter =
-        // @ts-ignore TODO
-        Object.getOwnPropertyDescriptor(
-          // @ts-ignore TODO
-          window.HTMLTextAreaElement.prototype,
-          'value'
-        ).set;
-      // @ts-ignore TODO
-      nativeInputValueSetter.call(textarea, before + text + after);
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value'
+      )!.set;
+      nativeInputValueSetter!.call(textarea, before + text + after);
       textarea.dispatchEvent(inputEvent);
     }
 
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 8e7f619391a..0694ceaa1fe 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -32,12 +32,9 @@ import React, {
 import unified, { PluggableList, Processor } from 'unified';
 import { VFileMessage } from 'vfile-message';
 import classNames from 'classnames';
-// @ts-ignore TODO
 import emoji from 'remark-emoji';
 import markdown from 'remark-parse';
-// @ts-ignore TODO
 import remark2rehype from 'remark-rehype';
-// @ts-ignore TODO
 import highlight from 'remark-highlight.js';
 import rehype2react from 'rehype-react';
 
@@ -49,9 +46,13 @@ import { EuiMarkdownFormat } from './markdown_format';
 import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone';
 import { htmlIdGenerator } from '../../services/accessibility';
 import { EuiLink } from '../link';
-import { EuiCodeBlock } from '../code';
+import { EuiCodeBlock, EuiCodeBlockProps } from '../code';
 import { MARKDOWN_MODE, MODE_EDITING, MODE_VIEWING } from './markdown_modes';
-import { EuiMarkdownEditorUiPlugin } from './markdown_types';
+import {
+  EuiMarkdownAstNode,
+  EuiMarkdownEditorUiPlugin,
+  EuiMarkdownParseError,
+} from './markdown_types';
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiModal } from '../modal';
 import { ContextShape, EuiMarkdownContext } from './markdown_context';
@@ -83,7 +84,7 @@ export const defaultProcessingPlugins: PluggableList = [
       createElement: createElement,
       components: {
         a: EuiLink,
-        code: (props: any) =>
+        code: (props: EuiCodeBlockProps) =>
           // if has classNames is a codeBlock using highlight js
           props.className ? (
             <EuiCodeBlock {...props} />
@@ -121,15 +122,15 @@ type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
     /** array of toolbar plugins **/
     uiPlugins?: EuiMarkdownEditorUiPlugin[];
 
-    /** Errors to buble up */
-    errors?: any;
+    /** Errors to bubble up */
+    errors?: EuiMarkdownParseError[];
 
     /** callback triggered when parsing results are available **/
     onParse?: (
-      error: any | null,
+      error: EuiMarkdownParseError | null,
       data: {
         messages: VFileMessage[];
-        ast: any;
+        ast: EuiMarkdownAstNode;
       }
     ) => void;
   };
@@ -193,7 +194,7 @@ export const EuiMarkdownEditor: FunctionComponent<
     }, [parsingPluginList]);
 
     const [parsed, parseError] = useMemo<
-      [any | null, VFileMessage | null]
+      [any | null, EuiMarkdownParseError | null]
     >(() => {
       try {
         const parsed = parser.processSync(value);
@@ -242,7 +243,7 @@ export const EuiMarkdownEditor: FunctionComponent<
       const getCursorNode = () => {
         const { selectionStart } = textareaRef.current!;
 
-        let node: any = parsed.contents;
+        let node: EuiMarkdownAstNode = parsed.contents;
 
         outer: while (true) {
           if (node.children) {
@@ -335,7 +336,6 @@ export const EuiMarkdownEditor: FunctionComponent<
                   {createElement(pluginEditorPlugin.editor!, {
                     node:
                       selectedNode &&
-                      // @ts-ignore TODO
                       selectedNode.type === pluginEditorPlugin.name
                         ? selectedNode
                         : null,
@@ -343,13 +343,10 @@ export const EuiMarkdownEditor: FunctionComponent<
                     onSave: markdown => {
                       if (
                         selectedNode &&
-                        // @ts-ignore TODO
                         selectedNode.type === pluginEditorPlugin.name
                       ) {
                         textareaRef.current!.setSelectionRange(
-                          // @ts-ignore TODO
                           selectedNode.position.start.offset,
-                          // @ts-ignore TODO
                           selectedNode.position.end.offset
                         );
                       }
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index 0e47248ef87..59985af9a7e 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -21,11 +21,14 @@ import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { useDropzone } from 'react-dropzone';
 import { EuiMarkdownEditorFooter } from './markdown_editor_footer';
-import { EuiMarkdownEditorUiPlugin } from './markdown_types';
+import {
+  EuiMarkdownEditorUiPlugin,
+  EuiMarkdownParseError,
+} from './markdown_types';
 
 interface EuiMarkdownEditorDropZoneProps {
   uiPlugins: EuiMarkdownEditorUiPlugin[];
-  errors: any;
+  errors: EuiMarkdownParseError[];
 }
 
 export const EuiMarkdownEditorDropZone: FunctionComponent<
diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx
index e011d45ebe0..489f35e2329 100644
--- a/src/components/markdown_editor/markdown_editor_footer.tsx
+++ b/src/components/markdown_editor/markdown_editor_footer.tsx
@@ -29,7 +29,10 @@ import { EuiOverlayMask } from '../overlay_mask';
 import { EuiTitle } from '../title';
 import { EuiModal, EuiModalBody, EuiModalHeader } from '../modal';
 import { EuiI18n } from '../i18n';
-import { EuiMarkdownEditorUiPlugin } from './markdown_types';
+import {
+  EuiMarkdownEditorUiPlugin,
+  EuiMarkdownParseError,
+} from './markdown_types';
 import { EuiPopover, EuiPopoverTitle } from '../popover';
 import { EuiText } from '../text';
 import { EuiSpacer } from '../spacer';
@@ -41,7 +44,7 @@ interface EuiMarkdownEditorFooterProps {
   uiPlugins: EuiMarkdownEditorUiPlugin[];
   isUploadingFiles: boolean;
   openFiles: () => void;
-  errors: any;
+  errors: EuiMarkdownParseError[];
 }
 
 export const EuiMarkdownEditorFooter: FunctionComponent<
@@ -97,7 +100,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent<
               default="Errors"
             />
           </EuiPopoverTitle>
-          {errors.map((message: any, idx: any) => (
+          {errors.map((message, idx) => (
             <EuiText key={idx}>{message.toString()}</EuiText>
           ))}
         </div>
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 6fb77e3548d..a3e7b80f706 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -17,7 +17,12 @@
  * under the License.
  */
 
-import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  MouseEventHandler,
+  useContext,
+} from 'react';
 import { CommonProps } from '../common';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
@@ -26,7 +31,7 @@ import { MARKDOWN_MODE, MODE_VIEWING } from './markdown_modes';
 import { EuiMarkdownEditorUiPlugin } from './markdown_types';
 import { EuiMarkdownContext } from './markdown_context';
 import MarkdownActions from './markdown_actions';
-// @ts-ignore TODO
+// @ts-ignore a react svg
 import MarkdownCheckmarkIcon from './icons/markdown_checkmark';
 
 export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
@@ -34,7 +39,7 @@ export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
     selectedNode?: null | any;
     markdownActions: MarkdownActions;
     viewMode: MARKDOWN_MODE;
-    onClickPreview: any;
+    onClickPreview: MouseEventHandler<HTMLButtonElement>;
     uiPlugins: EuiMarkdownEditorUiPlugin[];
   };
 
diff --git a/src/components/markdown_editor/markdown_types.ts b/src/components/markdown_editor/markdown_types.ts
index 8ad9762fb7d..93f6d9f34f0 100644
--- a/src/components/markdown_editor/markdown_types.ts
+++ b/src/components/markdown_editor/markdown_types.ts
@@ -19,10 +19,14 @@
 
 import { ComponentType, ReactNode } from 'react';
 import { VFile } from 'vfile';
+// eslint-disable-next-line import/no-unresolved
+import { Node as UnistNode, Position as UnistPosition } from 'unist';
+import { Parser } from 'remark-parse';
+import { VFileMessage } from 'vfile-message';
 import { IconType } from '../icon';
 
 export interface RemarkParser {
-  Parser: any;
+  Parser: typeof Parser;
   tokenizeInline: Function;
   file: VFile;
 }
@@ -38,12 +42,17 @@ export interface RemarkTokenizer {
 
   notInLink?: boolean;
 }
-export interface RemarkRehypeHandler {
-  (h: any, node: any): any;
+interface RehypeNode {}
+interface RemarkRehypeHandlerCallback {
+  (
+    node: UnistPosition,
+    tagName: string,
+    props: Object,
+    children: RehypeNode[]
+  ): RehypeNode;
 }
-export interface AstNodePosition {
-  start: { line: number; column: number; offset: number };
-  end: { line: number; column: number; offset: number };
+export interface RemarkRehypeHandler {
+  (h: RemarkRehypeHandlerCallback, node: UnistNode): RehypeNode;
 }
 
 export interface EuiMarkdownEditorUiPluginEditorProps {
@@ -90,3 +99,15 @@ export interface EuiMarkdownFormatting {
   orderedList?: boolean;
   trimFirst?: boolean;
 }
+
+export interface EuiMarkdownAstNode {
+  type: string;
+  children?: EuiMarkdownAstNode[];
+  position: EuiMarkdownAstNodePosition;
+}
+export interface EuiMarkdownAstNodePosition {
+  start: { line: number; column: number; offset: number };
+  end: { line: number; column: number; offset: number };
+}
+
+export type EuiMarkdownParseError = string | VFileMessage | Error;
diff --git a/src/components/markdown_editor/plugins/markdown_checkbox.tsx b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
index df592d4eb75..339fb702838 100644
--- a/src/components/markdown_editor/plugins/markdown_checkbox.tsx
+++ b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
@@ -18,17 +18,16 @@
  */
 
 import React, { FunctionComponent, useContext } from 'react';
-// @ts-ignore TODO
 import all from 'mdast-util-to-hast/lib/all';
 import { EuiCheckbox } from '../../form/checkbox';
 import { EuiMarkdownContext } from '../markdown_context';
 import { htmlIdGenerator } from '../../../services/accessibility';
 import {
-  AstNodePosition,
-  RemarkParser,
+  EuiMarkdownAstNodePosition,
   RemarkRehypeHandler,
   RemarkTokenizer,
 } from '../markdown_types';
+import { Plugin } from 'unified';
 
 interface CheckboxNodeDetails {
   type: 'checkboxPlugin';
@@ -37,7 +36,7 @@ interface CheckboxNodeDetails {
   isChecked: boolean;
 }
 
-function CheckboxParser(this: RemarkParser) {
+const CheckboxParser: Plugin = function CheckboxParser() {
   const Parser = this.Parser;
   const tokenizers = Parser.prototype.blockTokenizers;
   const methods = Parser.prototype.blockMethods;
@@ -80,13 +79,13 @@ function CheckboxParser(this: RemarkParser) {
 
   tokenizers.checkbox = tokenizeCheckbox;
   methods.splice(methods.indexOf('list'), 0, 'checkbox'); // Run it just before default `list` plugin to inject our own idea of checkboxes.
-}
+};
 
 const checkboxMarkdownHandler: RemarkRehypeHandler = (h, node) => {
-  return h(node.position, 'checkboxPlugin', node, all(h, node));
+  return h(node.position!, 'checkboxPlugin', node, all(h, node));
 };
 const CheckboxMarkdownRenderer: FunctionComponent<
-  CheckboxNodeDetails & { position: AstNodePosition }
+  CheckboxNodeDetails & { position: EuiMarkdownAstNodePosition }
 > = ({ position, lead, label, isChecked, children }) => {
   const { replaceNode } = useContext(EuiMarkdownContext);
   return (
diff --git a/src/components/markdown_editor/plugins/markdown_tooltip.tsx b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
index 7eceaaa40d2..9b215ebf861 100644
--- a/src/components/markdown_editor/plugins/markdown_tooltip.tsx
+++ b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
@@ -18,16 +18,15 @@
  */
 
 import React, { FunctionComponent } from 'react';
-// @ts-ignore TODO
 import all from 'mdast-util-to-hast/lib/all';
 import {
-  AstNodePosition,
-  RemarkParser,
+  EuiMarkdownAstNodePosition,
   RemarkRehypeHandler,
   RemarkTokenizer,
 } from '../markdown_types';
 import { EuiToolTip } from '../../tool_tip';
 import { EuiCodeBlock } from '../../code';
+import { Plugin } from 'unified';
 
 interface TooltipNodeDetails {
   type: 'tooltipPlugin';
@@ -52,7 +51,7 @@ const tooltipPlugin = {
   ),
 };
 
-function TooltipParser(this: RemarkParser) {
+const TooltipParser: Plugin = function TooltipParser() {
   const Parser = this.Parser;
   const tokenizers = Parser.prototype.inlineTokenizers;
   const methods = Parser.prototype.inlineMethods;
@@ -135,13 +134,13 @@ function TooltipParser(this: RemarkParser) {
 
   tokenizers.tooltip = tokenizeTooltip;
   methods.splice(methods.indexOf('text'), 0, 'tooltip');
-}
+};
 
 const tooltipMarkdownHandler: RemarkRehypeHandler = (h, node) => {
-  return h(node.position, 'tooltipPlugin', node, all(h, node));
+  return h(node.position!, 'tooltipPlugin', node, all(h, node));
 };
 const tooltipMarkdownRenderer: FunctionComponent<
-  TooltipNodeDetails & { position: AstNodePosition }
+  TooltipNodeDetails & { position: EuiMarkdownAstNodePosition }
 > = ({ content, children }) => {
   return (
     <EuiToolTip content={content}>
diff --git a/src/components/markdown_editor/unified-plugins.d.ts b/src/components/markdown_editor/unified-plugins.d.ts
new file mode 100644
index 00000000000..8f109edecbf
--- /dev/null
+++ b/src/components/markdown_editor/unified-plugins.d.ts
@@ -0,0 +1,49 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+/* eslint-disable import/no-duplicates */
+
+declare module 'remark-emoji' {
+  import { Plugin } from 'unified';
+  const RemarkEmoji: Plugin;
+  export = RemarkEmoji;
+}
+
+declare module 'remark-highlight.js' {
+  import { Plugin } from 'unified';
+  const RemarkHighlight: Plugin;
+  export = RemarkHighlight;
+}
+
+declare module 'mdast-util-to-hast/lib/all' {
+  // eslint-disable-next-line import/no-unresolved
+  import { Node as UnistNode, Position as UnistPosition } from 'unist';
+
+  interface RehypeNode {}
+  interface RemarkRehypeHandlerCallback {
+    (
+      node: UnistPosition,
+      tagName: string,
+      props: Object,
+      children: RehypeNode[]
+    ): RehypeNode;
+  }
+
+  const all: (h: RemarkRehypeHandlerCallback, node: UnistNode) => RehypeNode[];
+  export = all;
+}
diff --git a/yarn.lock b/yarn.lock
index eff09ee2e1b..7dbbde717ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1255,6 +1255,13 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.118.tgz#247bab39bfcc6d910d4927c6e06cbc70ec376f27"
   integrity sha512-iiJbKLZbhSa6FYRip/9ZDX6HXhayXLDGY2Fqws9cOkEQ6XeKfaxB0sC541mowZJueYyMnVUmmG+al5/4fCDrgw==
 
+"@types/mdast@^3.0.0":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"
+  integrity sha512-SXPBMnFVQg1s00dlMCc/jCdvPqdE4mXaMMCeRlxLDmTAEoegHT53xKtkDnzDTOcmMHUfcjyf36/YYZ6SxRdnsw==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -1339,7 +1346,7 @@
   resolved "https://registry.yarnpkg.com/@types/tabbable/-/tabbable-3.1.0.tgz#540d4c2729872560badcc220e73c9412c1d2bffe"
   integrity sha512-LL0q/bTlzseaXQ8j91eZ+Z8FQUzo0nwkng00B8365qULvFyiSOWylxV8m31Gmee3QuidkDqR72a9NRfR8s4qTw==
 
-"@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
+"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
@@ -10388,21 +10395,23 @@ mdast-util-compact@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
-mdast-util-definitions@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-2.0.1.tgz#2c931d8665a96670639f17f98e32c3afcfee25f3"
-  integrity sha512-Co+DQ6oZlUzvUR7JCpP249PcexxygiaKk9axJh+eRzHDZJk2julbIdKB4PXHVxdBuLzvJ1Izb+YDpj2deGMOuA==
+mdast-util-definitions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-3.0.1.tgz#06af6c49865fc63d6d7d30125569e2f7ae3d0a86"
+  integrity sha512-BAv2iUm/e6IK/b2/t+Fx69EL/AGcq/IG2S+HxHjDJGfLJtd6i9SZUS76aC9cig+IEucsqxKTR0ot3m933R3iuA==
   dependencies:
     unist-util-visit "^2.0.0"
 
-mdast-util-to-hast@^8.0.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-8.2.0.tgz#adf9f824defcd382e53dd7bace4282a45602ac67"
-  integrity sha512-WjH/KXtqU66XyTJQ7tg7sjvTw1OQcVV0hKdFh3BgHPwZ96fSBCQ/NitEHsN70Mmnggt+5eUUC7pCnK+2qGQnCA==
+mdast-util-to-hast@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-9.1.0.tgz#6ef121dd3cd3b006bf8650b1b9454da0faf79ffe"
+  integrity sha512-Akl2Vi9y9cSdr19/Dfu58PVwifPXuFt1IrHe7l+Crme1KvgUT+5z+cHLVcQVGCiNTZZcdqjnuv9vPkGsqWytWA==
   dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.3"
     collapse-white-space "^1.0.0"
     detab "^2.0.0"
-    mdast-util-definitions "^2.0.0"
+    mdast-util-definitions "^3.0.0"
     mdurl "^1.0.0"
     trim-lines "^1.0.0"
     unist-builder "^2.0.0"
@@ -14440,12 +14449,12 @@ remark-parse@^7.0.2:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-rehype@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-6.0.0.tgz#dcd340ebee412709a81b15a69f4ae474a38aa72a"
-  integrity sha512-dt7cHCD2NbbmXoSnnNolk+MnWzylsOIEU07pyhZSM71Xy08xX07+yuCh+4rddyrB/a1hebygeteVEJieyCeDzg==
+remark-rehype@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-7.0.0.tgz#8e106e49806c69b2e9523b76d24965119e2da67b"
+  integrity sha512-uqQ/VbaTdxyu/da6npHAso6hA00cMqhA3a59RziQdOLN2KEIkPykAVy52IcmZEVTuauXO0VtpxkyCey4phtHzQ==
   dependencies:
-    mdast-util-to-hast "^8.0.0"
+    mdast-util-to-hast "^9.1.0"
 
 remark-stringify@^4.0.0:
   version "4.0.0"

From 309bf7a03509e0cfdb2aff170fa8aee4048debf3 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 14 Jul 2020 12:51:23 +0100
Subject: [PATCH 33/43] Adding missing types and dependency

---
 package.json                                  | 10 +++++---
 .../markdown_editor/markdown_editor.tsx       |  1 -
 .../markdown_editor/markdown_types.ts         |  2 --
 yarn.lock                                     | 25 ++++++++++++-------
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 99511047fd6..28fc42bb346 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@types/react-input-autosize": "^2.0.2",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.1",
+    "@types/vfile-message": "^2.0.0",
     "chroma-js": "^2.0.4",
     "classnames": "^2.2.5",
     "highlight.js": "^9.12.0",
@@ -68,7 +69,10 @@
     "react-focus-lock": "^1.17.7",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
+    "react-view": "^2.3.2",
     "react-virtualized": "^9.21.2",
+    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-window": "^1.8.5",
     "rehype-raw": "^4.0.1",
     "rehype-react": "^6.0.0",
     "rehype-stringify": "^6.0.1",
@@ -76,14 +80,12 @@
     "remark-highlight.js": "^5.2.0",
     "remark-parse": "^7.0.2",
     "remark-rehype": "^7.0.0",
-    "react-view": "^2.3.2",
-    "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.5",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
     "text-diff": "^1.0.1",
     "unified": "^8.4.2",
-    "uuid": "^3.1.0"
+    "uuid": "^3.1.0",
+    "vfile": "^4.1.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 146533735fd..d63ae78229c 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -31,7 +31,6 @@ import React, {
 } from 'react';
 // @ts-ignore missing declaration file
 import unified, { PluggableList, Processor } from 'unified';
-// @ts-ignore missing declaration file
 import { VFileMessage } from 'vfile-message';
 import classNames from 'classnames';
 import emoji from 'remark-emoji';
diff --git a/src/components/markdown_editor/markdown_types.ts b/src/components/markdown_editor/markdown_types.ts
index 92bf680f9f3..93f6d9f34f0 100644
--- a/src/components/markdown_editor/markdown_types.ts
+++ b/src/components/markdown_editor/markdown_types.ts
@@ -18,12 +18,10 @@
  */
 
 import { ComponentType, ReactNode } from 'react';
-// @ts-ignore missing declaration file
 import { VFile } from 'vfile';
 // eslint-disable-next-line import/no-unresolved
 import { Node as UnistNode, Position as UnistPosition } from 'unist';
 import { Parser } from 'remark-parse';
-// @ts-ignore missing declaration file
 import { VFileMessage } from 'vfile-message';
 import { IconType } from '../icon';
 
diff --git a/yarn.lock b/yarn.lock
index dac71a733a8..95d620257e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1735,6 +1735,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/vfile-message@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/vfile-message/-/vfile-message-2.0.0.tgz#690e46af0fdfc1f9faae00cd049cc888957927d5"
+  integrity sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw==
+  dependencies:
+    vfile-message "*"
+
 "@typescript-eslint/eslint-plugin@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.2.0.tgz#7fb997f391af32ae6ca1dbe56bcefe4dd30bda14"
@@ -18044,14 +18051,7 @@ vfile-location@^2.0.0:
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
   integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
 
-vfile-message@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
-  integrity sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==
-  dependencies:
-    unist-util-stringify-position "^1.1.1"
-
-vfile-message@^2.0.0:
+vfile-message@*, vfile-message@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
   integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==
@@ -18059,6 +18059,13 @@ vfile-message@^2.0.0:
     "@types/unist" "^2.0.0"
     unist-util-stringify-position "^2.0.0"
 
+vfile-message@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
+  integrity sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==
+  dependencies:
+    unist-util-stringify-position "^1.1.1"
+
 vfile@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a"
@@ -18069,7 +18076,7 @@ vfile@^2.0.0:
     unist-util-stringify-position "^1.0.0"
     vfile-message "^1.0.0"
 
-vfile@^4.0.0:
+vfile@^4.0.0, vfile@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.1.1.tgz#282d28cebb609183ac51703001bc18b3e3f17de9"
   integrity sha512-lRjkpyDGjVlBA7cDQhQ+gNcvB1BGaTHYuSOcY3S7OhDmBtnzX95FhtZZDecSTDm6aajFymyve6S5DN4ZHGezdQ==

From 942595cfc84b242e4e370e921a4cd387ad6680d2 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@gmail.com>
Date: Tue, 28 Jul 2020 09:53:01 +0100
Subject: [PATCH 34/43] Fixing firefox text area margin (#3802)

---
 src/components/markdown_editor/_markdown_editor_text_area.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index 46369729712..b71c98d3046 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -13,6 +13,8 @@
   background-color: $euiFormBackgroundColor;
   background-repeat: no-repeat;
   background-size: 0% 100%;
+  // Removes default firefox margin
+  margin: 0;
 
   // sass-lint:disable-block indentation
   transition:

From a520c6841bd41e39a105dc714d29e0cff477834f Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 28 Jul 2020 11:41:31 -0700
Subject: [PATCH 35/43] Markdown Format / Editor documentation + features
 (#3696)

Separates `EuiMarkdownFormat` into its own component. Adds documentation.
---
 src-docs/src/routes.js                        |  17 +-
 .../markdown_editor/mardown_editor_example.js |  68 +++-
 .../markdown_editor/mardown_format_example.js |  94 +++++
 .../views/markdown_editor/markdown_editor.js  |  23 +-
 .../markdown_editor/markdown_editor_errors.js |  63 +++
 ...art.js => markdown_editor_with_plugins.js} | 100 ++++-
 .../views/markdown_editor/markdown_format.js  |  30 ++
 ...own-example.md => markdown_format_sink.js} |  25 +-
 .../markdown_plugin_example.js                | 379 ++++++++++++++++++
 src/components/index.js                       |   5 +-
 src/components/markdown_editor/_index.scss    |   3 +-
 .../markdown_editor/_markdown_format.scss     |  48 +--
 src/components/markdown_editor/index.ts       |  10 +-
 .../markdown_editor/markdown_editor.tsx       |  68 +---
 .../markdown_editor/markdown_format.tsx       |  23 +-
 .../plugins/markdown_checkbox.tsx             |   4 +-
 .../plugins/markdown_default_plugins.tsx      |  69 ++++
 .../plugins/markdown_tooltip.scss             |   4 +
 .../plugins/markdown_tooltip.tsx              |  15 +-
 19 files changed, 901 insertions(+), 147 deletions(-)
 create mode 100644 src-docs/src/views/markdown_editor/mardown_format_example.js
 create mode 100644 src-docs/src/views/markdown_editor/markdown_editor_errors.js
 rename src-docs/src/views/markdown_editor/{plugins/markdown_chart.js => markdown_editor_with_plugins.js} (67%)
 create mode 100644 src-docs/src/views/markdown_editor/markdown_format.js
 rename src-docs/src/views/markdown_editor/{markdown-example.md => markdown_format_sink.js} (88%)
 create mode 100644 src-docs/src/views/markdown_editor/markdown_plugin_example.js
 create mode 100644 src/components/markdown_editor/plugins/markdown_default_plugins.tsx
 create mode 100644 src/components/markdown_editor/plugins/markdown_tooltip.scss

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 0f4bacd78dd..cd0f513f65d 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -135,6 +135,10 @@ import { LoadingExample } from './views/loading/loading_example';
 
 import { MarkdownEditorExample } from './views/markdown_editor/mardown_editor_example';
 
+import { MarkdownFormatExample } from './views/markdown_editor/mardown_format_example';
+
+import { MarkdownPluginExample } from './views/markdown_editor/markdown_plugin_example';
+
 import { ModalExample } from './views/modal/modal_example';
 
 import { MutationObserverExample } from './views/mutation_observer/mutation_observer_example';
@@ -366,7 +370,6 @@ const navigation = [
       BadgeExample,
       CallOutExample,
       CardExample,
-      CodeExample,
       CommentListExample,
       DescriptionListExample,
       DragAndDropExample,
@@ -396,11 +399,9 @@ const navigation = [
       SuperSelectExample,
       ComboBoxExample,
       ColorPickerExample,
-      CodeEditorExample,
       DatePickerExample,
       ExpressionExample,
       FilterGroupExample,
-      MarkdownEditorExample,
       RangeControlExample,
       SearchBarExample,
       SelectableExample,
@@ -408,6 +409,16 @@ const navigation = [
       SuperDatePickerExample,
     ].map(example => createExample(example)),
   },
+  {
+    name: 'Editors & syntax',
+    items: [
+      MarkdownFormatExample,
+      MarkdownEditorExample,
+      MarkdownPluginExample,
+      CodeEditorExample,
+      CodeExample,
+    ].map(example => createExample(example)),
+  },
   {
     name: 'Elastic Charts',
     items: [
diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
index c6744de6bb0..02656a92af1 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -1,17 +1,47 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiMarkdownEditor } from '../../../../src/components';
+import {
+  EuiMarkdownEditor,
+  EuiText,
+  EuiSpacer,
+  EuiCode,
+} from '../../../../src/components';
+
+import { Link } from 'react-router-dom';
 
 import MarkdownEditor from './markdown_editor';
 const markdownEditorSource = require('!!raw-loader!./markdown_editor');
 const markdownEditorHtml = renderToHtml(MarkdownEditor);
 
+import MarkdownEditorErrors from './markdown_editor_errors';
+const markdownEditorErrorsSource = require('!!raw-loader!./markdown_editor_errors');
+const markdownEditorErrorsHtml = renderToHtml(MarkdownEditorErrors);
+
 export const MarkdownEditorExample = {
-  title: 'Markdown Editor',
+  title: 'Markdown editor',
+  intro: (
+    <Fragment>
+      <EuiText>
+        <p>
+          <strong>EuiMarkdownEditor</strong> provides a markdown authoring
+          experience for the user. The component consists of a toolbar, text
+          area, and a drag-and-drop zone to accept files (if configured to do
+          so). There are two modes: a textarea that keeps track of cursor
+          position, and a rendered preview mode that is powered by{' '}
+          <strong>
+            <Link to="/editors-syntax/markdown-format/">EuiMarkdownFormat</Link>
+          </strong>
+          . State is maintained between the two and it is possible to pass
+          changes from the preview area to the textarea and vice versa.
+        </p>
+      </EuiText>
+      <EuiSpacer size="xxl" />
+    </Fragment>
+  ),
   sections: [
     {
       source: [
@@ -24,10 +54,11 @@ export const MarkdownEditorExample = {
           code: markdownEditorHtml,
         },
       ],
+      title: 'Base editor',
       text: (
         <p>
-          This component renders a markdown editor, including buttons for
-          quickly inserting common markdown elements and a preview mode.
+          The base editor can render basic markdown along with some built-in
+          plugins.
         </p>
       ),
       props: {
@@ -35,5 +66,32 @@ export const MarkdownEditorExample = {
       },
       demo: <MarkdownEditor />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownEditorErrorsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownEditorErrorsHtml,
+        },
+      ],
+      title: 'Error handling and feedback',
+      text: (
+        <p>
+          The <EuiCode>errors</EuiCode> prop allows you to pass an array of
+          errors if syntax is malformed. The below example starts with an
+          incomplete tooltip tag, showing this error message by default. These
+          errors are meant to be ephemeral and part of the editing experience.
+          They should not be a substitute for{' '}
+          <Link to="/forms/form-validation">form validation</Link>.
+        </p>
+      ),
+      props: {
+        EuiMarkdownEditor,
+      },
+      demo: <MarkdownEditorErrors />,
+    },
   ],
 };
diff --git a/src-docs/src/views/markdown_editor/mardown_format_example.js b/src-docs/src/views/markdown_editor/mardown_format_example.js
new file mode 100644
index 00000000000..352d45e844b
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/mardown_format_example.js
@@ -0,0 +1,94 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import {
+  EuiMarkdownFormat,
+  EuiText,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import { Link } from 'react-router-dom';
+
+import MarkdownFormat from './markdown_format';
+const markdownFormatSource = require('!!raw-loader!./markdown_format');
+const markdownFormatHtml = renderToHtml(MarkdownFormat);
+
+import MarkdownFormatSink from './markdown_format_sink';
+const markdownFormatSinkSource = require('!!raw-loader!./markdown_format_sink');
+const markdownFormatSinkHtml = renderToHtml(MarkdownFormatSink);
+
+export const MarkdownFormatExample = {
+  title: 'Markdown format',
+  intro: (
+    <Fragment>
+      <EuiText>
+        <p>
+          <strong>EuiMarkdownFormat</strong> is a read-only way to render
+          markdown-style content in a page. It is a peer component to{' '}
+          <strong>
+            <Link to="/editors-syntax/markdown-editor/">EuiMarkdownEditor</Link>
+          </strong>{' '}
+          and has the ability to be modified by additional{' '}
+          <Link to="/editors-syntax/markdown-plugins">markdown plugins</Link>.
+        </p>
+      </EuiText>
+      <EuiSpacer size="xxl" />
+    </Fragment>
+  ),
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownFormatSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownFormatHtml,
+        },
+      ],
+      title: 'Built in plugins',
+      text: (
+        <p>
+          <strong>EuiMarkdownFormat</strong> is a wrapper that will render
+          Markdown provided. EuiMarkdownFormat uses{' '}
+          <Link to="https://github.com/remarkjs/remark)">Remark</Link> by
+          default. The translation layer automatically substitutes raw HTML
+          output with their EUI equivilant. This means anchor and code blocks
+          will become <strong>EuiLink</strong> and <strong>EuiCodeBlock</strong>{' '}
+          components respectively.
+        </p>
+      ),
+      props: {
+        EuiMarkdownFormat,
+      },
+      demo: <MarkdownFormat />,
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownFormatSinkSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownFormatSinkHtml,
+        },
+      ],
+      title: 'Kitchen sink',
+      text: (
+        <p>
+          This example shows of all the styling and markup possibilities. It is
+          mostly used for testing.
+        </p>
+      ),
+      props: {
+        EuiMarkdownFormat,
+      },
+      demo: <MarkdownFormatSink />,
+    },
+  ],
+};
diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 2dd2ce8ffc7..c2398c2328f 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -1,25 +1,25 @@
 import React, { useCallback, useState } from 'react';
 
 import {
-  defaultParsingPlugins,
-  defaultProcessingPlugins,
   EuiMarkdownEditor,
   EuiSpacer,
   EuiCodeBlock,
   EuiButtonToggle,
-} from '../../../../src';
-import * as MarkdownChart from './plugins/markdown_chart';
+} from '../../../../src/components';
 
-const markdownExample = require('!!raw-loader!./markdown-example.md');
+const initialContent = `## Hello world!
 
-const exampleParsingList = [...defaultParsingPlugins, MarkdownChart.parser];
+Basic "github flavored" markdown will work as you'd expect.
 
-const exampleProcessingList = [...defaultProcessingPlugins]; // pretend mutation doesn't happen immediately next 😅
-exampleProcessingList[0][1].handlers.chartDemoPlugin = MarkdownChart.handler;
-exampleProcessingList[1][1].components.chartDemoPlugin = MarkdownChart.renderer;
+The editor also ships with some built in plugins. For example it can handle checkboxes. Notice how they toggle state even in the preview mode.
+
+- [ ] Checkboxes
+- [x] Can be filled
+- [ ] Or empty
+`;
 
 export default () => {
-  const [value, setValue] = useState(markdownExample);
+  const [value, setValue] = useState(initialContent);
   const [messages, setMessages] = useState([]);
   const [ast, setAst] = useState(null);
   const [isAstShowing, setIsAstShowing] = useState(false);
@@ -34,9 +34,6 @@ export default () => {
         value={value}
         onChange={setValue}
         height={400}
-        uiPlugins={[MarkdownChart.plugin]}
-        parsingPluginList={exampleParsingList}
-        processingPluginList={exampleProcessingList}
         onParse={onParse}
         errors={messages}
       />
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_errors.js b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
new file mode 100644
index 00000000000..ef6c3546739
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
@@ -0,0 +1,63 @@
+import React, { useCallback, useState } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import {
+  EuiMarkdownEditor,
+  EuiSpacer,
+  EuiCodeBlock,
+  EuiButtonToggle,
+  EuiFormErrorText,
+} from '../../../../src/components';
+
+const initialContent = `## Errors
+
+The tooltip is empty and will error
+
+!{tooltip[]()}
+`;
+
+export default () => {
+  const [value, setValue] = useState(initialContent);
+  const [messages, setMessages] = useState([]);
+  const [ast, setAst] = useState(null);
+  const [isAstShowing, setIsAstShowing] = useState(false);
+  const onParse = useCallback((err, { messages, ast }) => {
+    setMessages(err ? [err] : messages);
+    setAst(JSON.stringify(ast, null, 2));
+  }, []);
+  return (
+    <>
+      <EuiMarkdownEditor
+        aria-label="EUI markdown editor demo"
+        value={value}
+        onChange={setValue}
+        height={400}
+        onParse={onParse}
+        errors={messages}
+      />
+      <EuiSpacer size="s" />
+
+      <EuiFormErrorText id="error" className="euiFormRow__text">
+        Utilize error text or{' '}
+        <strong>
+          <Link to="/forms/form-validation">EuiFormRow</Link>
+        </strong>{' '}
+        for more permanent error feedback
+      </EuiFormErrorText>
+
+      <div className="eui-textRight">
+        <EuiButtonToggle
+          label={isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
+          size="s"
+          isEmpty
+          iconType={isAstShowing ? 'eyeClosed' : 'eye'}
+          onChange={() => setIsAstShowing(!isAstShowing)}
+          isSelected={isAstShowing}
+        />
+      </div>
+
+      {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
+    </>
+  );
+};
diff --git a/src-docs/src/views/markdown_editor/plugins/markdown_chart.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
similarity index 67%
rename from src-docs/src/views/markdown_editor/plugins/markdown_chart.js
rename to src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index 081555924b7..7d86dfc9c64 100644
--- a/src-docs/src/views/markdown_editor/plugins/markdown_chart.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
+
 import {
   Chart,
   Settings,
@@ -6,8 +7,17 @@ import {
   BarSeries,
   DataGenerator,
 } from '@elastic/charts';
-import { EUI_CHARTS_THEME_LIGHT } from '../../../../../src/themes/charts/themes';
+
+import { EUI_CHARTS_THEME_LIGHT } from '../../../../src/themes/charts/themes';
+
 import {
+  EuiMarkdownDefaultParsingPlugins,
+  EuiMarkdownDefaultProcessingPlugins,
+  EuiMarkdownEditor,
+  EuiMarkdownFormat,
+  EuiSpacer,
+  EuiCodeBlock,
+  EuiButtonToggle,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiModalBody,
@@ -18,10 +28,9 @@ import {
   EuiFormRow,
   EuiSelect,
   EuiRange,
-  EuiCodeBlock,
   EuiText,
-  EuiSpacer,
-} from '../../../../../src/components';
+} from '../../../../src/components';
+
 import {
   euiPaletteColorBlind,
   euiPaletteComplimentary,
@@ -32,7 +41,7 @@ import {
   euiPaletteNegative,
   euiPalettePositive,
   euiPaletteWarm,
-} from '../../../../../src/services/color';
+} from '../../../../src/services/color';
 
 const paletteData = {
   euiPaletteColorBlind,
@@ -45,6 +54,7 @@ const paletteData = {
   euiPaletteWarm,
   euiPaletteGray,
 };
+
 const paletteNames = Object.keys(paletteData);
 
 const dg = new DataGenerator();
@@ -112,7 +122,16 @@ const chartDemoPlugin = {
                 />
               </EuiFormRow>
             </EuiForm>
-            <ChartMarkdownRenderer palette={palette} height={height} />
+            <div
+              style={{
+                width: 600,
+                maxWidth: '100%',
+                height: 500,
+                alignItems: 'center',
+                display: 'flex',
+              }}>
+              <ChartMarkdownRenderer palette={palette} height={height} />
+            </div>
           </>
         </EuiModalBody>
 
@@ -132,7 +151,7 @@ const chartDemoPlugin = {
   },
 };
 
-function ChartParser() {
+function ChartMarkdownParser() {
   const Parser = this.Parser;
   const tokenizers = Parser.prototype.blockTokenizers;
   const methods = Parser.prototype.blockMethods;
@@ -229,9 +248,64 @@ const ChartMarkdownRenderer = ({ height = 200, palette = 5 }) => {
   );
 };
 
-export {
-  chartDemoPlugin as plugin,
-  ChartParser as parser,
-  chartMarkdownHandler as handler,
-  ChartMarkdownRenderer as renderer,
+const exampleParsingList = [
+  ...EuiMarkdownDefaultParsingPlugins,
+  ChartMarkdownParser,
+];
+
+const exampleProcessingList = [...EuiMarkdownDefaultProcessingPlugins]; // pretend mutation doesn't happen immediately next 😅
+exampleProcessingList[0][1].handlers.chartDemoPlugin = chartMarkdownHandler;
+exampleProcessingList[1][1].components.chartDemoPlugin = ChartMarkdownRenderer;
+
+const initialExample = `## Chart plugin
+
+Notice the toolbar above has a new chart button. Click it to add a chart.
+
+Once you finish it'll add some syntax that looks like the below.
+
+!{chart{"palette":4,"height":300}}
+`;
+
+export default () => {
+  const [value, setValue] = useState(initialExample);
+  const [messages, setMessages] = useState([]);
+  const [ast, setAst] = useState(null);
+  const [isAstShowing, setIsAstShowing] = useState(false);
+  const onParse = useCallback((err, { messages, ast }) => {
+    setMessages(err ? [err] : messages);
+    setAst(JSON.stringify(ast, null, 2));
+  }, []);
+  return (
+    <>
+      <EuiMarkdownEditor
+        aria-label="EUI markdown editor with plugins demo"
+        value={value}
+        onChange={setValue}
+        height={400}
+        uiPlugins={[chartDemoPlugin]}
+        parsingPluginList={exampleParsingList}
+        processingPluginList={exampleProcessingList}
+        onParse={onParse}
+        errors={messages}
+      />
+      <EuiSpacer size="s" />
+      <div className="eui-textRight">
+        <EuiButtonToggle
+          label={isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
+          size="s"
+          isEmpty
+          iconType={isAstShowing ? 'eyeClosed' : 'eye'}
+          onChange={() => setIsAstShowing(!isAstShowing)}
+          isSelected={isAstShowing}
+        />
+      </div>
+      {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
+
+      <EuiMarkdownFormat
+        parsingPluginList={exampleParsingList}
+        processingPluginList={exampleProcessingList}>
+        {value}
+      </EuiMarkdownFormat>
+    </>
+  );
 };
diff --git a/src-docs/src/views/markdown_editor/markdown_format.js b/src-docs/src/views/markdown_editor/markdown_format.js
new file mode 100644
index 00000000000..a5b58e00a42
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown_format.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { EuiMarkdownFormat } from '../../../../src';
+
+const markdownContent = `Beyond Remark's base syntax, **EuiMarkdownFormat** bundles these abilities by default:
+
+\`:smile:\` we support emojis :smile:!
+
+\`!{tooltip[anchor text](Tooltip content)}\` syntax can render !{tooltip[tooltips like this](I am Jack's helpful tooltip content)}
+
+We also support checkboxes so that
+
+\`\`\`
+- [ ] Checkboxes
+- [x] Can be filled
+- [ ] Or empty
+\`\`\`
+
+turns into
+
+- [ ] Checkboxes
+- [x] Can be filled
+- [ ] Or empty
+
+Note that you'll need to use *EuiMarkdownEditor* to make those checkboxes dynamic.
+`;
+
+export default () => {
+  return <EuiMarkdownFormat>{markdownContent}</EuiMarkdownFormat>;
+};
diff --git a/src-docs/src/views/markdown_editor/markdown-example.md b/src-docs/src/views/markdown_editor/markdown_format_sink.js
similarity index 88%
rename from src-docs/src/views/markdown_editor/markdown-example.md
rename to src-docs/src/views/markdown_editor/markdown_format_sink.js
index 56f9fbdd166..9cb5d06af7f 100644
--- a/src-docs/src/views/markdown_editor/markdown-example.md
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -1,4 +1,8 @@
-# h1 Heading
+import React from 'react';
+
+import { EuiMarkdownFormat } from '../../../../src';
+
+const markdownContent = `# h1 Heading
 ## h2 Heading
 ### h3 Heading
 #### h4 Heading
@@ -69,27 +73,27 @@ Ordered
 
 ## Code
 
-Inline `<Code />` is awesome!
+Inline \`<Code />\` is awesome!
 
 Block code "fences"
 
-```
+\`\`\`
 Sample text here...
-```
+\`\`\`
 
 Syntax highlighting JS
 
-``` js
+\`\`\` js
 var foo = function (bar) {
   return bar++;
 };
 
 console.log(foo(5));
-```
+\`\`\`
 
 Syntax highlighting Java
 
-``` java
+\`\`\` java
 package l2f.gameserver.model;
 
 public abstract class L2Char extends L2Object {
@@ -103,7 +107,7 @@ public abstract class L2Char extends L2Object {
     }
   }
 }
-```
+\`\`\`
 
 ## Tables
 
@@ -139,3 +143,8 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 ### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
 
 > Classic markup: :wink: :cry: :laughing: :yum:
+`;
+
+export default () => {
+  return <EuiMarkdownFormat>{markdownContent}</EuiMarkdownFormat>;
+};
diff --git a/src-docs/src/views/markdown_editor/markdown_plugin_example.js b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
new file mode 100644
index 00000000000..627c34d78a3
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -0,0 +1,379 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import {
+  EuiMarkdownEditor,
+  EuiText,
+  EuiTitle,
+  EuiSpacer,
+  EuiDescriptionList,
+  EuiHorizontalRule,
+  EuiCodeBlock,
+  EuiCode,
+  EuiLink,
+} from '../../../../src/components';
+
+import { Link } from 'react-router-dom';
+
+import MarkdownEditorWithPlugins from './markdown_editor_with_plugins';
+const markdownEditorWithPluginsSource = require('!!raw-loader!./markdown_editor_with_plugins');
+const markdownEditorWithPluginsHtml = renderToHtml(MarkdownEditorWithPlugins);
+
+const pluginSnippet = `<EuiMarkdownEditor
+  uiPlugin={myPluginUI}
+  parsingPluginList={myPluginParsingList}
+  processingPluginList={myPluginProcessingList}
+  {..otherProps}
+/>
+
+<!-- Note that the format component does not need a UI prop. -->
+<EuiMarkdownFormat
+  parsingPluginList={myPluginParsingList}
+  processingPluginList={myPluginProcessingList}
+/>
+`;
+
+const uiPluginSnippet = `const myPluginUI = {
+  name: 'myPlugin',
+  button: {
+    label: 'Chart',
+    iconType: 'visArea',
+  },
+  helpText: (<div>A node that explains how the syntax works</div>),
+  editor: function editor({ node, onSave, onCancel }) { return ('something'); },
+}; `;
+
+const pluginConcepts = [
+  {
+    title: 'uiPlugin',
+    description: (
+      <span>
+        Provides the <strong>UI</strong> for the button in the toolbar as well
+        as any modals or extra UI that provides content to the editor.
+      </span>
+    ),
+  },
+  {
+    title: 'parsingPluginList',
+    description: (
+      <span>
+        Provides the logic to identify the new syntax and parse it into an{' '}
+        <strong>AST node</strong>.
+      </span>
+    ),
+  },
+  {
+    title: 'processingPluginList',
+    description: (
+      <span>
+        Provides the logic to process the new <strong>AST node</strong> into a{' '}
+        <strong>React node</strong>.
+      </span>
+    ),
+  },
+];
+
+const uiPluginConcepts = [
+  {
+    title: 'name',
+    description: (
+      <span>
+        The name of your plugin. Use the <strong>button.label</strong> listed
+        below if you need a more friendly display name. The button can be
+        ommitted if you wish the user to only utilize syntax to author the
+        content.
+      </span>
+    ),
+  },
+  {
+    title: 'button',
+    description: (
+      <span>
+        Takes a <strong>label</strong> and an <strong>icon type</strong>. This
+        forms the button that appear in the toolbar. Clicking the button will
+        trigger either the <strong>editor</strong> or <strong>formatter</strong>
+        .
+      </span>
+    ),
+  },
+  {
+    title: 'editor',
+    description: (
+      <span>
+        Provides UI controls (like an interactive modal) for how to build the
+        inital content. <strong>Must exist if formatting does not</strong>.
+      </span>
+    ),
+  },
+  {
+    title: 'formatter',
+    description: (
+      <span>
+        If no <strong>editor</strong> is provided, this is an object defining
+        how the plugins markdown tag is styled.
+      </span>
+    ),
+  },
+  {
+    title: 'helpText',
+    description: (
+      <span>
+        Contains a React node. Should contain some information and an example
+        for how to utlize the syntax. Appears when the markdown icon is clicked
+        on the bottom of the editor.
+      </span>
+    ),
+  },
+];
+
+export const MarkdownPluginExample = {
+  title: 'Markdown plugins',
+  intro: (
+    <Fragment>
+      <EuiText>
+        <p>
+          Both{' '}
+          <strong>
+            <Link to="/editors-syntax/markdown-editor/">EuiMarkdownEditor</Link>
+          </strong>{' '}
+          and{' '}
+          <strong>
+            <Link to="/editors-syntax/markdown-format/">EuiMarkdownFormat</Link>
+          </strong>{' '}
+          utilize the same underlying plugin architecture to transform string
+          based syntax into React components. At a high level{' '}
+          <EuiLink href="https://www.npmjs.com/package/unified" target="_blank">
+            Unified JS
+          </EuiLink>{' '}
+          is used in combination with{' '}
+          <EuiLink
+            href="https://www.npmjs.com/package/remark-parse"
+            target="_blank">
+            Remark
+          </EuiLink>{' '}
+          to provide EUI&apos;s markdown components, which are separated into a{' '}
+          <strong>parsing</strong> and <strong>processing</strong> layer. These
+          two concepts are kept distinct in EUI components to provide concrete
+          locations for your plugins to be injected, be it editing or rendering.
+          Finally you provide <strong>UI</strong> to the component to handle
+          interactions with the editor.
+        </p>
+        <p>
+          In addition to running the full pipeline,{' '}
+          <strong>EuiMarkdownEditor</strong> uses just the parsing configuration
+          to determine the input&apos;s validity, provide messages back to the
+          application, and allow the toolbar buttons to interact with existing
+          markdown tags.
+        </p>
+      </EuiText>
+      <EuiHorizontalRule />
+      <EuiTitle>
+        <h2>Plugin development</h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiText>
+        <p>
+          An <strong>EuiMarkdown plugin</strong> is comprised of three major
+          pieces, which are passed searpately as props.
+        </p>
+      </EuiText>
+      <EuiSpacer />
+      <EuiCodeBlock size="s" language="html">
+        {pluginSnippet}
+      </EuiCodeBlock>
+      <EuiSpacer />
+      <EuiDescriptionList
+        compressed
+        listItems={pluginConcepts}
+        type="responsiveColumn"
+        titleProps={{ style: { width: '20%' } }}
+        descriptionProps={{ style: { width: '80%' } }}
+      />
+      <EuiSpacer />
+      <EuiHorizontalRule />
+      <EuiTitle>
+        <h3>uiPlugin</h3>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiCodeBlock size="s" language="javascript">
+        {uiPluginSnippet}
+      </EuiCodeBlock>
+      <EuiSpacer />
+      <EuiDescriptionList
+        compressed
+        listItems={uiPluginConcepts}
+        type="responsiveColumn"
+        titleProps={{ style: { width: '20%' } }}
+        descriptionProps={{ style: { width: '80%' } }}
+      />
+      <EuiSpacer />
+      <EuiHorizontalRule />
+      <EuiTitle>
+        <h3>parsingPluginList</h3>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiText>
+        <Fragment>
+          <p>
+            <a
+              href="https://www.npmjs.com/package/remark-parse"
+              target="_blank">
+              Remark-parse
+            </a>{' '}
+            is used to parse the input text into markdown AST nodes. Its
+            documentation for{' '}
+            <a
+              href="https://www.npmjs.com/package/remark-parse#extending-the-parser"
+              target="_blank">
+              writing parsers
+            </a>{' '}
+            is under the Extending the Parser section, but highlights are
+            included below.
+          </p>
+
+          <p>
+            A parser is comprised of three pieces. There is a wrapping function
+            which is provided to remark-parse and injects the parser, the parser
+            method itself, and a locator function if the markdown tag is inline.
+          </p>
+
+          <p>
+            The parsing method is called at locations where its markdown down
+            might be found at. The method is responsible for determining if the
+            location is a valid tag, process the tag, and mark report the
+            result.
+          </p>
+
+          <h4>Inline vs block</h4>
+          <p>
+            Inline tags are allowed at any point in text, and will be rendered
+            somewhere within a <EuiCode>{'<p>'}</EuiCode> element. For better
+            performance, inline parsers must provide a locate method which
+            reports the location where their next tag might be found. They are
+            not allowed to span multiple lines of the input.
+          </p>
+
+          <p>
+            Block tags are rendered inside <EuiCode>{'<span>'}</EuiCode>{' '}
+            elements, and do not have a locate method. They can consume as much
+            input text as desired, across multiple lines.
+          </p>
+        </Fragment>
+      </EuiText>
+      <EuiSpacer />
+
+      <EuiCodeBlock size="s" language="javascript">{`// example plugin parser
+function EmojiMarkdownParser() {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.inlineTokenizers;
+  const methods = Parser.prototype.inlineMethods;
+
+  const emojiMap = {
+    wave: '👋',
+    smile: '😀',
+    plane: '🛩',
+  };
+  const emojiNames = Object.keys(emojiMap);
+
+  // function to parse a matching string
+  function tokenizeEmoji(eat, value, silent) {
+    const tokenMatch = value.match(/^:(.*?):/);
+
+    if (!tokenMatch) return false; // no match
+    const [, emojiName] = tokenMatch;
+
+    // ensure we know this one
+    if (emojiNames.indexOf(emojiName) === -1) return false;
+
+    if (silent) {
+      return true;
+    }
+
+    // must consume the exact & entire match string
+    return eat(\`:\${emojiName}:\`)({
+      type: 'emojiPlugin',
+      emoji: emojiMap[emojiName], // configuration is passed to the renderer
+    });
+  }
+
+  // function to detect where the next emoji match might be found
+  tokenizeEmoji.locator = (value, fromIndex) => {
+    return value.indexOf(':', fromIndex);
+  };
+
+  // define the emoji plugin and inject it just before the existing text plugin
+  tokenizers.emoji = tokenizeEmoji;
+  methods.splice(methods.indexOf('text'), 0, 'emoji');
+}`}</EuiCodeBlock>
+      <EuiSpacer />
+      <EuiHorizontalRule />
+      <EuiTitle>
+        <h3>processingPluginList</h3>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiText>
+        <p>
+          After parsing the input into an AST, the nodes need to be transformed
+          into React elements. This is performed by a list of processors, the
+          default set converts remark AST into rehype and then into React.
+          Plugins need to define themselves within this transformation process,
+          identifying with the same type its parser uses in its{' '}
+          <EuiCode>eat</EuiCode> call.
+        </p>
+      </EuiText>
+      <EuiSpacer />
+      <EuiCodeBlock size="s" language="javascript">{`// example plugin processor
+
+// convert remark nodes to rehype, basically a pass through 
+const emojiMarkdownHandler = (h, node) => {
+  return h(node.position, 'emojiPlugin', node, []);
+};
+// receives the configuration from the parser and renders
+const EmojiMarkdownRenderer = ({ emoji }) => {
+  return <span>{emoji}</span>;
+};
+
+// add the handler & renderer for \`emojiPlugin\`
+processingList[0][1].handlers.emojiPlugin = emojiMarkdownHandler;
+processingList[1][1].components.emojiPlugin = EmojiMarkdownRenderer;`}</EuiCodeBlock>
+      <EuiSpacer size="xxl" />
+    </Fragment>
+  ),
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownEditorWithPluginsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownEditorWithPluginsHtml,
+        },
+      ],
+      title: 'Putting it all together: a simple chart plugin',
+      text: (
+        <Fragment>
+          <p>
+            The below example takes the concepts from above to construct a
+            simple chart embed that is initiated from a new button in the editor
+            toolbar.
+          </p>
+          <p>
+            Note that the <strong>EuiMarkdownEditor</strong> and{' '}
+            <strong>EuiMarkdownFormat</strong> examples utilize the same prop
+            list. The editor manages additional controls through the{' '}
+            <EuiCode>uiPlugins</EuiCode> prop.
+          </p>
+        </Fragment>
+      ),
+      props: {
+        EuiMarkdownEditor,
+      },
+      demo: <MarkdownEditorWithPlugins />,
+    },
+  ],
+};
diff --git a/src/components/index.js b/src/components/index.js
index 4add95e006d..34556c5f1c9 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -217,8 +217,9 @@ export {
 export {
   EuiMarkdownEditor,
   EuiMarkdownContext,
-  defaultProcessingPlugins,
-  defaultParsingPlugins,
+  EuiMarkdownFormat,
+  EuiMarkdownDefaultParsingPlugins,
+  EuiMarkdownDefaultProcessingPlugins,
 } from './markdown_editor';
 export { EuiMark } from './mark';
 
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
index 194529e7f04..dd5dfac5390 100644
--- a/src/components/markdown_editor/_index.scss
+++ b/src/components/markdown_editor/_index.scss
@@ -4,4 +4,5 @@
 @import 'markdown_editor_footer';
 @import 'markdown_editor_preview';
 @import 'markdown_editor_text_area';
-@import 'markdown_editor_toolbar';
\ No newline at end of file
+@import 'markdown_editor_toolbar';
+@import 'plugins/markdown_tooltip';
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 51a3cd25244..8aecdb7d956 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -12,8 +12,8 @@
 
 $browserDefaultFontSize: 16px;
 
-// We're setting a function o transform px in em 
-// because it's easier to think in px 
+// We're setting a function o transform px in em
+// because it's easier to think in px
 @function em($pixels, $context: $browserDefaultFontSize) {
   @return #{$pixels/$context}em;
 }
@@ -22,7 +22,7 @@ $browserDefaultFontSize: 16px;
   @include euiFont;
   @include euiText;
 
-  // We're using `em` values to support apps where consumers might adjust sizes 
+  // We're using `em` values to support apps where consumers might adjust sizes
   // and consequently the markdown needs to adjust to these changes
 
   // Font size variables
@@ -41,7 +41,7 @@ $browserDefaultFontSize: 16px;
   $euiMarkdownSize: em(16px);
   $euiMarkdownSizeL: em(24px);
 
-  // We're using alpha values to support apps that 
+  // We're using alpha values to support apps that
   // display markdown on backgrounds of various colors
 
   // Grayscale variables
@@ -58,23 +58,33 @@ $browserDefaultFontSize: 16px;
     color: $euiColorLightestShade;
   }
 
-  > *:first-child {
+  > div > *:first-child {
     // sass-lint:disable-block no-important
     margin-top: 0 !important;
   }
 
-  > *:last-child {
+  > div > * {
+    margin-top: 0;
+    margin-bottom: $euiMarkdownSize;
+  }
+
+  > div > *:last-child,
+  .euiCheckbox {
     // sass-lint:disable-block no-important
     margin-bottom: 0 !important;
   }
 
+  .euiCheckbox + *:not(.euiCheckbox) {
+    margin-top: $euiMarkdownSize;
+  }
+
   p,
   blockquote,
   ul,
   ol,
   dl,
-  table,
-  pre {
+  pre,
+  table {
     margin-top: 0;
     margin-bottom: $euiMarkdownSize;
     line-height: 1.5em;
@@ -263,26 +273,4 @@ $browserDefaultFontSize: 16px;
     background-color: transparent;
     border-top: 1px solid $euiMarkdownAlphaLightShade;
   }
-
-  // 8. Code
-  // the markdown editor adds a EuiCodeBlock when consumers specify the language
-  // when no language is specified it gets the .euiMarkdownFormat__code styles
-  &__code {
-    @include euiCodeFont;
-    color: $euiCodeBlockColor;
-    font-size: $euiMarkdownFontSizeXS;
-    padding: $euiMarkdownSizeXXS 0;
-    margin-bottom: $euiMarkdownSizeXS;
-    background-color: $euiMarkdownAlphaLightestShade;
-  }
-
-  // default styles for code blocks
-  pre &__code {
-    display: block;
-    padding: $euiMarkdownFontSizeL;
-    overflow: visible;
-    line-height: inherit;
-    word-wrap: normal;
-    white-space: pre;
-  }
 }
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
index 5c1f4b4a7f4..299fb9f9357 100644
--- a/src/components/markdown_editor/index.ts
+++ b/src/components/markdown_editor/index.ts
@@ -17,13 +17,13 @@
  * under the License.
  */
 
+export { EuiMarkdownEditor, EuiMarkdownEditorProps } from './markdown_editor';
 export {
-  EuiMarkdownEditor,
-  EuiMarkdownEditorProps,
-  defaultParsingPlugins,
-  defaultProcessingPlugins,
-} from './markdown_editor';
+  EuiMarkdownDefaultParsingPlugins,
+  EuiMarkdownDefaultProcessingPlugins,
+} from './plugins/markdown_default_plugins';
 export { EuiMarkdownContext } from './markdown_context';
+export { EuiMarkdownFormat } from './markdown_format';
 export {
   EuiMarkdownParseError,
   EuiMarkdownAstNode,
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index d63ae78229c..b0771cf4af4 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -33,11 +33,6 @@ import React, {
 import unified, { PluggableList, Processor } from 'unified';
 import { VFileMessage } from 'vfile-message';
 import classNames from 'classnames';
-import emoji from 'remark-emoji';
-import markdown from 'remark-parse';
-import remark2rehype from 'remark-rehype';
-import highlight from 'remark-highlight.js';
-import rehype2react from 'rehype-react';
 
 import { CommonProps, OneOf } from '../common';
 import MarkdownActions, { insertText } from './markdown_actions';
@@ -46,8 +41,7 @@ import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
 import { EuiMarkdownFormat } from './markdown_format';
 import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone';
 import { htmlIdGenerator } from '../../services/accessibility';
-import { EuiLink } from '../link';
-import { EuiCodeBlock, EuiCodeBlockProps } from '../code';
+
 import { MARKDOWN_MODE, MODE_EDITING, MODE_VIEWING } from './markdown_modes';
 import {
   EuiMarkdownAstNode,
@@ -58,46 +52,10 @@ import { EuiOverlayMask } from '../overlay_mask';
 import { EuiModal } from '../modal';
 import { ContextShape, EuiMarkdownContext } from './markdown_context';
 import * as MarkdownTooltip from './plugins/markdown_tooltip';
-import * as MarkdownCheckbox from './plugins/markdown_checkbox';
-
-export const defaultParsingPlugins: PluggableList = [
-  [markdown, {}],
-  [highlight, {}],
-  [emoji, { emoticon: true }],
-  [MarkdownTooltip.parser, {}],
-  [MarkdownCheckbox.parser, {}],
-];
-
-export const defaultProcessingPlugins: PluggableList = [
-  [
-    remark2rehype,
-    {
-      allowDangerousHtml: true,
-      handlers: {
-        tooltipPlugin: MarkdownTooltip.handler,
-        checkboxPlugin: MarkdownCheckbox.handler,
-      },
-    },
-  ],
-  [
-    rehype2react,
-    {
-      createElement: createElement,
-      components: {
-        a: EuiLink,
-        code: (props: EuiCodeBlockProps) =>
-          // if has classNames is a codeBlock using highlight js
-          props.className ? (
-            <EuiCodeBlock {...props} />
-          ) : (
-            <code className="euiMarkdownFormat__code" {...props} />
-          ),
-        tooltipPlugin: MarkdownTooltip.renderer,
-        checkboxPlugin: MarkdownCheckbox.renderer,
-      },
-    },
-  ],
-];
+import {
+  EuiMarkdownDefaultParsingPlugins,
+  EuiMarkdownDefaultProcessingPlugins,
+} from './plugins/markdown_default_plugins';
 
 type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
@@ -150,8 +108,8 @@ export const EuiMarkdownEditor: FunctionComponent<
       value,
       onChange,
       height = 150,
-      parsingPluginList = defaultParsingPlugins,
-      processingPluginList = defaultProcessingPlugins,
+      parsingPluginList = EuiMarkdownDefaultParsingPlugins,
+      processingPluginList = EuiMarkdownDefaultProcessingPlugins,
       uiPlugins = [],
       onParse,
       errors = [],
@@ -205,14 +163,6 @@ export const EuiMarkdownEditor: FunctionComponent<
       }
     }, [parser, value]);
 
-    const processor = useMemo(
-      () =>
-        unified()
-          .use(parsingPluginList)
-          .use(processingPluginList),
-      [parsingPluginList, processingPluginList]
-    );
-
     const isPreviewing = viewMode === MODE_VIEWING;
 
     const replaceNode = useCallback(
@@ -308,7 +258,9 @@ export const EuiMarkdownEditor: FunctionComponent<
             <div
               className="euiMarkdownEditorPreview"
               style={{ height: `${height}px` }}>
-              <EuiMarkdownFormat processor={processor}>
+              <EuiMarkdownFormat
+                parsingPluginList={parsingPluginList}
+                processingPluginList={processingPluginList}>
                 {value}
               </EuiMarkdownFormat>
             </div>
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index decdac83182..4f942527cbc 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -18,23 +18,38 @@
  */
 
 import React, { FunctionComponent, useMemo } from 'react';
-import { Processor } from 'unified';
+import unified, { PluggableList } from 'unified';
+import {
+  EuiMarkdownDefaultProcessingPlugins,
+  EuiMarkdownDefaultParsingPlugins,
+} from './plugins/markdown_default_plugins';
 
 interface EuiMarkdownFormatProps {
   children: string;
-  processor: Processor;
+  /** array of unified plugins to parse content into an AST */
+  parsingPluginList?: PluggableList;
+  /** array of unified plugins to convert the AST into a ReactNode */
+  processingPluginList?: PluggableList;
 }
 
 export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   children,
-  processor,
+  parsingPluginList = EuiMarkdownDefaultParsingPlugins,
+  processingPluginList = EuiMarkdownDefaultProcessingPlugins,
 }) => {
+  const processor = useMemo(
+    () =>
+      unified()
+        .use(parsingPluginList)
+        .use(processingPluginList),
+    [parsingPluginList, processingPluginList]
+  );
   const result = useMemo(() => {
     try {
       return processor.processSync(children).contents;
     } catch (e) {
       return children;
     }
-  }, [processor, children]);
+  }, [children, processor]);
   return <div className="euiMarkdownFormat">{result}</div>;
 };
diff --git a/src/components/markdown_editor/plugins/markdown_checkbox.tsx b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
index 339fb702838..f1ec36d7e10 100644
--- a/src/components/markdown_editor/plugins/markdown_checkbox.tsx
+++ b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
@@ -47,12 +47,12 @@ const CheckboxParser: Plugin = function CheckboxParser() {
     silent
   ) {
     /**
-     * optional leading whitespace & single dash mix
+     * optional leading whitespace & single (dash or asterisk) mix
      * square brackets, optionally containing whitespace and `x`
      * optional whitespace
      * remainder of the line is consumed as the textbox label
      */
-    const checkboxMatch = value.match(/^(\s*-\s*)?\[([\sx]*)\](.+)/);
+    const checkboxMatch = value.match(/^(\s*[-*]\s*)?\[([\sx]*)\](.+)/);
     if (checkboxMatch == null) return false;
 
     if (silent) {
diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
new file mode 100644
index 00000000000..174bfce7f31
--- /dev/null
+++ b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
@@ -0,0 +1,69 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { PluggableList } from 'unified';
+import remark2rehype from 'remark-rehype';
+import rehype2react from 'rehype-react';
+import * as MarkdownTooltip from './markdown_tooltip';
+import * as MarkdownCheckbox from './markdown_checkbox';
+import React, { createElement } from 'react';
+import { EuiLink } from '../../link';
+import { EuiCodeBlock, EuiCode } from '../../code';
+import markdown from 'remark-parse';
+import highlight from 'remark-highlight.js';
+import emoji from 'remark-emoji';
+
+export const EuiMarkdownDefaultParsingPlugins: PluggableList = [
+  [markdown, {}],
+  [highlight, {}],
+  [emoji, { emoticon: true }],
+  [MarkdownTooltip.parser, {}],
+  [MarkdownCheckbox.parser, {}],
+];
+
+export const EuiMarkdownDefaultProcessingPlugins: PluggableList = [
+  [
+    remark2rehype,
+    {
+      allowDangerousHtml: true,
+      handlers: {
+        tooltipPlugin: MarkdownTooltip.handler,
+        checkboxPlugin: MarkdownCheckbox.handler,
+      },
+    },
+  ],
+  [
+    rehype2react,
+    {
+      createElement: createElement,
+      components: {
+        a: EuiLink,
+        code: (props: any) =>
+          // If there are linebreaks use codeblock, otherwise code
+          /\r|\n/.exec(props.children) ? (
+            <EuiCodeBlock fontSize="m" paddingSize="s" {...props} />
+          ) : (
+            <EuiCode {...props} />
+          ),
+        tooltipPlugin: MarkdownTooltip.renderer,
+        checkboxPlugin: MarkdownCheckbox.renderer,
+      },
+    },
+  ],
+];
diff --git a/src/components/markdown_editor/plugins/markdown_tooltip.scss b/src/components/markdown_editor/plugins/markdown_tooltip.scss
new file mode 100644
index 00000000000..2fe1a191c83
--- /dev/null
+++ b/src/components/markdown_editor/plugins/markdown_tooltip.scss
@@ -0,0 +1,4 @@
+// This is to offset the tooltip icon, which isn't perfectly centered
+.euiMarkdownTooltip__icon {
+  transform: translateY(-1px);
+}
diff --git a/src/components/markdown_editor/plugins/markdown_tooltip.tsx b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
index 9b215ebf861..fa94c5d2de6 100644
--- a/src/components/markdown_editor/plugins/markdown_tooltip.tsx
+++ b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
@@ -25,6 +25,7 @@ import {
   RemarkTokenizer,
 } from '../markdown_types';
 import { EuiToolTip } from '../../tool_tip';
+import { EuiIcon } from '../../icon';
 import { EuiCodeBlock } from '../../code';
 import { Plugin } from 'unified';
 
@@ -143,9 +144,17 @@ const tooltipMarkdownRenderer: FunctionComponent<
   TooltipNodeDetails & { position: EuiMarkdownAstNodePosition }
 > = ({ content, children }) => {
   return (
-    <EuiToolTip content={content}>
-      <span>{children}</span>
-    </EuiToolTip>
+    <span>
+      <EuiToolTip content={content}>
+        <span>
+          <strong>{children}</strong>
+          <EuiIcon
+            type="questionInCircle"
+            className="euiMarkdownTooltip__icon"
+          />
+        </span>
+      </EuiToolTip>
+    </span>
   );
 };
 

From b84f0ddf1dc6d5076bf58d72555e98af47f2b9ac Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 29 Jul 2020 13:35:01 -0600
Subject: [PATCH 36/43] [Markdown editor] drag and drop api, functionality
 (#3748)

* Initial markdown drag-n-drop api

* Properly insert multiple drag-and-drop results

* Update logic for markdown supported files message display

* disable upload interaction if no drop handlers are provided

* Upload error button styles

* pr feedback

* Only accept supported file types in the markdown file selection dialog

* Drag and drop animation

* small changes

* Add some cross-browser stability when dealing with unsupported drop files

Co-authored-by: miukimiu <elizabet.oliveira@elastic.co>
---
 .../views/markdown_editor/markdown_editor.js  |  17 ++
 .../markdown_editor.test.tsx.snap             |  19 +--
 .../_markdown_editor_drop_zone.scss           |  31 +++-
 .../_markdown_editor_footer.scss              |  13 ++
 .../markdown_editor/markdown_editor.tsx       |  28 +++-
 .../markdown_editor_drop_zone.tsx             | 146 ++++++++++++++++--
 .../markdown_editor_footer.tsx                |  69 +++++++--
 .../markdown_editor_toolbar.tsx               |   4 +-
 .../markdown_editor/markdown_types.ts         |   6 +
 .../plugins/markdown_checkbox.tsx             |   6 +-
 .../plugins/markdown_tooltip.tsx              |   6 +-
 src/components/tool_tip/tool_tip.tsx          |   8 +-
 12 files changed, 295 insertions(+), 58 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index c2398c2328f..25473f07f36 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -18,6 +18,22 @@ The editor also ships with some built in plugins. For example it can handle chec
 - [ ] Or empty
 `;
 
+const dropHandlers = [
+  {
+    supportedFiles: ['.jpg', '.jpeg'],
+    accepts: itemType => itemType === 'image/jpeg',
+    getFormattingForItem: item => {
+      // fake an upload
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const url = URL.createObjectURL(item);
+          resolve(`![${item.name}](${url})`);
+        }, 1000);
+      });
+    },
+  },
+];
+
 export default () => {
   const [value, setValue] = useState(initialContent);
   const [messages, setMessages] = useState([]);
@@ -36,6 +52,7 @@ export default () => {
         height={400}
         onParse={onParse}
         errors={messages}
+        dropHandlers={dropHandlers}
       />
       <EuiSpacer size="s" />
       <div className="eui-textRight">
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 58a21b849d3..ec271a031d0 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -161,11 +161,10 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       type="button"
     >
       <span
-        class="euiButtonEmpty__content"
+        class="euiButtonContent euiButtonEmpty__content"
       >
         <div
-          aria-hidden="true"
-          class="euiButtonEmpty__icon"
+          class="euiButtonContent__icon"
           data-euiicon-type="eye"
         />
         <span
@@ -194,19 +193,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <div
           class="euiMarkdownEditorFooter__actions"
-        >
-          <button
-            aria-label="Open upload files modal"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="paperClip"
-            />
-          </button>
-        </div>
+        />
         <button
           aria-label="Show markdown help"
           class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
index cf8e2d629f9..8a355aaa440 100644
--- a/src/components/markdown_editor/_markdown_editor_drop_zone.scss
+++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
@@ -25,9 +25,36 @@
   }
 
   &--isDragging {
+    .euiMarkdownEditorFooter,
     .euiMarkdownEditorTextArea,
-    .euiMarkdownEditorFooter {
-      background-color: transparentize($euiColorSecondary, .88);
+    .euiMarkdownEditorTextArea:focus,
+    .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea {
+      // sass-lint:disable-block no-important
+      background-color: transparentize($euiColorPrimary, .9) !important;
+    }
+
+    .euiMarkdownEditorTextArea,
+    .euiMarkdownEditorTextArea:focus {
+      // sass-lint:disable-block no-important
+      background-image: euiFormControlGradient($euiColorPrimary) !important;
+    }
+  }
+
+  &--isDraggingError {
+    .euiMarkdownEditorFooter,
+    .euiMarkdownEditorTextArea,
+    .euiMarkdownEditorTextArea:focus,
+    .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea {
+      // sass-lint:disable-block no-important
+      background-color: transparentize($euiColorDanger, .9) !important;
+    }
+  }
+
+  &--hasError {
+    .euiMarkdownEditorTextArea,
+    .euiMarkdownEditorTextArea:focus {
+      // sass-lint:disable-block no-important
+      background-image: euiFormControlGradient($euiColorDanger) !important;
     }
   }
 }
diff --git a/src/components/markdown_editor/_markdown_editor_footer.scss b/src/components/markdown_editor/_markdown_editor_footer.scss
index b0b0b7136a6..ccbf4e4a142 100644
--- a/src/components/markdown_editor/_markdown_editor_footer.scss
+++ b/src/components/markdown_editor/_markdown_editor_footer.scss
@@ -19,6 +19,19 @@
     margin-right: $euiSizeXS;
     align-self: center;
   }
+
+  // overrides button empty styles so it can match the button icon
+  // So when we have an error this button appears smoothly 
+  .euiMarkdownEditorFooter__uploadError {
+    position: relative;
+    left: -1px;
+    line-height: 1;
+    border-radius: $euiBorderRadius;
+
+    > span {
+      padding: 0 $euiSizeXS;
+    }
+  }
 }
 
 .euiMarkdownEditorFooter__help {
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index b0771cf4af4..91ea186c11c 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -29,7 +29,7 @@ import React, {
   useCallback,
   useRef,
 } from 'react';
-// @ts-ignore missing declaration file
+
 import unified, { PluggableList, Processor } from 'unified';
 import { VFileMessage } from 'vfile-message';
 import classNames from 'classnames';
@@ -45,6 +45,7 @@ import { htmlIdGenerator } from '../../services/accessibility';
 import { MARKDOWN_MODE, MODE_EDITING, MODE_VIEWING } from './markdown_modes';
 import {
   EuiMarkdownAstNode,
+  EuiMarkdownDropHandler,
   EuiMarkdownEditorUiPlugin,
   EuiMarkdownParseError,
 } from './markdown_types';
@@ -92,15 +93,15 @@ type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
         ast: EuiMarkdownAstNode;
       }
     ) => void;
+
+    dropHandlers?: EuiMarkdownDropHandler[];
   };
 export type EuiMarkdownEditorProps = OneOf<
   CommonMarkdownEditorProps,
   'aria-label' | 'aria-labelledby'
 >;
 
-export const EuiMarkdownEditor: FunctionComponent<
-  EuiMarkdownEditorProps
-> = forwardRef(
+export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = forwardRef(
   (
     {
       className,
@@ -115,6 +116,7 @@ export const EuiMarkdownEditor: FunctionComponent<
       errors = [],
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      dropHandlers = [],
       ...rest
     },
     ref
@@ -241,6 +243,8 @@ export const EuiMarkdownEditor: FunctionComponent<
       [replaceNode]
     );
 
+    const [hasUnacceptedItems, setHasUnacceptedItems] = React.useState(false);
+
     return (
       <EuiMarkdownContext.Provider value={contextValue}>
         <div className={classes} {...rest}>
@@ -268,14 +272,28 @@ export const EuiMarkdownEditor: FunctionComponent<
           {/* Toggle the editor's display instead of unmounting to retain its undo/redo history */}
           <div style={{ display: isPreviewing ? 'none' : 'block' }}>
             <EuiMarkdownEditorDropZone
+              dropHandlers={dropHandlers}
+              insertText={(text: string) => {
+                const originalSelectionStart = textareaRef.current!
+                  .selectionStart;
+                const newSelectionPoint = originalSelectionStart + text.length;
+                insertText(textareaRef.current!, {
+                  text,
+                  selectionStart: newSelectionPoint,
+                  selectionEnd: newSelectionPoint,
+                });
+              }}
               uiPlugins={toolbarPlugins}
-              errors={errors}>
+              errors={errors}
+              hasUnacceptedItems={hasUnacceptedItems}
+              setHasUnacceptedItems={setHasUnacceptedItems}>
               <EuiMarkdownEditorTextArea
                 ref={textareaRef}
                 height={height}
                 id={editorId}
                 onChange={e => onChange(e.target.value)}
                 value={value}
+                onFocus={() => setHasUnacceptedItems(false)}
                 {...{
                   'aria-label': ariaLabel,
                   'aria-labelledby': ariaLabelledBy,
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index 59985af9a7e..ecfd56eba51 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -24,44 +24,159 @@ import { EuiMarkdownEditorFooter } from './markdown_editor_footer';
 import {
   EuiMarkdownEditorUiPlugin,
   EuiMarkdownParseError,
+  EuiMarkdownDropHandler,
 } from './markdown_types';
 
 interface EuiMarkdownEditorDropZoneProps {
   uiPlugins: EuiMarkdownEditorUiPlugin[];
   errors: EuiMarkdownParseError[];
+  dropHandlers: EuiMarkdownDropHandler[];
+  insertText: (text: string) => void;
+  hasUnacceptedItems: boolean;
+  setHasUnacceptedItems: (hasUnacceptedItems: boolean) => void;
 }
 
-export const EuiMarkdownEditorDropZone: FunctionComponent<
-  EuiMarkdownEditorDropZoneProps
-> = props => {
+const getUnacceptedItems = (
+  items: DataTransferItemList,
+  dropHandlers: EuiMarkdownDropHandler[]
+) => {
+  const unacceptedItems: DataTransferItem[] = [];
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+
+    let isAccepted = false;
+    for (let j = 0; j < dropHandlers.length; j++) {
+      if (dropHandlers[j].accepts(item.type)) {
+        isAccepted = true;
+        break;
+      }
+    }
+
+    if (!isAccepted) {
+      unacceptedItems.push(item);
+    }
+  }
+
+  return unacceptedItems;
+};
+
+export const EuiMarkdownEditorDropZone: FunctionComponent<EuiMarkdownEditorDropZoneProps> = props => {
   const [isDragging, toggleDragging] = React.useState(false);
   const [isUploadingFiles, toggleUploadingFiles] = React.useState(false);
+  const [isDraggingError, toggleDraggingError] = React.useState(false);
 
-  const { children, uiPlugins, errors } = props;
+  const {
+    children,
+    uiPlugins,
+    errors,
+    dropHandlers,
+    insertText,
+    hasUnacceptedItems,
+    setHasUnacceptedItems,
+  } = props;
 
   const classes = classNames('euiMarkdownEditorDropZone', {
     'euiMarkdownEditorDropZone--isDragging': isDragging,
+    'euiMarkdownEditorDropZone--hasError': hasUnacceptedItems,
+    'euiMarkdownEditorDropZone--isDraggingError': isDraggingError,
   });
 
   const { getRootProps, getInputProps, open } = useDropzone({
+    disabled: dropHandlers.length === 0,
     // Disable click and keydown behavior
     noClick: true,
     noKeyboard: true,
     // multiple: false,
-    onDragEnter: () => {
-      toggleDragging(true);
+    onDragOver: e => {
+      let result: boolean;
+
+      if (e.dataTransfer) {
+        const unacceptedItems = getUnacceptedItems(
+          e.dataTransfer.items,
+          dropHandlers
+        );
+        setHasUnacceptedItems(unacceptedItems.length > 0);
+        toggleDraggingError(unacceptedItems.length > 0);
+
+        result = unacceptedItems.length === 0;
+      } else {
+        setHasUnacceptedItems(false);
+        result = false;
+      }
+
+      toggleDragging(result);
+      if (result === false) {
+        e.preventDefault();
+      }
+      return result;
+    },
+    onDragEnter: e => {
+      let result: boolean;
+
+      if (e.dataTransfer) {
+        const unacceptedItems = getUnacceptedItems(
+          e.dataTransfer.items,
+          dropHandlers
+        );
+        setHasUnacceptedItems(unacceptedItems.length > 0);
+        toggleDraggingError(unacceptedItems.length > 0);
+
+        result = unacceptedItems.length === 0;
+      } else {
+        setHasUnacceptedItems(false);
+        result = false;
+      }
+
+      toggleDragging(result);
+      if (result === false) {
+        e.preventDefault();
+      }
+      return result;
     },
     onDragLeave: () => {
       toggleDragging(false);
     },
-    onDrop: () => {
-      toggleUploadingFiles(true);
+    onDrop: acceptedFiles => {
+      const fileHandlers: EuiMarkdownDropHandler[] = [];
+
+      // verify all files being dropped are supported
+      preparation: for (let i = 0; i < acceptedFiles.length; i++) {
+        const file = acceptedFiles[i];
 
-      // faking the file upload
-      setTimeout(() => {
+        for (let j = 0; j < dropHandlers.length; j++) {
+          if (dropHandlers[j].accepts(file.type)) {
+            fileHandlers.push(dropHandlers[j]);
+            continue preparation;
+          }
+        }
+
+        // if we get here then a file isn't handled
+        setHasUnacceptedItems(true);
         toggleDragging(false);
-        toggleUploadingFiles(false);
-      }, 3000);
+        toggleDraggingError(false);
+        return;
+      }
+
+      toggleUploadingFiles(true);
+
+      const resolved: Array<string | Promise<string>> = [];
+      for (let i = 0; i < acceptedFiles.length; i++) {
+        const file = acceptedFiles[i];
+        const handler = fileHandlers[i];
+        resolved.push(handler.getFormattingForItem(file));
+      }
+
+      Promise.all(resolved)
+        .then(results => {
+          results.forEach(result => insertText(result));
+        })
+        .catch(() => {})
+        .then(() => {
+          toggleDragging(false);
+          toggleUploadingFiles(false);
+          toggleDraggingError(false);
+        });
     },
   });
 
@@ -70,8 +185,13 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<
       {children}
       <EuiMarkdownEditorFooter
         uiPlugins={uiPlugins}
-        openFiles={open}
+        openFiles={() => {
+          setHasUnacceptedItems(false);
+          open();
+        }}
         isUploadingFiles={isUploadingFiles}
+        hasUnacceptedItems={hasUnacceptedItems}
+        dropHandlers={dropHandlers}
         errors={errors}
       />
       <input {...getInputProps()} />
diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx
index 489f35e2329..8a2a323105a 100644
--- a/src/components/markdown_editor/markdown_editor_footer.tsx
+++ b/src/components/markdown_editor/markdown_editor_footer.tsx
@@ -28,8 +28,9 @@ import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiTitle } from '../title';
 import { EuiModal, EuiModalBody, EuiModalHeader } from '../modal';
-import { EuiI18n } from '../i18n';
+import { EuiI18n, useEuiI18n } from '../i18n';
 import {
+  EuiMarkdownDropHandler,
   EuiMarkdownEditorUiPlugin,
   EuiMarkdownParseError,
 } from './markdown_types';
@@ -39,18 +40,26 @@ import { EuiSpacer } from '../spacer';
 // @ts-ignore a react svg
 import MarkdownLogo from './icons/markdown_logo';
 import { EuiHorizontalRule } from '../horizontal_rule';
+import { EuiToolTip } from '../tool_tip';
 
 interface EuiMarkdownEditorFooterProps {
   uiPlugins: EuiMarkdownEditorUiPlugin[];
   isUploadingFiles: boolean;
   openFiles: () => void;
   errors: EuiMarkdownParseError[];
+  hasUnacceptedItems: boolean;
+  dropHandlers: EuiMarkdownDropHandler[];
 }
 
-export const EuiMarkdownEditorFooter: FunctionComponent<
-  EuiMarkdownEditorFooterProps
-> = props => {
-  const { uiPlugins, isUploadingFiles, openFiles, errors } = props;
+export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterProps> = props => {
+  const {
+    uiPlugins,
+    isUploadingFiles,
+    openFiles,
+    errors,
+    hasUnacceptedItems,
+    dropHandlers,
+  } = props;
   const [isShowingHelp, setIsShowingHelp] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const onButtonClick = () => setIsPopoverOpen(isPopoverOpen => !isPopoverOpen);
@@ -58,19 +67,59 @@ export const EuiMarkdownEditorFooter: FunctionComponent<
 
   let uploadButton;
 
+  const ariaLabels = {
+    uploadingFiles: useEuiI18n(
+      'euiMarkdownEditorFooter.uploadingFiles',
+      'Uploading files'
+    ),
+    openUploadModal: useEuiI18n(
+      'euiMarkdownEditorFooter.openUploadModal',
+      'Open upload files modal'
+    ),
+    showSyntaxErrors: useEuiI18n(
+      'euiMarkdownEditorFooter.showSyntaxErrors',
+      'Show errors'
+    ),
+    showMarkdownHelp: useEuiI18n(
+      'euiMarkdownEditorFooter.showMarkdownHelp',
+      'Show markdown help'
+    ),
+  };
+
   if (isUploadingFiles) {
     uploadButton = (
       <EuiButtonIcon
         iconType={EuiLoadingSpinner}
-        aria-label="Uploading files"
+        aria-label={ariaLabels.uploadingFiles}
       />
     );
-  } else {
+  } else if (dropHandlers.length > 0 && hasUnacceptedItems) {
+    uploadButton = (
+      <EuiToolTip
+        content={`Supported files: ${dropHandlers
+          .map(({ supportedFiles }) => supportedFiles.join(', '))
+          .join(', ')}`}>
+        <EuiButtonEmpty
+          className="euiMarkdownEditorFooter__uploadError"
+          autoFocus
+          size="xs"
+          iconType="paperClip"
+          color="danger"
+          aria-label={ariaLabels.openUploadModal}
+          onClick={openFiles}>
+          <EuiI18n
+            token="euiMarkdownEditorFooter.unsupportedFileType"
+            default="File type not supported"
+          />
+        </EuiButtonEmpty>
+      </EuiToolTip>
+    );
+  } else if (dropHandlers.length > 0) {
     uploadButton = (
       <EuiButtonIcon
         iconType="paperClip"
         color="text"
-        aria-label="Open upload files modal"
+        aria-label={ariaLabels.openUploadModal}
         onClick={openFiles}
       />
     );
@@ -85,7 +134,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent<
             iconType="crossInACircleFilled"
             size="s"
             color="danger"
-            aria-label="Show errors"
+            aria-label={ariaLabels.showSyntaxErrors}
             onClick={onButtonClick}>
             {errors.length}
           </EuiButtonEmpty>
@@ -119,7 +168,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent<
         className="euiMarkdownEditorFooter__help"
         iconType={MarkdownLogo}
         color="text"
-        aria-label="Show markdown help"
+        aria-label={ariaLabels.showMarkdownHelp}
         onClick={() => setIsShowingHelp(!isShowingHelp)}
       />
       {isShowingHelp && (
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index a3e7b80f706..c4202cd2238 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -100,9 +100,7 @@ const quoteCodeLinkButtons = [
   },
 ];
 
-export const EuiMarkdownEditorToolbar: FunctionComponent<
-  EuiMarkdownEditorToolbarProps
-> = ({
+export const EuiMarkdownEditorToolbar: FunctionComponent<EuiMarkdownEditorToolbarProps> = ({
   markdownActions,
   viewMode,
   onClickPreview,
diff --git a/src/components/markdown_editor/markdown_types.ts b/src/components/markdown_editor/markdown_types.ts
index 93f6d9f34f0..32841b28153 100644
--- a/src/components/markdown_editor/markdown_types.ts
+++ b/src/components/markdown_editor/markdown_types.ts
@@ -111,3 +111,9 @@ export interface EuiMarkdownAstNodePosition {
 }
 
 export type EuiMarkdownParseError = string | VFileMessage | Error;
+
+export interface EuiMarkdownDropHandler {
+  supportedFiles: string[];
+  accepts: (itemType: string) => boolean;
+  getFormattingForItem: (file: File) => string | Promise<string>;
+}
diff --git a/src/components/markdown_editor/plugins/markdown_checkbox.tsx b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
index f1ec36d7e10..9439d959fb0 100644
--- a/src/components/markdown_editor/plugins/markdown_checkbox.tsx
+++ b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
@@ -84,9 +84,9 @@ const CheckboxParser: Plugin = function CheckboxParser() {
 const checkboxMarkdownHandler: RemarkRehypeHandler = (h, node) => {
   return h(node.position!, 'checkboxPlugin', node, all(h, node));
 };
-const CheckboxMarkdownRenderer: FunctionComponent<
-  CheckboxNodeDetails & { position: EuiMarkdownAstNodePosition }
-> = ({ position, lead, label, isChecked, children }) => {
+const CheckboxMarkdownRenderer: FunctionComponent<CheckboxNodeDetails & {
+  position: EuiMarkdownAstNodePosition;
+}> = ({ position, lead, label, isChecked, children }) => {
   const { replaceNode } = useContext(EuiMarkdownContext);
   return (
     <EuiCheckbox
diff --git a/src/components/markdown_editor/plugins/markdown_tooltip.tsx b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
index fa94c5d2de6..887bedfd579 100644
--- a/src/components/markdown_editor/plugins/markdown_tooltip.tsx
+++ b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
@@ -140,9 +140,9 @@ const TooltipParser: Plugin = function TooltipParser() {
 const tooltipMarkdownHandler: RemarkRehypeHandler = (h, node) => {
   return h(node.position!, 'tooltipPlugin', node, all(h, node));
 };
-const tooltipMarkdownRenderer: FunctionComponent<
-  TooltipNodeDetails & { position: EuiMarkdownAstNodePosition }
-> = ({ content, children }) => {
+const tooltipMarkdownRenderer: FunctionComponent<TooltipNodeDetails & {
+  position: EuiMarkdownAstNodePosition;
+}> = ({ content, children }) => {
   return (
     <span>
       <EuiToolTip content={content}>
diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
index 34ad953f67f..d80dc04db9f 100644
--- a/src/components/tool_tip/tool_tip.tsx
+++ b/src/components/tool_tip/tool_tip.tsx
@@ -244,9 +244,11 @@ export class EuiToolTip extends Component<Props, State> {
 
   hideToolTip = () => {
     this.clearAnimationTimeout();
-    if (this._isMounted) {
-      enqueueStateChange(() => this.setState({ visible: false }));
-    }
+    enqueueStateChange(() => {
+      if (this._isMounted) {
+        this.setState({ visible: false });
+      }
+    });
   };
 
   hasFocusMouseMoveListener = () => {

From 7f73c8267dec4002f0221b3c5b642b5bcde1aedb Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 30 Jul 2020 15:36:53 -0600
Subject: [PATCH 37/43] Feature/markdown editor cleanup (#3830)

* Sort drag&drop file extensions when displaying

* mark markdown components as new and in beta

* Get EuiMarkdownEditor Props to render

* Update markdown's plugin prop docs based on existing writeups
---
 .../babel/proptypes-from-ts-props/index.js    |  8 ++++
 .../markdown_editor/mardown_editor_example.js |  2 +
 .../markdown_editor/mardown_format_example.js |  2 +
 .../markdown_plugin_example.js                |  2 +
 .../markdown_editor/markdown_editor.tsx       | 41 +++++++++++++------
 .../markdown_editor_footer.tsx                |  1 +
 .../markdown_editor/markdown_modes.ts         |  4 +-
 7 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js
index c65a1cb4a32..a897520718a 100644
--- a/scripts/babel/proptypes-from-ts-props/index.js
+++ b/scripts/babel/proptypes-from-ts-props/index.js
@@ -156,6 +156,7 @@ function resolveArrayTypeToPropTypes(node, state) {
  *    - Arrays
  *    - MouseEventHandler is interpretted as functions
  *    - ExclusiveUnion custom type
+ *    - OneOf custom type
  *    - defined types/interfaces (found during initial program body parsing)
  * Returns `null` for unresolvable types
  * @param node
@@ -342,6 +343,13 @@ function resolveIdentifierToPropTypes(node, state) {
     return propTypes;
   }
 
+  if (identifier.name === 'OneOf') {
+    // the second type parameter is ignorable as it is a subset of the first,
+    // and the OneOf operation cannot be well-described by proptypes
+    const [sourceTypes] = node.typeParameters.params;
+    return getPropTypesForNode(sourceTypes, true, state);
+  }
+
   // Lookup this identifier from types/interfaces defined in code
   const identifierDefinition = typeDefinitions[identifier.name];
 
diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js
index 02656a92af1..98b8cd40e47 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -23,6 +23,8 @@ const markdownEditorErrorsHtml = renderToHtml(MarkdownEditorErrors);
 
 export const MarkdownEditorExample = {
   title: 'Markdown editor',
+  beta: true,
+  isNew: true,
   intro: (
     <Fragment>
       <EuiText>
diff --git a/src-docs/src/views/markdown_editor/mardown_format_example.js b/src-docs/src/views/markdown_editor/mardown_format_example.js
index 352d45e844b..2e5852042bd 100644
--- a/src-docs/src/views/markdown_editor/mardown_format_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_format_example.js
@@ -22,6 +22,8 @@ const markdownFormatSinkHtml = renderToHtml(MarkdownFormatSink);
 
 export const MarkdownFormatExample = {
   title: 'Markdown format',
+  beta: true,
+  isNew: true,
   intro: (
     <Fragment>
       <EuiText>
diff --git a/src-docs/src/views/markdown_editor/markdown_plugin_example.js b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
index 627c34d78a3..64b138d75c8 100644
--- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -131,6 +131,8 @@ const uiPluginConcepts = [
 
 export const MarkdownPluginExample = {
   title: 'Markdown plugins',
+  beta: true,
+  isNew: true,
   intro: (
     <Fragment>
       <EuiText>
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 91ea186c11c..799ee2cb936 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -19,13 +19,11 @@
 
 import React, {
   createElement,
-  FunctionComponent,
   HTMLAttributes,
   useEffect,
   useImperativeHandle,
   useMemo,
   useState,
-  forwardRef,
   useCallback,
   useRef,
 } from 'react';
@@ -60,32 +58,38 @@ import {
 
 type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
-    /** A unique ID to attach to the textarea. If one isn't provided, a random one
+    /** aria-label OR aria-labelledby must be set */
+    'aria-label'?: string;
+
+    /** aria-label OR aria-labelledby must be set */
+    'aria-labelledby'?: string;
+
+    /** a unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
     editorId?: string;
 
     /** A markdown content */
     value: string;
 
-    /** Callback function when markdown content is modified */
+    /** callback function when markdown content is modified */
     onChange: (value: string) => void;
 
-    /** The height of the content/preview area */
+    /** height of the content/preview area */
     height?: number;
 
-    /** array of unified plugins to parse content into an AST */
+    /** plugins to identify new syntax and parse it into an AST node */
     parsingPluginList?: PluggableList;
 
-    /** array of unified plugins to convert the AST into a ReactNode */
+    /** plugins to process the markdown AST nodes into a React nodes */
     processingPluginList?: PluggableList;
 
-    /** array of toolbar plugins **/
+    /** defines UI for plugins' buttons in the toolbar as well as any modals or extra UI that provides content to the editor */
     uiPlugins?: EuiMarkdownEditorUiPlugin[];
 
-    /** Errors to bubble up */
+    /** errors to bubble up */
     errors?: EuiMarkdownParseError[];
 
-    /** callback triggered when parsing results are available **/
+    /** callback triggered when parsing results are available */
     onParse?: (
       error: EuiMarkdownParseError | null,
       data: {
@@ -94,6 +98,10 @@ type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
       }
     ) => void;
 
+    /** initial display mode for the editor */
+    initialViewMode?: MARKDOWN_MODE;
+
+    /** array defining any drag&drop handlers */
     dropHandlers?: EuiMarkdownDropHandler[];
   };
 export type EuiMarkdownEditorProps = OneOf<
@@ -101,7 +109,15 @@ export type EuiMarkdownEditorProps = OneOf<
   'aria-label' | 'aria-labelledby'
 >;
 
-export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = forwardRef(
+interface EuiMarkdownEditorRef {
+  textarea: HTMLTextAreaElement | null;
+  replaceNode: ContextShape['replaceNode'];
+}
+
+export const EuiMarkdownEditor = React.forwardRef<
+  EuiMarkdownEditorRef,
+  EuiMarkdownEditorProps
+>(
   (
     {
       className,
@@ -116,12 +132,13 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = forw
       errors = [],
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      initialViewMode = MODE_EDITING,
       dropHandlers = [],
       ...rest
     },
     ref
   ) => {
-    const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(MODE_EDITING);
+    const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(initialViewMode);
     const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [
       _editorId,
     ]);
diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx
index 8a2a323105a..f273a95c960 100644
--- a/src/components/markdown_editor/markdown_editor_footer.tsx
+++ b/src/components/markdown_editor/markdown_editor_footer.tsx
@@ -98,6 +98,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterP
       <EuiToolTip
         content={`Supported files: ${dropHandlers
           .map(({ supportedFiles }) => supportedFiles.join(', '))
+          .sort()
           .join(', ')}`}>
         <EuiButtonEmpty
           className="euiMarkdownEditorFooter__uploadError"
diff --git a/src/components/markdown_editor/markdown_modes.ts b/src/components/markdown_editor/markdown_modes.ts
index bd3c214195b..0561630e918 100644
--- a/src/components/markdown_editor/markdown_modes.ts
+++ b/src/components/markdown_editor/markdown_modes.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export const MODE_EDITING = 'editing';
-export const MODE_VIEWING = 'viewing';
+export const MODE_EDITING = 'editing' as const;
+export const MODE_VIEWING = 'viewing' as const;
 
 export type MARKDOWN_MODE = typeof MODE_EDITING | typeof MODE_VIEWING;

From b111e019a03a86f06afd927049957ee40d55ab59 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 31 Jul 2020 12:43:00 -0600
Subject: [PATCH 38/43] Prevent markdown plugin extensions from interacting
 with each other (#3842)

---
 .../markdown_editor/markdown_editor_with_plugins.js  | 12 +++++-------
 src/components/index.js                              |  4 ++--
 src/components/markdown_editor/index.ts              |  4 ++--
 src/components/markdown_editor/markdown_editor.tsx   |  8 ++++----
 src/components/markdown_editor/markdown_format.tsx   |  8 ++++----
 .../plugins/markdown_default_plugins.tsx             |  8 ++++++--
 6 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index 7d86dfc9c64..0666c82cd35 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -11,8 +11,8 @@ import {
 import { EUI_CHARTS_THEME_LIGHT } from '../../../../src/themes/charts/themes';
 
 import {
-  EuiMarkdownDefaultParsingPlugins,
-  EuiMarkdownDefaultProcessingPlugins,
+  getDefaultEuiMarkdownParsingPlugins,
+  getDefaultEuiMarkdownProcessingPlugins,
   EuiMarkdownEditor,
   EuiMarkdownFormat,
   EuiSpacer,
@@ -248,12 +248,10 @@ const ChartMarkdownRenderer = ({ height = 200, palette = 5 }) => {
   );
 };
 
-const exampleParsingList = [
-  ...EuiMarkdownDefaultParsingPlugins,
-  ChartMarkdownParser,
-];
+const exampleParsingList = getDefaultEuiMarkdownParsingPlugins();
+exampleParsingList.push(ChartMarkdownParser);
 
-const exampleProcessingList = [...EuiMarkdownDefaultProcessingPlugins]; // pretend mutation doesn't happen immediately next 😅
+const exampleProcessingList = getDefaultEuiMarkdownProcessingPlugins();
 exampleProcessingList[0][1].handlers.chartDemoPlugin = chartMarkdownHandler;
 exampleProcessingList[1][1].components.chartDemoPlugin = ChartMarkdownRenderer;
 
diff --git a/src/components/index.js b/src/components/index.js
index 4266eec2df6..a1e2f1dd46e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -218,8 +218,8 @@ export {
   EuiMarkdownEditor,
   EuiMarkdownContext,
   EuiMarkdownFormat,
-  EuiMarkdownDefaultParsingPlugins,
-  EuiMarkdownDefaultProcessingPlugins,
+  getDefaultEuiMarkdownParsingPlugins,
+  getDefaultEuiMarkdownProcessingPlugins,
 } from './markdown_editor';
 export { EuiMark } from './mark';
 
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
index 299fb9f9357..3815e909fcd 100644
--- a/src/components/markdown_editor/index.ts
+++ b/src/components/markdown_editor/index.ts
@@ -19,8 +19,8 @@
 
 export { EuiMarkdownEditor, EuiMarkdownEditorProps } from './markdown_editor';
 export {
-  EuiMarkdownDefaultParsingPlugins,
-  EuiMarkdownDefaultProcessingPlugins,
+  getDefaultEuiMarkdownParsingPlugins,
+  getDefaultEuiMarkdownProcessingPlugins,
 } from './plugins/markdown_default_plugins';
 export { EuiMarkdownContext } from './markdown_context';
 export { EuiMarkdownFormat } from './markdown_format';
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 799ee2cb936..327384ac808 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -52,8 +52,8 @@ import { EuiModal } from '../modal';
 import { ContextShape, EuiMarkdownContext } from './markdown_context';
 import * as MarkdownTooltip from './plugins/markdown_tooltip';
 import {
-  EuiMarkdownDefaultParsingPlugins,
-  EuiMarkdownDefaultProcessingPlugins,
+  defaultParsingPlugins,
+  defaultProcessingPlugins,
 } from './plugins/markdown_default_plugins';
 
 type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
@@ -125,8 +125,8 @@ export const EuiMarkdownEditor = React.forwardRef<
       value,
       onChange,
       height = 150,
-      parsingPluginList = EuiMarkdownDefaultParsingPlugins,
-      processingPluginList = EuiMarkdownDefaultProcessingPlugins,
+      parsingPluginList = defaultParsingPlugins,
+      processingPluginList = defaultProcessingPlugins,
       uiPlugins = [],
       onParse,
       errors = [],
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 4f942527cbc..087d6220370 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -20,8 +20,8 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import unified, { PluggableList } from 'unified';
 import {
-  EuiMarkdownDefaultProcessingPlugins,
-  EuiMarkdownDefaultParsingPlugins,
+  defaultProcessingPlugins,
+  defaultParsingPlugins,
 } from './plugins/markdown_default_plugins';
 
 interface EuiMarkdownFormatProps {
@@ -34,8 +34,8 @@ interface EuiMarkdownFormatProps {
 
 export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   children,
-  parsingPluginList = EuiMarkdownDefaultParsingPlugins,
-  processingPluginList = EuiMarkdownDefaultProcessingPlugins,
+  parsingPluginList = defaultParsingPlugins,
+  processingPluginList = defaultProcessingPlugins,
 }) => {
   const processor = useMemo(
     () =>
diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
index 174bfce7f31..b40559db667 100644
--- a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
+++ b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
@@ -29,7 +29,7 @@ import markdown from 'remark-parse';
 import highlight from 'remark-highlight.js';
 import emoji from 'remark-emoji';
 
-export const EuiMarkdownDefaultParsingPlugins: PluggableList = [
+export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [
   [markdown, {}],
   [highlight, {}],
   [emoji, { emoticon: true }],
@@ -37,7 +37,9 @@ export const EuiMarkdownDefaultParsingPlugins: PluggableList = [
   [MarkdownCheckbox.parser, {}],
 ];
 
-export const EuiMarkdownDefaultProcessingPlugins: PluggableList = [
+export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins();
+
+export const getDefaultEuiMarkdownProcessingPlugins = (): PluggableList => [
   [
     remark2rehype,
     {
@@ -67,3 +69,5 @@ export const EuiMarkdownDefaultProcessingPlugins: PluggableList = [
     },
   ],
 ];
+
+export const defaultProcessingPlugins = getDefaultEuiMarkdownProcessingPlugins();

From 252467b4810536182164ddf7fb8b032317da61a3 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 4 Aug 2020 10:28:56 -0600
Subject: [PATCH 39/43] Simplify the markdown editor's plugin API (#3843)

* Add a default remark->rehype node handler to simplify plugin development

* Update documentation
---
 .../markdown_editor_with_plugins.js              |  4 ----
 .../markdown_editor/markdown_plugin_example.js   | 14 +++++++-------
 .../plugins/markdown_checkbox.tsx                | 16 ++--------------
 .../plugins/markdown_default_plugins.tsx         | 12 ++++++++----
 .../markdown_editor/plugins/markdown_tooltip.tsx | 11 +----------
 5 files changed, 18 insertions(+), 39 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index 0666c82cd35..bfe66e8bd08 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -217,9 +217,6 @@ function ChartMarkdownParser() {
   methods.splice(methods.indexOf('text'), 0, 'chart');
 }
 
-const chartMarkdownHandler = (h, node) => {
-  return h(node.position, 'chartDemoPlugin', node, []);
-};
 const ChartMarkdownRenderer = ({ height = 200, palette = 5 }) => {
   const customColors = {
     colors: {
@@ -252,7 +249,6 @@ const exampleParsingList = getDefaultEuiMarkdownParsingPlugins();
 exampleParsingList.push(ChartMarkdownParser);
 
 const exampleProcessingList = getDefaultEuiMarkdownProcessingPlugins();
-exampleProcessingList[0][1].handlers.chartDemoPlugin = chartMarkdownHandler;
 exampleProcessingList[1][1].components.chartDemoPlugin = ChartMarkdownRenderer;
 
 const initialExample = `## Chart plugin
diff --git a/src-docs/src/views/markdown_editor/markdown_plugin_example.js b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
index 64b138d75c8..4cee83c387e 100644
--- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -309,7 +309,11 @@ function EmojiMarkdownParser() {
   // define the emoji plugin and inject it just before the existing text plugin
   tokenizers.emoji = tokenizeEmoji;
   methods.splice(methods.indexOf('text'), 0, 'emoji');
-}`}</EuiCodeBlock>
+}
+
+// add the parser for \`emojiPlugin\`
+const parsingList = getDefaultEuiMarkdownParsingPlugins();
+parsingList.push(EmojiMarkdownParser);`}</EuiCodeBlock>
       <EuiSpacer />
       <EuiHorizontalRule />
       <EuiTitle>
@@ -329,17 +333,13 @@ function EmojiMarkdownParser() {
       <EuiSpacer />
       <EuiCodeBlock size="s" language="javascript">{`// example plugin processor
 
-// convert remark nodes to rehype, basically a pass through 
-const emojiMarkdownHandler = (h, node) => {
-  return h(node.position, 'emojiPlugin', node, []);
-};
 // receives the configuration from the parser and renders
 const EmojiMarkdownRenderer = ({ emoji }) => {
   return <span>{emoji}</span>;
 };
 
-// add the handler & renderer for \`emojiPlugin\`
-processingList[0][1].handlers.emojiPlugin = emojiMarkdownHandler;
+// add the renderer for \`emojiPlugin\`
+const processingList = getDefaultEuiMarkdownProcessingPlugins();
 processingList[1][1].components.emojiPlugin = EmojiMarkdownRenderer;`}</EuiCodeBlock>
       <EuiSpacer size="xxl" />
     </Fragment>
diff --git a/src/components/markdown_editor/plugins/markdown_checkbox.tsx b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
index 9439d959fb0..057986e0a20 100644
--- a/src/components/markdown_editor/plugins/markdown_checkbox.tsx
+++ b/src/components/markdown_editor/plugins/markdown_checkbox.tsx
@@ -18,15 +18,10 @@
  */
 
 import React, { FunctionComponent, useContext } from 'react';
-import all from 'mdast-util-to-hast/lib/all';
 import { EuiCheckbox } from '../../form/checkbox';
 import { EuiMarkdownContext } from '../markdown_context';
 import { htmlIdGenerator } from '../../../services/accessibility';
-import {
-  EuiMarkdownAstNodePosition,
-  RemarkRehypeHandler,
-  RemarkTokenizer,
-} from '../markdown_types';
+import { EuiMarkdownAstNodePosition, RemarkTokenizer } from '../markdown_types';
 import { Plugin } from 'unified';
 
 interface CheckboxNodeDetails {
@@ -81,9 +76,6 @@ const CheckboxParser: Plugin = function CheckboxParser() {
   methods.splice(methods.indexOf('list'), 0, 'checkbox'); // Run it just before default `list` plugin to inject our own idea of checkboxes.
 };
 
-const checkboxMarkdownHandler: RemarkRehypeHandler = (h, node) => {
-  return h(node.position!, 'checkboxPlugin', node, all(h, node));
-};
 const CheckboxMarkdownRenderer: FunctionComponent<CheckboxNodeDetails & {
   position: EuiMarkdownAstNodePosition;
 }> = ({ position, lead, label, isChecked, children }) => {
@@ -100,8 +92,4 @@ const CheckboxMarkdownRenderer: FunctionComponent<CheckboxNodeDetails & {
   );
 };
 
-export {
-  CheckboxParser as parser,
-  checkboxMarkdownHandler as handler,
-  CheckboxMarkdownRenderer as renderer,
-};
+export { CheckboxParser as parser, CheckboxMarkdownRenderer as renderer };
diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
index b40559db667..4bd50b89651 100644
--- a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
+++ b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
@@ -28,6 +28,8 @@ import { EuiCodeBlock, EuiCode } from '../../code';
 import markdown from 'remark-parse';
 import highlight from 'remark-highlight.js';
 import emoji from 'remark-emoji';
+import { RemarkRehypeHandler } from '../markdown_types';
+import all from 'mdast-util-to-hast/lib/all';
 
 export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [
   [markdown, {}],
@@ -39,15 +41,17 @@ export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [
 
 export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins();
 
+const unknownHandler: RemarkRehypeHandler = (h, node) => {
+  return h(node.position!, node.type, node, all(h, node));
+};
+
 export const getDefaultEuiMarkdownProcessingPlugins = (): PluggableList => [
   [
     remark2rehype,
     {
       allowDangerousHtml: true,
-      handlers: {
-        tooltipPlugin: MarkdownTooltip.handler,
-        checkboxPlugin: MarkdownCheckbox.handler,
-      },
+      unknownHandler,
+      handlers: {}, // intentionally empty, allows plugins to extend if they need to
     },
   ],
   [
diff --git a/src/components/markdown_editor/plugins/markdown_tooltip.tsx b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
index 887bedfd579..6d315b107f8 100644
--- a/src/components/markdown_editor/plugins/markdown_tooltip.tsx
+++ b/src/components/markdown_editor/plugins/markdown_tooltip.tsx
@@ -18,12 +18,7 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import all from 'mdast-util-to-hast/lib/all';
-import {
-  EuiMarkdownAstNodePosition,
-  RemarkRehypeHandler,
-  RemarkTokenizer,
-} from '../markdown_types';
+import { EuiMarkdownAstNodePosition, RemarkTokenizer } from '../markdown_types';
 import { EuiToolTip } from '../../tool_tip';
 import { EuiIcon } from '../../icon';
 import { EuiCodeBlock } from '../../code';
@@ -137,9 +132,6 @@ const TooltipParser: Plugin = function TooltipParser() {
   methods.splice(methods.indexOf('text'), 0, 'tooltip');
 };
 
-const tooltipMarkdownHandler: RemarkRehypeHandler = (h, node) => {
-  return h(node.position!, 'tooltipPlugin', node, all(h, node));
-};
 const tooltipMarkdownRenderer: FunctionComponent<TooltipNodeDetails & {
   position: EuiMarkdownAstNodePosition;
 }> = ({ content, children }) => {
@@ -161,6 +153,5 @@ const tooltipMarkdownRenderer: FunctionComponent<TooltipNodeDetails & {
 export {
   tooltipPlugin as plugin,
   TooltipParser as parser,
-  tooltipMarkdownHandler as handler,
   tooltipMarkdownRenderer as renderer,
 };

From fb65ab3fa68aad08e8dd6ec8f31170f170febf8f Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 10 Aug 2020 10:54:13 -0600
Subject: [PATCH 40/43] Add license info around markdown tag processing;
 Support block-level tag insertions (#3867)

---
 .../views/markdown_editor/markdown_editor.js  |  5 ++-
 .../markdown_editor_with_plugins.js           |  4 +-
 .../markdown_plugin_example.js                |  2 +-
 .../markdown_editor/markdown_actions.ts       | 28 ++++++++++++
 .../markdown_editor/markdown_editor.tsx       | 43 ++++++++++++++++++-
 .../markdown_editor_drop_zone.tsx             | 10 +++--
 .../markdown_editor/markdown_types.ts         | 15 ++++++-
 7 files changed, 97 insertions(+), 10 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 25473f07f36..84ccfb263b0 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -27,7 +27,10 @@ const dropHandlers = [
       return new Promise(resolve => {
         setTimeout(() => {
           const url = URL.createObjectURL(item);
-          resolve(`![${item.name}](${url})`);
+          resolve({
+            text: `![${item.name}](${url})`,
+            config: { block: true },
+          });
         }, 1000);
       });
     },
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index bfe66e8bd08..6dfb8933f4a 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -140,7 +140,9 @@ const chartDemoPlugin = {
 
           <EuiButton
             onClick={() =>
-              onSave(`!{chart${JSON.stringify({ palette, height })}}`)
+              onSave(`!{chart${JSON.stringify({ palette, height })}}`, {
+                block: true,
+              })
             }
             fill>
             Save
diff --git a/src-docs/src/views/markdown_editor/markdown_plugin_example.js b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
index 4cee83c387e..7d843c6dabc 100644
--- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -109,7 +109,7 @@ const uiPluginConcepts = [
     ),
   },
   {
-    title: 'formatter',
+    title: 'formatting',
     description: (
       <span>
         If no <strong>editor</strong> is provided, this is an object defining
diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
index 2d522fa8ef2..73bc589e276 100644
--- a/src/components/markdown_editor/markdown_actions.ts
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -17,6 +17,31 @@
  * under the License.
  */
 
+// The text-formatting logic & code in this file come from
+// https://github.com/github/markdown-toolbar-element/blob/main/src/index.ts
+// under the following MIT license
+/*
+Copyright (c) 2017-2018 GitHub, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+
 import {
   EuiMarkdownEditorUiPlugin,
   EuiMarkdownFormatting,
@@ -143,6 +168,7 @@ class MarkdownActions {
   /**
    * Sets the default styling object and then superimposes the changes to make on top of
    * it. Calls the `styleSelectedText` helper function that does the heavy lifting.
+   * Adapted from https://github.com/github/markdown-toolbar-element/blob/main/src/index.ts
    *
    * @param {object} incomingStyle
    * @memberof MarkdownActions
@@ -239,6 +265,7 @@ function wordSelectionEnd(text: string, i: number, multiline: boolean): number {
 
 const MAX_TRIES = 10;
 const TRY_TIMEOUT = 10 /*ms*/;
+// modified from https://github.com/github/markdown-toolbar-element/blob/main/src/index.ts
 export function insertText(
   textarea: HTMLTextAreaElement,
   { text, selectionStart, selectionEnd }: SelectionRange
@@ -292,6 +319,7 @@ export function insertText(
   focusTextarea();
 }
 
+// from https://github.com/github/markdown-toolbar-element/blob/main/src/index.ts
 function styleSelectedText(
   textarea: HTMLTextAreaElement,
   styleArgs: StyleArgs
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 327384ac808..44c5c37f6e1 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -46,6 +46,7 @@ import {
   EuiMarkdownDropHandler,
   EuiMarkdownEditorUiPlugin,
   EuiMarkdownParseError,
+  EuiMarkdownStringTagConfig,
 } from './markdown_types';
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiModal } from '../modal';
@@ -114,6 +115,26 @@ interface EuiMarkdownEditorRef {
   replaceNode: ContextShape['replaceNode'];
 }
 
+function isNewLine(char: string | undefined): boolean {
+  if (char == null) return true;
+  return !!char.match(/[\r\n]/);
+}
+function padWithNewlinesIfNeeded(textarea: HTMLTextAreaElement, text: string) {
+  const selectionStart = textarea.selectionStart;
+  const selectionEnd = textarea.selectionEnd;
+
+  // block parsing requires two leading new lines and none trailing, but we add an extra trailing line for readability
+  const isPrevNewLine = isNewLine(textarea.value[selectionStart - 1]);
+  const isPrevPrevNewLine = isNewLine(textarea.value[selectionStart - 2]);
+  const isNextNewLine = isNewLine(textarea.value[selectionEnd]);
+
+  // pad text with newlines as needed
+  text = `${isPrevNewLine ? '' : '\n'}${isPrevPrevNewLine ? '' : '\n'}${text}${
+    isNextNewLine ? '' : '\n'
+  }`;
+  return text;
+}
+
 export const EuiMarkdownEditor = React.forwardRef<
   EuiMarkdownEditorRef,
   EuiMarkdownEditorProps
@@ -290,10 +311,18 @@ export const EuiMarkdownEditor = React.forwardRef<
           <div style={{ display: isPreviewing ? 'none' : 'block' }}>
             <EuiMarkdownEditorDropZone
               dropHandlers={dropHandlers}
-              insertText={(text: string) => {
+              insertText={(
+                text: string,
+                config: EuiMarkdownStringTagConfig
+              ) => {
+                if (config.block) {
+                  text = padWithNewlinesIfNeeded(textareaRef.current!, text);
+                }
+
                 const originalSelectionStart = textareaRef.current!
                   .selectionStart;
                 const newSelectionPoint = originalSelectionStart + text.length;
+
                 insertText(textareaRef.current!, {
                   text,
                   selectionStart: newSelectionPoint,
@@ -328,15 +357,25 @@ export const EuiMarkdownEditor = React.forwardRef<
                         ? selectedNode
                         : null,
                     onCancel: () => setPluginEditorPlugin(undefined),
-                    onSave: markdown => {
+                    onSave: (markdown, config) => {
                       if (
                         selectedNode &&
                         selectedNode.type === pluginEditorPlugin.name
                       ) {
+                        // modifying an existing node
                         textareaRef.current!.setSelectionRange(
                           selectedNode.position.start.offset,
                           selectedNode.position.end.offset
                         );
+                      } else {
+                        // creating a new node
+                        if (config.block) {
+                          // inject newlines if needed
+                          markdown = padWithNewlinesIfNeeded(
+                            textareaRef.current!,
+                            markdown
+                          );
+                        }
                       }
                       insertText(textareaRef.current!, {
                         text: markdown,
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index ecfd56eba51..1fe04cddd1a 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -25,13 +25,15 @@ import {
   EuiMarkdownEditorUiPlugin,
   EuiMarkdownParseError,
   EuiMarkdownDropHandler,
+  EuiMarkdownStringTagConfig,
+  EuiMarkdownDragAndDropResult,
 } from './markdown_types';
 
 interface EuiMarkdownEditorDropZoneProps {
   uiPlugins: EuiMarkdownEditorUiPlugin[];
   errors: EuiMarkdownParseError[];
   dropHandlers: EuiMarkdownDropHandler[];
-  insertText: (text: string) => void;
+  insertText: (text: string, config: EuiMarkdownStringTagConfig) => void;
   hasUnacceptedItems: boolean;
   setHasUnacceptedItems: (hasUnacceptedItems: boolean) => void;
 }
@@ -160,7 +162,9 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<EuiMarkdownEditorDropZ
 
       toggleUploadingFiles(true);
 
-      const resolved: Array<string | Promise<string>> = [];
+      const resolved: Array<
+        EuiMarkdownDragAndDropResult | Promise<EuiMarkdownDragAndDropResult>
+      > = [];
       for (let i = 0; i < acceptedFiles.length; i++) {
         const file = acceptedFiles[i];
         const handler = fileHandlers[i];
@@ -169,7 +173,7 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<EuiMarkdownEditorDropZ
 
       Promise.all(resolved)
         .then(results => {
-          results.forEach(result => insertText(result));
+          results.forEach(({ text, config }) => insertText(text, config));
         })
         .catch(() => {})
         .then(() => {
diff --git a/src/components/markdown_editor/markdown_types.ts b/src/components/markdown_editor/markdown_types.ts
index 32841b28153..3d3f6b9744b 100644
--- a/src/components/markdown_editor/markdown_types.ts
+++ b/src/components/markdown_editor/markdown_types.ts
@@ -58,7 +58,7 @@ export interface RemarkRehypeHandler {
 export interface EuiMarkdownEditorUiPluginEditorProps {
   node?: object | null;
   onCancel: () => void;
-  onSave: (markdown: string) => void;
+  onSave: (markdown: string, config: EuiMarkdownStringTagConfig) => void;
 }
 
 export const isPluginWithImmediateFormatting = (
@@ -115,5 +115,16 @@ export type EuiMarkdownParseError = string | VFileMessage | Error;
 export interface EuiMarkdownDropHandler {
   supportedFiles: string[];
   accepts: (itemType: string) => boolean;
-  getFormattingForItem: (file: File) => string | Promise<string>;
+  getFormattingForItem: (
+    file: File
+  ) => EuiMarkdownDragAndDropResult | Promise<EuiMarkdownDragAndDropResult>;
+}
+
+export interface EuiMarkdownStringTagConfig {
+  block: boolean;
+}
+
+export interface EuiMarkdownDragAndDropResult {
+  text: string;
+  config: EuiMarkdownStringTagConfig;
 }

From 004fb4adf4ba89308460a6dd502d687f65601513 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 11 Aug 2020 09:46:36 -0600
Subject: [PATCH 41/43] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e64c2a0a42a..4c423048415 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Update `createTheme` to apply latest changes to elastic charts `Theme`. ([#3792](https://github.com/elastic/eui/pull/3792))
 - Added icons for `appSearchApp` and `workplaceSearchApp` to `EuiIcon` ([#3859](https://github.com/elastic/eui/pull/3859))
 - Added `unlink` glyph to `EuiIcon` ([#3869](https://github.com/elastic/eui/pull/3869))
+- Added `EuiMarkdownEditor` and `EuiMarkdownFormat` components ([#3522](https://github.com/elastic/eui/pull/3522))
 
 **Bug fixes**
 

From dead4852f7cd768203d1d7ae4fe62dda18bde18a Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 12 Aug 2020 09:07:45 -0600
Subject: [PATCH 42/43] Improved, and proper, types for the markdown editor's
 usage in downstream apps (#3893)

---
 .../markdown_editor_with_plugins.js             |  6 ++++--
 src/components/markdown_editor/index.ts         |  1 +
 .../markdown_editor/markdown_editor.tsx         |  5 ++++-
 .../markdown_editor/markdown_types.ts           | 14 +++++++-------
 .../plugins/markdown_default_plugins.tsx        | 17 ++++++++++++++++-
 5 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index 6dfb8933f4a..37499b9728a 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -106,7 +106,9 @@ const chartDemoPlugin = {
                     { value: 5, text: 'green' },
                   ]}
                   value={palette}
-                  onChange={e => setPalette(parseInt(e.target.value, 10))}
+                  onChange={e =>
+                    setPalette(parseInt(e.currentTarget.value, 10))
+                  }
                 />
               </EuiFormRow>
 
@@ -118,7 +120,7 @@ const chartDemoPlugin = {
                   step={10}
                   showValue
                   valueAppend="px"
-                  onChange={e => setHeight(parseInt(e.target.value, 10))}
+                  onChange={e => setHeight(parseInt(e.currentTarget.value, 10))}
                 />
               </EuiFormRow>
             </EuiForm>
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
index 3815e909fcd..370949fbea9 100644
--- a/src/components/markdown_editor/index.ts
+++ b/src/components/markdown_editor/index.ts
@@ -31,4 +31,5 @@ export {
   EuiMarkdownFormatting,
   EuiMarkdownEditorUiPlugin,
   RemarkRehypeHandler,
+  RemarkTokenizer,
 } from './markdown_types';
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 44c5c37f6e1..2aef000312e 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -57,7 +57,10 @@ import {
   defaultProcessingPlugins,
 } from './plugins/markdown_default_plugins';
 
-type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
+type CommonMarkdownEditorProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> &
   CommonProps & {
     /** aria-label OR aria-labelledby must be set */
     'aria-label'?: string;
diff --git a/src/components/markdown_editor/markdown_types.ts b/src/components/markdown_editor/markdown_types.ts
index 3d3f6b9744b..d980341f854 100644
--- a/src/components/markdown_editor/markdown_types.ts
+++ b/src/components/markdown_editor/markdown_types.ts
@@ -55,14 +55,14 @@ export interface RemarkRehypeHandler {
   (h: RemarkRehypeHandlerCallback, node: UnistNode): RehypeNode;
 }
 
-export interface EuiMarkdownEditorUiPluginEditorProps {
-  node?: object | null;
+export interface EuiMarkdownEditorUiPluginEditorProps<NodeShape> {
+  node: NodeShape | null;
   onCancel: () => void;
   onSave: (markdown: string, config: EuiMarkdownStringTagConfig) => void;
 }
 
 export const isPluginWithImmediateFormatting = (
-  x: PluginWithImmediateFormatting | PluginWithDelayedFormatting
+  x: PluginWithImmediateFormatting | PluginWithDelayedFormatting<any>
 ): x is PluginWithImmediateFormatting => {
   return x.hasOwnProperty('formatting');
 };
@@ -72,19 +72,19 @@ export interface PluginWithImmediateFormatting {
   editor?: never;
 }
 
-export interface PluginWithDelayedFormatting {
+export interface PluginWithDelayedFormatting<NodeShape> {
   formatting?: never;
-  editor: ComponentType<EuiMarkdownEditorUiPluginEditorProps>;
+  editor: ComponentType<EuiMarkdownEditorUiPluginEditorProps<NodeShape>>;
 }
 
-export type EuiMarkdownEditorUiPlugin = {
+export type EuiMarkdownEditorUiPlugin<NodeShape = any> = {
   name: string;
   button: {
     label: string;
     iconType: IconType;
   };
   helpText?: ReactNode;
-} & (PluginWithImmediateFormatting | PluginWithDelayedFormatting);
+} & (PluginWithImmediateFormatting | PluginWithDelayedFormatting<NodeShape>);
 
 export interface EuiMarkdownFormatting {
   prefix?: string;
diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
index 4bd50b89651..5e593135514 100644
--- a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
+++ b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
@@ -45,7 +45,22 @@ const unknownHandler: RemarkRehypeHandler = (h, node) => {
   return h(node.position!, node.type, node, all(h, node));
 };
 
-export const getDefaultEuiMarkdownProcessingPlugins = (): PluggableList => [
+interface Remark2RehypeOptions {
+  allowDangerousHtml: boolean;
+  handlers: { [key: string]: RemarkRehypeHandler };
+  [key: string]: any;
+}
+
+interface Rehype2ReactOptions {
+  components: { [key: string]: React.ComponentType<any> };
+  [key: string]: any;
+}
+
+export const getDefaultEuiMarkdownProcessingPlugins = (): [
+  [typeof remark2rehype, Remark2RehypeOptions], // first is well known
+  [typeof rehype2react, Rehype2ReactOptions], // second is well known
+  ...PluggableList // any additional are generic
+] => [
   [
     remark2rehype,
     {

From d7c15bf4a842b3b16101fd31b4f49a89bf422292 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 12 Aug 2020 12:48:56 -0600
Subject: [PATCH 43/43] Fixes some ARIA issues in EuiMarkdownEditor (#3899)

* Support aria-describedby to link errors. Include file support message in upload button's aria-label

* Change markdown footer element to a div
---
 .../markdown_editor/markdown_editor_errors.js | 10 ++++-
 .../markdown_editor.test.tsx.snap             |  4 +-
 .../markdown_editor/markdown_editor.tsx       |  5 +++
 .../markdown_editor_footer.tsx                | 38 ++++++++++++-------
 4 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor_errors.js b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
index ef6c3546739..68c33fa1c45 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_errors.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 
 import { Link } from 'react-router-dom';
 
@@ -10,6 +10,8 @@ import {
   EuiFormErrorText,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 const initialContent = `## Errors
 
 The tooltip is empty and will error
@@ -18,6 +20,7 @@ The tooltip is empty and will error
 `;
 
 export default () => {
+  const errorElementId = useRef(htmlIdGenerator()());
   const [value, setValue] = useState(initialContent);
   const [messages, setMessages] = useState([]);
   const [ast, setAst] = useState(null);
@@ -30,6 +33,7 @@ export default () => {
     <>
       <EuiMarkdownEditor
         aria-label="EUI markdown editor demo"
+        aria-describedby={errorElementId.current}
         value={value}
         onChange={setValue}
         height={400}
@@ -38,7 +42,9 @@ export default () => {
       />
       <EuiSpacer size="s" />
 
-      <EuiFormErrorText id="error" className="euiFormRow__text">
+      <EuiFormErrorText
+        id={errorElementId.current}
+        className="euiFormRow__text">
         Utilize error text or{' '}
         <strong>
           <Link to="/forms/form-validation">EuiFormRow</Link>
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index ec271a031d0..fa8ec22d1a4 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -188,7 +188,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         rows="6"
         style="height:calc(116px"
       />
-      <footer
+      <div
         class="euiMarkdownEditorFooter"
       >
         <div
@@ -205,7 +205,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
             data-euiicon-type="MarkdownLogo"
           />
         </button>
-      </footer>
+      </div>
       <input
         autocomplete="off"
         multiple=""
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 2aef000312e..a2f22304e05 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -68,6 +68,9 @@ type CommonMarkdownEditorProps = Omit<
     /** aria-label OR aria-labelledby must be set */
     'aria-labelledby'?: string;
 
+    /** ID of an element describing the text editor, useful for associating error messages */
+    'aria-describedby'?: string;
+
     /** a unique ID to attach to the textarea. If one isn't provided, a random one
      * will be generated */
     editorId?: string;
@@ -156,6 +159,7 @@ export const EuiMarkdownEditor = React.forwardRef<
       errors = [],
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
       initialViewMode = MODE_EDITING,
       dropHandlers = [],
       ...rest
@@ -346,6 +350,7 @@ export const EuiMarkdownEditor = React.forwardRef<
                 {...{
                   'aria-label': ariaLabel,
                   'aria-labelledby': ariaLabelledBy,
+                  'aria-describedby': ariaDescribedBy,
                 }}
               />
             </EuiMarkdownEditorDropZone>
diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx
index f273a95c960..cf07c8df893 100644
--- a/src/components/markdown_editor/markdown_editor_footer.tsx
+++ b/src/components/markdown_editor/markdown_editor_footer.tsx
@@ -20,6 +20,7 @@
 import React, {
   FunctionComponent,
   useState,
+  useMemo,
   Fragment,
   ReactChild,
 } from 'react';
@@ -67,15 +68,33 @@ export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterP
 
   let uploadButton;
 
+  const supportedFileTypes = useMemo(
+    () =>
+      dropHandlers
+        .map(({ supportedFiles }) => supportedFiles.join(', '))
+        .sort()
+        .join(', '),
+    [dropHandlers]
+  );
+
   const ariaLabels = {
     uploadingFiles: useEuiI18n(
       'euiMarkdownEditorFooter.uploadingFiles',
-      'Uploading files'
+      'Click to upload files'
     ),
     openUploadModal: useEuiI18n(
       'euiMarkdownEditorFooter.openUploadModal',
       'Open upload files modal'
     ),
+    unsupportedFileType: useEuiI18n(
+      'euiMarkdownEditorFooter.unsupportedFileType',
+      'File type not supported'
+    ),
+    supportedFileTypes: useEuiI18n(
+      'euiMarkdownEditorFooter.supportedFileTypes',
+      'Supported files: {supportedFileTypes}',
+      { supportedFileTypes }
+    ),
     showSyntaxErrors: useEuiI18n(
       'euiMarkdownEditorFooter.showSyntaxErrors',
       'Show errors'
@@ -95,23 +114,16 @@ export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterP
     );
   } else if (dropHandlers.length > 0 && hasUnacceptedItems) {
     uploadButton = (
-      <EuiToolTip
-        content={`Supported files: ${dropHandlers
-          .map(({ supportedFiles }) => supportedFiles.join(', '))
-          .sort()
-          .join(', ')}`}>
+      <EuiToolTip content={ariaLabels.supportedFileTypes}>
         <EuiButtonEmpty
           className="euiMarkdownEditorFooter__uploadError"
           autoFocus
           size="xs"
           iconType="paperClip"
           color="danger"
-          aria-label={ariaLabels.openUploadModal}
+          aria-label={`${ariaLabels.unsupportedFileType}. ${ariaLabels.supportedFileTypes}. ${ariaLabels.uploadingFiles}`}
           onClick={openFiles}>
-          <EuiI18n
-            token="euiMarkdownEditorFooter.unsupportedFileType"
-            default="File type not supported"
-          />
+          {ariaLabels.unsupportedFileType}
         </EuiButtonEmpty>
       </EuiToolTip>
     );
@@ -159,7 +171,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterP
   }
 
   return (
-    <footer className="euiMarkdownEditorFooter">
+    <div className="euiMarkdownEditorFooter">
       <div className="euiMarkdownEditorFooter__actions">
         {uploadButton}
         {errorsButton}
@@ -230,6 +242,6 @@ export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterP
           </EuiModal>
         </EuiOverlayMask>
       )}
-    </footer>
+    </div>
   );
 };