diff --git a/CHANGELOG.md b/CHANGELOG.md index 307da5eb404..8a8df73537f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`main`](https://github.com/elastic/eui/tree/main) -No public interface changes since `49.0.0`. +- Added `readOnly` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627)) ## [`49.0.0`](https://github.com/elastic/eui/tree/v49.0.0) 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 e37a1417c5d..c36d88a7d68 100644 --- a/src-docs/src/views/markdown_editor/mardown_editor_example.js +++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js @@ -102,10 +102,21 @@ export const MarkdownEditorExample = { ], title: 'Base editor', text: ( -

- The base editor can render basic markdown along with some built-in - plugins. -

+ <> +

+ Use the base editor to produce technical content in markdown which + can contain text, code, and images. Besides this default markdown + content, the base editor comes with built-in plugins that let you + add emojis, to-do lists, and tooltips. +

+

+ Consider applying the readOnly prop to restrict + editing during asynchronous submit events, like when submitting a{' '} + comment. This will ensure + users understand that the content cannot be changed while the + comment is being submitted. +

+ ), props: { EuiMarkdownEditor, diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js index 48d32275af2..3e6b98a12c0 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor.js +++ b/src-docs/src/views/markdown_editor/markdown_editor.js @@ -5,6 +5,9 @@ import { EuiSpacer, EuiCodeBlock, EuiButton, + EuiSwitch, + EuiFlexGroup, + EuiFlexItem, } from '../../../../src/components'; const initialContent = `## Hello world! @@ -16,6 +19,10 @@ The editor also ships with some built in plugins. For example it can handle chec - [ ] Checkboxes - [x] Can be filled - [ ] Or empty + +It can also handle emojis! :smile: + +And it can render !{tooltip[tooltips like this](Look! I'm a very helpful tooltip content!)} `; const dropHandlers = [ @@ -46,6 +53,13 @@ export default () => { setMessages(err ? [err] : messages); setAst(JSON.stringify(ast, null, 2)); }, []); + + const [isReadOnly, setIsReadOnly] = useState(false); + + const onChange = (e) => { + setIsReadOnly(e.target.checked); + }; + return ( <> { onParse={onParse} errors={messages} dropHandlers={dropHandlers} + readOnly={isReadOnly} + initialViewMode="viewing" /> -
- setIsAstShowing(!isAstShowing)} - fill={isAstShowing} - > - {isAstShowing ? 'Hide editor AST' : 'Show editor AST'} - -
+ + + + + + setIsAstShowing(!isAstShowing)} + fill={isAstShowing} + > + {isAstShowing ? 'Hide editor AST' : 'Show editor AST'} + + + + + + {isAstShowing && {ast}} ); diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap index 42a0588187b..20d02c30e21 100644 --- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap +++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap @@ -4385,3 +4385,249 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] = `; + +exports[`EuiMarkdownEditor props readOnly is set to true 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx index 56f21434bd6..28257cfb53b 100644 --- a/src/components/markdown_editor/markdown_editor_toolbar.tsx +++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx @@ -98,7 +98,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< { markdownActions, viewMode, onClickPreview, uiPlugins, selectedNode }, ref: Ref ) => { - const { openPluginEditor } = useContext(EuiMarkdownContext); + const { openPluginEditor, readOnly } = useContext(EuiMarkdownContext); const handleMdButtonClick = (mdButtonId: string) => { const actionResult = markdownActions.do(mdButtonId); @@ -107,6 +107,8 @@ export const EuiMarkdownEditorToolbar = forwardRef< const isPreviewing = viewMode === MODE_VIEWING; + const isEditable = !isPreviewing && !readOnly; + return (
@@ -117,7 +119,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< onClick={() => handleMdButtonClick(item.id)} iconType={item.iconType} aria-label={item.label} - isDisabled={isPreviewing} + isDisabled={!isEditable} /> ))} @@ -129,7 +131,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< onClick={() => handleMdButtonClick(item.id)} iconType={item.iconType} aria-label={item.label} - isDisabled={isPreviewing} + isDisabled={!isEditable} /> ))} @@ -141,7 +143,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< onClick={() => handleMdButtonClick(item.id)} iconType={item.iconType} aria-label={item.label} - isDisabled={isPreviewing} + isDisabled={!isEditable} /> ))} @@ -164,7 +166,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< onClick={() => handleMdButtonClick(name)} iconType={button.iconType} aria-label={button.label} - isDisabled={isPreviewing} + isDisabled={!isEditable} /> ); @@ -179,6 +181,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< color="text" size="s" onClick={onClickPreview} + isDisabled={readOnly} > @@ -188,6 +191,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< color="text" size="s" onClick={onClickPreview} + isDisabled={readOnly} >