Hugging Face's logo

Spaces:
fast72
/
code
Sleeping

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

Update public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +76 -51
public/index.html CHANGED
@@ -1,65 +1,90 @@
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
  } = CodeMirror;
34
 
35
- let mode = legacyMode({mode: javascript({indentUnit: 2}, {})})
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
 
37
- let isMac = /Mac/.test(navigator.platform)
38
- let state = EditorState.create({doc: `"use strict";
39
- const {readFile} = require("fs");
40
 
41
- readFile("package.json", "utf8", (err, data) => {
42
- console.log(data);
43
- });`, extensions: [
44
- lineNumbers(),
45
- history(),
46
- specialChars(),
47
- multipleSelections(),
48
- mode,
49
- matchBrackets(),
50
- keymap({
51
- "Mod-z": undo,
52
- "Mod-Shift-z": redo,
53
- "Mod-u": view => undoSelection(view) || true,
54
- [isMac ? "Mod-Shift-u" : "Alt-u"]: redoSelection,
55
- "Ctrl-y": isMac ? undefined : redo,
56
- "Shift-Tab": indentSelection
57
- }),
58
- keymap(baseKeymap),
59
- ]})
60
 
61
- let view = new EditorView({state})
62
- document.querySelector("#editor").appendChild(view.dom)
 
 
 
 
 
 
63
 
 
64
  </script>
65
  </body>
 
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>