feat: pass markdown for hint message on field #5584
Conversation
erezrokah
added
the
type: feature
There was a problem hiding this comment.
Thanks @gdgkirkley, can you look into supporting markdown and not HTML directly?
packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
Outdated
Show resolved
Hide resolved
|
Hey @erezrokah - I've updated to use I also made an update to the docs - hope that makes sense for this change! |
gdgkirkley
changed the title
erezrokah
force-pushed
the
5559-html-hints
branch
from
a738523
to
0ba51ff
Compare
| @@ -328,7 +329,23 @@ class EditorControl extends React.Component { | |||
| /> | |||
| {fieldHint && ( | |||
| <ControlHint active={isSelected || this.state.styleActive} error={hasErrors}> | |||
| {fieldHint} | |||
| <ReactMarkdown | |||
| allowedElements={['a', 'strong', 'em']} | |||
There was a problem hiding this comment.
em should be used to support italic.
Also, with unwrapDisallowed=true we don't need the p element or the added styling.
| a: ({ node, ...props }) => ( | ||
| <a | ||
| {...props} | ||
| target="_blank" |
| {...props} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| style={{ color: 'inherit' }} |
There was a problem hiding this comment.
Inherit the color for links
There was a problem hiding this comment.
Thanks for the follow up @gdgkirkley!
I've made some minor changes to fix italic, open links in a new tabs and also apply the active/error style (active - when the field is focused, error when for example the field is required and the user clicks save).
|
I was testing out the new support for strikethroughs in hints and saw that the link in the hint, enabled by this feat, has link styling that's overriding the hint styling, mainly font-size and font-weight. This doesn't seem like desired behavior, can someone confirm?
|
Summary
This adds the option to include HTML in the hint message on a field. Closes #5559
The issue creator requested support for Markdown, which could be added in future but would require parsing the markdown from the config and would be a larger change. This is a simpler addition that addresses the same issue.
Test plan
I didn't see any existing tests for these components, but would be more than happy to add if I just missed them! This passes the existing tests.
A picture of a cute animal (not mandatory but encouraged)
