refactor: allow tab presses in editor

1 files changed, 35 insertions, 3 deletions

diff --git a/src/index.html b/src/index.html
index f87ca69..a6f3ae4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,7 @@
     <title>sent-web</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kj-sh604/noir.css@latest/out/noir.min.css">
-    <style> :root { --sent-fg: #000000; --sent-bg: #ffffff; --sent-font: 'Noto Color Emoji', 'DejaVu Sans', sans-serif; } body { max-width: 960px; margin: 0 auto; padding: 1rem; } .subtitle { opacity: 0.6; font-size: 0.9em; margin-top: -0.8em; } /* ── controls ── */ #controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 0.75rem; border: 1px solid currentColor; border-radius: 4px; } #controls label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; } #controls input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: 1px solid currentColor; cursor: pointer; background: none; } #controls select { max-width: 200px; } .upload-area { display: flex; align-items: center; gap: 0.5rem; } #upload-input { display: none; } #upload-status { font-size: 0.85rem; opacity: 0.7; } /* ── editor ── */ #input { width: 100%; min-height: 420px; font-family: monospace; font-size: 0.95rem; resize: vertical; tab-size: 4; } .btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .hint { font-size: 0.8rem; opacity: 0.5; margin-top: 0.25rem; } /* ── presentation overlay ── */ #presentation { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: flex-start; background: var(--sent-bg); color: var(--sent-fg); cursor: none; overflow: hidden; padding-left: 7.5%; } #presentation.active { display: flex; } #slide-content { text-align: left; white-space: break-spaces; tab-size: 8; font-family: var(--sent-font); } #slide-content img { display: block; max-width: 85vw; max-height: 85vh; object-fit: contain; } </style>
+    <style> :root { --sent-fg: #000000; --sent-bg: #ffffff; --sent-font: 'Noto Color Emoji', 'DejaVu Sans', sans-serif; } body { max-width: 960px; margin: 0 auto; padding: 1rem; } .subtitle { opacity: 0.6; font-size: 0.9em; margin-top: -0.8em; } /* ── controls ── */ #controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 0.75rem; border: 1px solid currentColor; border-radius: 4px; } #controls label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; } #controls input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: 1px solid currentColor; cursor: pointer; background: none; } #controls select { max-width: 200px; } .upload-area { display: flex; align-items: center; gap: 0.5rem; } #upload-input { display: none; } #upload-status { font-size: 0.85rem; opacity: 0.7; } /* ── editor ── */ #input { width: 100%; min-height: 420px; font-family: monospace; font-size: 0.95rem; resize: vertical; tab-size: 4; } .btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .hint { font-size: 0.8rem; opacity: 0.5; margin-top: 0.25rem; } /* ── presentation overlay ── */ #presentation { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: flex-start; background: var(--sent-bg); color: var(--sent-fg); cursor: none; overflow: hidden; padding-left: 7.5%; } #presentation.active { display: flex; } #slide-content { text-align: left; white-space: break-spaces; tab-size: 4; font-family: var(--sent-font); } #slide-content img { display: block; max-width: 85vw; max-height: 85vh; object-fit: contain; } </style>
     <script>
     /*
     @licstart  The following is the entire license notice for the
@@ -255,9 +255,11 @@ questions?</textarea>
                 document.getElementById('font-select').addEventListener('change', () => this.onFontChange());
                 document.getElementById('upload-input').addEventListener('change', e => this.handleUpload(e));
 
-                document.getElementById('input').addEventListener('input', () => {
-                    localStorage.setItem('sent-web-content', document.getElementById('input').value);
+                const input = document.getElementById('input');
+                input.addEventListener('input', () => {
+                    localStorage.setItem('sent-web-content', input.value);
                 });
+                input.addEventListener('keydown', e => this.handleEditorKeydown(e));
 
                 document.addEventListener('keydown', e => this.handleKeydown(e));
 
@@ -297,6 +299,36 @@ questions?</textarea>
                 if (this.presenting) this.renderSlide();
             },
 
+            handleEditorKeydown(e) {
+                if (e.key !== 'Tab' || e.ctrlKey || e.metaKey || e.altKey)
+                    return;
+
+                e.preventDefault();
+
+                const ta = e.target;
+                if (!ta || typeof ta.selectionStart !== 'number' || typeof ta.selectionEnd !== 'number')
+                    return;
+
+                const indent = '    ';
+                const start = ta.selectionStart;
+                const end = ta.selectionEnd;
+
+                if (start === end) {
+                    ta.setRangeText(indent, start, end, 'end');
+                } else {
+                    const selected = ta.value.slice(start, end);
+                    const indented = selected
+                        .split('\n')
+                        .map(line => indent + line)
+                        .join('\n');
+                    ta.setRangeText(indented, start, end, 'select');
+                    ta.selectionStart = start;
+                    ta.selectionEnd = start + indented.length;
+                }
+
+                localStorage.setItem('sent-web-content', ta.value);
+            },
+
             normalizeSentNewlines(text) {
                 return text.replace(/\r\n?/g, '\n');
             },