forked from soccerloway/quill-delta-to-html
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdemo-clickup-broswer.html
69 lines (61 loc) · 13.9 KB
/
demo-clickup-broswer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clickup_table_demo</title>
</head>
<body>
<div id="converted-view"></div>
<script src="dist/browser/QuillDeltaToHtmlConverter.bundle.js"></script>
<script>
// with new table
// var delta = {"ops":[{"insert":"\n"},{"attributes":{"table-col":{"width":"150"}},"insert":"\n\n"},{"insert":"234324"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-vog0hb","cell":"cell-te8iog"},"row":"row-vog0hb","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"324324"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-vog0hb","cell":"cell-leoqv7"},"row":"row-vog0hb","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"234"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-f01cl4","cell":"cell-usqwfp"},"row":"row-f01cl4","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"213132312"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-f01cl4","cell":"cell-usqwfp"},"row":"row-f01cl4","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"234234"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-f01cl4","cell":"cell-i5xnig"},"row":"row-f01cl4","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"123123123"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-f01cl4","cell":"cell-i5xnig"},"row":"row-f01cl4","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"\n"}]}
// with new table and new list into table
var delta = {"ops":[{"insert":"\n"},{"attributes":{"table-col":{"width":"150"}},"insert":"\n\n\n"},{"insert":"131233"},{"attributes":{"list":{"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-hocr5a","list":"ordered"},"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-hocr5a"},"insert":"\n"},{"insert":"12313"},{"attributes":{"list":{"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-hocr5a","list":"ordered"},"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-hocr5a"},"insert":"\n"},{"insert":"123"},{"attributes":{"list":{"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-hocr5a","list":"ordered"},"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-hocr5a"},"insert":"\n"},{"insert":"123123"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-hocr5a"},"row":"row-urpq0b","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"123123"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-dlowr3"},"row":"row-urpq0b","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"123123"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-dlowr3"},"row":"row-urpq0b","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"12313"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-urpq0b","cell":"cell-lug6ha"},"row":"row-urpq0b","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"123"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-hhh8fl","cell":"cell-3t8jee"},"row":"row-hhh8fl","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"123"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-hhh8fl","cell":"cell-l7nu97"},"row":"row-hhh8fl","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"123123"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-hhh8fl","cell":"cell-tzi4lz"},"row":"row-hhh8fl","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"\n"}]}
// with new list
var delta1 = {"ops":[{"insert":"sdflk"},{"attributes":{"bold":true},"insert":"sjflk"},{"insert":"jssfsdfsf\nsdfsdfsdf\nsdfsdfsdfsdfsdf"},{"attributes":{"list":{"list":"ordered"}},"insert":"\n"},{"insert":"sdfsdf"},{"attributes":{"list":{"list":"ordered"}},"insert":"\n"},{"insert":"sdfdsfdsf"},{"attributes":{"list":{"list":"ordered"}},"insert":"\n"},{"insert":"sdfsdf"},{"attributes":{"list":{"list":"ordered"}},"insert":"\n"},{"insert":"sdfsdfsf\nsdfsd\nfsdfsdsdffsdfsdf\nsdfsf\n"},{"attributes":{"link":"www.baidu.com"},"insert":"www.baidu.com"},{"insert":"\n"}]}
var testDelta = {"ops":[{"insert":"\n"},{"attributes":{"table-col":{"width":"150"}},"insert":"\n"},{"attributes":{"table-cell-line":{"rowspan":"1","colspan":"1","row":"row-rcydzq","cell":"cell-fqmunc"},"row":"row-rcydzq","rowspan":"1","colspan":"1"},"insert":"\n"},{"insert":"\n"}]}
// with check list
var checklistDelta = {"ops":[{"insert":"sdfsdfsdf"},{"attributes":{"list":{"list":"unchecked"}},"insert":"\n"},{"insert":"dsfsd"},{"attributes":{"indent":1,"list":{"list":"unchecked"}},"insert":"\n"},{"insert":"sdfsfs"},{"attributes":{"indent":1,"list":{"list":"unchecked"}},"insert":"\n"},{"insert":"sdfsfsdf"},{"attributes":{"indent":1,"list":{"list":"unchecked"}},"insert":"\n"}]}
// with toggle list
var togglelistDelta = {"ops":[{"insert":"dsfsfsfs"},{"attributes":{"list":{"list":"toggled"}},"insert":"\n"},{"insert":"sdfdsfsf"},{"attributes":{"list":{"list":"toggled"}},"insert":"\n"},{"insert":"sdfsdfdf"},{"attributes":{"indent":1,"list":{"list":"toggled"}},"insert":"\n"},{"insert":"dsfdsfdsf"},{"attributes":{"indent":1,"list":{"list":"toggled"}},"insert":"\n"},{"insert":"sdfdsfdsf"},{"attributes":{"indent":2,"list":{"list":"toggled"}},"insert":"\n"},{"insert":"sdfsfsdf"},{"attributes":{"indent":2,"list":{"list":"toggled"}},"insert":"\n"},{"insert":"sdfdsfsdf"},{"attributes":{"indent":1,"list":{"list":"toggled"}},"insert":"\n"},{"insert":"sdfsdfdsf"},{"attributes":{"indent":1,"list":{"list":"toggled"}},"insert":"\n"}]}
// list within blockquote
var listWithinBlockquote = {"ops":[{"insert":"first line\nfirst list item parent"},{"attributes":{"list":{"list":"ordered"}},"insert":"\n"},{"insert":"child list item"},{"attributes":{"indent":1,"list":{"list":"ordered"}},"insert":"\n"},{"insert":"blockq"},{"attributes":{"blockquote":{"in-list":"true","wrapper-indent":"1"}},"insert":"\n"},{"insert":"aaa"},{"attributes":{"list":{"list":"ordered"}},"insert":"\n"},{"insert":"bbb"},{"attributes":{"blockquote":{"in-list":"true","wrapper-indent":"3"}},"insert":"\n"},{"insert":"ccc"},{"attributes":{"blockquote":{"in-list":"true","wrapper-indent":"3"}},"insert":"\n"},{"insert":"\n"}]};
// list within code blocks
var listWithinCodeBlock = {"ops":[{"insert":"function foo() { return false; }"},{"attributes":{"code-block":{"code-block":"javascript"}},"insert":"\n"},{"insert":"dsfdsfdsf"},{"attributes":{"list":{"list":"ordered"}},"insert":"\n"},{"insert":"sdfdsfdsfdsf"},{"attributes":{"code-block":{"code-block":"plain","in-list":"none"}},"insert":"\n"},{"insert":"sdfdsfdsfdsf"},{"attributes":{"code-block":{"code-block":"plain","in-list":"none"}},"insert":"\n"}]}
// Mixing various lists
var mixingList = {"ops":[{"insert":"sdfsdf"},{"insert":"\n","attributes":{"list":{"list":"ordered"},"id":"1t582p16h"}},{"insert":"dsfdfdsfdsfd"},{"insert":"\n","attributes":{"banner":{"banner":"success","in-list":"ordered"}, 'renderAsBlock': true}},{"insert":"sdfdsf"},{"insert":"\n","attributes":{"list":{"list":"ordered"},"id":"xqsmv5der"}},{"insert":{"bookmark":{"url":"https://www.google.com/","service":"custom","title":"Google","description":"undefined","thumbnail":null,"favicon":"https://www.google.com/s2/favicons?domain_url=https%3A%2F%2Fwww.google.com%2F","updated":"true"}},"attributes":{"bookmark": { "in-list":"ordered" }, "renderAsBlock": true}},{"insert":"dsfdfsfsdfsf"},{"insert":"\n","attributes":{"list":{"list":"ordered"},"id":"48spy2qd1"}}]}
// test
var testNestList = {"ops":[{"insert":"dsfdsfdsf"},{"insert":"\n","attributes":{"block-id":"block-1daf3b13-ee02-4f92-92c2-40c292ae6284"}},{"insert":"\n\n\n\n","attributes":{"table-col":{"width":"150"}}},{"insert":"sdfsdf"},{"insert":"\n","attributes":{"block-id":"block-466ac3bc-857c-4fc9-8708-126cf68db4d9","table-cell-line":{"rowspan":"1","colspan":"1","row":"row-gqfdhf","cell":"cell-jjpfdu"},"row":"row-gqfdhf","cell":"cell-jjpfdu","rowspan":"1","colspan":"1"}},{"insert":"dsfdsfsd"},{"insert":"\n","attributes":{"block-id":"block-2017ef91-9b30-4424-ab2a-0ea11a99a0dd","table-cell-line":{"rowspan":"1","colspan":"1","row":"row-gqfdhf","cell":"cell-r59mis"},"row":"row-gqfdhf","cell":"cell-r59mis","rowspan":"1","colspan":"1"}},{"insert":"dsdf"},{"insert":"\n","attributes":{"block-id":"block-dd2c300b-5ccf-46da-8c40-ccc3550c213f","table-cell-line":{"rowspan":"1","colspan":"1","row":"row-gqfdhf","cell":"cell-tedcr6"},"row":"row-gqfdhf","cell":"cell-tedcr6","rowspan":"1","colspan":"1"}},{"insert":"\n","attributes":{"block-id":"block-e56da9e9-e0fd-44be-bef0-e04179ed5039","table-cell-line":{"rowspan":"1","colspan":"1","row":"row-gqfdhf","cell":"cell-eaeoly"},"row":"row-gqfdhf","cell":"cell-eaeoly","rowspan":"1","colspan":"1"}},{"insert":"dsdfsdf"},{"insert":"\n","attributes":{"block-id":"block-b637c470-257b-4a9f-8245-0edc67ee2a64","list":{"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-ky9qwb","list":"ordered"},"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-ky9qwb"}},{"insert":"sdfdsfdsf"},{"insert":"\n","attributes":{"block-id":"block-2d3ba0a8-f174-4c7e-ae09-12bcdd5ce41e","code-block":{"code-block":"plain","rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-ky9qwb","in-list":"ordered"},"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-ky9qwb"}},{"insert":"sdfdsfdss"},{"insert":"\n","attributes":{"block-id":"block-6aecf615-bf50-4260-924b-e18a525fb233","list":{"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-4mx4fr","list":"ordered"},"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-4mx4fr"}},{"insert":"sdfdsdsf"},{"insert":"\n","attributes":{"block-id":"block-e042e34e-3db7-4499-b73d-03c3bd97e6d1","list":{"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-f3j89u","list":"bullet"},"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-f3j89u"}},{"insert":"dsfdsfds"},{"insert":"\n","attributes":{"block-id":"block-30ceed8f-1480-412b-bd04-3eee54b0268d","list":{"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-f3j89u","list":"bullet"},"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-f3j89u"}},{"insert":"fdsfdsfdsfds"},{"insert":"\n","attributes":{"block-id":"block-e18816b5-d6c8-41bd-b4a4-d2e163d9eae4","list":{"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-f3j89u","list":"bullet"},"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-f3j89u"}},{"insert":"sdfsdfsd"},{"insert":"\n","attributes":{"block-id":"block-9618d40e-0b4f-4e72-8ddb-7c4a84c61e72","list":{"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-wh9nsd","list":"ordered"},"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-wh9nsd"}},{"insert":"fsdfds"},{"insert":"\n","attributes":{"block-id":"block-24ee5e05-36c4-4e4c-b3fc-40c5018e8881","list":{"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-wh9nsd","list":"ordered"},"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-wh9nsd"}},{"insert":"fsfdsfdsf"},{"insert":"\n","attributes":{"block-id":"block-482dae2e-8482-4012-b70e-baa44ba47a50","list":{"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-wh9nsd","list":"ordered"},"rowspan":"1","colspan":"1","row":"row-k55yx4","cell":"cell-wh9nsd"}},{"insert":"\n","attributes":{"block-id":"block-0ea424af-57aa-4334-abca-4899f2fd4c16","table-cell-line":{"rowspan":"1","colspan":"1","row":"row-xfqyom","cell":"cell-qzz3t3"},"row":"row-xfqyom","cell":"cell-qzz3t3","rowspan":"1","colspan":"1"}},{"insert":"\n","attributes":{"block-id":"block-d468b921-6c31-42c2-bdf0-2478a9140986","table-cell-line":{"rowspan":"1","colspan":"1","row":"row-xfqyom","cell":"cell-aa6kbs"},"row":"row-xfqyom","cell":"cell-aa6kbs","rowspan":"1","colspan":"1"}},{"insert":"sdf"},{"insert":"\n","attributes":{"block-id":"block-141e2063-4baa-48d0-979e-dd85d4c9e468","table-cell-line":{"rowspan":"1","colspan":"1","row":"row-xfqyom","cell":"cell-r9punc"},"row":"row-xfqyom","cell":"cell-r9punc","rowspan":"1","colspan":"1"}},{"insert":"sdfsf"},{"insert":"\n","attributes":{"block-id":"block-b054fc5c-0b26-4919-9fc5-78bd578c98c6","table-cell-line":{"rowspan":"1","colspan":"1","row":"row-xfqyom","cell":"cell-vfcwt7"},"row":"row-xfqyom","cell":"cell-vfcwt7","rowspan":"1","colspan":"1"}},{"insert":"sdfdfdsfskfjsflksjf"},{"insert":"\n","attributes":{"block-id":"block-1bde57b2-c19d-4f55-b49b-0ca778bbbb06","align":"right"}},{"insert":"dslkfjdslkfjdslkjf"},{"insert":"\n","attributes":{"block-id":"block-59df1ebe-36e3-428e-bb3b-0b648b5d0046"}},{"insert":"sdfdsdsfdsfsfsfsf"},{"insert":"\n","attributes":{"block-id":"block-91a5c689-5bd5-42d3-bfc8-ca2ad31762a4","blockquote":{}}},{"insert":"dfdsfsdfdsfdsfsfds"},{"insert":"\n","attributes":{"block-id":"block-523415f3-9601-4bc6-992e-c2daec699885","blockquote":{}}},{"insert":"dsfdsfdsf"},{"insert":"\n","attributes":{"block-id":"block-9ddb9fce-d992-4552-83e0-073920fb93c9"}},{"insert":"ssfdsfdsfdsf"},{"insert":"\n","attributes":{"block-id":"block-04c97cc1-662b-4b40-93a7-c3c8446b7130"}},{"insert":"sfsfdsfdsfdsfdsfa"},{"insert":"\n","attributes":{"block-id":"block-074048d2-1fa7-4c40-8ba4-3b5646b2f095"}}]}
var qdc = new window.QuillDeltaToHtmlConverter(testNestList.ops, {
multiLineParagraph: false,
multiLineHeader: false,
blocksCanBeWrappedWithList: ['blockquote', 'code-block', 'banner', 'bookmark'],
customTagAttributes: (op) => {
const attrs = {};
if (op.attributes && op.attributes['list']) {
if (op.attributes['list'] && op.attributes['list'].list === 'none') {
attrs['data-none-type'] = true;
}
}
if (op.attributes && op.attributes['block-id']) {
attrs['data-block-id'] = op.attributes['block-id'];
}
return attrs;
},
});
qdc.renderCustomWith((customOp, contextOp) => {
if (customOp.insert.type === 'bookmark') {
return [
'<div class="ql-bookmark">',
`bookmark`,
'</div>',
].join('')
}
})
var html = qdc.convert();
document.getElementById('converted-view').innerHTML = html;
</script>
</body>
</html>