Skip to content

Commit 90a669a

Browse files
chandlerprallchandlerprall
committed
Made opting out of the tooltip markdown plugin much easier
1 parent 39e77e2 commit 90a669a

File tree

8 files changed

+125
-64
lines changed

8 files changed

+125
-64
lines changed

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,17 @@ import MarkdownEditorNoPlugins from './markdown_editor_no_plugins';
6767
const markdownEditorNoPluginsSource = require('!!raw-loader!./markdown_editor_no_plugins');
6868
const markdownEditorNoPluginsHtml = renderToHtml(MarkdownEditor);
6969
const markdownEditorNoPluginsSnippet = `
70-
const plugins = getDefaultEuiMarkdownUiPlugins();
71-
plugins.splice(0, plugins.length);
70+
const {
71+
parsingPlugins,
72+
processingPlugins,
73+
uiPlugins,
74+
} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
7275
7376
<EuiMarkdownEditor
7477
value={value}
7578
onChange={setValue}
79+
parsingPluginList={parsingPlugins}
80+
processingPluginList={processingPlugins}
7681
uiPlugins={plugins}
7782
/>
7883
`;

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import {
55
EuiSpacer,
66
EuiCodeBlock,
77
EuiButton,
8-
getDefaultEuiMarkdownUiPlugins,
8+
getDefaultEuiMarkdownPlugins,
99
} from '../../../../src/components';
1010

1111
const initialContent = `## This is how we do it :smile:
1212
13-
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.
13+
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.
1414
`;
1515

1616
const dropHandlers = [
@@ -32,6 +32,12 @@ const dropHandlers = [
3232
},
3333
];
3434

35+
const {
36+
parsingPlugins,
37+
processingPlugins,
38+
uiPlugins,
39+
} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
40+
3541
export default () => {
3642
const [value, setValue] = useState(initialContent);
3743
const [messages, setMessages] = useState([]);
@@ -42,9 +48,6 @@ export default () => {
4248
setAst(JSON.stringify(ast, null, 2));
4349
}, []);
4450

45-
const plugins = getDefaultEuiMarkdownUiPlugins();
46-
plugins.splice(0, plugins.length);
47-
4851
return (
4952
<>
5053
<EuiMarkdownEditor
@@ -55,7 +58,9 @@ export default () => {
5558
onParse={onParse}
5659
errors={messages}
5760
dropHandlers={dropHandlers}
58-
uiPlugins={plugins}
61+
parsingPluginList={parsingPlugins}
62+
processingPluginList={processingPlugins}
63+
uiPlugins={uiPlugins}
5964
/>
6065
<EuiSpacer size="s" />
6166
<div className="eui-textRight">

‎src/components/markdown_editor/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export {
1111
getDefaultEuiMarkdownParsingPlugins,
1212
getDefaultEuiMarkdownProcessingPlugins,
1313
getDefaultEuiMarkdownUiPlugins,
14+
getDefaultEuiMarkdownPlugins,
1415
} from './plugins/markdown_default_plugins';
1516
export { EuiMarkdownContext } from './markdown_context';
1617
export { EuiMarkdownFormat, EuiMarkdownFormatProps } from './markdown_format';

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@
99
export * from './ui_plugins';
1010
export * from './parsing_plugins';
1111
export * from './processing_plugins';
12+
export * from './plugins';

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,22 @@ import * as MarkdownTooltip from '../markdown_tooltip';
2929
import * as MarkdownCheckbox from '../markdown_checkbox';
3030
import { markdownLinkValidator } from '../markdown_link_validator';
3131

32-
export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [
33-
[markdown, {}],
34-
[highlight, {}],
35-
[emoji, { emoticon: true }],
36-
[MarkdownTooltip.parser, {}],
37-
[MarkdownCheckbox.parser, {}],
38-
[markdownLinkValidator, {}],
39-
];
32+
export const getDefaultEuiMarkdownParsingPlugins = ({
33+
exclude,
34+
}: { exclude?: Array<'tooltip'> } = {}): PluggableList => {
35+
const excludeSet = new Set(exclude);
36+
const parsingPlugins: PluggableList = [
37+
[markdown, {}],
38+
[highlight, {}],
39+
[emoji, { emoticon: true }],
40+
[markdownLinkValidator, {}],
41+
[MarkdownCheckbox.parser, {}],
42+
];
43+
44+
if (!excludeSet.has('tooltip'))
45+
parsingPlugins.push([MarkdownTooltip.parser, {}]);
46+
47+
return parsingPlugins;
48+
};
4049

4150
export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins();

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import { getDefaultEuiMarkdownUiPlugins } from './ui_plugins';
10+
import { getDefaultEuiMarkdownParsingPlugins } from './parsing_plugins';
11+
import { getDefaultEuiMarkdownProcessingPlugins } from './processing_plugins';
12+
13+
export const getDefaultEuiMarkdownPlugins = (
14+
config: undefined | { exclude?: Array<'tooltip'> }
15+
) => ({
16+
parsingPlugins: getDefaultEuiMarkdownParsingPlugins(config),
17+
processingPlugins: getDefaultEuiMarkdownProcessingPlugins(config),
18+
uiPlugins: getDefaultEuiMarkdownUiPlugins(config),
19+
});

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

Lines changed: 59 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -44,51 +44,66 @@ export interface Rehype2ReactOptions {
4444
[key: string]: any;
4545
}
4646

47-
export const getDefaultEuiMarkdownProcessingPlugins = (): [
48-
[Plugin, Remark2RehypeOptions], // first is well known
49-
[typeof rehype2react, Rehype2ReactOptions], // second is well known
50-
...PluggableList // any additional are generic
51-
] => [
52-
[
53-
remark2rehype,
54-
{
55-
allowDangerousHtml: true,
56-
unknownHandler,
57-
handlers: {}, // intentionally empty, allows plugins to extend if they need to
58-
},
59-
],
60-
[
61-
rehype2react,
62-
{
63-
createElement: createElement,
64-
components: {
65-
a: EuiLink,
66-
code: (props: any) =>
67-
// If there are linebreaks use codeblock, otherwise code
68-
/\r|\n/.exec(props.children) ||
69-
(props.className && props.className.indexOf(FENCED_CLASS) > -1) ? (
70-
<EuiCodeBlock fontSize="m" paddingSize="s" isCopyable {...props} />
71-
) : (
72-
<EuiCode {...props} />
47+
export const getDefaultEuiMarkdownProcessingPlugins = ({
48+
exclude,
49+
}: { exclude?: Array<'tooltip'> } = {}) => {
50+
const excludeSet = new Set(exclude);
51+
52+
const plugins: [
53+
[Plugin, Remark2RehypeOptions], // first is well known
54+
[typeof rehype2react, Rehype2ReactOptions], // second is well known
55+
...PluggableList // any additional are generic
56+
] = [
57+
[
58+
remark2rehype,
59+
{
60+
allowDangerousHtml: true,
61+
unknownHandler,
62+
handlers: {}, // intentionally empty, allows plugins to extend if they need to
63+
},
64+
],
65+
[
66+
rehype2react,
67+
{
68+
createElement: createElement,
69+
components: {
70+
a: EuiLink,
71+
code: (props: any) =>
72+
// If there are linebreaks use codeblock, otherwise code
73+
/\r|\n/.exec(props.children) ||
74+
(props.className && props.className.indexOf(FENCED_CLASS) > -1) ? (
75+
<EuiCodeBlock
76+
fontSize="m"
77+
paddingSize="s"
78+
isCopyable
79+
{...props}
80+
/>
81+
) : (
82+
<EuiCode {...props} />
83+
),
84+
// When we use block code "fences" the code tag is replaced by the `EuiCodeBlock`.
85+
// But there's a `pre` tag wrapping all the `EuiCodeBlock`.
86+
// We want to replace this `pre` tag with a `div` because the `EuiCodeBlock` has its own children `pre` tag.
87+
pre: (props) => (
88+
<div {...props} className="euiMarkdownFormat__codeblockWrapper" />
89+
),
90+
blockquote: (props) => (
91+
<blockquote {...props} className="euiMarkdownFormat__blockquote" />
92+
),
93+
table: (props) => (
94+
<table className="euiMarkdownFormat__table" {...props} />
7395
),
74-
// When we use block code "fences" the code tag is replaced by the `EuiCodeBlock`.
75-
// But there's a `pre` tag wrapping all the `EuiCodeBlock`.
76-
// We want to replace this `pre` tag with a `div` because the `EuiCodeBlock` has its own children `pre` tag.
77-
pre: (props) => (
78-
<div {...props} className="euiMarkdownFormat__codeblockWrapper" />
79-
),
80-
blockquote: (props) => (
81-
<blockquote {...props} className="euiMarkdownFormat__blockquote" />
82-
),
83-
table: (props) => (
84-
<table className="euiMarkdownFormat__table" {...props} />
85-
),
86-
hr: (props) => <EuiHorizontalRule {...props} />,
87-
tooltipPlugin: MarkdownTooltip.renderer,
88-
checkboxPlugin: MarkdownCheckbox.renderer,
96+
hr: (props) => <EuiHorizontalRule {...props} />,
97+
checkboxPlugin: MarkdownCheckbox.renderer,
98+
},
8999
},
90-
},
91-
],
92-
];
100+
],
101+
];
102+
103+
if (!excludeSet.has('tooltip'))
104+
plugins[1][1].components.tooltipPlugin = MarkdownTooltip.renderer;
105+
106+
return plugins;
107+
};
93108

94109
export const defaultProcessingPlugins = getDefaultEuiMarkdownProcessingPlugins();

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,17 @@
99
import * as MarkdownTooltip from '../markdown_tooltip';
1010
import { EuiMarkdownEditorUiPlugin } from './../../markdown_types';
1111

12-
export const getDefaultEuiMarkdownUiPlugins = (): EuiMarkdownEditorUiPlugin[] => {
13-
const array = [MarkdownTooltip.plugin];
12+
export const getDefaultEuiMarkdownUiPlugins = ({
13+
exclude,
14+
}: { exclude?: Array<'tooltip'> } = {}): EuiMarkdownEditorUiPlugin[] => {
15+
const excludeSet = new Set(exclude);
16+
const uiPlugins = [];
17+
18+
if (!excludeSet.has('tooltip')) uiPlugins.push(MarkdownTooltip.plugin);
19+
1420
// @ts-ignore __originatedFromEui is a custom property
15-
array.__originatedFromEui = true;
16-
return array;
21+
uiPlugins.__originatedFromEui = true;
22+
return uiPlugins;
1723
};
1824

1925
export const defaultUiPlugins = getDefaultEuiMarkdownUiPlugins();

0 commit comments

Comments
 (0)