editor
loadCodeMirrorModules = async entries => {
const repo = Object.create(null)
const loadToRepo = async key => {
const module = await esmCodeMirror(key)
repo[key] = module
}
await Promise.all(entries.map(loadToRepo))
return repo
}
cmImports = loadCodeMirrorModules([
'view', 'state', 'history', 'fold', 'language',
'gutter', 'commands', 'search', 'autocomplete', 'highlight',
])
EditorView = cmImports.view.EditorView
EditorState = cmImports.state.EditorState
CodeMirror = async (doc = '', config = {}) => {
const extensions = config.extensions ?? []
const keymaps = config.keymaps ?? []
const { highlightSpecialChars, keymap, drawSelection, highlightActiveLine } = cmImports.view
const { Prec } = cmImports.state
const state = EditorState.create({
doc,
extensions: [
cmReactiveViewof,
cmImports.gutter.lineNumbers(),
highlightSpecialChars(),
cmImports.history.history(),
drawSelection(),
Prec.fallback(cmImports.highlight.defaultHighlightStyle),
highlightActiveLine(),
keymap.of([
// ...closeBracketsKeymap,
...cmImports.commands.defaultKeymap,
...cmImports.search.searchKeymap,
...cmImports.history.historyKeymap,
// ...foldKeymap,
// ...commentKeymap,
// ...completionKeymap,
// ...lintKeymap,
...keymaps,
]),
...extensions,
],
})
const view = new EditorView({state})
const el = view.dom
el.value = view.state.doc.toString()
return el
}
cmReactiveViewof = {
// prevent input events coming from the contenteditable div that
// propagates and triggers a cell refresh; we shall handle it ourselves.
const blocker = cmImports.view.ViewPlugin.fromClass(class {
constructor(view) {
this.elContent = null
return true
}
update({view}) {
if (this.elContent) return;
const el = view.dom.querySelector('.cm-content')
if (el) {
this.elContent = el
this.elContent.addEventListener('input', this.handler)
}
}
destroy() {
if (!this.elContent) return;
this.elContent.removeEventListener('input', this.handler)
this.elContent = null
}
handler(evt) {
evt.stopImmediatePropagation()
}
})
const handler = EditorView.updateListener.of(update => {
const { dom } = update.view
if (!update.docChanged) return
dom.value = update.state.doc.toString()
dom.dispatchEvent(new CustomEvent('input'))
})
return [blocker, handler]
}
loadBasicSetup = () => esmCodeMirror('basic-setup').then(m => m.basicSetup)
cmOneDark = esmCodeMirror('theme-one-dark')
myDefaultTheme = EditorView.theme({
'&': {
fontFamily: 'Consolas, "Roboto Mono", monospace',
fontSize: '14px',
height: '200px',
border: '1px solid #ddd',
},
})
esmImport = pkg => import(`https://cdn.skypack.dev/${pkg}`)
esmCodeMirror = mod => esmImport('@codemirror/' + (mod.indexOf('@') >= 0 ? mod : `${mod}@${CODEMIRROR_VERSION}`))
MarkdownIt = require('markdown-it@12/dist/markdown-it.js')
mdit = MarkdownIt('commonmark').enable('strikethrough')
import { md as mdi } with { mdit } from '@andy0130tw/my-markdown-it'
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.
