From b65687b688fa34493fd04ab3d35820c75d2444b3 Mon Sep 17 00:00:00 2001
From: Glenn Rice <grice1@missouriwestern.edu>
Date: Thu, 19 Jun 2025 14:14:44 -0700
Subject: [PATCH] Remove the last direct jquery usage of the renderer
 javascript.

Also convert nested css to standard css.  Newer browser's support this,
but just in case someone is using an older browser.
---
 public/js/navbar.js                | 29 ++++++++++++++++++++---------
 templates/columns/editorUI.html.ep | 27 +++++++++++++--------------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/public/js/navbar.js b/public/js/navbar.js
index 05338392d..6028229c1 100644
--- a/public/js/navbar.js
+++ b/public/js/navbar.js
@@ -21,15 +21,26 @@ for (const element of templateItems) {
 	});
 }
 
-$(function () {
-	$('#hiddenSourceFilePath').text($('#sourceFilePath').val());
-	$('#sourceFilePath').width($('#hiddenSourceFilePath').width());
-}).on('input', function () {
-	$('#hiddenSourceFilePath').text($('#sourceFilePath').val());
-	$('#sourceFilePath').width($('#hiddenSourceFilePath').width() + 12);
-	const remaining =
-		document.querySelector('.topnav').offsetWidth - document.querySelector('#template-select').offsetWidth - 330;
-	$('#sourceFilePath').css('maxWidth', remaining);
+window.addEventListener('DOMContentLoaded', () => {
+	const sourceFilePath = document.getElementById('sourceFilePath');
+	const hiddenSourceFilePath = document.getElementById('hiddenSourceFilePath');
+	if (!sourceFilePath || !hiddenSourceFilePath) return;
+
+	const adjustSourceWidth = () => {
+		hiddenSourceFilePath.textContent = sourceFilePath.value;
+		hiddenSourceFilePath.style.display = 'inline';
+		sourceFilePath.style.width = `${hiddenSourceFilePath.offsetWidth + 12}px`;
+		hiddenSourceFilePath.style.display = 'none';
+
+		const remaining =
+			document.querySelector('.topnav').offsetWidth -
+			document.querySelector('#template-select').offsetWidth -
+			330;
+		sourceFilePath.style.maxWidth = `${remaining}px`;
+	};
+
+	sourceFilePath.addEventListener('input', adjustSourceWidth);
+	adjustSourceWidth();
 });
 
 let loadbutton = document.getElementById('load-problem');
diff --git a/templates/columns/editorUI.html.ep b/templates/columns/editorUI.html.ep
index 6fb6ad637..e55188ae3 100644
--- a/templates/columns/editorUI.html.ep
+++ b/templates/columns/editorUI.html.ep
@@ -1,5 +1,4 @@
 %= javascript 'node_modules/@openwebwork/pg-codemirror-editor/dist/pg-codemirror-editor.js'
-%= javascript 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'
 
 <div id='edit-header' class='header'>
     <b>Editing problem:</b><br>
@@ -24,22 +23,22 @@
 	overflow: auto;
 	background-color: white;
 	height: 100%;
+}
 
-	.cm-editor {
-		height: 100%;
+.code-mirror-editor .cm-editor {
+	height: 100%;
+}
 
-		.cm-scroller {
-			height: 100%;
+.code-mirror-editor .cm-editor .cm-scroller {
+	height: 100%;
+}
 
-			.cm-content {
-				height: 100%;
-				min-height: 400px;
-			}
-		}
+.code-mirror-editor .cm-editor .cm-scroller .cm-content {
+	height: 100%;
+	min-height: 400px;
+}
 
-		.cm-panels {
-			z-index: 18;
-		}
-	}
+.code-mirror-editor .cm-editor .cm-panels {
+	z-index: 18;
 }
 % end