[EuiMarkdownEditor] Added popover to display help syntax text when no custom plugins are available

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Fixed the `title` prop `EuiButtonGroup` to automatically display the `label` provided ([#5199](https://github.com/elastic/eui/pull/5199))
 - Updated `barSeriesStyle.displayValue` of the elastic-charts `Theme` for better default styles ([#4845](https://github.com/elastic/eui/pull/4845))
+- Added a configuration parameter to the `EuiMarkdownEditor` plugin functions to exclude custom plugins ([#5147](https://github.com/elastic/eui/pull/5147))
 - Added `auto` as value for `defaultHeight` in prop `rowHeightsOptions` in `EuiDataGrid` that allows to content auto-fit to row ([#4958](https://github.com/elastic/eui/pull/4958))
 - Updated `titleProps` and `descriptionProps` on `EuiDescriptionList` to extend `CommonProps` ([#5166](https://github.com/elastic/eui/pull/5166))
 - Added the ability to return `visibleOptions` from `EuiSelectable` by using `onSearch` ([#5178](https://github.com/elastic/eui/pull/5178))
@@ -10,6 +11,7 @@
 
 - Fixed `EuiDataGrid` focus ring to be contained in the cell ([#5194](https://github.com/elastic/eui/pull/5194))
 - Fixed `EuiDataGrid` cells when focused getting a higher `z-index` which was causing long content to overlap surrounding cells ([#5194](https://github.com/elastic/eui/pull/5194))
+- Replaced the `EuiMarkdownEditor` help syntax modal with a popover when no custom plugins are available ([#5147](https://github.com/elastic/eui/pull/5147))
 - Fixed multiple components unnecessarily rerendering generated IDs on every update ([#5195](https://github.com/elastic/eui/pull/5195), [#5196](https://github.com/elastic/eui/pull/5196), [#5197](https://github.com/elastic/eui/pull/5197), [#5200](https://github.com/elastic/eui/pull/#5200), [#5201](https://github.com/elastic/eui/pull/#5201))
 
 **Theme: Amsterdam**

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

@@ -1,28 +1,21 @@
 import React, { Fragment } from 'react';
-
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
-
 import {
   EuiMarkdownEditor,
   EuiText,
   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);
 const markdownEditorSnippet = `<EuiMarkdownEditor
   value={value}
   onChange={setValue}
 />`;
 
 import MarkdownEditorErrors from './markdown_editor_errors';
 const markdownEditorErrorsSource = require('!!raw-loader!./markdown_editor_errors');
-const markdownEditorErrorsHtml = renderToHtml(MarkdownEditorErrors);
 const markdownEditorErrorsSnippet = `<EuiMarkdownEditor
   value={value}
   onChange={setValue}
@@ -32,7 +25,6 @@ const markdownEditorErrorsSnippet = `<EuiMarkdownEditor
 
 import MarkdownEditorHeight from './markdown_editor_height';
 const markdownEditorHeightSource = require('!!raw-loader!./markdown_editor_height');
-const markdownEditorHeightHtml = renderToHtml(MarkdownEditorHeight);
 const markdownEditorHeightSnippet = [
   `// Custom height with auto-expanding preview
 <EuiMarkdownEditor
@@ -62,6 +54,23 @@ const markdownEditorHeightSnippet = [
 />`,
 ];
 
+import MarkdownEditorNoPlugins from './markdown_editor_no_plugins';
+const markdownEditorNoPluginsSource = require('!!raw-loader!./markdown_editor_no_plugins');
+const markdownEditorNoPluginsSnippet = `const {
+  parsingPlugins,
+  processingPlugins,
+  uiPlugins,
+} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
+
+  <EuiMarkdownEditor
+    value={value}
+    onChange={setValue}
+    parsingPluginList={parsingPlugins}
+    processingPluginList={processingPlugins}
+    uiPlugins={uiPlugins}
+  />
+`;
+
 export const MarkdownEditorExample = {
   title: 'Markdown editor',
   beta: true,
@@ -90,10 +99,6 @@ export const MarkdownEditorExample = {
           type: GuideSectionTypes.JS,
           code: markdownEditorSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: markdownEditorHtml,
-        },
       ],
       title: 'Base editor',
       text: (
@@ -112,11 +117,36 @@ export const MarkdownEditorExample = {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: markdownEditorErrorsSource,
+          code: markdownEditorNoPluginsSource,
         },
+      ],
+      title: 'Unregistering plugins',
+      text: (
+        <p>
+          The <strong>EuiMarkdownEditor</strong> comes with a default plugin for{' '}
+          <EuiCode>tooltip</EuiCode> support. However, this may be unfamiliar or
+          unnecessary in some contexts, and you can unregister this plugin by
+          excluding it from the
+          <EuiCode>parsingPlugins</EuiCode>,{' '}
+          <EuiCode>processingPlugins</EuiCode> and <EuiCode>uiPlugins</EuiCode>{' '}
+          options with a single <EuiCode>exclude</EuiCode> parameter passed to{' '}
+          <EuiCode>getDefaultEuiMarkdownPlugins()</EuiCode>. This will ensure
+          the syntax won&apos;t be identified or rendered and no additional UI,
+          like the button and help syntax, will be displayed.
+        </p>
+      ),
+      props: {
+        EuiMarkdownEditor,
+      },
+      snippet: markdownEditorNoPluginsSnippet,
+      demo: <MarkdownEditorNoPlugins />,
+    },
+
+    {
+      source: [
         {
-          type: GuideSectionTypes.HTML,
-          code: markdownEditorErrorsHtml,
+          type: GuideSectionTypes.JS,
+          code: markdownEditorErrorsSource,
         },
       ],
       title: 'Error handling and feedback',
@@ -142,10 +172,6 @@ export const MarkdownEditorExample = {
           type: GuideSectionTypes.JS,
           code: markdownEditorHeightSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: markdownEditorHeightHtml,
-        },
       ],
       title: 'Controlling the height',
       text: (

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

@@ -9,7 +9,7 @@ import {
 
 const initialContent = `## Hello world!
 
-Basic "github flavored" markdown will work as you'd expect.
+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.
 

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

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+
+import {
+  EuiMarkdownEditor,
+  getDefaultEuiMarkdownPlugins,
+} from '../../../../src/components';
+
+const initialContent = `## This is how we do it :smile:
+
+In this example, we unregistered the built in **tooltip** plugin. So the button in the toolbar and the help syntax won't be displayed.
+
+And the following syntax no longer works.
+
+!{tooltip[anchor text](Tooltip content)}
+`;
+
+const {
+  parsingPlugins,
+  processingPlugins,
+  uiPlugins,
+} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
+
+export default () => {
+  const [value, setValue] = useState(initialContent);
+
+  return (
+    <>
+      <EuiMarkdownEditor
+        aria-label="EUI markdown editor with no default plugins demo"
+        value={value}
+        onChange={setValue}
+        parsingPluginList={parsingPlugins}
+        processingPluginList={processingPlugins}
+        uiPlugins={uiPlugins}
+      />
+    </>
+  );
+};