Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiMarkdownEditor] Add readOnly prop #5627

Merged
merged 22 commits into from
Feb 23, 2022
Merged

[EuiMarkdownEditor] Add readOnly prop #5627

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
bf09b65
Added `isDisabled` prop to `EuiMarkdownEditor`
elizabetdev Feb 10, 2022
7c14d7c
Merge remote-tracking branch 'upstream/main' into markdown-editor-dis…
elizabetdev Feb 11, 2022
6b623c0
Adding in CL correct PR number
elizabetdev Feb 11, 2022
1982f97
Make markdown checkboxes respect isDisabled state
chandlerprall Feb 14, 2022
68f589b
Merge remote-tracking branch 'upstream/main' into markdown-editor-dis…
elizabetdev Feb 15, 2022
e1c1bca
Adding all plugins into the base editor example.
elizabetdev Feb 15, 2022
1a2bead
Removing pointer events none
elizabetdev Feb 15, 2022
7dbe54d
Preventing components like the tooltip to work in disabled state
elizabetdev Feb 15, 2022
23d70ed
Merge remote-tracking branch 'upstream/main' into markdown-editor-dis…
elizabetdev Feb 16, 2022
2b4b314
Adding `readOnly` state
elizabetdev Feb 16, 2022
9cf3408
prevent markdown changes in readonly mode
chandlerprall Feb 16, 2022
5bf9372
Checkboxes `-isReadOnly` styles
elizabetdev Feb 17, 2022
4025a6d
Merge remote-tracking branch 'upstream/main' into markdown-editor-dis…
elizabetdev Feb 17, 2022
53478ee
Reverting euiFormControlReadOnlyStyle mixin
elizabetdev Feb 22, 2022
1cd7fde
Merge remote-tracking branch 'upstream/main' into markdown-editor-dis…
elizabetdev Feb 22, 2022
0bc46e6
Update src/components/markdown_editor/markdown_editor_toolbar.tsx
elizabetdev Feb 23, 2022
d0b553b
Addressing PR review
elizabetdev Feb 23, 2022
5b2d50a
Merge remote-tracking branch 'upstream/main' into markdown-editor-dis…
elizabetdev Feb 23, 2022
cd2e9c6
Removing unnecessary type
elizabetdev Feb 23, 2022
f9312e0
Text
elizabetdev Feb 23, 2022
b73a006
Update src-docs/src/views/markdown_editor/mardown_editor_example.js
elizabetdev Feb 23, 2022
575a6fa
Making `prettier`!
elizabetdev Feb 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
## [`main`](https://github.com/elastic/eui/tree/main)

- Added `readOnly` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627))
- Added new `renderCellPopover` prop to `EuiDataGrid` ([#5640](https://github.com/elastic/eui/pull/5640))
- Added cell `schema` info to `EuiDataGrid`'s `renderCellValue` props ([#5640](https://github.com/elastic/eui/pull/5640))
- Added `isLoading` prop to `EuiDualRange` ([#5648](https://github.com/elastic/eui/pull/5648))
Expand Down
48 changes: 38 additions & 10 deletions src-docs/src/views/markdown_editor/markdown_editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import {
EuiSpacer,
EuiCodeBlock,
EuiButton,
EuiSwitch,
EuiFlexGroup,
EuiFlexItem,
} from '../../../../src/components';

const initialContent = `## Hello world!
Expand All @@ -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 = [
Expand Down Expand Up @@ -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 (
<>
<EuiMarkdownEditor
Expand All @@ -57,18 +71,32 @@ export default () => {
onParse={onParse}
errors={messages}
dropHandlers={dropHandlers}
readOnly={isReadOnly}
initialViewMode="viewing"
/>
<EuiSpacer size="s" />
<div className="eui-textRight">
<EuiButton
size="s"
iconType={isAstShowing ? 'eyeClosed' : 'eye'}
onClick={() => setIsAstShowing(!isAstShowing)}
fill={isAstShowing}
>
{isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
</EuiButton>
</div>
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={true}>
<EuiSwitch
label="Read-only"
checked={isReadOnly}
onChange={onChange}
/>
</EuiFlexItem>
Comment on lines +79 to +85
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I highly suggest adding a sentence about the use of this prop to the text of this example. Maybe explaining, that if the consumer needs to disallow editing while submission is happening, then they should manually update this prop.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of this text?
Base editor@2x

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like it! I just have a quick suggestion to tighten up the language.

<EuiFlexItem grow={false}>
<EuiButton
size="s"
iconType={isAstShowing ? 'eyeClosed' : 'eye'}
onClick={() => setIsAstShowing(!isAstShowing)}
fill={isAstShowing}
>
{isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />

{isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
</>
);
Expand Down
Loading