[Feature Branch] EuiMarkdownEditor

.stylelintrc

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "number-leading-zero": "never",
+    "color-hex-case": "upper"
+  }
+}

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**
 

package.json

@@ -56,6 +56,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",
@@ -66,15 +67,25 @@
     "prop-types": "^15.6.0",
     "react-ace": "^7.0.5",
     "react-beautiful-dnd": "^13.0.0",
+    "react-dropzone": "^10.2.1",
     "react-focus-on": "^3.4.1",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
     "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",
+    "remark-emoji": "^2.1.0",
+    "remark-highlight.js": "^5.2.0",
+    "remark-parse": "^7.0.2",
+    "remark-rehype": "^7.0.0",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
     "text-diff": "^1.0.1",
-    "uuid": "^3.1.0"
+    "unified": "^8.4.2",
+    "uuid": "^3.1.0",
+    "vfile": "^4.1.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
@@ -174,6 +185,7 @@
     "postcss-loader": "^2.0.8",
     "pre-commit": "^1.2.2",
     "prettier": "^1.19.1",
+    "prettier-stylelint": "^0.4.2",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "puppeteer": "^2.0.0",
@@ -198,6 +210,7 @@
     "shelljs": "^0.8.1",
     "start-server-and-test": "^1.1.4",
     "style-loader": "^0.19.0",
+    "terser-webpack-plugin": "^2.3.5",
     "typescript": "3.7.2",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.0.1",

scripts/babel/fetch-i18n-strings.js

@@ -125,7 +125,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;

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];
 

src-docs/src/routes.js

@@ -133,6 +133,12 @@ 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 { 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';
@@ -377,7 +383,6 @@ const navigation = [
       BadgeExample,
       CallOutExample,
       CardExample,
-      CodeExample,
       CommentListExample,
       DescriptionListExample,
       DragAndDropExample,
@@ -407,7 +412,6 @@ const navigation = [
       SuperSelectExample,
       ComboBoxExample,
       ColorPickerExample,
-      CodeEditorExample,
       DatePickerExample,
       ExpressionExample,
       FilterGroupExample,
@@ -418,6 +422,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: [

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

@@ -0,0 +1,99 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../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',
+  beta: true,
+  isNew: true,
+  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: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownEditorSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownEditorHtml,
+        },
+      ],
+      title: 'Base editor',
+      text: (
+        <p>
+          The base editor can render basic markdown along with some built-in
+          plugins.
+        </p>
+      ),
+      props: {
+        EuiMarkdownEditor,
+      },
+      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 />,
+    },
+  ],
+};

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

@@ -0,0 +1,96 @@
+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',
+  beta: true,
+  isNew: true,
+  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 />,
+    },
+  ],
+};