File size: 2,046 Bytes
8d15667 8852ddc 8d15667 8852ddc 8d15667 8852ddc 8d15667 8852ddc 8d15667 79f75e0 8852ddc 83c4a31 79f75e0 5a93321 8d15667 5a93321 8d15667 79f75e0 8d15667 5a93321 8d15667 83c4a31 5a93321 8852ddc |
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 |
<!doctype html>
<meta charset=utf8>
<title>CM6 demo</title>
<link rel="stylesheet" href="https://unpkg.com/@datavis-tech/codemirror-6-prerelease@5.0.0/codemirror.next/legacy-modes/style/codemirror.css">
<script src="https://unpkg.com/@datavis-tech/codemirror-6-prerelease@5.0.0/dist/codemirror.js"></script>
<style>
.codemirror { height: 300px; overflow: auto; border: 1px solid silver}
.codemirror-matching-bracket { background: red; }
.codemirror-nonmatching-bracket { background: green; }
</style>
<body>
<h1>CM6</h1>
<div id=editor></div>
<script>
let {
EditorState,
EditorView,
keymap,
history,
redo,
redoSelection,
undo,
undoSelection,
lineNumbers,
baseKeymap,
indentSelection,
legacyMode,
legacyModes: { javascript },
matchBrackets,
specialChars,
multipleSelections
} = CodeMirror;
let mode = legacyMode({mode: javascript({indentUnit: 4}, {})})
let isMac = /Mac/.test(navigator.platform)
let state = EditorState.create({doc: `"use strict";
const {readFile} = require("fs");
readFile("package.json", "utf8", (err, data) => {
console.log(data);
});`, extensions: [
lineNumbers(),
history(),
specialChars(),
multipleSelections(),
mode,
matchBrackets(),
//keymap.of([indentWithTab]),
keymap({
"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
}),
keymap(baseKeymap),
]})
let view = new EditorView({state})
document.querySelector("#editor").appendChild(view.dom)
</script>
</body> |