-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.js
125 lines (107 loc) · 3.44 KB
/
index.js
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
const ZComponent = require('zcomponent')
const marked = require('marked')
const loadcss = require('loadcss')
const highlight = require('./highlight.min.js')
marked.setOptions({
highlight: code => highlight.highlightAuto(code).value
})
let highlightCss = '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/default.min.css'
loadcss(highlightCss)
const clean = str => {
let split = str.split('\n')
let i = 0
if (!split[i].length) {
i += 1
}
let firstline = split[i]
i = 0
while (i < firstline.length && firstline[i] === ' ') {
i++
}
return split.map(line => {
let x = 0
while (x < i && x < line.length && line[x] === ' ') {
x++
}
return line.slice(x)
}).join('\n')
}
function toggleAttribute (el, attr, isOn) {
if (isOn) {
el.setAttribute(attr, '')
} else {
el.removeAttribute(attr)
}
el.render()
}
class MarkdownElement extends ZComponent {
constructor () {
super()
this.render()
}
get noGFM () { return this.hasAttribute('nogfm') }
set noGFM (value) { toggleAttribute(this, 'nogfm', value) }
get noTables () { return this.hasAttribute('notables') }
set noTables (value) { toggleAttribute(this, 'notables', value) }
get noSanitize () { return this.hasAttribute('noSanitize') }
set noSanitize (value) { toggleAttribute(this, 'noSanitize', value) }
get breaks () { return this.hasAttribute('breaks') }
set breaks (value) { toggleAttribute(this, 'breaks', value) }
get noHighlight () { return this.hasAttribute('nohighlight') }
set noHighlight (value) { toggleAttribute(this, 'nohighlight', value) }
get pedantic () { return this.hasAttribute('pedantic') }
set pedantic (value) { toggleAttribute(this, 'pedantic', value) }
get noSmartLists () { return this.hasAttribute('nosmartlists') }
set noSmartLists (value) { toggleAttribute(this, 'nosmartlists', value) }
get smartyPants () { return this.hasAttribute('smartypants') }
set smartyPants (value) { toggleAttribute(this, 'smartypants', value) }
render () {
if (this._rendering) return this._rendering
// clear old render
this._rendering = new Promise(resolve => {
setTimeout(() => {
this._rendering = null
// TODO: convert all this CSS to slotted CSS.
let css = this.getAttribute('loadcss') || 'default.css'
loadcss(`https://cdn.jsdelivr.net/npm/highlight.js@latest/styles/` + css)
let render = this.querySelector('[slot="render"]')
if (!render) {
render = document.createElement('div')
render.classList.add('markdown-render')
render.setAttribute('slot', 'render')
this.appendChild(render)
}
let opts = {
gfm: !this.noGFM,
tables: !this.noTables,
breaks: this.breaks,
pedantic: this.pedantic,
highlight: !this.noHighlight,
sanitize: !this.noSanitize,
smartLists: !this.noSmartLists,
smartypants: this.smartyPants
}
if (opts.highlight) {
delete opts.highlight
}
this.removeChild(render)
render.innerHTML = marked(clean(this.textContent), opts)
this.appendChild(render)
resolve(render)
}, 0)
})
return this._rendering
}
get shadow () {
return `
<style>
:host {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
</style>
<slot name="render"></slot>
`
}
}
window.customElements.define('mark-down', MarkdownElement)