-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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.
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
Doc: Improve MarkdownInput documentation #9511
Conversation
ab5a65c
to
5747b3a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Two more things:
- IMO it would be good to add screenshots
- the example that shows how to "Customize the markdown renderer used for the preview" from the RAEE doc is missing
Otherwise it looks good 👍
8c5ad56
to
618fd68
Compare
618fd68
to
2d58140
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please make all the examples copy/pastable with imports, etc. Also, write them in TSX
docs/MarkdownInput.md
Outdated
function createLastButton() { | ||
const button = document.createElement('button'); | ||
button.className = 'toastui-editor-toolbar-icons last'; | ||
button.style.backgroundImage = 'none'; | ||
button.style.margin = '0'; | ||
button.style.width = '100%'; | ||
button.innerHTML = `<i>Custom Button</i>`; | ||
button.addEventListener('click', () => { | ||
alert('Custom Button action'); | ||
}); | ||
|
||
return button; | ||
} | ||
|
||
return ( | ||
<SimpleForm> | ||
<MarkdownInput | ||
source="description" | ||
toolbarItems={[ | ||
['heading', 'bold', 'italic', 'strike'], | ||
[ | ||
{ | ||
el: createLastButton(), | ||
tooltip: 'Custom Command', | ||
name: 'custom', | ||
}, | ||
], | ||
]} | ||
/> | ||
</SimpleForm> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you complete this example? Imports, real component, etc.
2d58140
to
dabcc5b
Compare
Problem
The documentation for MarkdownInput is short and doesn't show the power of that component.
https://marmelab.com/react-admin/MarkdownInput.html
Solution
Expand it