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 20 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
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)

Expand Down
21 changes: 17 additions & 4 deletions src-docs/src/views/markdown_editor/mardown_editor_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,23 @@ export const MarkdownEditorExample = {
],
title: 'Base editor',
text: (
<p>
The base editor can render basic markdown along with some built-in
plugins.
</p>
<>
<p>
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.
</p>
<p>
Producing technical content is one of its main use cases. Another
one might be adding comments to a{' '}
<Link to="/display/comment-list">EuiCommentList</Link>. When dealing
with asynchronous events consider using the{' '}
<EuiCode>readOnly</EuiCode> prop to restrict editing during the
submit events. This will ensure users understand that the content
can no longer be changed while the comment is being submitted.
elizabetdev marked this conversation as resolved.
Show resolved Hide resolved
</p>
</>
),
props: {
EuiMarkdownEditor,
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
246 changes: 246 additions & 0 deletions src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4385,3 +4385,249 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
</div>
</div>
`;

exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
<div
class="euiMarkdownEditor testClass1 testClass2"
data-test-subj="test subject string"
>
<div
class="euiMarkdownEditorToolbar"
>
<div
class="euiMarkdownEditorToolbar__buttons"
>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Bold"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="editorBold"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Italic"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="editorItalic"
/>
</button>
</span>
<span
class="euiMarkdownEditorToolbar__divider"
/>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Unordered list"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="editorUnorderedList"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Ordered list"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="editorOrderedList"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Task list"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="MarkdownCheckmark"
/>
</button>
</span>
<span
class="euiMarkdownEditorToolbar__divider"
/>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Quote"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="quote"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Code"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="editorCodeBlock"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Link"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="editorLink"
/>
</button>
</span>
<span
class="euiMarkdownEditorToolbar__divider"
/>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Tooltip"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="editorComment"
/>
</button>
</span>
</div>
<button
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled"
disabled=""
type="button"
>
<span
class="euiButtonContent euiButtonEmpty__content"
>
<span
class="euiButtonContent__icon"
color="inherit"
data-euiicon-type="eye"
/>
<span
class="euiButtonEmpty__text"
>
Preview
</span>
</span>
</button>
</div>
<div
class="euiMarkdownEditor__toggleContainer"
style="height:calc(100% - 0px)"
>
<div
class="euiMarkdownEditorDropZone"
>
<textarea
aria-label="aria-label"
class="euiMarkdownEditorTextArea euiMarkdownEditorTextArea-isReadOnly"
id="editorId"
readonly=""
rows="6"
style="height:calc(250px);max-height:500px"
/>
<div
class="euiMarkdownEditorFooter"
>
<div
class="euiMarkdownEditorFooter__actions"
/>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Show markdown help"
class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small euiMarkdownEditorFooter__helpButton"
disabled=""
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="MarkdownLogo"
/>
</button>
</span>
</div>
<input
autocomplete="off"
multiple=""
style="display:none"
tabindex="-1"
type="file"
/>
</div>
</div>
</div>
`;
12 changes: 12 additions & 0 deletions src/components/markdown_editor/_markdown_editor_preview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,15 @@
border: $euiBorderThin;
padding: $euiSizeM;
}

.euiMarkdownEditorPreview-isReadOnly {
// overrides cursor pointer to better indicate that checkboxes are not clickable
.euiCheckbox__input ~ .euiCheckbox__label {
cursor: default;
}

// maintains the initial color on click to enforce that clicks are not doing anything
.euiCheckbox__input:focus:not(:checked) + .euiCheckbox__square {
border-color: $euiFormCustomControlBorderColor;
}
}
10 changes: 10 additions & 0 deletions src/components/markdown_editor/_markdown_editor_text_area.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,13 @@
background-size: 100% 100%;
}
}

.euiMarkdownEditorTextArea-isReadOnly {
background: $euiFormBackgroundReadOnlyColor;
elizabetdev marked this conversation as resolved.
Show resolved Hide resolved
cursor: unset;

&:focus,
.euiMarkdownEditor:focus-within & {
background: none;
}
}
Loading