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

Custom React components for Markdown elements #613

Closed
ryanoglesby08 opened this Issue Sep 25, 2017 · 8 comments

Comments

Projects
None yet
4 participants
@ryanoglesby08
Contributor

ryanoglesby08 commented Sep 25, 2017

I'd like to be able to configure custom components that get used when rendering Markdown documentation blocks.

For example, I have a custom <Link> component and would like to render that for all hyperlinks in my documentation.

Raw Markdown: MyComponent.md
"You can find more information about the inspiration for this component [here](http://example.com)."

Compiled
"You can find more information about the inspiration for this component <Link href="http://example.com"> here </Link>.

I see that this is possible by completely replacing the Markdown.js component as described in the Cookbook and configuring HTML "a" tags to use my custom Link component.

Replacing the entire Markdown.js component feels dirty and dangerous and it is a very large component that has a lot of responsibilities.

I would prefer to be able to provide a custom mapping as configuration to react-styleguidist. Or if each element in Markdown.js is exposed as a separate component, I could override just the ones I want.

Have you considered these possibilities? Is replacing the Markdown.js file the way to go? I could also look at making a PR to add this capability.

Thanks for the great tool btw! I've used it on multiple projects now. :)

@sapegin

This comment has been minimized.

Show comment
Hide comment
@sapegin

sapegin Sep 25, 2017

Member

Have you considered these possibilities? Is replacing the Markdown.js file the way to go? I could also look at making a PR to add this capability.

No, but it looks like a good idea and shouldn’t add a lot of complexity, so feel free to make a PR for that! ;-)

Member

sapegin commented Sep 25, 2017

Have you considered these possibilities? Is replacing the Markdown.js file the way to go? I could also look at making a PR to add this capability.

No, but it looks like a good idea and shouldn’t add a lot of complexity, so feel free to make a PR for that! ;-)

@ryanoglesby08

This comment has been minimized.

Show comment
Hide comment
@ryanoglesby08

ryanoglesby08 Sep 28, 2017

Contributor

Awesome! Will work on it.

Contributor

ryanoglesby08 commented Sep 28, 2017

Awesome! Will work on it.

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Oct 1, 2017

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Oct 13, 2017

@SaraVieira

This comment has been minimized.

Show comment
Hide comment
@SaraVieira

SaraVieira Oct 31, 2017

Collaborator

@sapegin Would be allowing a markdown parser the way to go ?

Collaborator

SaraVieira commented Oct 31, 2017

@sapegin Would be allowing a markdown parser the way to go ?

@sapegin sapegin removed the Hacktoberfest label Nov 6, 2017

@sapegin

This comment has been minimized.

Show comment
Hide comment
@sapegin

sapegin Nov 23, 2017

Member

@SaraVieira Not sure I understand what you mean here ;-|

Member

sapegin commented Nov 23, 2017

@SaraVieira Not sure I understand what you mean here ;-|

@probablyup

This comment has been minimized.

Show comment
Hide comment
@probablyup

probablyup Dec 3, 2017

Contributor

Not sure if @sapegin has it exposed, but markdown-to-jsx has this capability: https://github.com/probablyup/markdown-to-jsx

Contributor

probablyup commented Dec 3, 2017

Not sure if @sapegin has it exposed, but markdown-to-jsx has this capability: https://github.com/probablyup/markdown-to-jsx

@ryanoglesby08

This comment has been minimized.

Show comment
Hide comment
@ryanoglesby08

ryanoglesby08 Dec 3, 2017

Contributor

Yep @probablyup the capability is not directly exposed to the consumer of react-styleguidist quite yet. I'm working through some PRs (#650 and #651 already merged) to introduce more components into the markdown parsing so that the consumer can specify their own.

The entire list of components to create is in this PR --> #619, if anyone else wants to help out!

(@probablyup Thanks for the awesome markdown-to-jsx library btw!)

Contributor

ryanoglesby08 commented Dec 3, 2017

Yep @probablyup the capability is not directly exposed to the consumer of react-styleguidist quite yet. I'm working through some PRs (#650 and #651 already merged) to introduce more components into the markdown parsing so that the consumer can specify their own.

The entire list of components to create is in this PR --> #619, if anyone else wants to help out!

(@probablyup Thanks for the awesome markdown-to-jsx library btw!)

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Feb 4, 2018

Introduce markdown Blockquote component. #613
So that it is for consumers to customize their styleguide by replacing
components.

sapegin added a commit that referenced this issue Feb 6, 2018

Refactor: Introduce markdown Blockquote component #613 (#805)
So that it is for consumers to customize their styleguide by replacing
components.

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Feb 9, 2018

Combine existing Code component with the Markdown Code component. #613
... to allow easier overriding by consumers of Markdown components.

* Support both escaped and non-escaped code blocks
* Introduce Markdown > Pre component

sapegin added a commit that referenced this issue Feb 12, 2018

sapegin added a commit that referenced this issue Feb 19, 2018

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Feb 26, 2018

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Feb 26, 2018

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Feb 26, 2018

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Feb 26, 2018

sapegin added a commit that referenced this issue Feb 26, 2018

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Mar 2, 2018

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Mar 2, 2018

ryanoglesby08 added a commit to ryanoglesby08/react-styleguidist that referenced this issue Mar 2, 2018

@ryanoglesby08

This comment has been minimized.

Show comment
Hide comment
@ryanoglesby08

ryanoglesby08 Mar 7, 2018

Contributor

All Markdown elements now have corresponding React components in styleguidist, that can easily be overridden by consumers using normal aliases as is described in the documentation: https://react-styleguidist.js.org/docs/configuration.html#styleguidecomponents

Closing this issue now.

Contributor

ryanoglesby08 commented Mar 7, 2018

All Markdown elements now have corresponding React components in styleguidist, that can easily be overridden by consumers using normal aliases as is described in the documentation: https://react-styleguidist.js.org/docs/configuration.html#styleguidecomponents

Closing this issue now.

@sapegin

This comment has been minimized.

Show comment
Hide comment
@sapegin

sapegin Mar 16, 2018

Member

@ryanoglesby08 Thank you for amazing work!! 🦄

Member

sapegin commented Mar 16, 2018

@ryanoglesby08 Thank you for amazing work!! 🦄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment