Spaces:

fast72
/

code

Sleeping

App Files Files Community

fast72 commited on Mar 15

Commit

8852ddc

verified ·

1 Parent(s): 83c4a31

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +58 -93

public/index.html CHANGED Viewed

@@ -1,100 +1,65 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CodeMirror 6 - Editor dengan Pre</title>
-  <style>
-    body { font-family: Arial, sans-serif; margin: 20px; }
-    pre { background: #f5f5f5; padding: 10px; border: 1px solid #ddd; }
-    #editor-container { height: 500px; border: 1px solid #ddd; margin-top: 10px; }
-    select, button, label { margin: 5px; padding: 8px; font-size: 16px; }
-  </style>
-</head>
-<body>
-  <h2>CodeMirror 6 Editor</h2>
-  <select id="language">
-    <option value="javascript">JavaScript</option>
-    <option value="python">Python</option>
-    <option value="html">HTML</option>
-    <option value="css">CSS</option>
-    <option value="php">PHP</option>
-    <option value="java">Java</option>
-    <option value="cpp">C++</option>
-    <option value="c">C</option>
-    <option value="sql">SQL</option>
-    <option value="xml">XML</option>
-    <option value="rust">Rust</option>
-    <option value="go">Go</option>
-  </select>
-  <button onclick="downloadFile()">Download</button>
-  <label><input type="checkbox" id="wrapCode"> Wrap Code</label>
-  <pre id="code-preview">// Start coding...</pre>
-  <div id="editor-container"></div>
-  <script type="module">
-    import { basicSetup } from "https://cdn.skypack.dev/@codemirror/basic-setup";
-    import { EditorView, keymap, lineWrapping } from "https://cdn.skypack.dev/@codemirror/view";
-    import { EditorState } from "https://cdn.skypack.dev/@codemirror/state";
-    import { indentWithTab } from "https://cdn.skypack.dev/@codemirror/commands";
-    import { javascript } from "https://cdn.skypack.dev/@codemirror/lang-javascript";
-    import { python } from "https://cdn.skypack.dev/@codemirror/lang-python";
-    import { html } from "https://cdn.skypack.dev/@codemirror/lang-html";
-    import { css } from "https://cdn.skypack.dev/@codemirror/lang-css";
-    import { php } from "https://cdn.skypack.dev/@codemirror/lang-php";
-    import { java } from "https://cdn.skypack.dev/@codemirror/lang-java";
-    import { cpp } from "https://cdn.skypack.dev/@codemirror/lang-cpp";
-    import { c } from "https://cdn.skypack.dev/@codemirror/lang-c";
-    import { sql } from "https://cdn.skypack.dev/@codemirror/lang-sql";
-    import { xml } from "https://cdn.skypack.dev/@codemirror/lang-xml";
-    import { rust } from "https://cdn.skypack.dev/@codemirror/lang-rust";
-    import { go } from "https://cdn.skypack.dev/@codemirror/lang-go";
-    const languageModes = { javascript, python, html, css, php, java, cpp, c, sql, xml, rust, go };
-    let editor;
-    function createEditor(language = "javascript") {
-      if (editor) editor.destroy();
-      const codePreview = document.getElementById("code-preview");
-      const initialCode = codePreview.textContent;
-      const startState = EditorState.create({
-        doc: initialCode,
-        extensions: [
-          basicSetup,
-          keymap.of([indentWithTab]),
-          languageModes[language]()
-        ]
-      });
-      editor = new EditorView({
-        state: startState,
-        parent: document.getElementById("editor-container")
-      });
-      codePreview.style.display = "none";
-    }
-    document.getElementById("language").addEventListener("change", function() {
-      createEditor(this.value);
-    });
-    document.getElementById("wrapCode").addEventListener("change", function() {
-      editor.dispatch({ effects: lineWrapping.of(this.checked) });
-    });
-    function downloadFile() {
-      const content = editor.state.doc.toString();
-      const blob = new Blob([content], { type: "text/plain" });
-      const a = document.createElement("a");
-      a.href = URL.createObjectURL(blob);
-      a.download = "code.txt";
-      a.click();
-    }
-    createEditor();
   </script>
-</body>
-</html>

+<!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: 2}, {})})
+    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>