feat: improve editor workflow and usability

README.md

@@ -8,15 +8,22 @@ The language registry currently covers C, C++, C#, Java, JavaScript, TypeScript,
 
 This is intentionally not marketed as a mathematically universal parser. Every programming language has its own grammar and some languages have context-sensitive or preprocessor-specific comment rules. The scanner therefore uses explicit language profiles and avoids destructive heuristics where possible.
 
-## What changed in v2
+## Features
 
-- Replaced global regular-expression comment deletion with a character-by-character lexical scanner.
+- Removes line and block comments with a conservative lexical scanner.
 - Preserves comment-like text inside strings and template literals.
 - Preserves JavaScript/PHP/Perl-style regular-expression literals where they can be identified conservatively.
 - Preserves line endings when multiline comments are removed.
 - Supports nested block comments for language families that use them.
-- Adds filename-based language detection for uploaded files.
-- Adds content-based auto detection for common languages.
+- Auto-detects languages from uploaded filenames and common source-code content.
+- Drag-and-drop file loading.
+- Copy input or output with one click.
+- Swap the processed output back into the input editor.
+- Download stripped code with the original filename when a file was opened.
+- Optional blank-line collapsing and long-line wrapping controls.
+- Live character and line-count statistics.
+- Dark mode for comfortable editing.
+- Keyboard shortcuts: `Ctrl+Enter` reprocesses, `Ctrl+Shift+S` swaps input/output, and `Ctrl+D` downloads the output.
 - Keeps the original vanilla JavaScript implementation intact under `/legacy/`.
 - Adds automated Node.js tests covering representative language families and edge cases.
 

index.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Universal code comment stripper with conservative syntax-aware scanning across dozens of programming languages."><link rel="icon" href="./favicon.svg" type="image/svg+xml"><title>NoCodeComments · Universal Comment Stripper</title><link rel="stylesheet" href="style.css"></head><body><main><section class="hero"><div><div class="eyebrow">NoCodeComments</div><h1>Strip comments without breaking code.</h1><p>A browser-only, syntax-aware comment remover. It protects quoted strings, template literals and regex literals, preserves line endings, and supports dozens of language families.</p></div></section><section class="card"><div class="controls"><select id="languageSelect" aria-label="Language"></select><button id="uploadButton" class="primary">Open code file</button><input id="fileInput" type="file" hidden><span id="fileName" class="status">No file selected</span><label class="status"><input id="trimWhitespace" type="checkbox"> Collapse excessive blank lines</label><span id="stats" class="status">Ready</span></div></section><section class="grid"><article class="card"><div class="bar"><h2>Input</h2><span class="status">Paste, type, or drop a file</span></div><textarea id="codeInput" spellcheck="false" placeholder="Paste source code here..."></textarea></article><article class="card"><div class="bar"><h2>Comment-free output</h2><div class="controls"><button id="copyButton">Copy output</button><button id="downloadButton">Download</button><button id="clearButton">Clear</button></div></div><textarea id="outputCode" readonly spellcheck="false"></textarea></article></section><section class="card snippets"><div class="bar"><div><h2>Test snippets</h2><p class="status">Copy a snippet into the editor to verify comment removal and string protection.</p></div></div><div class="snippet-grid"><details><summary>JavaScript</summary><pre><code>// API configuration
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Universal code comment stripper with conservative syntax-aware scanning across dozens of programming languages."><link rel="icon" href="./favicon.svg" type="image/svg+xml"><title>NoCodeComments · Universal Comment Stripper</title><link rel="stylesheet" href="style.css"></head><body><main><section class="hero"><div><div class="eyebrow">NoCodeComments</div><h1>Strip comments without breaking code.</h1><p>A browser-only, syntax-aware comment remover. It protects quoted strings, template literals and regex literals, preserves line endings, and supports dozens of language families.</p></div></section><section class="card"><div class="controls"><select id="languageSelect" aria-label="Language"></select><button id="uploadButton" class="primary">Open code file</button><input id="fileInput" type="file" hidden><span id="fileName" class="status">No file selected</span><label class="status"><input id="trimWhitespace" type="checkbox"> Collapse excessive blank lines</label><label class="status"><input id="wrapText" type="checkbox" checked> Wrap long lines</label><button id="themeButton" title="Toggle dark mode">Dark mode</button><span id="stats" class="status">Ready</span></div></section><section class="grid"><article class="card"><div class="bar"><h2>Input</h2><div class="controls"><span class="status">Paste, type, or drop a file</span><button id="copyInputButton">Copy input</button></div></div><textarea id="codeInput" spellcheck="false" placeholder="Paste source code here..."></textarea></article><article class="card"><div class="bar"><h2>Comment-free output</h2><div class="controls"><button id="copyButton">Copy output</button><button id="downloadButton">Download</button><button id="swapButton">Swap</button><button id="clearButton">Clear</button></div></div><textarea id="outputCode" readonly spellcheck="false"></textarea></article></section><section class="card snippets"><div class="bar"><div><h2>Test snippets</h2><p class="status">Copy a snippet into the editor to verify comment removal and string protection.</p></div></div><div class="snippet-grid"><details><summary>JavaScript</summary><pre><code>// API configuration
 const url = "https://example.com/api//users";
 
 /* temporary calculation */
@@ -44,4 +44,4 @@
 WHERE status = 'active'; -- only active users
 
 /* temporary filter */
-ORDER BY name;</code></pre></details></div></section><div class="footer"><a class="legacy" href="./legacy/">Legacy version</a><a class="repo-link" href="https://github.com/aaqib-hafeez-khan-in/NoCodeComments" target="_blank" rel="noopener noreferrer">GitHub repository</a></div></main><script type="module" src="app.js"></script></body></html>
+ORDER BY name;</code></pre></details></div></section><div class="footer"><a class="legacy" href="./legacy/">Legacy version</a><a class="repo-link" href="https://github.com/aaqib-hafeez-khan-in/NoCodeComments" target="_blank" rel="noopener noreferrer">GitHub repository</a></div></main><script type="module" src="app.js"></script></body></html>