mysticmode/pascar
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Add Markdown Preview functionality

Browse Source
This commit is contained in:
Nirmal Kumar R
2026-05-31 02:21:25 +05:30
parent 35875165b0
commit dd97d4f64a
2 changed files with 127 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
File diff suppressed because one or more lines are too long
src/index.html
+126 -4
View File
@@ -185,6 +185,84 @@
} }
/* Textarea */ /* Textarea */
#editor-panel {
display: flex;
flex: 1;
min-width: 0;
overflow: hidden;
}
#preview-panel {
display: none;
flex: 1;
min-width: 0;
overflow: auto;
border-left: 1px solid var(--border);
background: #fff;
color: #222;
padding: 12px;
}
#preview-panel.active {
display: block;
}
#preview {
width: 100%;
min-height: 100%;
overflow-wrap: break-word;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
}
#preview h1,
#preview h2,
#preview h3,
#preview h4,
#preview h5,
#preview h6 {
color: #222222;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
#preview p,
#preview li,
#preview pre,
#preview code,
#preview blockquote {
color: #222222;
}
#preview pre {
background: #111111;
padding: 10px;
border-radius: 4px;
overflow: auto;
}
#preview code {
color: #ffffff;
padding: 2px 4px;
border-radius: 3px;
}
#preview a {
color: #7db4ff;
text-decoration: none;
}
#preview blockquote {
border-left: 4px solid #555555;
padding-left: 12px;
margin: 0.75rem 0;
}
#preview blockquote p {
color: #555555;
}
#editor { #editor {
flex: 1; flex: 1;
background: var(--bg); background: var(--bg);
@@ -522,6 +600,7 @@
font-size: 13px; font-size: 13px;
} }
</style> </style>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head> </head>
<body> <body>
@@ -647,8 +726,13 @@
<!-- Main Editor Area --> <!-- Main Editor Area -->
<div id="editor-area"> <div id="editor-area">
<div id="line-numbers"></div> <div id="editor-panel">
<textarea id="editor" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea> <div id="line-numbers"></div>
<textarea id="editor" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
</div>
<div id="preview-panel" class="preview-panel">
<div id="preview"></div>
</div>
<!-- Modal Overlay --> <!-- Modal Overlay -->
<div id="dialog-overlay"> <div id="dialog-overlay">
@@ -952,6 +1036,8 @@
const gotoBar = document.getElementById("goto-bar"); const gotoBar = document.getElementById("goto-bar");
const gotoInput = document.getElementById("goto-input"); const gotoInput = document.getElementById("goto-input");
const menuBar = document.getElementById("menu-bar"); const menuBar = document.getElementById("menu-bar");
const previewPanel = document.getElementById("preview-panel");
const preview = document.getElementById("preview");
// -- State // -- State
let fileName = "Untitled"; let fileName = "Untitled";
@@ -964,13 +1050,14 @@
let lastReplace = ""; let lastReplace = "";
let notifTimer = null; let notifTimer = null;
let replaceMode = false; let replaceMode = false;
let markdownPreview = false;
// -- Initial Content // -- Initial Content
editor.value = [ editor.value = [
"Pascar", "Pascar",
"======", "======",
"", "",
"A faithful offline recreation of the classic MS-DOS Editor", "A browser-based offline recreation of the classic MS-DOS Editor for the modern needs of today.",
"Runs entirely in your browser - no server, no internet.", "Runs entirely in your browser - no server, no internet.",
"", "",
"QUICK START", "QUICK START",
@@ -1037,6 +1124,36 @@
(isModified ? "* " : "") + fileName + " - Pascar"; (isModified ? "* " : "") + fileName + " - Pascar";
} }
function isMarkdownFile(name) {
return /\.md$/i.test(name);
}
function setMarkdownPreview(active) {
markdownPreview = active;
previewPanel.classList.toggle("active", active);
if (active) {
renderMarkdownPreview();
} else {
preview.innerHTML = "";
}
}
function renderMarkdownPreview() {
if (!markdownPreview) return;
if (typeof marked === "undefined") {
preview.innerHTML =
"<p><em>Marked.js failed to load. Markdown preview is unavailable.</em></p>";
return;
}
try {
preview.innerHTML = marked.parse(editor.value || "");
} catch (err) {
preview.innerHTML =
`<p><em>Error rendering markdown:</em></p><pre>${escHtml(err.message)}</pre>`;
}
}
// -- Notifications // -- Notifications
function showNotif(msg, dur = 2500) { function showNotif(msg, dur = 2500) {
notif.textContent = msg; notif.textContent = msg;
@@ -1049,6 +1166,7 @@
editor.addEventListener("input", () => { editor.addEventListener("input", () => {
isModified = true; isModified = true;
updateAll(); updateAll();
if (markdownPreview) renderMarkdownPreview();
}); });
editor.addEventListener("keyup", updateStatus); editor.addEventListener("keyup", updateStatus);
editor.addEventListener("click", updateStatus); editor.addEventListener("click", updateStatus);
@@ -1450,6 +1568,7 @@
fileName = "Untitled"; fileName = "Untitled";
fileHandle = null; fileHandle = null;
isModified = false; isModified = false;
setMarkdownPreview(false);
updateAll(); updateAll();
editor.focus(); editor.focus();
} }
@@ -1499,6 +1618,7 @@
fileName = file.name; fileName = file.name;
editor.value = await file.text(); editor.value = await file.text();
isModified = false; isModified = false;
setMarkdownPreview(isMarkdownFile(fileName));
updateAll(); updateAll();
editor.focus(); editor.focus();
showNotif(`Opened: ${fileName}`); showNotif(`Opened: ${fileName}`);
@@ -1519,6 +1639,7 @@
reader.onload = (e) => { reader.onload = (e) => {
editor.value = e.target.result; editor.value = e.target.result;
isModified = false; isModified = false;
setMarkdownPreview(isMarkdownFile(fileName));
updateAll(); updateAll();
editor.focus(); editor.focus();
showNotif(`Opened: ${fileName}`); showNotif(`Opened: ${fileName}`);
@@ -1582,6 +1703,7 @@
await writable.write(editor.value); await writable.write(editor.value);
await writable.close(); await writable.close();
isModified = false; isModified = false;
setMarkdownPreview(isMarkdownFile(fileName));
updateStatus(); updateStatus();
showNotif(`Saved: ${fileName}`); showNotif(`Saved: ${fileName}`);
} catch (err) { } catch (err) {
@@ -1988,4 +2110,4 @@
</script> </script>
</body> </body>
</html> </html>