2c:["$","title",null,{"children":"CodeMirror 6 Playground | qbane | Observable"}] 31:T788,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 }32:[] 2f:{"id":"353396bb467784d9","slug":"codemirror-6-playground","title":"CodeMirror 6 Playground","thumbnail":"4f007ceeb4c7f2101d09178624c1fc90bd6f71f09b3b7d1de1d368d0952f9759","access_level":"public","create_time":"$D2019-06-14T15:54:37.121Z","update_time":"$D2024-09-17T11:43:42.024Z","view_time":null,"first_public_time":"$D2019-06-14T17:19:42.752Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"ec0e60aaa9ae681d","login":"qbane","name":"qbane","avatar_url":"https://avatars-next.observableusercontent.com/cc5506cefb6901edcab91e234d80c6d5bbd53092b8f9cb23a68b5cd0e30d0395","tier":"starter_2024"},"version":285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cb0ad463bcac9eaa","login":"qbane","name":"qbane","avatar_url":"https://avatars-next.observableusercontent.com/cc5506cefb6901edcab91e234d80c6d5bbd53092b8f9cb23a68b5cd0e30d0395","tier":null}],"members":[{"type":"individual","id":"cb0ad463bcac9eaa","login":"qbane","name":"qbane","avatar_url":"https://avatars-next.observableusercontent.com/cc5506cefb6901edcab91e234d80c6d5bbd53092b8f9cb23a68b5cd0e30d0395","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":9,"collection":{"id":"de49574875f11e8b","slug":"playground","title":"Playground","owner":{"id":"ec0e60aaa9ae681d","login":"qbane","name":"qbane"}},"type":"notebook","body":{"title":"CodeMirror 6 Playground","cells":[{"id":0,"value":"md`# CodeMirror 6 Playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"md`It's going beta! Head over [the repository](https://github.com/codemirror/codemirror.next/) and also check out [the new project website](https://codemirror.net/6/).\n\n**Update (2024/9/17)**: Back-ported to the latest beta version.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"CODEMIRROR_VERSION = '0.16.0'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"viewof codeMirrorProgress = {\n const progress = html``\n const elValue = html`?`\n const elMax = html`?`\n const elHint = html`(from jsDelivr)`\n \n const elem = html`Loading progress: ${progress} ${elValue}/${elMax} ${elHint}`\n \n function update(value, max) {\n progress.value = value\n progress.max = max\n elValue.textContent = value || '?'\n elMax.textContent = max || '?'\n elHint.style.display = (value == max ? 'none' : undefined)\n elem.dispatchEvent(new CustomEvent('input'))\n }\n \n elem.addEventListener('init', () => {\n update(null, null)\n })\n elem.addEventListener('update', evt => {\n const {value, max} = evt.detail\n update(value, max)\n })\n \n if (this) {\n update(this.value, this.max)\n }\n \n return elem\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"viewof language = select({\n title: 'Language',\n options: [\n { label: 'JavaScript', value: 'javascript' },\n { label: 'HTML', value: 'html' },\n { label: 'CSS', value: 'css' },\n ],\n description: 'The document content will be reset upon a change.',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"viewof editor = {\n const elem = html`

`\n elem.appendChild(cmView.dom)\n return elem\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"isMac = /Mac/.test(navigator.platform)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"initialContent = {\n switch (language) {\n case 'javascript':\n return `\"use strict\";\nconst {readFile} = require(\"fs\");\n\nreadFile(\"package.json\", \"utf8\", (err, data) => {\n console.log(data);\n});`\n default:\n return ''\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"cmTheme = CodeMirrorImports.view.EditorView.theme({\n '.cm-scroller': {\n 'font-family': 'Fira Mono, monospace'\n },\n '': {\n 'border': '1px solid silver'\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"getURLFromCM = path => `https://unpkg.com/@codemirror/next@${CODEMIRROR_VERSION}/${path}/dist/index.js`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"resolverForCM = (path, base) => {\n if (path.startsWith('.')) {\n // relative path trick\n return new URL(path, base).href\n }\n if (path.indexOf('@codemirror/next/') == 0) {\n return getURLFromCM(path.replace('@codemirror/next/', ''))\n }\n if (path.indexOf('//') < 0) {\n if (path == 'style-mod') {\n path += '@3'\n }\n // maybe it is a module name on npm\n return resolve(path + '?module')\n }\n return null\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"importFromCM = path => importRecursive(\n getURLFromCM(path),\n resolverForCM)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"CodeMirrorImports = {\n const modules = [\n 'state',\n 'view',\n 'history',\n 'fold',\n 'gutter',\n 'commands',\n 'matchbrackets',\n 'closebrackets',\n 'search',\n 'autocomplete',\n 'rectangular-selection',\n 'language',\n 'highlight',\n ]\n const entries = modules.map(x => [x, importFromCM(x)])\n \n const promises = entries.map(([k, p]) => {\n return p.then(m => [k, m])\n })\n \n viewof codeMirrorProgress.dispatchEvent(new CustomEvent('init'))\n \n const updateState = (value, max) => {\n viewof codeMirrorProgress.dispatchEvent(new CustomEvent('update', { detail: { value, max } }))\n }\n \n const resolvedEntries = await promiseAll(promises, updateState)\n return Object.fromEntries(resolvedEntries)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"languageHighlighter = {\n return (await importFromCM('lang-' + language))[language]()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"function promiseAll(ps, cb) {\n let cur = 0\n const tot = ps.length\n for (const p of ps) {\n p.then(() => {\n cur++\n return cb(cur, tot, ps)\n })\n }\n return Promise.all(ps)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"import { importRecursive } from '@andy0130tw/esm-loader'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"import {select} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"html`Stylesheet for this page`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@qbane/codemirror-6-playground;307;"}