more edit syntax

This commit is contained in:
Ryan
2025-03-10 05:37:04 -04:00
committed by GitHub
parent dc100a98ad
commit 56be73bcac
2 changed files with 23 additions and 4 deletions

View File

@@ -580,6 +580,26 @@ document.addEventListener("DOMContentLoaded", function () {
}
});
// helper function
function getModeForFile(fileName) {
const ext = fileName.slice(fileName.lastIndexOf('.') + 1).toLowerCase();
switch (ext) {
case 'css':
return "css";
case 'json':
return { name: "javascript", json: true };
case 'js':
return "javascript";
case 'html':
case 'htm':
return "text/html";
case 'xml':
return "xml";
default:
return "text/plain";
}
}
// File Editing Functions.
export function editFile(fileName, folder) {
console.log("Edit button clicked for:", fileName);
@@ -627,9 +647,10 @@ export function editFile(fileName, folder) {
modal.style.display = "block";
// Initialize CodeMirror on the textarea.
const mode = getModeForFile(fileName); // fileName should be the current file's name
const editor = CodeMirror.fromTextArea(document.getElementById("fileEditor"), {
lineNumbers: true,
mode: "text/html", // Adjust mode based on file type if needed.
mode: mode, // dynamic mode based on file extension
theme: "default",
viewportMargin: Infinity
});

View File

@@ -16,10 +16,9 @@
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
<!-- Load mode(s) you need, e.g., HTML mode: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"></script>
<!-- Optionally, load CSS mode if needed: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"></script>
</head>
<body>
@@ -295,5 +294,4 @@
<script type="module" src="main.js"></script>
</body>
</html>