Merge pull request #4962 from dodona-edu/revert-4933-enhance/codemirror

Revert "Replace Ace Editor with CodeMirror"

.eslintignore

@@ -1,4 +1,5 @@
 app/assets/config/manifest.js
+app/assets/javascripts/ace_editor.js
 app/assets/javascripts/i18n/translations.js
 app/assets/javascripts/types/index.d.ts
 app/assets/javascripts/inputServiceWorker.js

.github/dependabot.yml

@@ -37,10 +37,6 @@ updates:
     rails:
       patterns:
         - "@rails*"
-    codemirror:
-      patterns:
-        - "*codemirror*"
-        - "@lezer*"
 - package-ecosystem: github-actions
   directory: "/"
   schedule:

Gemfile

@@ -59,6 +59,9 @@ gem 'builder', '~>3.2.4'
 # generate diffs
 gem 'diff-lcs', '~>1.5'
 
+# code editor
+gem 'ace-rails-ap', '~>4.5'
+
 # auto css prefixer
 gem 'autoprefixer-rails', '~>10.4.15'
 

Gemfile.lock

@@ -1,6 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    ace-rails-ap (4.5)
     actioncable (7.0.8)
       actionpack (= 7.0.8)
       activesupport (= 7.0.8)
@@ -522,6 +523,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  ace-rails-ap (~> 4.5)
   after_commit_everywhere (~> 1.3.1)
   annotate (~> 3.2.0)
   autoprefixer-rails (~> 10.4.15)

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
+//= link ace_editor.js
 //= link_tree ../builds

app/assets/javascripts/ace_editor.js

@@ -0,0 +1,11 @@
+// This is legacy code that is not compiled by webpack but fully depended on the sprockets pipeline.
+// It is used by the ace editor to provide syntax highlighting and code completion.
+// New code should not be added here.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+
+//= require ace-rails-ap
+//= require ace/ext-language_tools
+

app/assets/javascripts/coding_scratchpad.ts

@@ -2,8 +2,14 @@ import { Papyros } from "@dodona/papyros";
 import { InputMode } from "@dodona/papyros";
 import { ProgrammingLanguage } from "@dodona/papyros";
 import { themeState } from "state/Theme";
-import { EditorView } from "@codemirror/view";
-import { setCode } from "editor";
+
+/**
+ * Custom interface to not have to add the ace package as dependency
+ */
+interface Editor {
+    setValue(v: string): void;
+    getValue(): string;
+}
 
 /** Identifiers used in HTML for relevant elements */
 const CODE_EDITOR_PARENT_ID = "scratchpad-editor-wrapper";
@@ -19,7 +25,7 @@ const SUBMIT_TAB_ID = "activity-handin-link";
 function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
     if (Papyros.supportsProgrammingLanguage(programmingLanguage)) {
         let papyros: Papyros | undefined = undefined;
-        let editor: EditorView | undefined = undefined;
+        let editor: Editor | undefined = undefined;
         const closeButton = document.getElementById(CLOSE_BUTTON_ID);
         // To prevent horizontal scrollbar issues, we delay rendering the button
         // until after the page is loaded
@@ -40,14 +46,14 @@ function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
                     });
                 editor ||= window.dodona.editor;
                 if (editor) {
-                    // Shortcut to copy code to editor
+                    // Shortcut to copy code to ACE editor
                     papyros.addButton(
                         {
                             id: CODE_COPY_BUTTON_ID,
                             buttonText: I18n.t("js.coding_scratchpad.copy_code")
                         },
                         () => {
-                            setCode(editor, papyros.getCode());
+                            editor.setValue(papyros.getCode());
                             closeButton.click();
                             // Open submit panel if possible
                             document.getElementById(SUBMIT_TAB_ID)?.click();
@@ -82,7 +88,7 @@ function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
         document.getElementById(OFFCANVAS_ID).addEventListener("shown.bs.offcanvas", () => {
             editor ||= window.dodona.editor;
             if (editor) { // Start with code from the editor, if there is any
-                const editorCode = editor.state.doc.toString();
+                const editorCode = editor.getValue();
                 const currentCode = papyros.getCode();
                 if (!currentCode || // Papyros empty
                     // Neither code areas are empty, but they differ