[EuiMarkdown] Allow mailto: links by default & allow customization of link validation #5790
Conversation
chandlerprall
force-pushed
the
bug/5770-markdown-mailto
branch
from
f7872ac to
a58ede3
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5790/ |
1 similar comment
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5790/ |
chandlerprall
changed the title
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5790/ |
src/components/markdown_editor/plugins/markdown_link_validator.test.tsx
Outdated
Show resolved
Hide resolved
src/components/markdown_editor/plugins/markdown_link_validator.tsx
Outdated
Show resolved
Hide resolved
src/components/markdown_editor/plugins/markdown_link_validator.tsx
Outdated
Show resolved
Hide resolved
src/components/markdown_editor/plugins/markdown_link_validator.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Thanks, @chandlerprall for fixing this issue.
IMO the links should be presented as links. Not as normal text. We say that we follow the GitHub flavoured markdown:
In Github, if we pass helpdesk@elastic.co or [helpdesk@elastic.co](mailto:helpdesk@elastic.co) both creates a link:
But I think we can be a little bit different from Github here. But my expectation as a user is when I pass a link syntax [](url) a link is actually created. Why would I have so much work to try to create a link for nothing?
So if I pass helpdesk@elastic.co it's ok to be normal text. But [helpdesk@elastic.co](mailto:helpdesk@elastic.co) should be a link. If consumers don't want to create link they just pass the text without a link syntax.
… unlink those values for security reasons
chandlerprall
force-pushed
the
bug/5770-markdown-mailto
branch
from
b63fca8 to
fdac6a1
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5790/ |
| @@ -6,19 +6,20 @@ | |||
| * Side Public License, v 1. | |||
| */ | |||
|
|
|||
| const isElasticDomain = /(https?:\/\/(.+?\.)?elastic\.co((\/|\?)[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/g; | |||
| const isElasticHost = /^([a-zA-Z0-9]+\.)*elastic\.co$/; | |||
src/components/markdown_editor/plugins/markdown_link_validator.tsx
Outdated
Show resolved
Hide resolved
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5790/ |
chandlerprall
changed the title
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5790/ |
| @@ -170,6 +173,186 @@ export const MarkdownPluginExample = { | |||
| ), | |||
|
|
|||
| sections: [ | |||
| { | |||
| title: 'Default plugins', | |||
There was a problem hiding this comment.
This new documentation is fantastic!! Thank you for adding it!
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5790/ |
Summary
Fixes #5770 by adding
mailto:markdown links to the list of allowed protocols (now http:, https:, and mailto:), and made the validation customizable.When a link protocol is disallowed, the link will render as the markdown syntax so the URL and its display text are still present. The exception to this rule is if
mailto:is disabled, only the link text will be displayed.I also took this opportunity to add a documentation section to explain the various plugin defaults used by the markdown components, and extended the existing markdown link validation to accept a configuration object, and documented that 😅.
Also took the time the update
isDomainSecureas we can now use theURLmethod (bye ie11!), avoiding a nasty regex.Checklist
- [ ] Checked in both light and dark modes- [ ] Checked in mobile- [ ] Checked in Chrome, Safari, Edge, and Firefox- [ ] Props have proper autodocs and playground toggles- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] Updated the Figma library counterpart