Add a runMode method that provides syntax highlighting for static h…

…tml content.
openwebwork · Nov 25, 2024 · 24d166c · 24d166c
1 parent 3737b4a
commit 24d166c
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@openwebwork/pg-codemirror-editor",
-    "version": "0.0.1-beta.25",
+    "version": "0.0.1-beta.26",
     "description": "PG CodeMirror Editor",
     "author": "The WeBWorK Project",
     "license": "MIT",
@@ -41,6 +41,7 @@
         "codemirror": "^6.0.1",
         "codemirror-lang-mt": "^0.0.2-beta.3",
         "codemirror-lang-perl": "^0.1.5-beta.4",
+        "style-mod": "^4.1.2",
         "thememirror": "^2.0.1"
     },
     "devDependencies": {

diff --git a/public/static-view.html b/public/static-view.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>PG CodeMirror Static View Playground</title>
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+        <link href="style.css" rel="stylesheet">
+        <script src="pg-codemirror-editor.js" defer></script>
+        <script src="static-view.js" defer></script>
+    </head>
+
+    <body>
+        <div class="container my-3">
+            <h1>PG CodeMirror Static View Playground</h1>
+            <div class="input-group mb-3">
+                <button class="btn btn-primary" id="load-file" type="button">Load File</button>
+                <input type="file" name="problem-file" class="form-control">
+            </div>
+            <input type="hidden" name="view-source">
+            <div><pre class="pg-codemirror-view m-0 h-100 p-3 border border-secondary overflow-scroll"></pre></div>
+        </div>
+    </body>
+</html>
diff --git a/public/static-view.js b/public/static-view.js
@@ -0,0 +1,20 @@
+/* global PGCodeMirrorEditor */
+
+const codeMirrorElt = document.querySelector('.pg-codemirror-view');
+
+if (codeMirrorElt instanceof HTMLElement) {
+    const sourceInput = document.getElementsByName('view-source')[0];
+    PGCodeMirrorEditor.runMode(sourceInput.value, codeMirrorElt);
+
+    document.getElementById('load-file')?.addEventListener('click', () => {
+        const file = document.getElementsByName('problem-file')[0]?.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsText(file);
+            reader.addEventListener('load', () => {
+                sourceInput.value = reader.result;
+                PGCodeMirrorEditor.runMode(sourceInput.value, codeMirrorElt);
+            });
+        }
+    });
+}
diff --git a/src/light-theme.ts b/src/light-theme.ts
@@ -1,29 +1,28 @@
 import { tags as t } from '@lezer/highlight';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 
-export const lightTheme = syntaxHighlighting(
-    HighlightStyle.define([
-        { tag: t.meta, color: '#404740' },
-        { tag: t.link, textDecoration: 'underline' },
-        { tag: t.heading, textDecoration: 'underline', fontWeight: 'bold' },
-        { tag: t.emphasis, fontStyle: 'italic' },
-        { tag: t.strong, fontWeight: 'bold' },
-        { tag: t.strikethrough, textDecoration: 'line-through' },
-        { tag: t.keyword, color: '#708' },
-        { tag: [t.atom, t.bool, t.url, t.contentSeparator, t.labelName], color: '#219' },
-        { tag: [t.literal, t.inserted], color: '#164' },
-        { tag: [t.string, t.deleted], color: '#a11' },
-        { tag: [t.regexp, t.escape, t.special(t.string)], color: '#e40' },
-        { tag: t.definition(t.variableName), color: '#00f' },
-        { tag: t.variableName, color: '#30a' },
-        { tag: t.local(t.variableName), color: '#30a' },
-        { tag: [t.typeName, t.namespace], color: '#085' },
-        { tag: t.className, color: '#167' },
-        { tag: [t.special(t.variableName), t.macroName], color: '#256' },
-        { tag: t.definition(t.propertyName), color: '#00c' },
-        { tag: [t.processingInstruction, t.inserted], color: '#05a' },
-        { tag: t.comment, color: '#940' },
-        { tag: t.invalid, color: '#f00' }
-    ]),
-    { fallback: true }
-);
+export const lightHighlightStyle = HighlightStyle.define([
+    { tag: t.meta, color: '#404740' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, textDecoration: 'underline', fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.keyword, color: '#708' },
+    { tag: [t.atom, t.bool, t.url, t.contentSeparator, t.labelName], color: '#219' },
+    { tag: [t.literal, t.inserted], color: '#164' },
+    { tag: [t.string, t.deleted], color: '#a11' },
+    { tag: [t.regexp, t.escape, t.special(t.string)], color: '#e40' },
+    { tag: t.definition(t.variableName), color: '#00f' },
+    { tag: t.variableName, color: '#30a' },
+    { tag: t.local(t.variableName), color: '#30a' },
+    { tag: [t.typeName, t.namespace], color: '#085' },
+    { tag: t.className, color: '#167' },
+    { tag: [t.special(t.variableName), t.macroName], color: '#256' },
+    { tag: t.definition(t.propertyName), color: '#00c' },
+    { tag: [t.processingInstruction, t.inserted], color: '#05a' },
+    { tag: t.comment, color: '#940' },
+    { tag: t.invalid, color: '#f00' }
+]);
+
+export const lightTheme = syntaxHighlighting(lightHighlightStyle, { fallback: true });
diff --git a/src/pg-codemirror-editor.ts b/src/pg-codemirror-editor.ts
@@ -28,7 +28,9 @@ import { bracketMatching, foldGutter, foldKeymap, indentOnInput, indentUnit, syn
 import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
 import type { SyntaxNode } from '@lezer/common';
-import { lightTheme } from 'src/light-theme';
+import { highlightCode } from '@lezer/highlight';
+import { StyleModule } from 'style-mod';
+import { lightHighlightStyle, lightTheme } from 'src/light-theme';
 import 'src/pg-codemirror-editor.scss';
 
 export interface InitializationOptions {
@@ -385,3 +387,31 @@ export class View {
         });
     }
 }
+
+export const runMode = async (source: string, container: HTMLElement) => {
+    const pgLanguage = (await import(/* webpackChunkName: 'pg' */ '@openwebwork/codemirror-lang-pg')).pgLanguage;
+
+    if (lightHighlightStyle.module) StyleModule.mount(document, lightHighlightStyle.module);
+
+    while (container.firstChild) container.firstChild.remove();
+
+    highlightCode(
+        source,
+        pgLanguage.parser.parse(source),
+        lightHighlightStyle,
+        (text: string, classes: string) => {
+            let node: Text | HTMLElement = document.createTextNode(text);
+            if (classes) {
+                const span = document.createElement('span');
+                span.appendChild(node);
+                span.className = classes;
+                container.appendChild(span);
+                node = span;
+            }
+            container.appendChild(node);
+        },
+        () => {
+            container.appendChild(document.createTextNode('\n'));
+        }
+    );
+};