HTML not working in 2.0.0 like 1.0.0
MacBurt opened this issue · 5 comments
This timevis group allowed nice html styling in 1.0.0.0
Now in 2.0.0, the HTML is turned into text
Thanks for looking into this
library(timevis)
library(dplyr)
data = data.frame(title = "Dog", start = as.Date('2022-03-20'), end = as.Date('2022-04-20'), group = 'Animal')
groups = data.frame(group = 'Animal', id = 'Animal', content = "<style>
table {
table-layout:fixed;
width:200px;
height: 25px;
text-align: center;
} th,
td {border: 1px solid grey;
border-collapse: collapse;
word-wrap: break-word;
word-break: break-all;
}
</style>
| PS | Dogs | 8 | Pets |
timevis(data,groups) %>%
setWindow(data$start - 90, data$start + 120,list(animation = FALSE))
Thanks for the report. I tried using the exact data that you used in this example to troubleshoot whether the problem is with the R package or with the javascript library. I converted the data that's used for the widget into JSON:
`{"items":[{"title":"Dog","start":"2022-03-20","end":"2022-04-20","group":"Animal","id":"180a61d0-805c-4f84-9be7-7c1db6b7b2f9"}],"groups":[{"group":"Animal","id":"Animal","content":"<style>\\n table {\\n table-layout:fixed;\\n width:200px; \\n height: 25px;\\n text-align: center;\\n } th, \\n td {border: 1px solid grey;\\n border-collapse: collapse;\\n word-wrap: break-word; \\n word-break: break-all;\\n }\\n </style>\\n <table>\\n <colgroup>\\n <col span='1' style='width: 10%;'>\\n <col span='1' style='width: 50%;'>\\n <col span='1' style='width: 20%;'>\\n <col span='1' style='width: 20%;'>\\n </colgroup>\\n <tbody>\\n <tr>\\n <td>PS</td>\\n <td>Dogs</td><td>8</td>\\n <td>Pets</td>\\n </tr>\\n </tbody></table>"}],"showZoom":true,"zoomFactor":0.5,"fit":true,"options":{},"height":null,"timezone":null,"api":[{"start":"2021-12-20","end":"2022-07-18","options":{"animation":false}}]}`
and tried creating a timeline using the old (4.16.1) and new (7.4.9) versions of the javascript library. The results of this debugging show me that this is indeed a bug in the javascript library, not in timevis.
Proof: this HTML page uses the 4.16.1 version and it works: (you can see it here https://jsfiddle.net/80jLqkxu/)
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-19'}
]
var timeline = new vis.Timeline(container, [], {});
opts = `{"items":[{"title":"Dog","start":"2022-03-20","end":"2022-04-20","group":"Animal","id":"180a61d0-805c-4f84-9be7-7c1db6b7b2f9"}],"groups":[{"group":"Animal","id":"Animal","content":"<style>\\n table {\\n table-layout:fixed;\\n width:200px; \\n height: 25px;\\n text-align: center;\\n } th, \\n td {border: 1px solid grey;\\n border-collapse: collapse;\\n word-wrap: break-word; \\n word-break: break-all;\\n }\\n </style>\\n <table>\\n <colgroup>\\n <col span='1' style='width: 10%;'>\\n <col span='1' style='width: 50%;'>\\n <col span='1' style='width: 20%;'>\\n <col span='1' style='width: 20%;'>\\n </colgroup>\\n <tbody>\\n <tr>\\n <td>PS</td>\\n <td>Dogs</td><td>8</td>\\n <td>Pets</td>\\n </tr>\\n </tbody></table>"}],"showZoom":true,"zoomFactor":0.5,"fit":true,"options":{},"height":null,"timezone":null,"api":[{"start":"2021-12-20","end":"2022-07-18","options":{"animation":false}}]}`;
opts = JSON.parse(opts);
timeline.itemsData.add(opts.items);
timeline.setGroups(opts.groups);
timeline.setOptions(opts.options)
</script>
</body>
</html>
The following uses the same code as above but with the new version and it doesn't work: (https://jsfiddle.net/80jLqkxu/1/)
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-timeline/7.4.9/vis-timeline-graph2d.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis-timeline/7.4.9/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-19'}
]
var timeline = new vis.Timeline(container, [], {});
opts = `{"items":[{"title":"Dog","start":"2022-03-20","end":"2022-04-20","group":"Animal","id":"180a61d0-805c-4f84-9be7-7c1db6b7b2f9"}],"groups":[{"group":"Animal","id":"Animal","content":"<style>\\n table {\\n table-layout:fixed;\\n width:200px; \\n height: 25px;\\n text-align: center;\\n } th, \\n td {border: 1px solid grey;\\n border-collapse: collapse;\\n word-wrap: break-word; \\n word-break: break-all;\\n }\\n </style>\\n <table>\\n <colgroup>\\n <col span='1' style='width: 10%;'>\\n <col span='1' style='width: 50%;'>\\n <col span='1' style='width: 20%;'>\\n <col span='1' style='width: 20%;'>\\n </colgroup>\\n <tbody>\\n <tr>\\n <td>PS</td>\\n <td>Dogs</td><td>8</td>\\n <td>Pets</td>\\n </tr>\\n </tbody></table>"}],"showZoom":true,"zoomFactor":0.5,"fit":true,"options":{},"height":null,"timezone":null,"api":[{"start":"2021-12-20","end":"2022-07-18","options":{"animation":false}}]}`;
opts = JSON.parse(opts);
timeline.itemsData.add(opts.items);
timeline.setGroups(opts.groups);
timeline.setOptions(opts.options)
</script>
</body>
</html>
In fact, it looks like it broke between version 7.4.3. to 7.4.4
I would like to submit the issue to the javascript library's maintainers, but the current example is not great because it's fairly large and complex - @MacBurt could you please come up with a more minimal example that shows the issue with as least code as possible?
I found out the actual issue. HTML is still allowed, however any <style> tags seem to be stripped away. This very well could be because in verions 7.4.4 according to their documentation they made some XSS security improvements (https://github.com/visjs/vis-timeline/releases/tag/v7.4.4) which could potentially explain why some HTML tags are being stripped.
You can see this in action by running the following minimal reprex in the old and new versions of {timevis}
library(timevis)
data <- data.frame(start = as.Date('2020-01-01'), content = '<h1>data</h1><span style="color:green">green</span>', group = 'Animal')
groups <- data.frame(id = 'Animal', content = "<h1>group</h1><span style='color:red'>red</span>")
timevis(data, groups)
Since this isn't a timevis issue, I'm closing this.
@MacBurt I filed an issue with the javascript library visjs/vis-timeline#1515
Thank you for chasing this down......Much appreciated