Replace stapler-adjunct-codemirror (CM2) with modern CodeMirror 6

bom/pom.xml

@@ -312,11 +312,6 @@ THE SOFTWARE.
         <artifactId>stapler</artifactId>
         <version>${stapler.version}</version>
       </dependency>
-      <dependency>
-        <groupId>org.kohsuke.stapler</groupId>
-        <artifactId>stapler-adjunct-codemirror</artifactId>
-        <version>1.3</version>
-      </dependency>
       <dependency>
         <groupId>org.kohsuke.stapler</groupId>
         <artifactId>stapler-groovy</artifactId>

core/pom.xml

@@ -352,10 +352,6 @@ THE SOFTWARE.
       <groupId>org.kohsuke.stapler</groupId>
       <artifactId>stapler</artifactId>
     </dependency>
-    <dependency>
-      <groupId>org.kohsuke.stapler</groupId>
-      <artifactId>stapler-adjunct-codemirror</artifactId>
-    </dependency>
     <dependency>
       <groupId>org.kohsuke.stapler</groupId>
       <artifactId>stapler-groovy</artifactId>

core/src/main/resources/lib/form/textarea.jelly

@@ -84,9 +84,9 @@ THE SOFTWARE.
     <st:adjunct includes="lib.form.textarea.textarea"/>
   </j:if>
   <j:if test="${attrs['codemirror-mode']!=null}">
-    <st:adjunct includes="
-        org.kohsuke.stapler.codemirror.mode.${attrs['codemirror-mode']}.${attrs['codemirror-mode']},
-        org.kohsuke.stapler.codemirror.theme.default"/>
+    <st:once>
+      <script src="${resURL}/jsbundles/codemirror.js" type="text/javascript" defer="true" />
+    </st:once>
   </j:if>
   <j:set var="name" value="${attrs.name ?: '_.'+attrs.field}"/>
   <f:possibleReadOnlyField>

core/src/main/resources/lib/form/textarea/textarea.css

@@ -1,4 +1,4 @@
-td.setting-main .CodeMirror {
+td.setting-main .cm-editor {
   display: table;
   table-layout: fixed;
   width: 100%;

core/src/main/resources/lib/form/textarea/textarea.js

@@ -1,60 +1,3 @@
-Behaviour.specify("TEXTAREA.codemirror", "textarea", 0, function (e) {
-  var config = e.getAttribute("codemirror-config");
-  if (!config) {
-    config = "";
-  }
-  try {
-    config = JSON.parse("{" + config + "}");
-  } catch (ex) {
-    /*
-     * Attempt to parse fairly common legacy format whose exact content is:
-     * mode:'<MIME>'
-     */
-    let match = config.match("^mode: ?'([^']+)'$");
-    if (match) {
-      console.log(
-        "Parsing simple legacy codemirror-config value using fallback: " +
-          config,
-      );
-      config = { mode: match[1] };
-    } else {
-      console.log(
-        "Failed to parse codemirror-config '{" + config + "}' as JSON",
-        ex,
-      );
-      config = {};
-    }
-  }
-  if (!config.onBlur) {
-    config.onBlur = function (editor) {
-      editor.save();
-      editor.getTextArea().dispatchEvent(new Event("change"));
-    };
-  }
-  var codemirror = CodeMirror.fromTextArea(e, config);
-  e.codemirrorObject = codemirror;
-  if (typeof codemirror.getScrollerElement !== "function") {
-    // Maybe older versions of CodeMirror do not provide getScrollerElement method.
-    codemirror.getScrollerElement = function () {
-      return codemirror.getWrapperElement().querySelector(".CodeMirror-scroll");
-    };
-  }
-  var lineCount = codemirror.lineCount();
-  var lineHeight = codemirror.defaultTextHeight();
-
-  var scroller = codemirror.getScrollerElement();
-  scroller.setAttribute("style", "border:none;");
-  scroller.style.height = Math.max(lineHeight * lineCount + 30, 130) + "px";
-
-  // the form needs to be populated before the "Apply" button
-  if (e.closest("form")) {
-    // Protect against undefined element
-    e.closest("form").addEventListener("jenkins:apply", function () {
-      e.value = codemirror.getValue();
-    });
-  }
-});
-
 Behaviour.specify(
   "DIV.textarea-preview-container",
   "textarea",

core/src/main/resources/lib/hudson/scriptConsole.jelly

@@ -56,14 +56,13 @@ THE SOFTWARE.
             ${%description2}
           </p>
 
+          <script src="${resURL}/jsbundles/codemirror.js" type="text/javascript" defer="true" />
           <form action="script" method="post">
             <textarea id="script" name="script" class="script">${request2.getParameter('script')}</textarea>
             <div align="right">
               <f:submit  value="${%Run}"/>
             </div>
           </form>
-          <st:adjunct includes="org.kohsuke.stapler.codemirror.mode.groovy.groovy"/>
-          <st:adjunct includes="org.kohsuke.stapler.codemirror.theme.default"/>
           <j:if test="${output!=null}">
             <h2>
               ${%Result}

eslint.config.cjs

@@ -32,7 +32,6 @@ module.exports = [
         Behaviour: "readonly",
         breadcrumbs: "readonly",
         buildFormTree: "readonly",
-        CodeMirror: "readonly",
         ComboBox: "readonly",
         COMBOBOX_VERSION: "writeable",
         crumb: "readonly",

package.json

@@ -53,6 +53,13 @@
     "webpack-remove-empty-scripts": "1.1.1"
   },
   "dependencies": {
+    "@codemirror/lang-java": "6.0.2",
+    "@codemirror/language": "6.10.8",
+    "@codemirror/state": "6.5.1",
+    "@codemirror/view": "6.36.2",
+    "@lezer/common": "1.2.3",
+    "@lezer/highlight": "1.2.1",
+    "codemirror": "6.0.1",
     "handlebars": "4.7.8",
     "hotkeys-js": "3.12.2",
     "jquery": "4.0.0",

src/main/js/codemirror.js

@@ -0,0 +1,3 @@
+import CodeMirrorEditor from "@/components/codemirror";
+
+CodeMirrorEditor.init();

src/main/js/components/codemirror/index.js

@@ -0,0 +1,169 @@
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { codeEditorTheme } from "@/components/codemirror/theme";
+import behaviorShim from "@/util/behavior-shim";
+
+// Java language support — also used for Groovy (syntactically very similar, no CM6 Groovy parser exists)
+import { java } from "@codemirror/lang-java";
+
+// Map CM2 mode names/MIME types to CM6 language support.
+// Only Java/Groovy is bundled in core. Plugins needing other languages
+// can contribute additional language support.
+const LANGUAGES = {
+  groovy: java,
+  "text/x-groovy": java,
+  java: java,
+  "text/x-java": java,
+  clike: java,
+  "text/x-csrc": java,
+  "text/x-c++src": java,
+  "text/x-csharp": java,
+};
+
+function getLanguageSupport(mode) {
+  if (!mode) {
+    return null;
+  }
+  const factory = LANGUAGES[mode] ?? LANGUAGES[mode.toLowerCase()];
+  if (typeof factory === "function") {
+    return factory();
+  }
+  // Unknown modes get plain text editing (no syntax highlighting)
+  return null;
+}
+
+function createEditor(textarea, options) {
+  const mode = options.mode;
+  const lineNumbers =
+    options.lineNumbers !== undefined ? options.lineNumbers : false;
+  const readOnly = textarea.hasAttribute("readonly");
+
+  const extensions = [basicSetup, codeEditorTheme];
+
+  const languageSupport = getLanguageSupport(mode);
+  if (languageSupport) {
+    extensions.push(languageSupport);
+  }
+
+  if (readOnly) {
+    extensions.push(EditorState.readOnly.of(true));
+  }
+
+  // Sync changes back to the textarea on every update
+  extensions.push(
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        textarea.value = update.state.doc.toString();
+        textarea.dispatchEvent(new Event("change"));
+      }
+    }),
+  );
+
+  if (!lineNumbers) {
+    extensions.push(EditorView.lineWrapping);
+  }
+
+  const view = new EditorView({
+    state: EditorState.create({
+      doc: textarea.value,
+      extensions: extensions,
+    }),
+  });
+
+  // Handle Cmd/Ctrl+Enter to submit the form
+  if (textarea.form) {
+    const submitKeymap = keymap.of([
+      {
+        key: "Mod-Enter",
+        run: () => {
+          textarea.value = view.state.doc.toString();
+          textarea.form.submit();
+          return true;
+        },
+      },
+    ]);
+    view.dispatch({
+      effects: EditorState.appendConfig.of(submitKeymap),
+    });
+  }
+
+  textarea.parentNode.insertBefore(view.dom, textarea);
+  textarea.style.display = "none";
+
+  // Store reference on textarea for backward compatibility
+  textarea.codemirrorObject = {
+    getValue: () => view.state.doc.toString(),
+    setValue: (text) => {
+      view.dispatch({
+        changes: { from: 0, to: view.state.doc.length, insert: text },
+      });
+    },
+    setLine: (line, text) => {
+      const lineObj = view.state.doc.line(line + 1);
+      view.dispatch({
+        changes: { from: lineObj.from, to: lineObj.to, insert: text },
+      });
+    },
+    save: () => {
+      textarea.value = view.state.doc.toString();
+    },
+    getView: () => view,
+  };
+
+  // Sync value before form submission
+  if (textarea.form) {
+    textarea.form.addEventListener("submit", () => {
+      textarea.value = view.state.doc.toString();
+    });
+    textarea.form.addEventListener("jenkins:apply", () => {
+      textarea.value = view.state.doc.toString();
+    });
+  }
+
+  return view;
+}
+
+function init() {
+  // Handle textareas with codemirror-mode attribute (from f:textarea)
+  behaviorShim.specify(
+    "TEXTAREA.codemirror",
+    "codemirror-textarea",
+    0,
+    (textarea) => {
+      const mode = textarea.getAttribute("codemirror-mode") || "text/x-groovy";
+      let config = {};
+      const configAttr = textarea.getAttribute("codemirror-config");
+      if (configAttr) {
+        try {
+          config = JSON.parse("{" + configAttr + "}");
+        } catch {
+          const match = configAttr.match("^mode: ?'([^']+)'$");
+          if (match) {
+            config = { mode: match[1] };
+          }
+        }
+      }
+      createEditor(textarea, {
+        mode: config.mode || mode,
+        lineNumbers: false,
+      });
+    },
+  );
+
+  // Handle Script Console textareas
+  behaviorShim.specify(
+    "TEXTAREA.script",
+    "codemirror-script-console",
+    0,
+    (textarea) => {
+      const mode = textarea.getAttribute("script-mode") || "text/x-groovy";
+      createEditor(textarea, {
+        mode: mode,
+        lineNumbers: true,
+      });
+    },
+  );
+}
+
+export default { init };