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.

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')) {

htdocs/js/SampleProblemViewer/sample-problem.scss

@@ -1,4 +1,4 @@
-pre.CodeMirror {
+pre.PGCodeMirror {
 	background-color: #fcfaf1;
 }
 

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

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>