[atable] allow arbitrary HTML in table cells

[Alchez]

Possible solve for https://github.com/agritheory/autoreader/pull/7.

---

Concerns:

• I've used Vue's v-html directive to render arbitrary HTML strings, but they mention possible security concerns from using it, especially if it can render user-provided input.
• Taking the above point further, I'm not sure about the UX for possibly editing cells that have HTML elements as the cell value.

One possible solution that may solve both the concerns is to automatically disallow editing a cell if it's value is HTML, but that feels too restrictive and may possibly be solved with another modal?

What do you think?

[github-actions]

Coverage Report for ./atable

Status	Category	Percentage	Covered / Total
🔴	Lines	67.33% (🎯 70%)	134 / 199
🔴	Statements	68.09% (🎯 70%)	143 / 210
🟢	Functions	76.74% (🎯 70%)	33 / 43
🔴	Branches	45.67% (🎯 70%)	74 / 162

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
atable/src/utils.ts	100%	100%	100%	100%
atable/src/components/ACell.vue	93.54%	57.77%	100%	93.54%	88, 112, 134-137, 180
Unchanged Files
atable/src/components/AExpansionRow.vue	0%	0%	0%	0%	33-34, 37-39, 38, 41-60, 42-48, 44-46, 50-52, 51, 54-59, 1, 3
atable/src/components/ARow.vue	66.66%	56%	71.42%	63.63%	56, 63, 67, 71, 73-78, 74-77, 80-85, 17
atable/src/components/ATable.vue	51.92%	32.5%	88.88%	51.02%	107, 110-112, 111, 117, 120-128, 124-127, 126, 131-147, 132-133, 135-141, 136-140, 137-139, 143-146, 144-145, 203-205, 204, 204
atable/src/components/ATableHeader.vue	100%	50%	100%	100%
atable/src/components/ATableModal.vue	50%	100%	0%	50%	29
atable/src/components/index.ts	65.9%	50%	66.66%	66.66%	46-48, 47, 60, 83-85, 84, 103-115, 104-112, 105-111, 107-110, 109, 113-115, 114

Generated in workflow #378 for commit c751d33 by the Vitest Coverage Report Action

[agritheory]

It is my understanding (though perhaps it is outdated, that Vue's <component is="div"> should just work and that these extra step aren't strictly necessary.

[Alchez]

It is my understanding (though perhaps it is outdated, that Vue's <component is="div"> should just work and that these extra step aren't strictly necessary.

@agritheory I tried that as well, and the is parameter can indeed take a tag name and render it. But there's a couple of problems with that:

• Render HTML string: If we use a <div> and pass the formatted HTML string as is, Vue will simply render it as plaintext. So an <a> tag wouldn't render in the DOM unless we use v-html.
• Render HTML DOM element: If we instead parse the string, extract the <a> tag into an Element variable and pass it to the <component>, that could work but I wasn't able to figure out how to arbitrarily pass DOMElement attributes to the component's v-bind function.

[agritheory]

Is there a way to do this without adding in this extra div?

[Alchez]

Doesn't seem like there's an easy alternative, and someone had asked for one too. Generally you can use the <template> tag to avoid adding arbitrary elements, but that tag doesn't work with v-html. I could change it to <span> to avoid adding block elements though.

[agritheory]

Looks good! Thanks for figuring these quirks out