setHTML alternative

Community Help
1

I’m looking for a workaround for a notebook that uses setHTML, which is not supported in Firefox latest.

The notebook creates a simple HTML table from data using tableify (an NPM package), then sets the table content editable. I could avoid DOM manipulation with setHTML altogether by using a stdlib Inputs.table instead of building an HTML table on the fly, but I’m not sure how to control the content editable properties of Inputs.table sufficiently: I want the header row and the first column to be not editable, and I want to turn off column sorting.

Thanks in advance!

2

I’m looking for a workaround for a notebook that uses setHTML, which is not supported in Firefox latest.

You can use a setHTML polyfill.

but I’m not sure how to control the content editable properties of Inputs.table sufficiently

If you define a column formatter that returns an HTML element, Inputs.table() will display the element as is. Example:

Inputs.table(inputData, {
  format: {
      Borough: d => htl.html`<div contenteditable>${htl.html({raw: [d]})}`
  }  
})

(The second htl.html call turns a markup string into an Element – otherwise the markup would get rendered as escaped plain text.)

and I want to turn off column sorting

To be honest, I suspect that you’ll have more trouble making Inputs.table work for your use case than implementing your own table renderer (or using an existing library / import).

3

Thanks, as ever, for the great advice.

I agree the polyfill looks easier than hacking about Inputs.table.

Is this package hosted somewhere? I.e., can I pull it into Observable easily enough?

4

Ah wait, I think I may have managed it by attaching the built file and calling it…

5

Great question! According to this issue they don’t consider the API and polyfill stable enough yet to publish to npm. You could probably make it work somehow (e.g., by requiring the script that’s used in the polyfill demo, or by importing via jsdelivr’s GitHub endpoint), but I’d recommend to look into alternative libraries instead, like the ones listed in this issue.

I would also argue that you don’t actually need HTML sanitization. Unless you want to provide formatting capabilities, a simple text input or textarea should suffice. You can remove all styles and make the element autogrow to adapt to its content.

6

OK so I sort of got it working just by importing from the demo site as you suggested. It executes the script in the context of the notebook, however this doesn’t help notebooks that import from my editable-table notebook…I guess they need to import the sanitizer for it to execute. Any tricks there? Or perhaps this is a steamroller to crack a nut

7

Check out the libraries in the issue that I linked:

8

Fantastic, thanks for directing me back to your links.

I got up and running with XSS.

Thanks a bunch!