Support Dom Render for HTML String
Closed this issue · 3 comments
Dataview support return html string like :
<div style='border-style:solid; border-width:1px; border-color:#AAAAAA; display:flex;'><div align='center' style='padding:5px; min-width:10px; background-color:#d5763f; width:15%; color:black'> </div><div style='padding:5px;'>15%</div></div>And it is generate by default table query in dataview. like:
TABLE pagesRead, totalPages,
"<div style='border-style:solid; border-width:1px; border-color:#AAAAAA; display:flex;'>" +
"<div align='center' style='padding:5px; min-width:10px; background-color:" +
choice(percent < 50, "#d5763f", "#a8c373") + "; width:" +
percent + "%; color:black'>" +
choice(percent < 30, " </div><div style='padding:5px;'>", "") +
percent + "%</div></div>" AS Progress
FROM "books"
FLATTEN round(100*pagesRead/totalPages) as percent
What I think:
I found we can add single regex test to check if a string is html string:
/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/iAnd here is what i did in TextLabel.svelte :
<script lang="ts">
export let value: string;
const regexDomTest = new RegExp('<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\\/\\2>', 'i');
</script>
<div>
{#if (regexDomTest.test(value))}
{@html value}
{:else}
{value}
{/if}
</div>If this is doable and robust? I guess that now we cannot edit cell when in dataview mode, so may be it safe?
Interesting! 😮 I'm still new to Dataview myself, so I'd like to experiment a little with this first. I've been thinking about introducing a new "long text" field type for Markdown and HTML that launches a CodeMirror 6 editor when you edit a cell. Like you say, it's not possible to edit Dataview projects at the moment, but might influence who to implement this.
As reference : what it will like
It should be really strong feature, if we can render the html string 😃
