Spaces:

fast72
/

code

Sleeping

App Files Files Community

fast72 commited on Mar 15, 2025

Commit

83c4a31

verified ·

1 Parent(s): cd4551a

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +71 -50

public/index.html CHANGED Viewed

@@ -3,77 +3,98 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CodeMirror 5 - Multi Language Editor</title>
-  <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
-  <script src="https://codemirror.net/codemirror.js"></script>
-  <script src="https://codemirror.net/addon/edit/closebrackets.js"></script>
-  <script src="https://codemirror.net/addon/selection/active-line.js"></script>
-  <script src="https://codemirror.net/addon/lint/lint.js"></script>
-  <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
-  <script src="https://codemirror.net/mode/python/python.js"></script>
-  <script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
-  <script src="https://codemirror.net/mode/css/css.js"></script>
-  <script src="https://codemirror.net/mode/xml/xml.js"></script>
-  <script src="https://codemirror.net/mode/php/php.js"></script>
-  <script src="https://codemirror.net/mode/clike/clike.js"></script>
-  <script src="https://codemirror.net/mode/sql/sql.js"></script>
   <style>
     body { font-family: Arial, sans-serif; margin: 20px; }
-    #editor-container { width: 100%; max-width: 800px; margin: auto; }
-    #editor { height: 500px; border: 1px solid #ddd; }
     select, button, label { margin: 5px; padding: 8px; font-size: 16px; }
   </style>
 </head>
 <body>
-  <div id="editor-container">
-    <h2>CodeMirror 5 Editor</h2>
-    <select id="language">
-      <option value="javascript">JavaScript</option>
-      <option value="python">Python</option>
-      <option value="htmlmixed">HTML</option>
-      <option value="css">CSS</option>
-      <option value="php">PHP</option>
-      <option value="clike">C / C++ / Java</option>
-      <option value="sql">SQL</option>
-      <option value="xml">XML</option>
-    </select>
-    <button onclick="downloadFile()">Download</button>
-    <label><input type="checkbox" id="wrapCode"> Wrap Code</label>
-    <textarea id="code">// Start coding...</textarea>
-    <div id="editor"></div>
-  </div>
-  <script>
-    let editor = CodeMirror(document.getElementById("editor"), {
-      value: "// Start coding...\nconsole.log('Hello, CodeMirror 5!');",
-      lineNumbers: true,
-      mode: "javascript",
-      theme: "default",
-      matchBrackets: true,
-      autoCloseBrackets: true,
-      styleActiveLine: true,
-      indentUnit: 4,
-      tabSize: 4
-    });
     document.getElementById("language").addEventListener("change", function() {
-      editor.setOption("mode", this.value);
     });
     document.getElementById("wrapCode").addEventListener("change", function() {
-      editor.setOption("lineWrapping", this.checked);
     });
     function downloadFile() {
-      const content = editor.getValue();
       const blob = new Blob([content], { type: "text/plain" });
       const a = document.createElement("a");
       a.href = URL.createObjectURL(blob);
       a.download = "code.txt";
       a.click();
     }
   </script>
 </body>
 </html>

 <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>