From bf09b6567f6980b90c178dcae934808567a52422 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 10 Feb 2022 21:58:10 +0000 Subject: [PATCH 01/16] Added `isDisabled` prop to `EuiMarkdownEditor` --- CHANGELOG.md | 1 + .../views/markdown_editor/markdown_editor.js | 44 ++- .../markdown_editor.test.tsx.snap | 263 ++++++++++++++++-- .../_markdown_editor_preview.scss | 7 + .../_markdown_editor_text_area.scss | 6 + .../markdown_editor/markdown_context.ts | 2 + .../markdown_editor/markdown_editor.test.tsx | 17 ++ .../markdown_editor/markdown_editor.tsx | 16 +- .../markdown_editor_footer.tsx | 10 + .../markdown_editor_text_area.tsx | 11 +- .../markdown_editor_toolbar.tsx | 15 +- 11 files changed, 356 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 69e531b19f5..89f19db0a07 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Refactored `EuiSuggest` to use `EuiSelectable` ([#5157](https://github.com/elastic/eui/pull/5157)) - Added a return type to `EuiTable` `resolveWidthAsStyle` util ([#5615](https://github.com/elastic/eui/pull/5615)) - Added a return type to `euiSelectableTemplateSitewideFormatOptions` util ([#5620](https://github.com/elastic/eui/pull/5620)) +- Added `isDisabled` prop to `EuiMarkdownEditor` ([#0000](https://github.com/elastic/eui/pull/0000)) **Bug fixes** diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js index 48d32275af2..ce2f53d47e7 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! @@ -46,6 +49,13 @@ export default () => { setMessages(err ? [err] : messages); setAst(JSON.stringify(ast, null, 2)); }, []); + + const [isDisabled, setIsDisabled] = useState(false); + + const onChange = (e) => { + setIsDisabled(e.target.checked); + }; + return ( <> { onParse={onParse} errors={messages} dropHandlers={dropHandlers} + isDisabled={isDisabled} + 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..d2f26394558 100644 --- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap +++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap @@ -216,7 +216,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 aria-label="Bold" color="text" iconType="editorBold" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -265,7 +264,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 aria-label="Italic" color="text" iconType="editorItalic" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -317,7 +315,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 aria-label="Unordered list" color="text" iconType="editorUnorderedList" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -366,7 +363,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 aria-label="Ordered list" color="text" iconType="editorOrderedList" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -415,7 +411,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 aria-label="Task list" color="text" iconType={[Function]} - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -467,7 +462,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 aria-label="Quote" color="text" iconType="quote" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -516,7 +510,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 aria-label="Code" color="text" iconType="editorCodeBlock" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -565,7 +558,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 aria-label="Link" color="text" iconType="editorLink" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -1574,7 +1566,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` aria-label="Bold" color="text" iconType="editorBold" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -1623,7 +1614,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` aria-label="Italic" color="text" iconType="editorItalic" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -1675,7 +1665,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` aria-label="Unordered list" color="text" iconType="editorUnorderedList" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -1724,7 +1713,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` aria-label="Ordered list" color="text" iconType="editorOrderedList" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -1773,7 +1761,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` aria-label="Task list" color="text" iconType={[Function]} - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -1825,7 +1812,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` aria-label="Quote" color="text" iconType="quote" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -1874,7 +1860,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` aria-label="Code" color="text" iconType="editorCodeBlock" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -1923,7 +1908,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` aria-label="Link" color="text" iconType="editorLink" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -1975,7 +1959,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` aria-label="Tooltip" color="text" iconType="editorComment" - isDisabled={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -4152,6 +4135,252 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = ` `; +exports[`EuiMarkdownEditor props isDisabled 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..65364753c00 100644 --- a/src/components/markdown_editor/markdown_editor_toolbar.tsx +++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx @@ -31,6 +31,7 @@ export type EuiMarkdownEditorToolbarProps = HTMLAttributes & viewMode: MARKDOWN_MODE; onClickPreview: MouseEventHandler; uiPlugins: EuiMarkdownEditorUiPlugin[]; + isDisabled?: boolean; }; const boldItalicButtons = [ @@ -98,7 +99,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< { markdownActions, viewMode, onClickPreview, uiPlugins, selectedNode }, ref: Ref ) => { - const { openPluginEditor } = useContext(EuiMarkdownContext); + const { openPluginEditor, isDisabled } = useContext(EuiMarkdownContext); const handleMdButtonClick = (mdButtonId: string) => { const actionResult = markdownActions.do(mdButtonId); @@ -107,6 +108,8 @@ export const EuiMarkdownEditorToolbar = forwardRef< const isPreviewing = viewMode === MODE_VIEWING; + const buttonIsDisabled = isPreviewing || isDisabled; + return (
@@ -117,7 +120,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< onClick={() => handleMdButtonClick(item.id)} iconType={item.iconType} aria-label={item.label} - isDisabled={isPreviewing} + isDisabled={buttonIsDisabled} /> ))} @@ -129,7 +132,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< onClick={() => handleMdButtonClick(item.id)} iconType={item.iconType} aria-label={item.label} - isDisabled={isPreviewing} + isDisabled={buttonIsDisabled} /> ))} @@ -141,7 +144,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< onClick={() => handleMdButtonClick(item.id)} iconType={item.iconType} aria-label={item.label} - isDisabled={isPreviewing} + isDisabled={buttonIsDisabled} /> ))} @@ -164,7 +167,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< onClick={() => handleMdButtonClick(name)} iconType={button.iconType} aria-label={button.label} - isDisabled={isPreviewing} + isDisabled={buttonIsDisabled} /> ); @@ -179,6 +182,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< color="text" size="s" onClick={onClickPreview} + isDisabled={isDisabled} > @@ -188,6 +192,7 @@ export const EuiMarkdownEditorToolbar = forwardRef< color="text" size="s" onClick={onClickPreview} + isDisabled={isDisabled} > Date: Fri, 11 Feb 2022 15:12:16 +0000 Subject: [PATCH 02/16] Adding in CL correct PR number --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 317652e4343..399c2dc072d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,13 @@ ## [`main`](https://github.com/elastic/eui/tree/main) - Improved `EuiSelectable` keypress scenarios ([#5613](https://github.com/elastic/eui/pull/5613)) +- Added `isDisabled` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627)) ## [`48.0.0`](https://github.com/elastic/eui/tree/v48.0.0) - Refactored `EuiSuggest` to use `EuiSelectable` ([#5157](https://github.com/elastic/eui/pull/5157)) - Added a return type to `EuiTable` `resolveWidthAsStyle` util ([#5615](https://github.com/elastic/eui/pull/5615)) - Added a return type to `euiSelectableTemplateSitewideFormatOptions` util ([#5620](https://github.com/elastic/eui/pull/5620)) -- Added `isDisabled` prop to `EuiMarkdownEditor` ([#0000](https://github.com/elastic/eui/pull/0000)) **Bug fixes** From 1982f97361853ae33403f4a147d843466b045258 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 14 Feb 2022 13:51:30 -0700 Subject: [PATCH 03/16] Make markdown checkboxes respect isDisabled state --- .../markdown_editor/plugins/markdown_checkbox/renderer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx b/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx index c594543aec9..0ee1cc527a4 100644 --- a/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx +++ b/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx @@ -18,10 +18,11 @@ export const CheckboxMarkdownRenderer: FunctionComponent< position: EuiMarkdownAstNodePosition; } > = ({ position, lead, label, isChecked, children }) => { - const { replaceNode } = useContext(EuiMarkdownContext); + const { isDisabled, replaceNode } = useContext(EuiMarkdownContext); return ( { From e1c1bca0a19d134aac68ce73b763ff6d9e37d931 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 15 Feb 2022 12:22:09 +0000 Subject: [PATCH 04/16] Adding all plugins into the base editor example. --- src-docs/src/views/markdown_editor/markdown_editor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js index ce2f53d47e7..a9d9f0e4d33 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor.js +++ b/src-docs/src/views/markdown_editor/markdown_editor.js @@ -19,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 = [ From 1a2bead2eebce55e1b1ead3b0a847961f7fc0138 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 15 Feb 2022 13:03:27 +0000 Subject: [PATCH 05/16] Removing pointer events none --- src/components/markdown_editor/_markdown_editor_preview.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss index 6edd7d6701d..a639a2536e0 100644 --- a/src/components/markdown_editor/_markdown_editor_preview.scss +++ b/src/components/markdown_editor/_markdown_editor_preview.scss @@ -10,6 +10,4 @@ .euiMarkdownEditorPreview-isDisabled { @include euiFormControlDisabledTextStyle; cursor: not-allowed; - // prevents interactive components like checkboxes to be clickable - pointer-events: none; } \ No newline at end of file From 7dbe54d52482b30a963ab7dda444592d7b619945 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 15 Feb 2022 13:30:03 +0000 Subject: [PATCH 06/16] Preventing components like the tooltip to work in disabled state --- src/components/markdown_editor/_markdown_editor_preview.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss index a639a2536e0..5bb6262d752 100644 --- a/src/components/markdown_editor/_markdown_editor_preview.scss +++ b/src/components/markdown_editor/_markdown_editor_preview.scss @@ -9,5 +9,6 @@ .euiMarkdownEditorPreview-isDisabled { @include euiFormControlDisabledTextStyle; - cursor: not-allowed; + // prevents components like the tooltip to work + pointer-events: none; } \ No newline at end of file From 2b4b3143a390c74e579b7db6a92f6500c915f3cf Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 16 Feb 2022 13:48:26 +0000 Subject: [PATCH 07/16] Adding `readOnly` state --- CHANGELOG.md | 3 +- .../views/markdown_editor/markdown_editor.js | 10 +-- .../markdown_editor.test.tsx.snap | 80 +++++++++---------- .../_markdown_editor_preview.scss | 6 -- .../_markdown_editor_text_area.scss | 12 ++- .../markdown_editor/markdown_context.ts | 4 +- .../markdown_editor/markdown_editor.test.tsx | 4 +- .../markdown_editor/markdown_editor.tsx | 14 ++-- .../markdown_editor_footer.tsx | 12 +-- .../markdown_editor_text_area.tsx | 11 +-- .../markdown_editor_toolbar.tsx | 9 +-- .../plugins/markdown_checkbox/renderer.tsx | 4 +- 12 files changed, 83 insertions(+), 86 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d027b992035..c08fa451944 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,10 @@ ## [`main`](https://github.com/elastic/eui/tree/main) -No public interface changes since `48.1.0`. +- Added `readOnly` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627)) ## [`48.1.0`](https://github.com/elastic/eui/tree/v48.1.0) - Improved `EuiSelectable` keypress scenarios ([#5613](https://github.com/elastic/eui/pull/5613)) -- Added `isDisabled` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627)) - Converted `FieldValueSelectionFilter` in `EuiSearchBar` to use `EuiSelectable` ([#5387](https://github.com/elastic/eui/issues/5387)) - Added `lineDashed`, `lineDotted`, and `lineSolid` glyphs to `EuiIcon` ([#5633](https://github.com/elastic/eui/pull/5633)) - Updated `colorMode` return type in theme context utilities ([#5639](https://github.com/elastic/eui/issues/5639)) diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js index a9d9f0e4d33..3e6b98a12c0 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor.js +++ b/src-docs/src/views/markdown_editor/markdown_editor.js @@ -54,10 +54,10 @@ export default () => { setAst(JSON.stringify(ast, null, 2)); }, []); - const [isDisabled, setIsDisabled] = useState(false); + const [isReadOnly, setIsReadOnly] = useState(false); const onChange = (e) => { - setIsDisabled(e.target.checked); + setIsReadOnly(e.target.checked); }; return ( @@ -71,15 +71,15 @@ export default () => { onParse={onParse} errors={messages} dropHandlers={dropHandlers} - isDisabled={isDisabled} + readOnly={isReadOnly} initialViewMode="viewing" /> 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 d2f26394558..89d1f3fcac1 100644 --- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap +++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap @@ -4135,7 +4135,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
`; -exports[`EuiMarkdownEditor props isDisabled is set to true 1`] = ` +exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] = `