From 2b9446af2f7eb8d7f913768db048538a44ae113c Mon Sep 17 00:00:00 2001
From: Glenn Rice <grice1@missouriwestern.edu>
Date: Mon, 25 Nov 2024 17:01:07 -0600
Subject: [PATCH] Recover syntax highlighting for sample problems.

This was an oversight when I made the switch to the PG CodeMirror editor
with CodeMirror 6.  The sample problems also use CodeMirror for syntax
highlighting.  Since the CodeMirror 5 javascript is no longer available
that fails.

The pg-codemirror-editor package now exports a `runMode` method
(available via the global `PGCodeMirrorEditor` object), that essentially
does what the CodeMirror 5 `runMode` addon method did.  It is slightly
different in that it only works for the PG language. At this point we
don't use it for anything else, so that should be good for now.
---
 .../js/SampleProblemViewer/sample-problem.js  |   4 +-
 .../SampleProblemViewer/sample-problem.scss   |   2 +-
 htdocs/package-lock.json                      | 159 ++++++++++--------
 htdocs/package.json                           |   2 +-
 .../sample_problem.html.ep                    |   7 +-
 5 files changed, 95 insertions(+), 79 deletions(-)

diff --git a/htdocs/js/SampleProblemViewer/sample-problem.js b/htdocs/js/SampleProblemViewer/sample-problem.js
index 7907504d2f..aea4fd72f7 100644
--- a/htdocs/js/SampleProblemViewer/sample-problem.js
+++ b/htdocs/js/SampleProblemViewer/sample-problem.js
@@ -1,5 +1,5 @@
-for (const pre of document.body.querySelectorAll('pre.CodeMirror')) {
-	CodeMirror.runMode(pre.textContent, 'PG', pre);
+for (const pre of document.body.querySelectorAll('pre.PGCodeMirror')) {
+	PGCodeMirrorEditor.runMode(pre.textContent, pre);
 }
 
 for (const btn of document.querySelectorAll('.clipboard-btn')) {
diff --git a/htdocs/js/SampleProblemViewer/sample-problem.scss b/htdocs/js/SampleProblemViewer/sample-problem.scss
index 4d42527785..f94287b838 100644
--- a/htdocs/js/SampleProblemViewer/sample-problem.scss
+++ b/htdocs/js/SampleProblemViewer/sample-problem.scss
@@ -1,4 +1,4 @@
-pre.CodeMirror {
+pre.PGCodeMirror {
 	background-color: #fcfaf1;
 }
 
diff --git a/htdocs/package-lock.json b/htdocs/package-lock.json
index 4390973468..c7a86056ad 100644
--- a/htdocs/package-lock.json
+++ b/htdocs/package-lock.json
@@ -8,7 +8,7 @@
             "license": "GPL-2.0+",
             "dependencies": {
                 "@fortawesome/fontawesome-free": "^6.5.2",
-                "@openwebwork/pg-codemirror-editor": "^0.0.1-beta.25",
+                "@openwebwork/pg-codemirror-editor": "^0.0.1-beta.28",
                 "bootstrap": "~5.3.3",
                 "flatpickr": "^4.6.13",
                 "iframe-resizer": "^4.3.11",
@@ -62,9 +62,9 @@
             }
         },
         "node_modules/@codemirror/lang-css": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.0.tgz",
-            "integrity": "sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==",
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+            "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
             "license": "MIT",
             "dependencies": {
                 "@codemirror/autocomplete": "^6.0.0",
@@ -121,9 +121,9 @@
             }
         },
         "node_modules/@codemirror/language": {
-            "version": "6.10.3",
-            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.3.tgz",
-            "integrity": "sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==",
+            "version": "6.10.6",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.6.tgz",
+            "integrity": "sha512-KrsbdCnxEztLVbB5PycWXFxas4EOyk/fPAfruSOnDDppevQgid2XZ+KbJ9u+fDikP/e7MW7HPBTvTb8JlZK9vA==",
             "license": "MIT",
             "dependencies": {
                 "@codemirror/state": "^6.0.0",
@@ -135,9 +135,9 @@
             }
         },
         "node_modules/@codemirror/lint": {
-            "version": "6.8.3",
-            "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.3.tgz",
-            "integrity": "sha512-GSGfKxCo867P7EX1k2LoCrjuQFeqVgPGRRsSl4J4c0KMkD+k1y6WYvTQkzv0iZ8JhLJDujEvlnMchv4CZQLh3Q==",
+            "version": "6.8.4",
+            "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.4.tgz",
+            "integrity": "sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==",
             "license": "MIT",
             "dependencies": {
                 "@codemirror/state": "^6.0.0",
@@ -157,10 +157,13 @@
             }
         },
         "node_modules/@codemirror/state": {
-            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
-            "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==",
-            "license": "MIT"
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.0.tgz",
+            "integrity": "sha512-MwBHVK60IiIHDcoMet78lxt6iw5gJOGSbNbOIVBHWVXIH4/Nq1+GQgLLGgI1KlnN86WDXsPudVaqYHKBIx7Eyw==",
+            "license": "MIT",
+            "dependencies": {
+                "@marijn/find-cluster-break": "^1.0.0"
+            }
         },
         "node_modules/@codemirror/theme-one-dark": {
             "version": "6.1.2",
@@ -175,12 +178,12 @@
             }
         },
         "node_modules/@codemirror/view": {
-            "version": "6.35.0",
-            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.35.0.tgz",
-            "integrity": "sha512-I0tYy63q5XkaWsJ8QRv5h6ves7kvtrBWjBcnf/bzohFJQc5c14a1AQRdE8QpPF9eMp5Mq2FMm59TCj1gDfE7kw==",
+            "version": "6.35.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.35.3.tgz",
+            "integrity": "sha512-ScY7L8+EGdPl4QtoBiOzE4FELp7JmNUsBvgBcCakXWM2uiv/K89VAzU3BMDscf0DsACLvTKePbd5+cFDTcei6g==",
             "license": "MIT",
             "dependencies": {
-                "@codemirror/state": "^6.4.0",
+                "@codemirror/state": "^6.5.0",
                 "style-mod": "^4.1.0",
                 "w3c-keyname": "^2.2.4"
             }
@@ -290,9 +293,9 @@
             }
         },
         "node_modules/@lezer/javascript": {
-            "version": "1.4.19",
-            "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.19.tgz",
-            "integrity": "sha512-j44kbR1QL26l6dMunZ1uhKBFteVGLVCBGNUD2sUaMnic+rbTviVuoK0CD1l9FTW31EueWvFFswCKMH7Z+M3JRA==",
+            "version": "1.4.21",
+            "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.21.tgz",
+            "integrity": "sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==",
             "license": "MIT",
             "dependencies": {
                 "@lezer/common": "^1.2.0",
@@ -320,10 +323,16 @@
                 "@lezer/lr": "^1.0.0"
             }
         },
+        "node_modules/@marijn/find-cluster-break": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+            "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+            "license": "MIT"
+        },
         "node_modules/@openwebwork/codemirror-lang-pg": {
-            "version": "0.0.1-beta.18",
-            "resolved": "https://registry.npmjs.org/@openwebwork/codemirror-lang-pg/-/codemirror-lang-pg-0.0.1-beta.18.tgz",
-            "integrity": "sha512-HmMq3lRscxGo5BmPFWnrdj13UyKQdj6Rc0iGQjOEAcUwSg3i0/IOjN8OpzEAJ01oEZnOpe+XO4fWr4ZKYwHx7Q==",
+            "version": "0.0.1-beta.20",
+            "resolved": "https://registry.npmjs.org/@openwebwork/codemirror-lang-pg/-/codemirror-lang-pg-0.0.1-beta.20.tgz",
+            "integrity": "sha512-X4eXaSyyby9fYKz5iGJIB44xqXDYa5/uEWUsSMHUvczB0a/+XtU2BzE5lGfPZPVyUCSXPwLyB0aWdLS3dfQdDg==",
             "license": "MIT",
             "dependencies": {
                 "@codemirror/language": "^6.10.2",
@@ -332,15 +341,15 @@
             }
         },
         "node_modules/@openwebwork/pg-codemirror-editor": {
-            "version": "0.0.1-beta.25",
-            "resolved": "https://registry.npmjs.org/@openwebwork/pg-codemirror-editor/-/pg-codemirror-editor-0.0.1-beta.25.tgz",
-            "integrity": "sha512-3SajSiabBlRF6tuCfz/angik+Dphl0fQ2olZP+dCe1LK8xVQ4zgcA7RLKZNyUn5NWuqhplwWdHslqVh6E56A4w==",
+            "version": "0.0.1-beta.28",
+            "resolved": "https://registry.npmjs.org/@openwebwork/pg-codemirror-editor/-/pg-codemirror-editor-0.0.1-beta.28.tgz",
+            "integrity": "sha512-1u7rqJLfzpsBBQKJol0dsdlPcClZJjG4pfCGBc+fhLonD5fA8XBxGvVhm5PytegSkGBJHDDXhtQR65DGev/GuQ==",
             "license": "MIT",
             "dependencies": {
                 "@codemirror/lang-html": "^6.4.9",
                 "@codemirror/lang-xml": "^6.1.0",
                 "@codemirror/theme-one-dark": "^6.1.2",
-                "@openwebwork/codemirror-lang-pg": "^0.0.1-beta.18",
+                "@openwebwork/codemirror-lang-pg": "^0.0.1-beta.20",
                 "@replit/codemirror-emacs": "^6.1.0",
                 "@replit/codemirror-vim": "^6.2.1",
                 "cm6-theme-basic-dark": "^0.2.0",
@@ -352,8 +361,9 @@
                 "cm6-theme-solarized-dark": "^0.2.0",
                 "cm6-theme-solarized-light": "^0.2.0",
                 "codemirror": "^6.0.1",
-                "codemirror-lang-mt": "^0.0.2-beta.3",
-                "codemirror-lang-perl": "^0.1.5-beta.4",
+                "codemirror-lang-mt": "^0.0.2-beta.5",
+                "codemirror-lang-perl": "^0.1.5-beta.6",
+                "style-mod": "^4.1.2",
                 "thememirror": "^2.0.1"
             }
         },
@@ -753,9 +763,9 @@
             }
         },
         "node_modules/codemirror-lang-mt": {
-            "version": "0.0.2-beta.3",
-            "resolved": "https://registry.npmjs.org/codemirror-lang-mt/-/codemirror-lang-mt-0.0.2-beta.3.tgz",
-            "integrity": "sha512-95e1QMKCFqasvHMCEekVpA59SQzfsgqJERsHee0j6RyYJ2JoKFcZmrfZdKbZMNRCxtlHHPsnI1NqTSQcJNpQbQ==",
+            "version": "0.0.2-beta.5",
+            "resolved": "https://registry.npmjs.org/codemirror-lang-mt/-/codemirror-lang-mt-0.0.2-beta.5.tgz",
+            "integrity": "sha512-+ixkIP2r/gq/pteghu5Llw5SqmhQMidq4xtiD9hjTNpslZ84iInR0+m/beazvqii7j6kMDzsV/PomxC9OAqxXA==",
             "license": "MIT",
             "dependencies": {
                 "@codemirror/lang-css": "^6.3.0",
@@ -767,9 +777,9 @@
             }
         },
         "node_modules/codemirror-lang-perl": {
-            "version": "0.1.5-beta.4",
-            "resolved": "https://registry.npmjs.org/codemirror-lang-perl/-/codemirror-lang-perl-0.1.5-beta.4.tgz",
-            "integrity": "sha512-qVbbloMHHZwh5/TCxnrDMCdLz1kO3PgU8zmikTsb0A31N36nx28QS4q8CYQO5oHkJdnip/nnW0FjUbdmMC+eyQ==",
+            "version": "0.1.5-beta.6",
+            "resolved": "https://registry.npmjs.org/codemirror-lang-perl/-/codemirror-lang-perl-0.1.5-beta.6.tgz",
+            "integrity": "sha512-RpKsMRr/5IGcVbo0cj1JWga6My7jbx+Lzs9tbijEEE31a3BcyHcNN0VbmBVm1Z1UJA/C9q0TxhZu5WH/ZgYjFA==",
             "license": "MIT",
             "dependencies": {
                 "@codemirror/language": "^6.10.2",
@@ -2155,9 +2165,9 @@
             }
         },
         "@codemirror/lang-css": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.0.tgz",
-            "integrity": "sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==",
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+            "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
             "requires": {
                 "@codemirror/autocomplete": "^6.0.0",
                 "@codemirror/language": "^6.0.0",
@@ -2210,9 +2220,9 @@
             }
         },
         "@codemirror/language": {
-            "version": "6.10.3",
-            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.3.tgz",
-            "integrity": "sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==",
+            "version": "6.10.6",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.6.tgz",
+            "integrity": "sha512-KrsbdCnxEztLVbB5PycWXFxas4EOyk/fPAfruSOnDDppevQgid2XZ+KbJ9u+fDikP/e7MW7HPBTvTb8JlZK9vA==",
             "requires": {
                 "@codemirror/state": "^6.0.0",
                 "@codemirror/view": "^6.23.0",
@@ -2223,9 +2233,9 @@
             }
         },
         "@codemirror/lint": {
-            "version": "6.8.3",
-            "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.3.tgz",
-            "integrity": "sha512-GSGfKxCo867P7EX1k2LoCrjuQFeqVgPGRRsSl4J4c0KMkD+k1y6WYvTQkzv0iZ8JhLJDujEvlnMchv4CZQLh3Q==",
+            "version": "6.8.4",
+            "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.4.tgz",
+            "integrity": "sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==",
             "requires": {
                 "@codemirror/state": "^6.0.0",
                 "@codemirror/view": "^6.35.0",
@@ -2243,9 +2253,12 @@
             }
         },
         "@codemirror/state": {
-            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
-            "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.0.tgz",
+            "integrity": "sha512-MwBHVK60IiIHDcoMet78lxt6iw5gJOGSbNbOIVBHWVXIH4/Nq1+GQgLLGgI1KlnN86WDXsPudVaqYHKBIx7Eyw==",
+            "requires": {
+                "@marijn/find-cluster-break": "^1.0.0"
+            }
         },
         "@codemirror/theme-one-dark": {
             "version": "6.1.2",
@@ -2259,11 +2272,11 @@
             }
         },
         "@codemirror/view": {
-            "version": "6.35.0",
-            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.35.0.tgz",
-            "integrity": "sha512-I0tYy63q5XkaWsJ8QRv5h6ves7kvtrBWjBcnf/bzohFJQc5c14a1AQRdE8QpPF9eMp5Mq2FMm59TCj1gDfE7kw==",
+            "version": "6.35.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.35.3.tgz",
+            "integrity": "sha512-ScY7L8+EGdPl4QtoBiOzE4FELp7JmNUsBvgBcCakXWM2uiv/K89VAzU3BMDscf0DsACLvTKePbd5+cFDTcei6g==",
             "requires": {
-                "@codemirror/state": "^6.4.0",
+                "@codemirror/state": "^6.5.0",
                 "style-mod": "^4.1.0",
                 "w3c-keyname": "^2.2.4"
             }
@@ -2356,9 +2369,9 @@
             }
         },
         "@lezer/javascript": {
-            "version": "1.4.19",
-            "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.19.tgz",
-            "integrity": "sha512-j44kbR1QL26l6dMunZ1uhKBFteVGLVCBGNUD2sUaMnic+rbTviVuoK0CD1l9FTW31EueWvFFswCKMH7Z+M3JRA==",
+            "version": "1.4.21",
+            "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.21.tgz",
+            "integrity": "sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==",
             "requires": {
                 "@lezer/common": "^1.2.0",
                 "@lezer/highlight": "^1.1.3",
@@ -2383,10 +2396,15 @@
                 "@lezer/lr": "^1.0.0"
             }
         },
+        "@marijn/find-cluster-break": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+            "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
+        },
         "@openwebwork/codemirror-lang-pg": {
-            "version": "0.0.1-beta.18",
-            "resolved": "https://registry.npmjs.org/@openwebwork/codemirror-lang-pg/-/codemirror-lang-pg-0.0.1-beta.18.tgz",
-            "integrity": "sha512-HmMq3lRscxGo5BmPFWnrdj13UyKQdj6Rc0iGQjOEAcUwSg3i0/IOjN8OpzEAJ01oEZnOpe+XO4fWr4ZKYwHx7Q==",
+            "version": "0.0.1-beta.20",
+            "resolved": "https://registry.npmjs.org/@openwebwork/codemirror-lang-pg/-/codemirror-lang-pg-0.0.1-beta.20.tgz",
+            "integrity": "sha512-X4eXaSyyby9fYKz5iGJIB44xqXDYa5/uEWUsSMHUvczB0a/+XtU2BzE5lGfPZPVyUCSXPwLyB0aWdLS3dfQdDg==",
             "requires": {
                 "@codemirror/language": "^6.10.2",
                 "@lezer/highlight": "^1.2.1",
@@ -2394,14 +2412,14 @@
             }
         },
         "@openwebwork/pg-codemirror-editor": {
-            "version": "0.0.1-beta.25",
-            "resolved": "https://registry.npmjs.org/@openwebwork/pg-codemirror-editor/-/pg-codemirror-editor-0.0.1-beta.25.tgz",
-            "integrity": "sha512-3SajSiabBlRF6tuCfz/angik+Dphl0fQ2olZP+dCe1LK8xVQ4zgcA7RLKZNyUn5NWuqhplwWdHslqVh6E56A4w==",
+            "version": "0.0.1-beta.28",
+            "resolved": "https://registry.npmjs.org/@openwebwork/pg-codemirror-editor/-/pg-codemirror-editor-0.0.1-beta.28.tgz",
+            "integrity": "sha512-1u7rqJLfzpsBBQKJol0dsdlPcClZJjG4pfCGBc+fhLonD5fA8XBxGvVhm5PytegSkGBJHDDXhtQR65DGev/GuQ==",
             "requires": {
                 "@codemirror/lang-html": "^6.4.9",
                 "@codemirror/lang-xml": "^6.1.0",
                 "@codemirror/theme-one-dark": "^6.1.2",
-                "@openwebwork/codemirror-lang-pg": "^0.0.1-beta.18",
+                "@openwebwork/codemirror-lang-pg": "^0.0.1-beta.20",
                 "@replit/codemirror-emacs": "^6.1.0",
                 "@replit/codemirror-vim": "^6.2.1",
                 "cm6-theme-basic-dark": "^0.2.0",
@@ -2413,8 +2431,9 @@
                 "cm6-theme-solarized-dark": "^0.2.0",
                 "cm6-theme-solarized-light": "^0.2.0",
                 "codemirror": "^6.0.1",
-                "codemirror-lang-mt": "^0.0.2-beta.3",
-                "codemirror-lang-perl": "^0.1.5-beta.4",
+                "codemirror-lang-mt": "^0.0.2-beta.5",
+                "codemirror-lang-perl": "^0.1.5-beta.6",
+                "style-mod": "^4.1.2",
                 "thememirror": "^2.0.1"
             }
         },
@@ -2640,9 +2659,9 @@
             }
         },
         "codemirror-lang-mt": {
-            "version": "0.0.2-beta.3",
-            "resolved": "https://registry.npmjs.org/codemirror-lang-mt/-/codemirror-lang-mt-0.0.2-beta.3.tgz",
-            "integrity": "sha512-95e1QMKCFqasvHMCEekVpA59SQzfsgqJERsHee0j6RyYJ2JoKFcZmrfZdKbZMNRCxtlHHPsnI1NqTSQcJNpQbQ==",
+            "version": "0.0.2-beta.5",
+            "resolved": "https://registry.npmjs.org/codemirror-lang-mt/-/codemirror-lang-mt-0.0.2-beta.5.tgz",
+            "integrity": "sha512-+ixkIP2r/gq/pteghu5Llw5SqmhQMidq4xtiD9hjTNpslZ84iInR0+m/beazvqii7j6kMDzsV/PomxC9OAqxXA==",
             "requires": {
                 "@codemirror/lang-css": "^6.3.0",
                 "@codemirror/lang-html": "^6.4.9",
@@ -2653,9 +2672,9 @@
             }
         },
         "codemirror-lang-perl": {
-            "version": "0.1.5-beta.4",
-            "resolved": "https://registry.npmjs.org/codemirror-lang-perl/-/codemirror-lang-perl-0.1.5-beta.4.tgz",
-            "integrity": "sha512-qVbbloMHHZwh5/TCxnrDMCdLz1kO3PgU8zmikTsb0A31N36nx28QS4q8CYQO5oHkJdnip/nnW0FjUbdmMC+eyQ==",
+            "version": "0.1.5-beta.6",
+            "resolved": "https://registry.npmjs.org/codemirror-lang-perl/-/codemirror-lang-perl-0.1.5-beta.6.tgz",
+            "integrity": "sha512-RpKsMRr/5IGcVbo0cj1JWga6My7jbx+Lzs9tbijEEE31a3BcyHcNN0VbmBVm1Z1UJA/C9q0TxhZu5WH/ZgYjFA==",
             "requires": {
                 "@codemirror/language": "^6.10.2",
                 "@lezer/highlight": "^1.2.1",
diff --git a/htdocs/package.json b/htdocs/package.json
index ccd3809993..c5c8438e27 100644
--- a/htdocs/package.json
+++ b/htdocs/package.json
@@ -14,7 +14,7 @@
     },
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.5.2",
-        "@openwebwork/pg-codemirror-editor": "^0.0.1-beta.25",
+        "@openwebwork/pg-codemirror-editor": "^0.0.1-beta.28",
         "bootstrap": "~5.3.3",
         "flatpickr": "^4.6.13",
         "iframe-resizer": "^4.3.11",
diff --git a/templates/ContentGenerator/SampleProblemViewer/sample_problem.html.ep b/templates/ContentGenerator/SampleProblemViewer/sample_problem.html.ep
index 329ee2bf48..cfe5d26785 100644
--- a/templates/ContentGenerator/SampleProblemViewer/sample_problem.html.ep
+++ b/templates/ContentGenerator/SampleProblemViewer/sample_problem.html.ep
@@ -12,13 +12,10 @@
 		type => 'webwork', name => 'htdocs',
 		file => 'node_modules/@fortawesome/fontawesome-free/css/all.min.css'
 	}) =%>
-	<%= stylesheet $c->url({ type => 'webwork', name => 'htdocs',
-		file => 'node_modules/codemirror/lib/codemirror.css' }) =%>
 	<%= stylesheet $c->url({ type => 'webwork', name => 'htdocs',
 		file => 'js/SampleProblemViewer/sample-problem.css' }) =%>
 	<%= javascript $c->url({ type => 'webwork', name => 'htdocs',
-		file => 'node_modules/codemirror/addon/runmode/runmode-standalone.js' }), defer => undef =%>
-	<%= javascript $c->url({ type => 'webwork', name => 'htdocs', file => 'js/PGCodeMirror/PG.js' }), defer => undef =%>
+		file => 'node_modules/@openwebwork/pg-codemirror-editor/dist/pg-codemirror-editor.js' }), defer => undef =%>
 	<%= javascript $c->url({ type => 'webwork', name => 'htdocs',
 		file => 'js/SampleProblemViewer/sample-problem.js' }), defer => undef =%>
 </head>
@@ -94,7 +91,7 @@
 						type="button" data-code="<%= $_->{code} %>" aria-label="<%= maketext('copy to clipboard') %>">
 						<i class="fa-regular fa-clipboard fa-xl"></i>
 					</button>
-					<pre class="CodeMirror cm-s-default m-0 h-100 p-3 border border-secondary overflow-scroll"><% =%>\
+					<pre class="PGCodeMirror m-0 h-100 p-3 border border-secondary overflow-scroll"><% =%>\
 						<%= $_->{code} =%>\
 					</pre><% =%>\
 				</div>