fix: Markdown editor unregister tooltip plugin (#4383)

* fix: Markdown editor unregister tooltip plugin Issue number 4239 Ability to unregister the tooltip plugin added Updated the editor example doc to show how to use it * fix:Markdown tooltip unregister Added the ability to unregsiter inbuilt UI plugins Addresses issue 4239 Signed-off-by: k-kumar-01 <[email protected]> * fix:Markdown ToolTip Plugin Default UI Plugins initialized Warning added on injecting tooltip plugin Signed-off-by: k-kumar-01 <[email protected]> * Changelog & updated markdown plugins example Co-authored-by: Chandler Prall <[email protected]>
elastic · Jan 26, 2021 · 34500b7 · 34500b7
1 parent 09b95c4
commit 34500b7
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `getDefaultEuiMarkdownProcessingPlugins` method for better control over `EuiMarkdownEditor`'s toolbar UI ([#4383](https://github.com/elastic/eui/pull/4383))
+
 **Bug fixes**
 
 - Fixed heights of `append` and `prepend` in `EuiComboBox` ([#4410](https://github.com/elastic/eui/pull/4406))

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
@@ -42,6 +42,7 @@ import {
   euiPalettePositive,
   euiPaletteWarm,
 } from '../../../../src/services/color';
+import { getDefaultEuiMarkdownUiPlugins } from '../../../../src/components/markdown_editor';
 
 const paletteData = {
   euiPaletteForStatus,
@@ -261,6 +262,9 @@ exampleParsingList.push(ChartMarkdownParser);
 const exampleProcessingList = getDefaultEuiMarkdownProcessingPlugins();
 exampleProcessingList[1][1].components.chartDemoPlugin = ChartMarkdownRenderer;
 
+const exampleUiPlugins = getDefaultEuiMarkdownUiPlugins();
+exampleUiPlugins.push(chartDemoPlugin);
+
 const initialExample = `## Chart plugin
 
 Notice the toolbar above has a new chart button. Click it to add a chart.
@@ -286,7 +290,7 @@ export default () => {
         value={value}
         onChange={setValue}
         height={400}
-        uiPlugins={[chartDemoPlugin]}
+        uiPlugins={exampleUiPlugins}
         parsingPluginList={exampleParsingList}
         processingPluginList={exampleProcessingList}
         onParse={onParse}

diff --git a/src/components/index.js b/src/components/index.js
@@ -224,6 +224,7 @@ export {
   EuiMarkdownFormat,
   getDefaultEuiMarkdownParsingPlugins,
   getDefaultEuiMarkdownProcessingPlugins,
+  getDefaultEuiMarkdownUiPlugins,
 } from './markdown_editor';
 export { EuiMark } from './mark';
 

diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts
@@ -21,6 +21,7 @@ export { EuiMarkdownEditor, EuiMarkdownEditorProps } from './markdown_editor';
 export {
   getDefaultEuiMarkdownParsingPlugins,
   getDefaultEuiMarkdownProcessingPlugins,
+  getDefaultEuiMarkdownUiPlugins,
 } 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
@@ -56,6 +56,7 @@ import * as MarkdownTooltip from './plugins/markdown_tooltip';
 import {
   defaultParsingPlugins,
   defaultProcessingPlugins,
+  defaultUiPlugins,
 } from './plugins/markdown_default_plugins';
 
 import { EuiResizeObserver } from '../observer/resize_observer';
@@ -193,7 +194,7 @@ export const EuiMarkdownEditor = forwardRef<
       autoExpandPreview = true,
       parsingPluginList = defaultParsingPlugins,
       processingPluginList = defaultProcessingPlugins,
-      uiPlugins = [],
+      uiPlugins = defaultUiPlugins,
       onParse,
       errors = [],
       'aria-label': ariaLabel,
@@ -214,7 +215,14 @@ export const EuiMarkdownEditor = forwardRef<
       EuiMarkdownEditorUiPlugin | undefined
     >(undefined);
 
-    const toolbarPlugins = [MarkdownTooltip.plugin, ...uiPlugins];
+    const toolbarPlugins = [...uiPlugins];
+    // @ts-ignore __originatedFromEui is a custom property
+    if (!uiPlugins.__originatedFromEui) {
+      toolbarPlugins.unshift(MarkdownTooltip.plugin);
+      console.warn(
+        'Deprecation warning: uiPlugins passed to EuiMarkdownEditor does not include the tooltip plugin, which has been added for you. This automatic inclusion has been deprecated and will be removed in the future, see https://github.com/elastic/eui/pull/4383'
+      );
+    }
 
     const markdownActions = useMemo(
       () => new MarkdownActions(editorId, toolbarPlugins),

diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
@@ -102,3 +102,12 @@ export const getDefaultEuiMarkdownProcessingPlugins = (): [
 ];
 
 export const defaultProcessingPlugins = getDefaultEuiMarkdownProcessingPlugins();
+
+export const getDefaultEuiMarkdownUiPlugins = () => {
+  const array = [MarkdownTooltip.plugin];
+  // @ts-ignore __originatedFromEui is a custom property
+  array.__originatedFromEui = true;
+  return array;
+};
+
+export const defaultUiPlugins = getDefaultEuiMarkdownUiPlugins();