| | <!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({ |
| | "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> |
