diff --git a/CHANGELOG.md b/CHANGELOG.md index 06f5cb24c1b..e679410a13f 100644 --- 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 index dc6aa29ba8b..f14c469a98f 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 @@ -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 index 271cc3e0db2..a57b1fe2235 100644 --- 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 index 370949fbea9..0086d04ccef 100644 --- 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 index a7452132a8f..e048a7edb58 100644 --- 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 index cda761e174f..83b20429a67 100644 --- 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();