viewof editor = {
const elem = html`<div id="editor"></div>`
elem.appendChild(cmView.dom)
return elem
}
cmView = {
const { EditorState } = CodeMirrorImports.state
const { EditorView, keymap, drawSelection, highlightSpecialChars, highlightActiveLine } = CodeMirrorImports.view
const { history, redo, redoSelection, undo, undoSelection } = CodeMirrorImports.history
const { foldCode, unfoldCode, foldGutter } = CodeMirrorImports.fold
const { lineNumbers } = CodeMirrorImports.gutter
const { baseKeymap, indentSelection } = CodeMirrorImports.commands
const { bracketMatching } = CodeMirrorImports.matchbrackets
const { closeBrackets } = CodeMirrorImports.closebrackets
const { rectangularSelection } = CodeMirrorImports['rectangular-selection']
const { search, defaultSearchKeymap } = CodeMirrorImports.search
const { indentOnInput } = CodeMirrorImports.language
const { autocompletion, startCompletion } = CodeMirrorImports['autocomplete']
const { defaultHighlightStyle } = CodeMirrorImports.highlight
const exts = [
lineNumbers(),
highlightSpecialChars(),
history(),
foldGutter(),
drawSelection(),
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
languageHighlighter,
defaultHighlightStyle,
bracketMatching(),
closeBrackets(),
autocompletion(),
highlightActiveLine(),
// highlightSelectionMatches
cmTheme,
keymap.of({
"Mod-z": undo,
"Mod-Shift-z": redo,
"Mod-u": view => undoSelection(view) || true,
[isMac ? "Mod-Shift-u" : "Alt-u"]: redoSelection,
"Ctrl-y": isMac ? undefined : redo,
"Shift-Tab": indentSelection,
"Mod-Alt-[": foldCode,
"Mod-Alt-]": unfoldCode,
"Mod-Space": startCompletion,
}),
keymap.of(baseKeymap),
]
console.log(exts)
const state = EditorState.create({
doc: initialContent,
extensions: exts,
})
const view = new EditorView({state})
return view
}
cmTheme = CodeMirrorImports.view.EditorView.theme({
'.cm-scroller': {
'font-family': 'Fira Mono, monospace'
},
'': {
'border': '1px solid silver'
},
})
getURLFromCM = path => `https://unpkg.com/@codemirror/next@${CODEMIRROR_VERSION}/${path}/dist/index.js`
resolverForCM = (path, base) => {
if (path.startsWith('.')) {
// relative path trick
return new URL(path, base).href
}
if (path.indexOf('@codemirror/next/') == 0) {
return getURLFromCM(path.replace('@codemirror/next/', ''))
}
if (path.indexOf('//') < 0) {
if (path == 'style-mod') {
path += '@3'
}
// maybe it is a module name on npm
return resolve(path + '?module')
}
return null
}
importFromCM = path => importRecursive(
getURLFromCM(path),
resolverForCM)
CodeMirrorImports = {
const modules = [
'state',
'view',
'history',
'fold',
'gutter',
'commands',
'matchbrackets',
'closebrackets',
'search',
'autocomplete',
'rectangular-selection',
'language',
'highlight',
]
const entries = modules.map(x => [x, importFromCM(x)])
const promises = entries.map(([k, p]) => {
return p.then(m => [k, m])
})
viewof codeMirrorProgress.dispatchEvent(new CustomEvent('init'))
const updateState = (value, max) => {
viewof codeMirrorProgress.dispatchEvent(new CustomEvent('update', { detail: { value, max } }))
}
const resolvedEntries = await promiseAll(promises, updateState)
return Object.fromEntries(resolvedEntries)
}
languageHighlighter = {
return (await importFromCM('lang-' + language))[language]()
}
html`<em>Stylesheet for this page</em><style>
#editor {
margin-top: 1em;
margin-bottom: 1em;
min-height: 12em;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
