Merge pull request #197 from SwiftFiddle/codemirror

Use CodeMirror

Author: kishikawakatsumi

Public/css/common.css

@@ -42,7 +42,7 @@ body {
 #syntax-container {
   font-family: Menlo, Consolas, "DejaVu Sans Mono", "Ubuntu Mono", monospace;
   font-size: 11pt;
-  line-height: 1.5;
+  line-height: 1.4;
 }
 
 .lined .nav-link {

Public/css/editor.css

@@ -1,11 +1,21 @@
-#editor-container {
-  position: relative;
-  height: 100%;
-  line-height: 1.5;
+.CodeMirror {
+  font-family: Menlo, Consolas, "DejaVu Sans Mono", "Ubuntu Mono", monospace;
+  font-size: 11pt;
+  line-height: 1.4;
+}
+
+.editor-marker-start {
+  border-left: 1px solid rgb(81, 101, 255);
+  background-color: rgba(81, 101, 255, 0.25);
 }
 
 .editor-marker {
-  position: absolute;
-  border: 1px solid rgb(81, 101, 255);
+  border-top: 1px solid rgb(81, 101, 255);
+  border-bottom: 1px solid rgb(81, 101, 255);
+  background-color: rgba(81, 101, 255, 0.25);
+}
+
+.editor-marker-end {
+  border-right: 1px solid rgb(81, 101, 255);
   background-color: rgba(81, 101, 255, 0.25);
 }

Public/index.html

@@ -97,7 +97,7 @@
     <main class="flex-grow-1 invisible">
       <div class="row row-cols-2 g-0 h-100">
         <div class="col">
-          <pre id="editor-container">#(defaultSampleCode)</pre>
+          <textarea id="editor-container" class="h-100 d-none">#(defaultSampleCode)</textarea>
         </div>
         <div class="col">
           <div class="tab-content">

Public/js/app.js

@@ -1,20 +1,13 @@
 "use strict";
 
 import { Tooltip } from "bootstrap";
+import { Editor } from "./editor.js";
 import { StructureView } from "./structure_view.js";
 import { SyntaxView } from "./syntax_view.js";
 import { StatisticsView } from "./statistics_view.js";
 import { WebSocketClient } from "./websocket.js";
 import { debounce } from "./debounce.js";
 
-import "../css/editor.css";
-
-import "ace-builds/src-min-noconflict/ace";
-import "ace-builds/src-min-noconflict/ext-language_tools";
-import "ace-builds/src-min-noconflict/mode-swift";
-import "ace-builds/src-min-noconflict/theme-xcode";
-const Range = ace.require("ace/range").Range;
-
 export class App {
   get contentViewHeight() {
     const headerHeight = document.querySelector("header").clientHeight;
@@ -24,30 +17,7 @@ export class App {
   }
 
   constructor() {
-    this.editor = ace.edit("editor-container");
-    this.editor.setTheme("ace/theme/xcode");
-    this.editor.session.setMode("ace/mode/swift");
-    this.editor.$blockScrolling = Infinity;
-    this.editor.setOptions({
-      tabSize: 2,
-      useSoftTabs: true,
-      autoScrollEditorIntoView: true,
-      fontFamily:
-        "Menlo, Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', monospace",
-      fontSize: "11pt",
-      showInvisibles: false,
-      enableAutoIndent: true,
-      enableBasicAutocompletion: true,
-      enableSnippets: true,
-      enableLiveAutocompletion: true,
-      scrollPastEnd: 0.5, // Overscroll
-      wrap: "free",
-      displayIndentGuides: true,
-    });
-    this.editor.renderer.setOptions({
-      showFoldWidgets: false,
-      showPrintMargin: false,
-    });
+    this.editor = new Editor(document.getElementById("editor-container"));
 
     this.structureView = new StructureView(
       document.getElementById("structure")
@@ -72,7 +42,7 @@ export class App {
     const updateOnTextChange = debounce(() => {
       this.update();
     }, 400);
-    this.editor.on("change", (change) => {
+    this.editor.on("change", () => {
       updateOnTextChange();
     });
 
@@ -107,33 +77,6 @@ export class App {
       formatter.send({ code: this.editor.getValue() });
     });
 
-    const dropZone = document.getElementById("editor-container");
-    dropZone.addEventListener(
-      "dragover",
-      (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        event.dataTransfer.dropEffect = "copy";
-      },
-      false
-    );
-    dropZone.addEventListener(
-      "drop",
-      (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-
-        const files = event.dataTransfer.files;
-        const reader = new FileReader();
-        reader.onload = (event) => {
-          this.editor.setValue(event.target.result);
-          this.editor.clearSelection();
-        };
-        reader.readAsText(files[0], "UTF-8");
-      },
-      false
-    );
-
     const onresize = debounce(() => {
       this.onresize();
     }, 200);
@@ -203,14 +146,7 @@ export class App {
   updateStructure(structureData) {
     this.structureView.update(structureData);
     this.structureView.onmouseover = (event, target, data) => {
-      this.editor.selection.setRange(
-        new Range(
-          data.range.startRow - 1,
-          data.range.startColumn - 1,
-          data.range.endRow - 1,
-          data.range.endColumn - 1
-        )
-      );
+      this.editor.setSelection(data.range);
     };
   }
 
@@ -223,27 +159,18 @@ export class App {
 
     this.statisticsView.onmouseover = (event, target, ranges) => {
       for (const range of ranges) {
-        this.editor.session.addMarker(
-          new Range(
-            range.startRow - 1,
-            range.startColumn - 1,
-            range.endRow - 1,
-            range.endColumn - 1
-          ),
-          "editor-marker",
-          "text"
-        );
+        this.editor.markText(range);
       }
     };
     this.statisticsView.onmouseout = (event, target) => {
-      const markers = this.editor.session.getMarkers();
-      for (const [key, value] of Object.entries(markers)) {
-        this.editor.session.removeMarker(value.id);
-      }
+      this.editor.clearMarks();
     };
   }
 
   onresize() {
+    document.querySelector(".CodeMirror").style.height = this.contentViewHeight;
+    this.editor.refresh();
+
     document.getElementById("structure").style.height = this.contentViewHeight;
     document.getElementById("syntax-container").style.height =
       this.contentViewHeight;

Public/js/editor.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import "codemirror/lib/codemirror.css";
+
+import CodeMirror from "codemirror";
+import "codemirror/mode/swift/swift";
+import "codemirror/addon/edit/matchbrackets";
+import "codemirror/addon/edit/closebrackets";
+
+import "../css/editor.css";
+
+export class Editor {
+  constructor(container) {
+    this.container = container;
+
+    this.init();
+  }
+
+  init() {
+    this.editor = CodeMirror.fromTextArea(this.container, {
+      autoCloseBrackets: true,
+      lineNumbers: true,
+      lineWrapping: true,
+      matchBrackets: true,
+      mode: "swift",
+      screenReaderLabel: "Source code editor",
+      tabSize: 2,
+    });
+    this.editor.setSize("100%", "100%");
+
+    this.editor.on("drop", (editor, event) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const files = event.dataTransfer.files;
+      if (files.length === 0) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        this.editor.setValue(event.target.result);
+      };
+      reader.readAsText(files[0], "UTF-8");
+    });
+  }
+
+  getValue() {
+    return this.editor.getValue();
+  }
+
+  setValue(value) {
+    this.editor.setValue(value);
+  }
+
+  setSelection(range) {
+    this.editor.setSelection(
+      { ch: range.startColumn - 1, line: range.startRow - 1 },
+      { ch: range.endColumn - 1, line: range.endRow - 1 },
+      { scroll: false }
+    );
+  }
+
+  clearSelection() {
+    this.editor.setCursor({ ch: 0, line: 0 });
+  }
+
+  markText(range) {
+    return this.editor.markText(
+      { ch: range.startColumn - 1, line: range.startRow - 1 },
+      { ch: range.endColumn - 1, line: range.endRow - 1 },
+      {
+        className: "editor-marker",
+        startStyle: "editor-marker-start",
+        endStyle: "editor-marker-end",
+      }
+    );
+  }
+
+  clearMarks() {
+    this.editor.getAllMarks().forEach((mark) => {
+      mark.clear();
+    });
+  }
+
+  focus() {
+    this.editor.focus();
+  }
+
+  refresh() {
+    this.editor.refresh();
+  }
+
+  on(event, callback) {
+    this.editor.on(event, callback);
+  }
+}

package-lock.json

@@ -11,8 +11,8 @@
     "@fortawesome/pro-regular-svg-icons": "6.4.0",
     "@fortawesome/pro-solid-svg-icons": "6.4.0",
     "@popperjs/core": "2.11.8",
-    "ace-builds": "1.22.0",
     "bootstrap": "5.2.3",
+    "codemirror": "5.65.13",
     "datatables.net-bs5": "1.13.4",
     "plausible-tracker": "0.3.8",
     "reconnecting-websocket": "4.4.0"