+ EUI provides components to both edit and render markdown-like content
+ with dynamic previews. The components, built on top of the{' '}
+ Unified{' '}
+ framework, are extendible through an optional plugin layer that allows
+ for translating additional string syntax into React renders.
+
+ EuiMarkdownFormat is a wrapper that will render
+ Markdown provided. EuiMarkdownFormat uses{' '}
+ Remark by
+ default, though you could replace it with your own processor if you
+ are feeling adventurous.
+
- This component renders a markdown editor, including buttons for
- quickly inserting common markdown elements and a preview mode.
+ EuiMarkdownEditor provides a markdown authoring
+ experience for the user. This component consists of a toolbar, text
+ area, and optionally a drag-and-drop zone to accept files. It can be
+ toggled by the user between editing and preview modes
- EuiMarkdownFormat is a wrapper that will render
- Markdown provided. EuiMarkdownFormat uses{' '}
- Remark by
- default, though you could replace it with your own processor if you
- are feeling adventurous.
-
+ EUI provides components to both edit and render markdown-like content
+ with dynamic previews. The components, built on top of the{' '}
+ Unified{' '}
+ framework, are extendible through an optional plugin layer that allows
+ for translating additional string syntax into React renders.
+
+ EuiMarkdownFormat is a wrapper that will render
+ Markdown provided. EuiMarkdownFormat uses{' '}
+ Remark by
+ default. The translation layer automatically substitutes raw HTML
+ output with their EUI equivilant. This means anchor and code blocks
+ will become EuiLink and EuiCodeBlock{' '}
+ components respectively).
+
- EUI provides components to both edit and render markdown-like content
- with dynamic previews. The components, built on top of the{' '}
- Unified{' '}
- framework, are extendible through an optional plugin layer that allows
- for translating additional string syntax into React renders.
+ EuiMarkdownFormat is a read-only way to render
+ markdown-style content in a page. It is a peer component to{' '}
+
+ EuiMarkdownEditor
+ {' '}
+ and has the ability to be modified by additional{' '}
+ markdown plugins.
EuiMarkdownFormat is a wrapper that will render
@@ -53,7 +59,7 @@ export const MarkdownFormatExample = {
default. The translation layer automatically substitutes raw HTML
output with their EUI equivilant. This means anchor and code blocks
will become EuiLink and EuiCodeBlock{' '}
- components respectively).
+ components respectively.
+ This example shows of all the styling and markup possibilities. It is
+ mostly used for testing.
+
+ ),
+ props: {
+ EuiMarkdownFormat,
+ },
+ demo: ,
+ },
],
};
diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
new file mode 100644
index 00000000000..9cb5d06af7f
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -0,0 +1,150 @@
+import React from 'react';
+
+import { EuiMarkdownFormat } from '../../../../src';
+
+const markdownContent = `# 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
+
+* Item 1
+* Item 2
+ * Item 2a
+ * Item 2b
+
+Ordered
+
+1. Item 1
+1. Item 2
+1. Item 3
+ 1. Item 3a
+ 1. Item 3b
+
+
+## Task Lists
+
+- [x] Create a new project
+- [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
+
+Inline \`\` is awesome!
+
+Block code "fences"
+
+\`\`\`
+Sample text here...
+\`\`\`
+
+Syntax highlighting JS
+
+\`\`\` js
+var foo = function (bar) {
+ return bar++;
+};
+
+console.log(foo(5));
+\`\`\`
+
+Syntax highlighting Java
+
+\`\`\` 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 |
+| ------ | ----------- |
+| 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
+
+![Kibana](https://user-images.githubusercontent.com/2750668/74490344-2f271800-4ec0-11ea-8614-8651cd47eab1.png)
+
+
+### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+> Classic markup: :wink: :cry: :laughing: :yum:
+`;
+
+export default () => {
+ return {markdownContent};
+};
From bcbe6a401d184502a3ea4e27cd78f25194794d53 Mon Sep 17 00:00:00 2001
From: Dave Snider
Date: Sat, 4 Jul 2020 10:16:23 -0700
Subject: [PATCH 05/17] add editor errors example, skeleton for plugins
---
src-docs/src/routes.js | 5 +-
.../markdown_editor/mardown_editor_example.js | 68 ++++++++++++++----
.../views/markdown_editor/markdown_editor.js | 15 +++-
.../markdown_editor/markdown_editor_errors.js | 63 ++++++++++++++++
.../markdown_editor_with_plugins.js | 2 +-
.../markdown_plugin_example.js | 71 +++++++++++++++++++
6 files changed, 205 insertions(+), 19 deletions(-)
create mode 100644 src-docs/src/views/markdown_editor/markdown_editor_errors.js
create mode 100644 src-docs/src/views/markdown_editor/markdown_plugin_example.js
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 764f78b8a66..c7e8c151591 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -145,6 +145,8 @@ import { MarkdownEditorExample } from './views/markdown_editor/mardown_editor_ex
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';
@@ -419,8 +421,9 @@ const navigation = [
{
name: 'Editors & syntax',
items: [
- MarkdownEditorExample,
MarkdownFormatExample,
+ MarkdownEditorExample,
+ MarkdownPluginExample,
CodeEditorExample,
CodeExample,
].map(example => createExample(example)),
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 badc13acacd..86118ee514d 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -6,9 +6,9 @@ import { GuideSectionTypes } from '../../components';
import {
EuiMarkdownEditor,
- EuiMarkdownFormat,
EuiText,
EuiSpacer,
+ EuiCode,
} from '../../../../src/components';
import { Link } from 'react-router-dom';
@@ -21,17 +21,26 @@ import MarkdownEditorWithPlugins from './markdown_editor_with_plugins';
const markdownEditorWithPluginsSource = require('!!raw-loader!./markdown_editor_with_plugins');
const markdownEditorWithPluginsHtml = renderToHtml(MarkdownEditorWithPlugins);
+import MarkdownEditorErrors from './markdown_editor_errors';
+const markdownEditorErrorsSource = require('!!raw-loader!./markdown_editor_errors');
+const markdownEditorErrorsHtml = renderToHtml(MarkdownEditorErrors);
+
export const MarkdownEditorExample = {
title: 'Markdown editor',
intro: (
- EUI provides components to both edit and render markdown-like content
- with dynamic previews. The components, built on top of the{' '}
- Unified{' '}
- framework, are extendible through an optional plugin layer that allows
- for translating additional string syntax into React renders.
+ EuiMarkdownEditor 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. There are two modes: a
+ textarea that keeps track of cursor position, and a rendered preview
+ mode that is powered by{' '}
+
+ EuiMarkdownFormat
+
+ . State is maintained between the two and it is possible to pass
+ changes from the preview area to the text area and vice versa.
- EuiMarkdownEditor provides a markdown authoring
- experience for the user. This component consists of a toolbar, text
- area, and optionally a drag-and-drop zone to accept files. It can be
- toggled by the user between editing and preview modes
+ The base editor can render basic markdown along with some built-in
+ plugins.
+ The errors prop allows you to pass an array of
+ errors if syntax is malformed. Below the tooltip plugin is able to
+ provide this message by default. These errors are meant to be
+ emphemeral and part of the editing experience. They should not be a
+ substitute for{' '}
+ form validation.
+
- Both EuiMarkdownEditor and{' '}
- EuiMarkdownFormat can utilize additional plugins to a
- syntax to react render pipeline.
+ EuiMarkdownEditor can extend its functionality with
+ additional plugins. These allow you to add additional toolbar items,
+ syntax and rendering abilities. For a more technical overview check
+ out the{' '}
+
+ plugin documentation
+
+ . The below example shows how to embed charts that can be added
+ through a modal GUI and then modified afterwards through syntax.
),
props: {
diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 5b19d27c06a..c2398c2328f 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -5,12 +5,21 @@ import {
EuiSpacer,
EuiCodeBlock,
EuiButtonToggle,
-} from '../../../../src';
+} from '../../../../src/components';
-const markdownExample = require('!!raw-loader!./markdown-example.md');
+const initialContent = `## Hello world!
+
+Basic "github flavored" markdown will work as you'd expect.
+
+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);
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 (
+ <>
+
+
+
+
+ Utilize error text or{' '}
+
+ EuiFormRow
+ {' '}
+ for more permanent error feedback
+
+
+
+
+ {isAstShowing && {ast}}
+ >
+ );
+};
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 a8e9789c734..f23fd49cf56 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
@@ -28,7 +28,7 @@ import {
EuiSelect,
EuiRange,
EuiText,
-} from '../../../../src';
+} from '../../../../src/components';
import {
euiPaletteColorBlind,
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..0cd938991cc
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -0,0 +1,71 @@
+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 MarkdownPluginExample = {
+ title: 'Markdown plugins',
+ intro: (
+
+
+
+ EuiMarkdownFormat is a read-only way to render
+ markdown-style content in a page. It is a peer component to{' '}
+
+ EuiMarkdownEditor
+ {' '}
+ and has the ability to be modified by additional{' '}
+ markdown plugins.
+
+ EuiMarkdownFormat is a wrapper that will render
+ Markdown provided. EuiMarkdownFormat uses{' '}
+ Remark by
+ default. The translation layer automatically substitutes raw HTML
+ output with their EUI equivilant. This means anchor and code blocks
+ will become EuiLink and EuiCodeBlock{' '}
+ components respectively.
+
+ ),
+ props: {
+ EuiMarkdownFormat,
+ },
+ demo: ,
+ },
+ ],
+};
From 1eb2ebf73f30800be48f2c5b1c31887513d24046 Mon Sep 17 00:00:00 2001
From: Dave Snider
Date: Sat, 4 Jul 2020 12:36:47 -0700
Subject: [PATCH 06/17] basic intro fo plugin page, needs more content and an
example still
---
.../markdown_plugin_example.js | 144 +++++++++++++++---
1 file changed, 127 insertions(+), 17 deletions(-)
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 0cd938991cc..cc8aaf9271a 100644
--- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -8,6 +8,7 @@ import {
EuiMarkdownFormat,
EuiText,
EuiSpacer,
+ EuiDescriptionList,
} from '../../../../src/components';
import { Link } from 'react-router-dom';
@@ -16,9 +17,88 @@ 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);
+const pluginConcepts = [
+ {
+ title: 'uiPlugin',
+ description: (
+
+ Provides the UI for the button in the toolbar as well
+ as any modals or extra UI that provides content to the editor.
+
+ ),
+ },
+ {
+ title: 'parsingPlugin',
+ description: (
+
+ Provides the logic to identify the new syntax and parse it into an{' '}
+ AST node.
+
+ ),
+ },
+ {
+ title: 'processingPlugin',
+ description: (
+
+ Provides the logic to process the new AST node into a{' '}
+ React node.
+
+ ),
+ },
+];
+
+const uiPluginConcepts = [
+ {
+ title: 'name',
+ description: (
+
+ The name of your plugin. Use the button.label 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.
+
+ ),
+ },
+ {
+ title: 'button',
+ description: (
+
+ Takes a label and an icon type. This
+ forms the button that appear in the toolbar. Clicking the button will
+ trigger either the editor or formatter
+ .
+
+ ),
+ },
+ {
+ title: 'editor',
+ description: (
+
+ Provides UI controls (like an interactive modal) for how to build the
+ inital content. Must exist if formatting does not.
+
+ ),
+ },
+ {
+ title: 'formatter',
+ description: (
+
+ If no editor is provided, a React component can be
+ providing to handle formatting.
+
+ ),
+ },
+ {
+ title: 'helpText',
+ description: (
+
+ 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.
+
+ ),
+ },
+];
export const MarkdownPluginExample = {
title: 'Markdown plugins',
@@ -26,13 +106,31 @@ export const MarkdownPluginExample = {
- EuiMarkdownFormat is a read-only way to render
- markdown-style content in a page. It is a peer component to{' '}
+ Both{' '}
EuiMarkdownEditor
{' '}
- and has the ability to be modified by additional{' '}
- markdown plugins.
+ and{' '}
+
+ EuiMarkdownFormat
+ {' '}
+ utilize the same underlying plugin architecture to transform string
+ based syntax into React components. At a high level{' '}
+ Unified JS is used in comination with{' '}
+ Remark to provide EUI's markdown components,
+ which are separated into a parsing and{' '}
+ processing 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 UI to the component to handle interactions
+ with the editor.
+
+
+ In addition to running the full pipeline,{' '}
+ EuiMarkdownEditor uses just the parsing configuration
+ to determine the input's validity, provide messages back to the
+ application, and allow the toolbar buttons to interact with existing
+ markdown tags.
- EuiMarkdownFormat is a wrapper that will render
- Markdown provided. EuiMarkdownFormat uses{' '}
- Remark by
- default. The translation layer automatically substitutes raw HTML
- output with their EUI equivilant. This means anchor and code blocks
- will become EuiLink and EuiCodeBlock{' '}
- components respectively.
-
+
+
+ An EuiMarkdown plugin is comprised of three major
+ pieces, which are passed searpately into the editor component.
+
- EuiMarkdownEditor can extend its functionality with
- additional plugins. These allow you to add additional toolbar items,
- syntax and rendering abilities. For a more technical overview check
- out the{' '}
-
- plugin documentation
-
- . The below example shows how to embed charts that can be added
- through a modal GUI and then modified afterwards through syntax.
-
- ),
- props: {
- EuiMarkdownEditor,
- },
- demo: ,
- },
],
};
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 f23fd49cf56..323764554ac 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
@@ -251,7 +251,7 @@ 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.
+Once you finish it'll add some syntax that looks like the below.
!{chart{"palette":4,"height":300}}
`;
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 cc8aaf9271a..03a62a3cf43 100644
--- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -5,17 +5,38 @@ import { renderToHtml } from '../../services';
import { GuideSectionTypes } from '../../components';
import {
- EuiMarkdownFormat,
+ EuiMarkdownEditor,
EuiText,
+ EuiTitle,
EuiSpacer,
EuiDescriptionList,
+ EuiHorizontalRule,
+ EuiCodeBlock,
+ EuiCode,
} 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 MarkdownEditorWithPlugins from './markdown_editor_with_plugins';
+const markdownEditorWithPluginsSource = require('!!raw-loader!./markdown_editor_with_plugins');
+const markdownEditorWithPluginsHtml = renderToHtml(MarkdownEditorWithPlugins);
+
+const pluginSnippet = ``;
+
+const uiPluginSnippet = `const myPluginUI = {
+ name: 'myPlugin',
+ button: {
+ label: 'Chart',
+ iconType: 'visArea',
+ },
+ helpText: (),
+ editor: function editor({ node, onSave, onCancel }) { return ('something'); },
+}; `;
const pluginConcepts = [
{
@@ -133,6 +154,114 @@ export const MarkdownPluginExample = {
markdown tags.
+
+
+
Plugin development
+
+
+
+
+ An EuiMarkdown plugin is comprised of three major
+ pieces, which are passed searpately into the editor component.
+
+
+
+
+ {pluginSnippet}
+
+
+
+
+
+
+
uiPlugin
+
+
+
+ {uiPluginSnippet}
+
+
+
+
+
+
+
parsingPlugin
+
+
+
+
+
+
+ Remark-parse
+ {' '}
+ is used to parse the input text into markdown AST nodes. Its
+ documentation for{' '}
+
+ writing parsers
+ {' '}
+ is under the Extending the Parser section, but highlights are
+ included below.
+
+
+
+ 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.
+
+
+
+ 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.
+
+
+
Inline vs block
+
+ Inline tags are allowed at any point in text, and will be rendered
+ somewhere within a {'
'}
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.
+
+
+
+ Block tags are rendered inside {''}{' '}
+ elements, and do not have a locate method. They can consume as much
+ input text as desired, across multiple lines.
+
+
+
+
+
+
+ Chandler, a simple parser example here maybe?
+
+
+
+
+
- An EuiMarkdown plugin is comprised of three major
- pieces, which are passed searpately into the editor component.
-
-
-
uiPlugin
-
-
+
+ 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.
+
),
props: {
- EuiMarkdownFormat,
+ EuiMarkdownEditor,
},
- demo: ,
+ demo: ,
},
],
};
From c179da5379fdac9c944fba4d18bf96661b621406 Mon Sep 17 00:00:00 2001
From: Dave Snider
Date: Sat, 4 Jul 2020 18:46:31 -0700
Subject: [PATCH 08/17] rework markdownformat so that it can utilize the same
plugin layer as the editor
---
.../markdown_editor/mardown_format_example.js | 2 +-
.../markdown_editor_with_plugins.js | 7 ++++++
.../markdown_plugin_example.js | 23 +++++++++++++------
.../markdown_editor/markdown_editor.tsx | 12 +++-------
.../markdown_editor/markdown_format.tsx | 20 ++++++++--------
5 files changed, 38 insertions(+), 26 deletions(-)
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 de0116eafd8..352d45e844b 100644
--- a/src-docs/src/views/markdown_editor/mardown_format_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_format_example.js
@@ -32,7 +32,7 @@ export const MarkdownFormatExample = {
EuiMarkdownEditor
{' '}
and has the ability to be modified by additional{' '}
- markdown plugins.
+ markdown plugins.
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 323764554ac..4f01e279cda 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
@@ -14,6 +14,7 @@ import {
EuiMarkdownDefaultParsingPlugins,
EuiMarkdownDefaultProcessingPlugins,
EuiMarkdownEditor,
+ EuiMarkdownFormat,
EuiSpacer,
EuiCodeBlock,
EuiButtonToggle,
@@ -290,6 +291,12 @@ export default () => {
/>
{isAstShowing && {ast}}
+
+
+ {value}
+
>
);
};
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 03a62a3cf43..55e8d909f97 100644
--- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -24,7 +24,7 @@ const markdownEditorWithPluginsHtml = renderToHtml(MarkdownEditorWithPlugins);
const pluginSnippet = ``;
@@ -58,7 +58,7 @@ const pluginConcepts = [
),
},
{
- title: 'processingPlugin',
+ title: 'processingPluginList',
description: (
Provides the logic to process the new AST node into a{' '}
@@ -252,7 +252,7 @@ export const MarkdownPluginExample = {
-
processingPlugin
+
processingPluginList
@@ -279,10 +279,19 @@ export const MarkdownPluginExample = {
],
title: 'Putting it all together: a simple chart plugin',
text: (
-
- 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.
-
+
+
+ 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.
+
+
+ Note that the EuiMarkdownEditor and{' '}
+ EuiMarkdownFormat examples utilize the same prop
+ list. The editor manages additional controls through the{' '}
+ uiPlugins prop.
+
),
editor: function editor({ node, onSave, onCancel }) { return ('something'); },
}; `;
@@ -49,7 +56,7 @@ const pluginConcepts = [
),
},
{
- title: 'parsingPlugin',
+ title: 'parsingPluginList',
description: (
Provides the logic to identify the new syntax and parse it into an{' '}
@@ -162,7 +169,7 @@ export const MarkdownPluginExample = {
An EuiMarkdown plugin is comprised of three major
- pieces, which are passed searpately into the editor component.
+ pieces, which are passed searpately as props.
-
+
Remark-parse
- {' '}
+ {' '}
is used to parse the input text into markdown AST nodes. Its
documentation for{' '}
-
+
writing parsers
- {' '}
+ {' '}
is under the Extending the Parser section, but highlights are
included below.
From 5b070228618ebb800108e5e64a73c6fad717831b Mon Sep 17 00:00:00 2001
From: Dave Snider
Date: Wed, 22 Jul 2020 12:34:36 -0700
Subject: [PATCH 10/17] Update
src-docs/src/views/markdown_editor/mardown_editor_example.js
Co-authored-by: Chandler Prall
---
src-docs/src/views/markdown_editor/mardown_editor_example.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
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 69017d2e1d1..ae1efbde86d 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -83,7 +83,7 @@ export const MarkdownEditorExample = {
The errors prop allows you to pass an array of
errors if syntax is malformed. Below the tooltip plugin is able to
provide this message by default. These errors are meant to be
- emphemeral and part of the editing experience. They should not be a
+ ephemeral and part of the editing experience. They should not be a
substitute for{' '}
form validation.
From 34cf801b9b7780a80d795cc150d3164fe19d6869 Mon Sep 17 00:00:00 2001
From: Dave Snider
Date: Wed, 22 Jul 2020 12:34:59 -0700
Subject: [PATCH 11/17] Update
src-docs/src/views/markdown_editor/markdown_plugin_example.js
Co-authored-by: Chandler Prall
---
src-docs/src/views/markdown_editor/markdown_plugin_example.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
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 03ead7d7df4..c366ffab81a 100644
--- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -144,7 +144,7 @@ export const MarkdownPluginExample = {
{' '}
utilize the same underlying plugin architecture to transform string
based syntax into React components. At a high level{' '}
- Unified JS is used in comination with{' '}
+ Unified JS is used in combination with{' '}
Remark to provide EUI's markdown components,
which are separated into a parsing and{' '}
processing layer. These two concepts are kept
From f761d6fca402d1a04507f2bd8b2ec6201a249765 Mon Sep 17 00:00:00 2001
From: Dave Snider
Date: Wed, 22 Jul 2020 12:35:34 -0700
Subject: [PATCH 12/17] Update
src-docs/src/views/markdown_editor/mardown_editor_example.js
Co-authored-by: Chandler Prall
---
src-docs/src/views/markdown_editor/mardown_editor_example.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
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 ae1efbde86d..ae001b049bd 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -36,7 +36,7 @@ export const MarkdownEditorExample = {
EuiMarkdownFormat
. State is maintained between the two and it is possible to pass
- changes from the preview area to the text area and vice versa.
+ changes from the preview area to the textarea and vice versa.
From bc908bcf3d762509858eabc021b4a2efc7428f74 Mon Sep 17 00:00:00 2001
From: Dave Snider
Date: Sun, 26 Jul 2020 19:14:30 -0700
Subject: [PATCH 13/17] feedback
---
.../markdown_editor/mardown_editor_example.js | 14 +++++++-------
.../markdown_editor_with_plugins.js | 11 ++++++++++-
.../markdown_editor/markdown_plugin_example.js | 4 ++--
src/components/markdown_editor/index.ts | 2 +-
.../markdown_editor/markdown_editor.tsx | 3 +--
.../markdown_editor/markdown_format.tsx | 16 ++++++++++------
.../{ => plugins}/markdown_default_plugins.tsx | 11 ++++-------
7 files changed, 35 insertions(+), 26 deletions(-)
rename src/components/markdown_editor/{ => plugins}/markdown_default_plugins.tsx (88%)
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 ae001b049bd..02656a92af1 100644
--- a/src-docs/src/views/markdown_editor/mardown_editor_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js
@@ -29,9 +29,9 @@ export const MarkdownEditorExample = {
EuiMarkdownEditor 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. There are two modes: a
- textarea that keeps track of cursor position, and a rendered preview
- mode that is powered by{' '}
+ 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{' '}
EuiMarkdownFormat
@@ -81,10 +81,10 @@ export const MarkdownEditorExample = {
text: (
The errors prop allows you to pass an array of
- errors if syntax is malformed. Below the tooltip plugin is able to
- provide this message by default. These errors are meant to be
- ephemeral and part of the editing experience. They should not be a
- substitute for{' '}
+ 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{' '}
form validation.
+ 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{' '}
+ eat call.
+
-
- Chandler, a simple processingPluginList example
-
+ {`// 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 {emoji};
+};
+
+// add the handler & renderer for \`emojiPlugin\`
+processingList[0][1].handlers.emojiPlugin = emojiMarkdownHandler;
+processingList[1][1].components.emojiPlugin = EmojiMarkdownRenderer;`}
),
From 160b852cf69c3001c928ef16a73e05b98e16528c Mon Sep 17 00:00:00 2001
From: Chandler Prall
Date: Tue, 28 Jul 2020 11:01:13 -0600
Subject: [PATCH 17/17] Clean up accessibility issues
---
scripts/a11y-testing.js | 2 -
.../views/markdown_editor/markdown-example.md | 141 ------------------
.../markdown_plugin_example.js | 2 +-
.../plugins/markdown_checkbox.tsx | 4 +-
4 files changed, 3 insertions(+), 146 deletions(-)
delete mode 100644 src-docs/src/views/markdown_editor/markdown-example.md
diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js
index dc02dc645ca..39c9f5378b1 100644
--- a/scripts/a11y-testing.js
+++ b/scripts/a11y-testing.js
@@ -40,8 +40,6 @@ const docsPages = async (root, page) => {
`${root}#/forms/date-picker`,
`${root}#/forms/suggest`,
`${root}#/forms/super-date-picker`,
- `${root}#/editors-syntax/markdown-format`,
- `${root}#/editors-syntax/markdown-plugins`,
`${root}#/elastic-charts/creating-charts`,
`${root}#/elastic-charts/part-to-whole-comparisons`,
`${root}#/utilities/css-utility-classes`,
diff --git a/src-docs/src/views/markdown_editor/markdown-example.md b/src-docs/src/views/markdown_editor/markdown-example.md
deleted file mode 100644
index 56f9fbdd166..00000000000
--- a/src-docs/src/views/markdown_editor/markdown-example.md
+++ /dev/null
@@ -1,141 +0,0 @@
-# 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
-
-* Item 1
-* Item 2
- * Item 2a
- * Item 2b
-
-Ordered
-
-1. Item 1
-1. Item 2
-1. Item 3
- 1. Item 3a
- 1. Item 3b
-
-
-## Task Lists
-
-- [x] Create a new project
-- [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
-
-Inline `` is awesome!
-
-Block code "fences"
-
-```
-Sample text here...
-```
-
-Syntax highlighting JS
-
-``` js
-var foo = function (bar) {
- return bar++;
-};
-
-console.log(foo(5));
-```
-
-Syntax highlighting Java
-
-``` 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 |
-| ------ | ----------- |
-| 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
-
-![Kibana](https://user-images.githubusercontent.com/2750668/74490344-2f271800-4ec0-11ea-8614-8651cd47eab1.png)
-
-
-### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
-
-> Classic markup: :wink: :cry: :laughing: :yum:
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 0eae03692fd..627c34d78a3 100644
--- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -171,7 +171,7 @@ export const MarkdownPluginExample = {
-
Plugin development
+
Plugin development
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) {