Made opting out of the tooltip markdown plugin much easier

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

@@ -67,12 +67,17 @@ import MarkdownEditorNoPlugins from './markdown_editor_no_plugins';
 const markdownEditorNoPluginsSource = require('!!raw-loader!./markdown_editor_no_plugins');
 const markdownEditorNoPluginsHtml = renderToHtml(MarkdownEditor);
 const markdownEditorNoPluginsSnippet = `
-  const plugins = getDefaultEuiMarkdownUiPlugins();
-  plugins.splice(0, plugins.length);
+const {
+  parsingPlugins,
+  processingPlugins,
+  uiPlugins,
+} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
 
   <EuiMarkdownEditor
     value={value}
     onChange={setValue}
+    parsingPluginList={parsingPlugins}
+    processingPluginList={processingPlugins}
     uiPlugins={plugins}
   />
 `;

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

@@ -5,12 +5,12 @@ import {
   EuiSpacer,
   EuiCodeBlock,
   EuiButton,
-  getDefaultEuiMarkdownUiPlugins,
+  getDefaultEuiMarkdownPlugins,
 } from '../../../../src/components';
 
 const initialContent = `## This is how we do it :smile:
 
-In this example, we unregistered the built in tooltip plugin. So you can't see the button in the toolbar and the help syntax when you click the markdown button in the footer. 
+In this example, we unregistered the built in tooltip plugin. So you can't see the button in the toolbar and the help syntax when you click the markdown button in the footer.
 `;
 
 const dropHandlers = [
@@ -32,6 +32,12 @@ const dropHandlers = [
   },
 ];
 
+const {
+  parsingPlugins,
+  processingPlugins,
+  uiPlugins,
+} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
+
 export default () => {
   const [value, setValue] = useState(initialContent);
   const [messages, setMessages] = useState([]);
@@ -42,9 +48,6 @@ export default () => {
     setAst(JSON.stringify(ast, null, 2));
   }, []);
 
-  const plugins = getDefaultEuiMarkdownUiPlugins();
-  plugins.splice(0, plugins.length);
-
   return (
     <>
       <EuiMarkdownEditor
@@ -55,7 +58,9 @@ export default () => {
         onParse={onParse}
         errors={messages}
         dropHandlers={dropHandlers}
-        uiPlugins={plugins}
+        parsingPluginList={parsingPlugins}
+        processingPluginList={processingPlugins}
+        uiPlugins={uiPlugins}
       />
       <EuiSpacer size="s" />
       <div className="eui-textRight">

src/components/markdown_editor/index.ts

@@ -11,6 +11,7 @@ export {
   getDefaultEuiMarkdownParsingPlugins,
   getDefaultEuiMarkdownProcessingPlugins,
   getDefaultEuiMarkdownUiPlugins,
+  getDefaultEuiMarkdownPlugins,
 } from './plugins/markdown_default_plugins';
 export { EuiMarkdownContext } from './markdown_context';
 export { EuiMarkdownFormat, EuiMarkdownFormatProps } from './markdown_format';

src/components/markdown_editor/plugins/markdown_default_plugins/index.ts

@@ -9,3 +9,4 @@
 export * from './ui_plugins';
 export * from './parsing_plugins';
 export * from './processing_plugins';
+export * from './plugins';

src/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.ts

@@ -29,13 +29,22 @@ import * as MarkdownTooltip from '../markdown_tooltip';
 import * as MarkdownCheckbox from '../markdown_checkbox';
 import { markdownLinkValidator } from '../markdown_link_validator';
 
-export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [
-  [markdown, {}],
-  [highlight, {}],
-  [emoji, { emoticon: true }],
-  [MarkdownTooltip.parser, {}],
-  [MarkdownCheckbox.parser, {}],
-  [markdownLinkValidator, {}],
-];
+export const getDefaultEuiMarkdownParsingPlugins = ({
+  exclude,
+}: { exclude?: Array<'tooltip'> } = {}): PluggableList => {
+  const excludeSet = new Set(exclude);
+  const parsingPlugins: PluggableList = [
+    [markdown, {}],
+    [highlight, {}],
+    [emoji, { emoticon: true }],
+    [markdownLinkValidator, {}],
+    [MarkdownCheckbox.parser, {}],
+  ];
+
+  if (!excludeSet.has('tooltip'))
+    parsingPlugins.push([MarkdownTooltip.parser, {}]);
+
+  return parsingPlugins;
+};
 
 export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins();

src/components/markdown_editor/plugins/markdown_default_plugins/plugins.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getDefaultEuiMarkdownUiPlugins } from './ui_plugins';
+import { getDefaultEuiMarkdownParsingPlugins } from './parsing_plugins';
+import { getDefaultEuiMarkdownProcessingPlugins } from './processing_plugins';
+
+export const getDefaultEuiMarkdownPlugins = (
+  config: undefined | { exclude?: Array<'tooltip'> }
+) => ({
+  parsingPlugins: getDefaultEuiMarkdownParsingPlugins(config),
+  processingPlugins: getDefaultEuiMarkdownProcessingPlugins(config),
+  uiPlugins: getDefaultEuiMarkdownUiPlugins(config),
+});

src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx

@@ -44,51 +44,66 @@ export interface Rehype2ReactOptions {
   [key: string]: any;
 }
 
-export const getDefaultEuiMarkdownProcessingPlugins = (): [
-  [Plugin, Remark2RehypeOptions], // first is well known
-  [typeof rehype2react, Rehype2ReactOptions], // second is well known
-  ...PluggableList // any additional are generic
-] => [
-  [
-    remark2rehype,
-    {
-      allowDangerousHtml: true,
-      unknownHandler,
-      handlers: {}, // intentionally empty, allows plugins to extend if they need to
-    },
-  ],
-  [
-    rehype2react,
-    {
-      createElement: createElement,
-      components: {
-        a: EuiLink,
-        code: (props: any) =>
-          // If there are linebreaks use codeblock, otherwise code
-          /\r|\n/.exec(props.children) ||
-          (props.className && props.className.indexOf(FENCED_CLASS) > -1) ? (
-            <EuiCodeBlock fontSize="m" paddingSize="s" isCopyable {...props} />
-          ) : (
-            <EuiCode {...props} />
+export const getDefaultEuiMarkdownProcessingPlugins = ({
+  exclude,
+}: { exclude?: Array<'tooltip'> } = {}) => {
+  const excludeSet = new Set(exclude);
+
+  const plugins: [
+    [Plugin, Remark2RehypeOptions], // first is well known
+    [typeof rehype2react, Rehype2ReactOptions], // second is well known
+    ...PluggableList // any additional are generic
+  ] = [
+    [
+      remark2rehype,
+      {
+        allowDangerousHtml: true,
+        unknownHandler,
+        handlers: {}, // intentionally empty, allows plugins to extend if they need to
+      },
+    ],
+    [
+      rehype2react,
+      {
+        createElement: createElement,
+        components: {
+          a: EuiLink,
+          code: (props: any) =>
+            // If there are linebreaks use codeblock, otherwise code
+            /\r|\n/.exec(props.children) ||
+            (props.className && props.className.indexOf(FENCED_CLASS) > -1) ? (
+              <EuiCodeBlock
+                fontSize="m"
+                paddingSize="s"
+                isCopyable
+                {...props}
+              />
+            ) : (
+              <EuiCode {...props} />
+            ),
+          // When we use block code "fences" the code tag is replaced by the `EuiCodeBlock`.
+          // But there's a `pre` tag wrapping all the `EuiCodeBlock`.
+          // We want to replace this `pre` tag with a `div` because the `EuiCodeBlock` has its own children `pre` tag.
+          pre: (props) => (
+            <div {...props} className="euiMarkdownFormat__codeblockWrapper" />
+          ),
+          blockquote: (props) => (
+            <blockquote {...props} className="euiMarkdownFormat__blockquote" />
+          ),
+          table: (props) => (
+            <table className="euiMarkdownFormat__table" {...props} />
           ),
-        // When we use block code "fences" the code tag is replaced by the `EuiCodeBlock`.
-        // But there's a `pre` tag wrapping all the `EuiCodeBlock`.
-        // We want to replace this `pre` tag with a `div` because the `EuiCodeBlock` has its own children `pre` tag.
-        pre: (props) => (
-          <div {...props} className="euiMarkdownFormat__codeblockWrapper" />
-        ),
-        blockquote: (props) => (
-          <blockquote {...props} className="euiMarkdownFormat__blockquote" />
-        ),
-        table: (props) => (
-          <table className="euiMarkdownFormat__table" {...props} />
-        ),
-        hr: (props) => <EuiHorizontalRule {...props} />,
-        tooltipPlugin: MarkdownTooltip.renderer,
-        checkboxPlugin: MarkdownCheckbox.renderer,
+          hr: (props) => <EuiHorizontalRule {...props} />,
+          checkboxPlugin: MarkdownCheckbox.renderer,
+        },
       },
-    },
-  ],
-];
+    ],
+  ];
+
+  if (!excludeSet.has('tooltip'))
+    plugins[1][1].components.tooltipPlugin = MarkdownTooltip.renderer;
+
+  return plugins;
+};
 
 export const defaultProcessingPlugins = getDefaultEuiMarkdownProcessingPlugins();

src/components/markdown_editor/plugins/markdown_default_plugins/ui_plugins.ts

@@ -9,11 +9,17 @@
 import * as MarkdownTooltip from '../markdown_tooltip';
 import { EuiMarkdownEditorUiPlugin } from './../../markdown_types';
 
-export const getDefaultEuiMarkdownUiPlugins = (): EuiMarkdownEditorUiPlugin[] => {
-  const array = [MarkdownTooltip.plugin];
+export const getDefaultEuiMarkdownUiPlugins = ({
+  exclude,
+}: { exclude?: Array<'tooltip'> } = {}): EuiMarkdownEditorUiPlugin[] => {
+  const excludeSet = new Set(exclude);
+  const uiPlugins = [];
+
+  if (!excludeSet.has('tooltip')) uiPlugins.push(MarkdownTooltip.plugin);
+
   // @ts-ignore __originatedFromEui is a custom property
-  array.__originatedFromEui = true;
-  return array;
+  uiPlugins.__originatedFromEui = true;
+  return uiPlugins;
 };
 
 export const defaultUiPlugins = getDefaultEuiMarkdownUiPlugins();