I'd like to allow users of a blog like app written in rails/react/material-ui/mobx to add custom components like polls to their articles. So I'd like to add some kind of button to the article editor which adds a poll which will then be rendered using a custom react component when published. What is the best practice for doing this sort of thing? Should I?
Have the user input contain JSX code for that component, e.g., the saved text in the db would then look like
some text....
<MyPoll ...>
<MyChoice> Foo </MyChoice>
</MyPoll>
more text...
But I'd then need to have some function to interpret this code allowing only designated components (so like a on the fly jsx transpiler with sanitization..does this exist?).
Have a model for polls and in the editor create the poll object and then insert a div with a special class like "react-standin" and then have a table I consult which maps the unique div id to poll objects in database. So the saved text would look like:
some text....
<div class="react-standin" id=myguid></div>
more text...
And then when it comes time to display I'd map the id to whatever saved component needs to be displayed (drawback is I now need to implement backend support for each component and have ownership info so users can't guess at other user components).
Some kind of hybrid. For instance create some kind of DSL using properties of dom elements in the input, e.g., the saved text would look like:
some text....
<div class="poll-component" ...>
<div class="poll-answer"> Foo </div>
</div>
more text...
This feels rightish, especially if there is a library that enables this kind of translation of HTML element attributes to react components.
Something else? Maybe represent an article as an array of possible components one of which being raw text/html/markdown. So it would be saved on server as an array of guids referencing database components of different types (this seems wrong)
I feel like this must be a solved problem and I'd love to see how other people have handled this issue but I couldn't find it when I searched.
Ok, after banging my head against this for awhile I ended up searching for react based rich text editors. The two major editor frameworks here are slate.js and draft.js. Now what both these editor frameworks do is store your input as a tree (e.g. a JSON version of something like a DOM for the text) that captures any styling applied to the elements below.
These frameworks also allow you to define your own styling and you can simply style a poll element in your text editor using your react poll component. You can then simply display the result using a read only version of the text editor (or directly parse it out using react components).
However, if you want to store your user content as HTML or other standard markup rather than something like a JSON format linked to the particular editor config you've choosen then I still don't know.