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.

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

Merged
merged 6 commits into from
Dec 21, 2023
Merged

Conversation

arimet
Copy link
Contributor

@arimet arimet commented Dec 11, 2023

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

@adguernier adguernier self-requested a review December 13, 2023 09:06
Copy link
Contributor

@adguernier adguernier left a 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 👍

Copy link
Collaborator

@djhi djhi left a 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

Comment on lines 181 to 216
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>
);
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants