Hugging Face's logo

Spaces:
fast72
/
code
Sleeping

App Files Community
fast72 commited on
Commit
8d15667
·
verified ·
1 Parent(s): 2c3af68

Update public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +55 -76
public/index.html CHANGED
@@ -1,90 +1,69 @@
1
- <!DOCTYPE html>
2
- <meta charset="utf-8">
3
- <title>CM6 - VSCode Features</title>
4
  <link rel="stylesheet" href="https://unpkg.com/@datavis-tech/codemirror-6-prerelease@5.0.0/codemirror.next/legacy-modes/style/codemirror.css">
5
  <script src="https://unpkg.com/@datavis-tech/codemirror-6-prerelease@5.0.0/dist/codemirror.js"></script>
6
  <style>
7
- body { font-family: Arial, sans-serif; margin: 20px; }
8
- #editor-container { height: 400px; border: 1px solid silver; }
9
- select, button, label { margin: 5px; padding: 8px; font-size: 16px; }
10
  </style>
11
-
12
  <body>
13
- <h1>CodeMirror 6 - VSCode Features</h1>
14
- <select id="language">
15
- <option value="javascript">JavaScript</option>
16
- <option value="python">Python</option>
17
- <option value="html">HTML</option>
18
- <option value="css">CSS</option>
19
- <option value="php">PHP</option>
20
- <option value="java">Java</option>
21
- <option value="cpp">C++</option>
22
- <option value="c">C</option>
23
- <option value="sql">SQL</option>
24
- <option value="xml">XML</option>
25
- <option value="rust">Rust</option>
26
- <option value="go">Go</option>
27
- </select>
28
- <button onclick="downloadFile()">Download</button>
29
- <label><input type="checkbox" id="wrapCode"> Wrap Code</label>
30
- <div id="editor-container"></div>
31
-
32
  <script>
33
- let {
34
- EditorState, EditorView, keymap, history, redo, undo, indentWithTab, lineNumbers,
35
- baseKeymap, indentOnInput, syntaxHighlighting, bracketMatching, closeBrackets, lintKeymap,
36
- autocompletion, multipleSelections, specialChars, foldGutter, searchKeymap, hoverTooltip
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  } = CodeMirror;
38
 
39
- let { javascript, python, html, css, php, java, cpp, c, sql, xml, rust, go } = CodeMirror["@codemirror/lang-"];
40
-
41
- const languageModes = { javascript, python, html, css, php, java, cpp, c, sql, xml, rust, go };
42
-
43
- let editor;
44
- function createEditor(language = "javascript") {
45
- if (editor) editor.destroy();
46
-
47
- editor = new EditorView({
48
- state: EditorState.create({
49
- doc: `"use strict";\nconsole.log("Hello, World!");`,
50
- extensions: [
51
- lineNumbers(),
52
- history(),
53
- indentWithTab,
54
- indentOnInput(),
55
- bracketMatching(),
56
- closeBrackets(),
57
- autocompletion(),
58
- multipleSelections(),
59
- syntaxHighlighting(),
60
- specialChars(),
61
- foldGutter(),
62
- hoverTooltip(),
63
- keymap.of([indentWithTab, ...searchKeymap, ...lintKeymap]),
64
- languageModes[language]()
65
- ]
66
- }),
67
- parent: document.getElementById("editor-container")
68
- });
69
- }
70
 
71
- document.getElementById("language").addEventListener("change", function() {
72
- createEditor(this.value);
73
- });
74
 
75
- document.getElementById("wrapCode").addEventListener("change", function() {
76
- editor.dispatch({ effects: EditorView.lineWrapping.of(this.checked) });
77
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
 
79
- function downloadFile() {
80
- const content = editor.state.doc.toString();
81
- const blob = new Blob([content], { type: "text/plain" });
82
- const a = document.createElement("a");
83
- a.href = URL.createObjectURL(blob);
84
- a.download = "code.txt";
85
- a.click();
86
- }
87
 
88
- createEditor();
89
  </script>
90
  </body>
 
1
+ <!doctype html>
2
+ <meta charset=utf8>
3
+ <title>CM6 demo</title>
4
  <link rel="stylesheet" href="https://unpkg.com/@datavis-tech/codemirror-6-prerelease@5.0.0/codemirror.next/legacy-modes/style/codemirror.css">
5
  <script src="https://unpkg.com/@datavis-tech/codemirror-6-prerelease@5.0.0/dist/codemirror.js"></script>
6
  <style>
7
+ .codemirror { height: 300px; overflow: auto; border: 1px solid silver}
8
+ .codemirror-matching-bracket { background: red; }
9
+ .codemirror-nonmatching-bracket { background: green; }
10
  </style>
11
+
12
  <body>
13
+ <h1>CM6</h1>
14
+ <div id=editor></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  <script>
16
+ let {
17
+ EditorState,
18
+ EditorView,
19
+ keymap,
20
+ history,
21
+ redo,
22
+ redoSelection,
23
+ undo,
24
+ undoSelection,
25
+ lineNumbers,
26
+ baseKeymap,
27
+ indentSelection,
28
+ legacyMode,
29
+ legacyModes: { javascript },
30
+ matchBrackets,
31
+ specialChars,
32
+ multipleSelections,
33
+ indentWithTab,
34
+ basicSetup
35
  } = CodeMirror;
36
 
37
+ let mode = legacyMode({mode: javascript({indentUnit: 2}, {})})
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
 
39
+ let isMac = /Mac/.test(navigator.platform)
40
+ let state = EditorState.create({doc: `"use strict";
41
+ const {readFile} = require("fs");
42
 
43
+ readFile("package.json", "utf8", (err, data) => {
44
+ console.log(data);
45
+ });`, extensions: [
46
+ lineNumbers(),
47
+ history(),
48
+ specialChars(),
49
+ multipleSelections(),
50
+ mode,
51
+ matchBrackets(),
52
+ basicSetup,
53
+ keymap.of([indentWithTab]),
54
+ keymap({
55
+ "Mod-z": undo,
56
+ "Mod-Shift-z": redo,
57
+ "Mod-u": view => undoSelection(view) || true,
58
+ [isMac ? "Mod-Shift-u" : "Alt-u"]: redoSelection,
59
+ "Ctrl-y": isMac ? undefined : redo,
60
+ "Shift-Tab": indentSelection
61
+ }),
62
+ keymap(baseKeymap),
63
+ ]})
64
 
65
+ let view = new EditorView({state})
66
+ document.querySelector("#editor").appendChild(view.dom)
 
 
 
 
 
 
67
 
 
68
  </script>
69
  </body>