nteract
Inserting unescaped HTML string.
I'm using a third-party library (tabulate) to generate html tables from my data and I would like to insert these in the dom. Since I wasn't able to find a way to do this scanning through the docs and code I came up with this work around.
class RawHTML(VDOM):
def __init__(self, children=None):
super().__init__(None, children=children)
def to_dict(self):
return "\n".join(self.children)
def _repr_html_(self):
return "\n".join(self.children)
@classmethod
def from_dict(cls, value):
return super().from_dict(value)
def html(*children):
return RawHTML(children)
Running this doesn't result in what expect.
html_source = "<b>HTML Source</b>"
component = div(html(html_source))
display(component)
Renders the raw html source in the browser instead of the bold texts. So it's still being escaped.
<b>HTML Source</b>
Calling component.to_html() gives me the expected html code <div><b>HTML Source</b></div>. Which means that rendering the component in a IPython.display.HTML` gives me the expected result.
html_source = "<b>HTML Source</b>"
component = div(html(html_source))
display(HTML(component.to_html()))
HTML Source
I've obviously missed something in my RawHTML class implementation. So does anyone know what I missed? Is there an official way to insert raw html? And if not are there plans to to add this as a feature?
I know probably parsing html into VDOM objects would probably be the best here.
@aarondewindt, idom has a utility function for converting HTML strings to VDOM. If you're interested in adding any interactivity to what you're displaying I'd recommend taking a deeper look at idom.
We don't want to inject raw HTML onto the DOM with vdom, mostly so we can trust that the output is sanitized. React lets you work around this by using dangerouslySetInnerHTML, but if I recall correctly we don't let that prop pass through.
I know probably parsing html into VDOM objects would probably be the best here.
That's what we built it for!
