-
Notifications
You must be signed in to change notification settings - Fork 8.2k
/
markdown.tsx
119 lines (110 loc) · 3.8 KB
/
markdown.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/*
* 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 {
EuiLink,
EuiMarkdownEditor,
EuiMarkdownEditorProps,
EuiMarkdownFormat,
euiMarkdownLinkValidator,
getDefaultEuiMarkdownPlugins,
} from '@elastic/eui';
import React, { useState } from 'react';
import { useEffect } from 'react';
export type MarkdownProps = Partial<
Omit<EuiMarkdownEditorProps, 'editorId' | 'uiPlugins' | 'markdownFormatProps'>
> & {
/**
* @param readOnly is needed to differentiate where markdown is used as a presentation of error messages
* This was previous the MarkdownSimple component, it's default value is false
*/
readOnly?: boolean;
enableTooltipSupport?: boolean;
/**
* allow opt in to default EUI link validation behavior, see {@link https://eui.elastic.co/#/editors-syntax/markdown-plugins#link-validation-security}
*/
validateLinks?: boolean;
/**
* provides a way to signal to a parent component that the component rendered successfully
*/
onRender?: () => void;
defaultValue?: string;
markdownContent?: string;
ariaLabelContent?: string;
/** Eui allows the height of the markdown component to be set */
height?: number | 'full';
placeholder?: string | undefined;
children?: string;
openLinksInNewTab?: boolean;
};
export const Markdown = ({
ariaLabelContent,
markdownContent,
children,
className,
onRender,
openLinksInNewTab = true,
defaultValue = '',
placeholder = '',
height = 'full',
readOnly = false,
enableTooltipSupport = false,
validateLinks = false,
...restProps
}: MarkdownProps) => {
const [value, setValue] = useState(defaultValue);
useEffect(() => {
// onRender will be called after each render to signal, that we are done with rendering.
onRender?.();
}, [onRender]);
const { parsingPlugins, processingPlugins, uiPlugins } = getDefaultEuiMarkdownPlugins({
exclude: enableTooltipSupport ? undefined : ['tooltip'],
});
// openLinksInNewTab functionality from https://codesandbox.io/s/relaxed-yalow-hy69r4?file=/demo.js:482-645
processingPlugins[1][1].components.a = (props) => <EuiLink {...props} target="_blank" />;
const _parsingPlugins = validateLinks
? parsingPlugins
: // @ts-expect-error
parsingPlugins.filter(([plugin]) => {
return plugin !== euiMarkdownLinkValidator;
});
// Render EuiMarkdownFormat when readOnly set to true
if (readOnly) {
if (!children && !markdownContent) {
throw new Error('Markdown content is required in [readOnly] mode');
}
return (
<EuiMarkdownFormat
textSize={'relative'}
className={className}
aria-label={ariaLabelContent ?? 'markdown component'}
parsingPluginList={_parsingPlugins}
processingPluginList={openLinksInNewTab ? processingPlugins : undefined}
data-test-subj={restProps['data-test-subj']}
// There was a trick to pass style as a part of props in the legacy React <Markdown> component
style={restProps.style}
>
{children ?? markdownContent!}
</EuiMarkdownFormat>
);
}
// Otherwise render the Markdown Editor if readOnly false
return (
<EuiMarkdownEditor
className={className}
aria-label={ariaLabelContent ?? 'markdown component'}
placeholder={placeholder}
value={value}
onChange={setValue}
height={height}
uiPlugins={uiPlugins}
parsingPluginList={_parsingPlugins}
processingPluginList={openLinksInNewTab ? processingPlugins : undefined}
data-test-subj={restProps['data-test-subj']}
/>
);
};