Purpose & Usage

[oyeanuj]

Hi @timhudson & @rachelsison ! I came across your library while looking for ways to incorporate react components into medium editor and as extensions.

It wasn't obvious from the README page as to the purpose and gap that this library fills. It looks promising, so I am very curious.

For context, I had these issues open which explain my interest:
wangzuo/react-medium-editor#11
yabwe/medium-editor#923 (4th point in the list)

Thank you!

[timhudson]

We created this package to help make it easy to use react components, like react-color, inside medium-editor extensions. We also wanted to make the provided component solely responsible for the extension's behavior.

This is our first pass and is likely to change as we start using it. If you're interested try it out and provide feedback!

[oyeanuj]

@timhudson that is very interesting, I think I could definitely see it help my use-case. So as I understand it, this package allows me to create a component which can then be wrapped up into an extension for the medium-editor while at the same time retaining access to the editor instance in the component.

Given that, couple of specific question on the usage. I do in general like the idea of keeping everything as a React component.

1. I am starting by taking some of the original extensions and modifying them (like toolbar, anchor-preview and fileDragger) to my needs. Would you recommend that I convert them into components and pass them to reactExtension to start using them? Or are there things I should keep in mind before I take another extension and 'reactify' it?
2. Will this sort of a setup also allow for extensions to render Components in innerHTML or to append to the html given that the extension now is a React component?

More specifically to my use-case which can serve as an example, as part of these extension modification when someone drags and drops images, instead of adding this to the source:

html += '<img src = "something" />'

Is that what the package supports, i.e. just adding to the html of the editor? Or is it possible to add a React component directly:

html += '<CoverImage src = "something" />'

My assumption is that by having the extension be a component, React would be involved and would know to translate the render the CoverImage component within the extension.

Is that assumption true or using this package wouldn't really have anything to do with the use-case?

[timhudson]

Would you recommend that I convert them into components and pass them to reactExtension to start using them? Or are there things I should keep in mind before I take another extension and 'reactify' it?

Whether to convert other extensions is contextual to the extension in question. This package is very minimal and should be considered alpha. I can only recommend exploring your options and trying things out. If you do, and find problems or have ideas please share them by creating an issue.

Will this sort of a setup also allow for extensions to render Components in innerHTML or to append to the html given that the extension now is a React component?

Are you talking about the HTML content being edited by medium-editor? This package only deals with the toolbar functionality. Injecting react components inside the edited content is outside the scope of this package.