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 3a9c8c3a53c..b0783d55b12 100644 --- a/src-docs/src/views/markdown_editor/mardown_editor_example.js +++ b/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'] }); `; diff --git a/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js index f0e14a4ba1d..11c6f6fe431 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js +++ b/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 ( <> { onParse={onParse} errors={messages} dropHandlers={dropHandlers} - uiPlugins={plugins} + parsingPluginList={parsingPlugins} + processingPluginList={processingPlugins} + uiPlugins={uiPlugins} />
diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts index 539fa844ebd..810eea8f236 100644 --- a/src/components/markdown_editor/index.ts +++ b/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'; diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/index.ts b/src/components/markdown_editor/plugins/markdown_default_plugins/index.ts index fd01fced6d7..f78c5a8b80d 100644 --- a/src/components/markdown_editor/plugins/markdown_default_plugins/index.ts +++ b/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'; diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.ts b/src/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.ts index e328b90223c..3fcf8d80a6f 100644 --- a/src/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.ts +++ b/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(); diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/plugins.ts b/src/components/markdown_editor/plugins/markdown_default_plugins/plugins.ts new file mode 100644 index 00000000000..957afff2d6d --- /dev/null +++ b/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), +}); diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx index 81792534936..fa53ec8ce32 100644 --- a/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx +++ b/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) ? ( - - ) : ( - +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) ? ( + + ) : ( + + ), + // 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) => ( +
+ ), + blockquote: (props) => ( +
+ ), + 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) => ( -
- ), - blockquote: (props) => ( -
- ), - table: (props) => ( -
- ), - hr: (props) => , - tooltipPlugin: MarkdownTooltip.renderer, - checkboxPlugin: MarkdownCheckbox.renderer, + hr: (props) => , + checkboxPlugin: MarkdownCheckbox.renderer, + }, }, - }, - ], -]; + ], + ]; + + if (!excludeSet.has('tooltip')) + plugins[1][1].components.tooltipPlugin = MarkdownTooltip.renderer; + + return plugins; +}; export const defaultProcessingPlugins = getDefaultEuiMarkdownProcessingPlugins(); diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/ui_plugins.ts b/src/components/markdown_editor/plugins/markdown_default_plugins/ui_plugins.ts index 0c747c4f1b7..7e5c0e548da 100644 --- a/src/components/markdown_editor/plugins/markdown_default_plugins/ui_plugins.ts +++ b/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();