|
|
|
|
@ -34,44 +34,40 @@ import {
|
|
|
|
|
} from '@codemirror/autocomplete'
|
|
|
|
|
import {lintKeymap} from '@codemirror/lint'
|
|
|
|
|
|
|
|
|
|
console.log('loading file')
|
|
|
|
|
|
|
|
|
|
const basicSetup = (() => [
|
|
|
|
|
lineNumbers(),
|
|
|
|
|
highlightActiveLineGutter(),
|
|
|
|
|
highlightSpecialChars(),
|
|
|
|
|
history(),
|
|
|
|
|
foldGutter(),
|
|
|
|
|
drawSelection(),
|
|
|
|
|
dropCursor(),
|
|
|
|
|
EditorState.allowMultipleSelections.of(true),
|
|
|
|
|
indentOnInput(),
|
|
|
|
|
syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
|
|
|
|
|
bracketMatching(),
|
|
|
|
|
closeBrackets(),
|
|
|
|
|
autocompletion(),
|
|
|
|
|
rectangularSelection(),
|
|
|
|
|
crosshairCursor(),
|
|
|
|
|
highlightActiveLine(),
|
|
|
|
|
highlightSelectionMatches(),
|
|
|
|
|
keymap.of([
|
|
|
|
|
...closeBracketsKeymap,
|
|
|
|
|
...defaultKeymap,
|
|
|
|
|
...searchKeymap,
|
|
|
|
|
...historyKeymap,
|
|
|
|
|
...foldKeymap,
|
|
|
|
|
...completionKeymap,
|
|
|
|
|
...lintKeymap
|
|
|
|
|
])
|
|
|
|
|
])()
|
|
|
|
|
|
|
|
|
|
window.editorLib = {
|
|
|
|
|
basicSetup,
|
|
|
|
|
EditorView
|
|
|
|
|
}`
|
|
|
|
|
window.CodeMirrorBasic = {
|
|
|
|
|
// @codemirror/view
|
|
|
|
|
keymap, highlightSpecialChars,
|
|
|
|
|
drawSelection, highlightActiveLine, dropCursor,
|
|
|
|
|
rectangularSelection, crosshairCursor,
|
|
|
|
|
lineNumbers, highlightActiveLineGutter,
|
|
|
|
|
EditorView,
|
|
|
|
|
// @codemirror/state
|
|
|
|
|
EditorState,
|
|
|
|
|
// @codemirror/language
|
|
|
|
|
defaultHighlightStyle,
|
|
|
|
|
syntaxHighlighting,
|
|
|
|
|
indentOnInput,
|
|
|
|
|
bracketMatching,
|
|
|
|
|
foldGutter,
|
|
|
|
|
foldKeymap,
|
|
|
|
|
// @codemirror/commands
|
|
|
|
|
defaultKeymap,
|
|
|
|
|
history,
|
|
|
|
|
historyKeymap,
|
|
|
|
|
// @codemirror/search
|
|
|
|
|
searchKeymap,
|
|
|
|
|
highlightSelectionMatches,
|
|
|
|
|
// @codemirror/autocomplete
|
|
|
|
|
autocompletion,
|
|
|
|
|
completionKeymap,
|
|
|
|
|
closeBrackets,
|
|
|
|
|
closeBracketsKeymap,
|
|
|
|
|
// @codemirror/lint
|
|
|
|
|
lintKeymap,
|
|
|
|
|
}` + "\n"
|
|
|
|
|
|
|
|
|
|
class Builder {
|
|
|
|
|
// any URL that supports pkg/path or pkg@version/path
|
|
|
|
|
// any URL that supports pkg/path o pkg@version/path
|
|
|
|
|
baseUrl = 'https://unpkg.com'
|
|
|
|
|
scripts = {
|
|
|
|
|
'@rollup/browser': {
|
|
|
|
|
@ -89,7 +85,6 @@ class Builder {
|
|
|
|
|
"@codemirror/search",
|
|
|
|
|
"@codemirror/state",
|
|
|
|
|
"@codemirror/view",
|
|
|
|
|
"@codemirror/lang-javascript",
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
|
@ -220,6 +215,8 @@ class Builder {
|
|
|
|
|
new TextEncoder().encode(this.code)
|
|
|
|
|
)
|
|
|
|
|
this.log(`built ${this.sha}`)
|
|
|
|
|
const raw = new TextEncoder().encode(this.code)
|
|
|
|
|
this.log(`${raw.byteLength} bytes`)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -284,8 +281,38 @@ class Editor extends HTMLElement {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
connectedCallback() {
|
|
|
|
|
const {EditorView, basicSetup} = window.editorLib
|
|
|
|
|
this.view = new EditorView({
|
|
|
|
|
const cm = window.CodeMirrorBasic
|
|
|
|
|
const basicSetup = [
|
|
|
|
|
cm.lineNumbers(),
|
|
|
|
|
cm.highlightActiveLineGutter(),
|
|
|
|
|
cm.highlightSpecialChars(),
|
|
|
|
|
cm.history(),
|
|
|
|
|
cm.foldGutter(),
|
|
|
|
|
cm.drawSelection(),
|
|
|
|
|
cm.dropCursor(),
|
|
|
|
|
cm.EditorState.allowMultipleSelections.of(true),
|
|
|
|
|
cm.indentOnInput(),
|
|
|
|
|
cm.syntaxHighlighting(
|
|
|
|
|
cm.defaultHighlightStyle, {fallback: true}
|
|
|
|
|
),
|
|
|
|
|
cm.bracketMatching(),
|
|
|
|
|
cm.closeBrackets(),
|
|
|
|
|
cm.autocompletion(),
|
|
|
|
|
cm.rectangularSelection(),
|
|
|
|
|
cm.crosshairCursor(),
|
|
|
|
|
cm.highlightActiveLine(),
|
|
|
|
|
cm.highlightSelectionMatches(),
|
|
|
|
|
cm.keymap.of([
|
|
|
|
|
...cm.closeBracketsKeymap,
|
|
|
|
|
...cm.defaultKeymap,
|
|
|
|
|
...cm.searchKeymap,
|
|
|
|
|
...cm.historyKeymap,
|
|
|
|
|
...cm.foldKeymap,
|
|
|
|
|
...cm.completionKeymap,
|
|
|
|
|
...cm.lintKeymap
|
|
|
|
|
]),
|
|
|
|
|
]
|
|
|
|
|
this.view = new cm.EditorView({
|
|
|
|
|
doc: '',
|
|
|
|
|
extensions: [
|
|
|
|
|
basicSetup,
|
|
|
|
|
@ -342,8 +369,6 @@ class App {
|
|
|
|
|
s.type = 'module'
|
|
|
|
|
s.textContent = this.builder.code
|
|
|
|
|
document.head.append(s)
|
|
|
|
|
this.buildView.log('skipped appending code')
|
|
|
|
|
//this.buildView.log(this.builder.code)
|
|
|
|
|
} catch (e) {
|
|
|
|
|
this.buildView.log(`${e}`)
|
|
|
|
|
}
|
|
|
|
|
|