[EuiMarkdownEditor] Added popover to display help syntax text when no custom plugins are available #5147

elizabetdev · 2021-09-07T12:44:11Z

Summary

Closes #5127.

This PR adds a popover to display help syntax text when no custom plugins are available.
Adds an easier way to unregister plugins (thanks to @chandlerprall).
Adds documentation to show how we can unregister plugins.

Design

If we're not showing syntax for plugins, we display the help syntax in a popover. No need to have a modal just with a link to the GitHub Flavored Markdown page.

The Markdown button was not displaying correctly on hover.

New docs section

As per my comment on #5127 (comment). I think it isn't easy to know how to unregister plugins. For me, it makes sense to have a section in our docs to show how to do it. So I created the following section on #/editors-syntax/markdown-editor#unregistering-plugins.

Checklist

Check against all themes for compatibility in both light and dark modes
[ ] Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
[ ] Props have proper autodocs and playground toggles
Added documentation
~~[ ] Checked Code Sandbox works for the any docs examples~~
Added or updated jest tests
~~[ ] Checked for breaking changes and labeled appropriately~~
~~[ ] Checked for accessibility including keyboard-only and screenreader modes~~
A changelog entry exists and is marked appropriately

kibanamachine · 2021-09-07T13:13:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

chandlerprall · 2021-09-07T21:33:15Z

I think it isn't easy to know how to unregister plugins. For me, it makes sense to have a section in our docs to show how to do it

🚀 great example idea; I've created a PR against your branch with an easier way to disable the tooltip plugin (and we can extend it with any other complete plugins in the future)

…ugins-ui-excludes Made opting out of the tooltip markdown plugin much easier

…help-no-plugins-ui

elizabetdev · 2021-09-10T14:36:53Z

@chandlerprall the CI is always failling 🤷🏽 with:

15:25:16 Generating typescript definitions file
15:25:16 eui.d.ts(11728,29): error TS2307: Cannot find module 'unified/types/ts3.4/' or its corresponding type declarations.
15:26:16 eui.d.ts(11729,34): error TS2307: Cannot find module 'unified/types/ts3.4/' or its corresponding type declarations.
15:26:16 eui.d.ts(11729,377): error TS2307: Cannot find module 'unified/types/ts3.4/' or its corresponding type declarations.
15:26:16 child_process.js:669
15:26:16     throw err;

thompsongl · 2021-09-10T15:39:53Z

👉 elizabetdev#24 will fix the CI failure

…ns-ui `unified` types

elizabetdev · 2021-09-10T15:48:33Z

Thanks @thompsongl! 😄

elizabetdev · 2021-09-10T18:44:22Z

jenkins test this

kibanamachine · 2021-09-10T19:09:22Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

cchaos

I like the simplicity of just showing the popover when there's not much more context than just pointing to GH markdown docs. 💯

The component fixes mostly LGTM (with a few fixes mentioned), but most of my comments revolve around the docs to try to make it clearer / get straight to the point.

CHANGELOG.md

src-docs/src/views/markdown_editor/mardown_editor_example.js

cchaos · 2021-09-13T15:32:57Z

src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js

+          {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
+        </EuiButton>
+      </div>
+      {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}


Can be in a follow up PR:

Because this continues to be added to every examples, and I can understand the nicety to it, I start worrying that it actually looks like it comes with the component. Can we rethink a way to render this. Like maybe look at how the Page examples are wrapped in a custom component but only renders what it needed for the consumer.

I'll follow up on this. 👍🏽

src/components/markdown_editor/_markdown_editor_footer.scss

src/components/markdown_editor/markdown_editor_footer.tsx

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

kibanamachine · 2021-09-14T11:32:20Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

kibanamachine · 2021-09-14T12:56:38Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

elizabetdev · 2021-09-14T14:11:24Z

@cchaos I finished the changes based on your review:

No more HTML code.
I wrapped the markdown button with a tooltip.
Updated the markdown button to size "S" and updated the upload button to match the same size.
Simplified the example and removed unnecessary code like upload button, errors, and show editor AST.

thompsongl

Thanks, @miukimiu!

kibanamachine · 2021-09-14T14:35:26Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

…help-no-plugins-ui

kibanamachine · 2021-09-20T15:06:19Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

Outdated

kibanamachine · 2021-09-20T16:09:41Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

kibanamachine · 2021-09-21T19:40:35Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

…help-no-plugins-ui

kibanamachine · 2021-09-22T12:42:21Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

elizabetdev · 2021-09-22T12:42:22Z

@cchaos and @thompsongl these are the new changes:

The popover is back when no plugins are available. For this scenario, I'm using the button title with "Syntax help" instead of a tooltip so it doesn't conflict with the open popover.
Linking the "GitHub flavored markdown" to https://guides.github.com/features/mastering-markdown/. The other page we were linking before was too complex and we were not supporting a lot of things. @cchaos we talked about linking to https://www.markdownguide.org/ instead but I came to the conclusion that we're following more the GitHub flavored markdown. We support emojis, task lists, and strikethrough.

cchaos

👍 The UI looks great. But I did find a possible edge case where if there are plugins but none of the plugins actually have helpText.

src/components/markdown_editor/markdown_editor_footer.tsx

kibanamachine · 2021-09-22T15:33:38Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5147/

cchaos

👍 Double-checked the different examples with the new logic. LGTM!

Rebase and CL update needed.

elizabetdev · 2021-09-22T16:49:45Z

Rebase and CL update needed.

Thanks, @cchaos! I confirmed and it's updated and rebased.
@thompsongl I'm merging it because I reverted the code to what it was when you approved.

elizabetdev added 3 commits September 6, 2021 20:19

Added popover to display help syntax text when no plugins are available

721d094

New title for the example

0d7fd8e

Adding CL

39e77e2

Made opting out of the tooltip markdown plugin much easier

90a669a

elizabetdev added 6 commits September 8, 2021 12:18

Merge pull request #23 from chandlerprall/md-editor-syntax-help-no-pl…

34ba51d

…ugins-ui-excludes Made opting out of the tooltip markdown plugin much easier

Merge remote-tracking branch 'upstream/master' into md-editor-syntax-…

d6b1585

…help-no-plugins-ui

Improving text and example

c20910f

Example text

50d84b5

Added CL line

2aecd82

CL again

54e7a76

elizabetdev changed the title ~~[EuiMarkdownEditor] Added popover to display help syntax text when no plugins are available~~ [EuiMarkdownEditor] Added popover to display help syntax text when no custom plugins are available Sep 8, 2021

elizabetdev marked this pull request as ready for review September 8, 2021 17:00

elizabetdev added 4 commits September 8, 2021 19:09

Adding tests

51aabb2

Merge remote-tracking branch 'upstream/master' into md-editor-syntax-…

fbd09a8

…help-no-plugins-ui

Merge remote-tracking branch 'upstream/master' into md-editor-syntax-…

b80b9d5

…help-no-plugins-ui

Merge remote-tracking branch 'upstream/master' into md-editor-syntax-…

973fcf0

…help-no-plugins-ui

elizabetdev requested a review from cchaos September 10, 2021 14:39

unified types

a1b3e0a

Merge pull request #24 from thompsongl/md-editor-syntax-help-no-plugi…

339d9d4

…ns-ui `unified` types

cchaos requested a review from thompsongl September 13, 2021 15:09

cchaos suggested changes Sep 13, 2021

View reviewed changes

elizabetdev and others added 2 commits September 13, 2021 18:11

No more HTML tabs

e66ca53

Update src-docs/src/views/markdown_editor/mardown_editor_example.js

b39ffb7

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

elizabetdev added 2 commits September 14, 2021 13:24

No plugins with just a tooltip

14099c5

CL

32aa812

elizabetdev changed the title ~~[EuiMarkdownEditor] Added popover to display help syntax text when no custom plugins are available~~ [EuiMarkdownEditor] Added tooltip to display help syntax text when no custom plugins are available Sep 14, 2021

elizabetdev added 2 commits September 14, 2021 14:55

Removed unnecessary styles

d82b9a7

CL

42107e3

elizabetdev requested a review from cchaos September 14, 2021 14:11

thompsongl previously approved these changes Sep 14, 2021

View reviewed changes

Merge remote-tracking branch 'upstream/master' into md-editor-syntax-…

92dadbc

…help-no-plugins-ui

thompsongl self-requested a review September 20, 2021 15:53

elizabetdev force-pushed the md-editor-syntax-help-no-plugins-ui branch from 4c767b9 to 92dadbc Compare September 21, 2021 19:18

elizabetdev added 2 commits September 22, 2021 12:31

Merge remote-tracking branch 'upstream/master' into md-editor-syntax-…

96492da

…help-no-plugins-ui

Popover and new github link

6d94f22

elizabetdev changed the title ~~[EuiMarkdownEditor] Added tooltip to display help syntax text when no custom plugins are available~~ [EuiMarkdownEditor] Added popover to display help syntax text when no custom plugins are available Sep 22, 2021

cchaos reviewed Sep 22, 2021

View reviewed changes

src/components/markdown_editor/markdown_editor_footer.tsx Outdated Show resolved Hide resolved

Only show modal for hasUiPluginsWithHelpText

b418a88

cchaos approved these changes Sep 22, 2021

View reviewed changes

elizabetdev merged commit 3ec8cff into elastic:master Sep 22, 2021

breehall mentioned this pull request Oct 1, 2021

Bumping EUI to 39.0.0 elastic/kibana#113633

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiMarkdownEditor] Added popover to display help syntax text when no custom plugins are available #5147

[EuiMarkdownEditor] Added popover to display help syntax text when no custom plugins are available #5147

elizabetdev commented Sep 7, 2021 •

edited

Loading

kibanamachine commented Sep 7, 2021

chandlerprall commented Sep 7, 2021

elizabetdev commented Sep 10, 2021

thompsongl commented Sep 10, 2021

elizabetdev commented Sep 10, 2021

elizabetdev commented Sep 10, 2021

kibanamachine commented Sep 10, 2021

cchaos left a comment

cchaos Sep 13, 2021

elizabetdev Sep 14, 2021

kibanamachine commented Sep 14, 2021

kibanamachine commented Sep 14, 2021

elizabetdev commented Sep 14, 2021

thompsongl left a comment

kibanamachine commented Sep 14, 2021

kibanamachine commented Sep 20, 2021

kibanamachine commented Sep 20, 2021

kibanamachine commented Sep 21, 2021

kibanamachine commented Sep 22, 2021

elizabetdev commented Sep 22, 2021

cchaos left a comment

kibanamachine commented Sep 22, 2021

cchaos left a comment

elizabetdev commented Sep 22, 2021 •

edited

Loading

[EuiMarkdownEditor] Added popover to display help syntax text when no custom plugins are available #5147

[EuiMarkdownEditor] Added popover to display help syntax text when no custom plugins are available #5147

Conversation

elizabetdev commented Sep 7, 2021 • edited Loading

Summary

Design

New docs section

Checklist

kibanamachine commented Sep 7, 2021

chandlerprall commented Sep 7, 2021

elizabetdev commented Sep 10, 2021

thompsongl commented Sep 10, 2021

elizabetdev commented Sep 10, 2021

elizabetdev commented Sep 10, 2021

kibanamachine commented Sep 10, 2021

cchaos left a comment

Choose a reason for hiding this comment

cchaos Sep 13, 2021

Choose a reason for hiding this comment

elizabetdev Sep 14, 2021

Choose a reason for hiding this comment

kibanamachine commented Sep 14, 2021

kibanamachine commented Sep 14, 2021

elizabetdev commented Sep 14, 2021

thompsongl left a comment

Choose a reason for hiding this comment

kibanamachine commented Sep 14, 2021

kibanamachine commented Sep 20, 2021

kibanamachine commented Sep 20, 2021

kibanamachine commented Sep 21, 2021

kibanamachine commented Sep 22, 2021

elizabetdev commented Sep 22, 2021

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented Sep 22, 2021

cchaos left a comment

Choose a reason for hiding this comment

elizabetdev commented Sep 22, 2021 • edited Loading

elizabetdev commented Sep 7, 2021 •

edited

Loading

elizabetdev commented Sep 22, 2021 •

edited

Loading