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

Render HTML as react nodes #559

Open
NorwegianKiwi opened this issue Aug 8, 2018 · 2 comments
Open

Render HTML as react nodes #559

NorwegianKiwi opened this issue Aug 8, 2018 · 2 comments
Milestone

Comments

@NorwegianKiwi
Copy link
Collaborator

When manipulating content html and courseinfo html, the html is parsed into an AST tree, altered, and then rendered back into html, before inserting in a div with dangerouslySetInnerHtml.

Instead of this, perhaps make a function that takes the AST tree and renders into React components.
See https://github.com/utatti/react-render-html/blob/master/index.js for how it can be done.
(The reason we don't want to use react-render-html directly, is because we need to manipulate the AST tree between parsing the HTML and creating the React elements.)
If we do this, we could stop using dangerouslySetInnerHtml, at least for lesson content and course info.

One of the things we should do with the AST tree before rendering the React elements, is to check any anchor tags <a href="...", and if they are internal links, change them to NavLink nodes.

Also, compare size of posthtml-parser (https://github.com/posthtml/posthtml-parser), which is currently used to parse html, to parse5 (https://github.com/inikulin/parse5). If parse5 is smaller, perhaps better to use it? (Unless posthtml-parser has better functionality.)

Or, perhaps we could make markdown-it render into AST trees instead of into html? Then we wouldn't need the client to parse the html every time.

@NorwegianKiwi
Copy link
Collaborator Author

Another thing we should do to the AST tree, is to change necessary nodes into ToggleButton, so we avoid the extra reactDOM.render inside the DOM tree inserted by dangerouslySetInnerHtml (for lesson content).

@NorwegianKiwi
Copy link
Collaborator Author

NorwegianKiwi commented Aug 22, 2018

It might be possible to make webpack render the HTML into PostHTML AST tree, so that the client doesn't need to do this. Normally, PostHTML does the following:

HTML --(posthtml-parser)--> AST --(posthtml plugins)--> changed AST --(posthtml-render)--> changed HTML

Now, if we could only run PostHTML but turn off the last posthtml-render.

To run it in webpack, we use posthtml-loader.

If we can't make this work, perhaps create a loader (locally) that uses only posthtml-parser or parse5 and add it to webpack using loader: path.resolve('path/to/loader.js') (see https://webpack.js.org/contribute/writing-a-loader/#setup). Shouldn't be too difficult, I think.

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

No branches or pull requests

1 participant