added better editing

static/editor.js

@@ -11,54 +11,74 @@ function formatOption(option) {
 }
 
 
+function getAceMode(language) {
+	let aceMode = "ace/mode/html"; // default fallback
+	if (language === "css") {
+		aceMode = "ace/mode/css";
+	} else if (language === "javascript") {
+		aceMode = "ace/mode/javascript";
+	} else if (language === "htmlmixed") {
+		aceMode = "ace/mode/html";
+	}
+	return aceMode;
+}
+
 document.addEventListener("DOMContentLoaded", () => {
 	const storedTheme = localStorage.getItem('editortheme');
 
-	// for each textarea (one per file) replace with Ace Editor
-	const editors = Array.from(document.querySelectorAll('textarea')).map((textarea) => {
-		const language = textarea.dataset.language,
-			themeStyle = document.querySelector('#theme-style'),
-			isDark = themeStyle.href.includes('dark-styles.css'),
-			aceTheme = isDark ? "ace/theme/twilight" : "ace/theme/chrome",
-			editorContainer = document.createElement('div');
+	// Initialize Ace editor instance on the container
+	const editor = ace.edit("editor-container");
+	editor.setTheme("ace/theme/chrome");
 
-		editorContainer.style.width = "100%";
-		editorContainer.style.height = "400px";
+	// Default mode as html mixed. It will be updated based on file type.
+	editor.session.setMode("ace/mode/html");
 
-		// insert the container after the textarea
-		textarea.parentNode.insertBefore(editorContainer, textarea.nextSibling);
-		// hide the original textarea
-		textarea.style.display = "none";
+	// To track the current file (index)
+	var currentFileIndex = null;
 
-		const editor = ace.edit(editorContainer);
-		editor.setTheme(storedTheme || aceTheme);
+	// Returns Ace mode based on file extension
+	function getAceMode(filename) {
+		if (filename.endsWith('.css')) return "ace/mode/css";
+		if (filename.endsWith('.js')) return "ace/mode/javascript";
+		return "ace/mode/html";
+	}
 
-		let aceMode = "ace/mode/html"; // default fallback
-		if (language === "css") {
-			aceMode = "ace/mode/css";
-		} else if (language === "javascript") {
-			aceMode = "ace/mode/javascript";
-		} else if (language === "htmlmixed") {
-			aceMode = "ace/mode/html";
+	// When a file card is clicked then load its content into the editor
+	document.querySelectorAll('#file-list .file-card').forEach((card) => {
+		card.addEventListener('click', () => {
+			// Save changes of currently open file
+			if (currentFileIndex !== null) document.getElementById(`textarea-${currentFileIndex}`).value = editor.getValue();
+			currentFileIndex = card.getAttribute("data-index");
+
+			// Get filename and load content from corresponding hidden textarea
+			const filename = card.getAttribute("data-file");
+			editor.setValue(document.getElementById(`textarea-${currentFileIndex}`).value);
+			editor.session.setMode(getAceMode(filename));
+
+			// Show the editor container
+			document.getElementById("editor-container").classList.add("visible");
+		});
+	});
+
+	// Update the corresponding hidden textarea whenever the editor value changes
+	editor.session.on("change", function (e) {
+		if (currentFileIndex !== null) {
+			const ta = document.getElementById("textarea-" + currentFileIndex);
+			ta.value = editor.getValue();
 		}
-		editor.session.setMode(aceMode);
+	});
 
-		// set initial content from the textarea and add options
-		editor.session.setValue(textarea.value.trim());
-		editor.setOptions({
-			fontSize: "14px",
-			tabSize: 4,
-			useSoftTabs: true,
-			wrap: true,
-			showPrintMargin: false
+	// Initialize Select2 for the theme selector
+	$(document).ready(function () {
+		$('#theme-selector').select2({
+			templateResult: formatOption,
+			placeholder: 'Select a theme',
+			allowClear: true
+		}).on('change', function () {
+			const selectedTheme = $('#theme-selector').val();
+			localStorage.setItem('editortheme', selectedTheme);
+			editor.setTheme(selectedTheme);
 		});
-
-		// update the hidden textarea whenever the Ace content changes
-		editor.session.on('change', () => {
-			textarea.value = editor.getValue();
-		});
-
-		return editor;
 	});
 
 	// Retrieve the list of available themes
@@ -66,7 +86,7 @@ document.addEventListener("DOMContentLoaded", () => {
 		themes = ThemeList.themes,
 		themeSelector = document.querySelector('#theme-selector');
 
-	themes.forEach(function (theme) {
+	themes.forEach((theme) => {
 		var option = document.createElement('option');
 		option.value = theme.theme;
 		option.textContent = theme.caption;
@@ -81,7 +101,55 @@ document.addEventListener("DOMContentLoaded", () => {
 		placeholder: 'Select a theme',
 		allowClear: true
 	}).on('change', function (_) {
-		localStorage.setItem('editortheme', themeSelector.value)
-		editors.forEach(editor => editor.setTheme(themeSelector.value));
+		const selectedTheme = $('#theme-selector').val();
+		localStorage.setItem('editortheme', selectedTheme);
+		editor.setTheme(selectedTheme);
 	});
-});
+
+	// Add event listener for Ctrl+S to save the current file
+	//TODO: save this
+	const editEl = document.querySelector('#editor-container');
+
+	document.addEventListener('keydown', (e) => {
+		if (e.ctrlKey && e.key === 's') {
+			e.preventDefault();
+			if (currentFileIndex !== null) {
+				document.getElementById("textarea-" + currentFileIndex).value = editor.getValue();
+				document.querySelector("form").submit();
+			}
+		}
+		else if (editEl.contains(e.target)) {
+			document.getElementById("textarea-" + currentFileIndex).value = editor.getValue();
+		}
+	});
+
+	// form submit intercept
+	document.querySelector("form").addEventListener("submit", async (e) => {
+		e.preventDefault();
+
+		const formData = new FormData();
+		document.querySelectorAll("[id^='textarea-']").forEach((textarea) => {
+			if (textarea.dataset.edited === "true") {
+				formData.append(textarea.name, textarea.value);
+				delete textarea.dataset.edited;
+			}
+		});
+
+		await fetch(window.location.href, {
+			method: "POST",
+			headers: {
+				"X-Requested-With": "XMLHttpRequest"
+			},
+			body: formData
+		})
+			.then((response) => response.json())
+			.then((data) => {
+				if (data.success) {
+					alert("Site updated successfully!"); // Or display a flash message
+				}
+			})
+			.catch((error) => {
+				console.error("Error:", error);
+			});
+	});
+});

static/styles.css

@@ -261,6 +261,29 @@ button:hover,
 	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
 }
 
+.flash-messages {
+	margin: 10px 0;
+}
+
+.flash-message {
+	padding: 10px;
+	margin-bottom: 10px;
+	border: 1px solid transparent;
+	border-radius: 4px;
+}
+
+.flash-success {
+	color: #3c763d;
+	background-color: #dff0d8;
+	border-color: #d6e9c6;
+}
+
+.flash-error {
+	color: #a94442;
+	background-color: #f2dede;
+	border-color: #ebccd1;
+}
+
 /* Theme Toggle */
 #theme-toggle {
 	background-color: var(--card-bg);
@@ -295,6 +318,23 @@ button:hover,
 	background-color: #0056b3;
 }
 
+#editor-container {
+    width: 100%;
+    height: 400px;
+    border: 1px solid #ddd;
+    margin-top: 20px;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    transform: translateY(-100%);
+    opacity: 0;
+    display: none; /* Initially hidden */
+}
+
+#editor-container.visible {
+    transform: translateY(0);
+    opacity: 1;
+    display: block; /* Display when visible */
+}
+
 @media (max-width: 768px) {
 	.file-grid {
 		grid-template-columns: repeat(2, 1fr);