forked from midudev/codi.link
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.js
118 lines (99 loc) · 2.73 KB
/
main.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
import './style.css'
import Split from 'split-grid'
import { encode, decode } from 'js-base64'
import * as monaco from 'monaco-editor'
import { emmetHTML } from 'emmet-monaco-es'
import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import JsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import debounce from './debounce.js'
window.MonacoEnvironment = {
getWorker (_, label) {
if (label === 'html') return new HtmlWorker()
if (label === 'javascript') return new JsWorker()
if (label === 'css') return new CssWorker()
}
}
const $ = selector => document.querySelector(selector)
const $js = $('#js')
const $css = $('#css')
const $html = $('#html')
const { pathname } = window.location
const [rawHtml, rawCss, rawJs] = pathname.slice(1).split('%7C')
const html = rawHtml ? decode(rawHtml) : ''
const css = rawCss ? decode(rawCss) : ''
const js = rawJs ? decode(rawJs) : ''
const COMMON_EDITOR_OPTIONS = {
automaticLayout: true,
fontSize: 18,
scrollBeyondLastLine: false,
roundedSelection: false,
padding: {
top: 16
},
lineNumbers: false,
minimap: {
enabled: false
},
theme: 'vs-dark'
}
const htmlEditor = monaco.editor.create($html, {
value: html,
language: 'html',
...COMMON_EDITOR_OPTIONS
})
emmetHTML(monaco)
const cssEditor = monaco.editor.create($css, {
value: css,
language: 'css',
...COMMON_EDITOR_OPTIONS
})
const jsEditor = monaco.editor.create($js, {
value: js,
language: 'javascript',
...COMMON_EDITOR_OPTIONS
})
Split({
columnGutters: [{
track: 1,
element: document.querySelector('.vertical-gutter')
}],
rowGutters: [{
track: 1,
element: document.querySelector('.horizontal-gutter')
}]
})
const MS_UPDATE_DEBOUNCED_TIME = 200
const debouncedUpdate = debounce(update, MS_UPDATE_DEBOUNCED_TIME)
htmlEditor.onDidChangeModelContent(debouncedUpdate)
cssEditor.onDidChangeModelContent(debouncedUpdate)
jsEditor.onDidChangeModelContent(debouncedUpdate)
const htmlForPreview = createHtml({ html, js, css })
$('iframe').setAttribute('srcdoc', htmlForPreview)
function update () {
const html = htmlEditor.getValue()
const css = cssEditor.getValue()
const js = jsEditor.getValue()
const hashedCode = `${encode(html)}|${encode(css)}|${encode(js)}`
window.history.replaceState(null, null, `/${hashedCode}`)
const htmlForPreview = createHtml({ html, js, css })
$('iframe').setAttribute('srcdoc', htmlForPreview)
}
function createHtml ({ html, js, css }) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<style>
${css}
</style>
</head>
<body>
${html}
<script type="module">
${js}
</script>
</body>
</html>
`
}