commit 04b244dd826f53a27368f50f74e982605d9c9487
parent 6d35b97651d76aa8e0f3297c2844c3e262971d55
Author: Hunter
Date: Mon, 7 Jul 2025 17:49:15 -0400
Revert "use div instead of textarea"
This reverts commit 6d35b97651d76aa8e0f3297c2844c3e262971d55.
Diffstat:
2 files changed, 15 insertions(+), 49 deletions(-)
diff --git a/index.html b/index.html
@@ -50,20 +50,16 @@
font-family: monospace;
font-size: 21px;
padding: 15px;
+ resize: none;
overflow: auto;
background: var(--editor-bg);
color: var(--text-color);
+ spellcheck: false;
tab-size: 4;
- white-space: pre;
+ white-space: nowrap;
overflow-x: auto;
}
- #editor:empty::before {
- content: attr(data-placeholder);
- color: #666;
- pointer-events: none;
- }
-
#preview {
width: 100%;
height: 100%;
@@ -101,7 +97,7 @@
</head>
<body>
<div class="editor-pane">
- <div id="editor" contenteditable="true" spellcheck="false" data-placeholder="Type your HTML, CSS, and JavaScript here..."></div>
+ <textarea id="editor" placeholder="Type your HTML, CSS, and JavaScript here..." spellcheck="false"></textarea>
</div>
<div class="preview-pane">
@@ -115,7 +111,7 @@
const storageKey = 'html-lab-content';
function updatePreview() {
- const code = editor.textContent || editor.innerText || '';
+ const code = editor.value;
const blob = new Blob([code], { type: 'text/html' });
const url = URL.createObjectURL(blob);
preview.src = url;
@@ -126,7 +122,7 @@
function saveToStorage() {
try {
- localStorage.setItem(storageKey, editor.textContent || '');
+ localStorage.setItem(storageKey, editor.value);
} catch (e) {
// Handle localStorage errors silently
console.warn('Could not save to localStorage:', e);
@@ -137,7 +133,7 @@
try {
const saved = localStorage.getItem(storageKey);
if (saved !== null) {
- editor.textContent = saved;
+ editor.value = saved;
return true;
}
} catch (e) {
@@ -153,8 +149,14 @@
if (e.key === 'Tab') {
e.preventDefault();
+ const start = this.selectionStart;
+ const end = this.selectionEnd;
+
// Insert tab character at cursor position
- document.execCommand('insertText', false, '\t');
+ this.value = this.value.substring(0, start) + '\t' + this.value.substring(end);
+
+ // Move cursor to after the inserted tab
+ this.selectionStart = this.selectionEnd = start + 1;
// Trigger input event to update preview
this.dispatchEvent(new Event('input'));
@@ -179,7 +181,7 @@
});
function saveFile() {
- const code = editor.textContent || '';
+ const code = editor.value;
const blob = new Blob([code], { type: 'text/html' });
const url = URL.createObjectURL(blob);
diff --git a/index2.html b/index2.html
@@ -1,35 +0,0 @@
-<html>
- <marquee><h1>Armadillo World</h1></marquee>
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Nine-banded_Armadillo.jpg/500px-Nine-banded_Armadillo.jpg" style="width: 100%"></img>
- <p>hehe i am an <span style="color:red">armadillo</span></p>
- <h3>armadillo facts</h3>
- <hr>
- <ul>
- <li>have a shell</li>
- <li>are cute</li>
- <li>want to be my friend</li>
- </ul>
- <table style="display: flex; justify-content: center; border: 1px solid red;">
- <tr>
- <th style="border: 1px solid blue">armadillo</th>
- <th>phone number</th>
- </tr>
- <tr>
- <td>Alf</td>
- <td>333-555-2021</td>
- </tr>
- <tr>
- <td>Cyril</td>
- <td>123-440-1212</td>
- </tr>
- </table>
-
- <h3>are you an armadillo?</h3>
- <hr>
- <p>
- If you or someone you know is an armadillo,
- please give me a call right now using the
- telephone number below.
- I eagerly await your call!!!!!!!!!!! :-)
- </p>
-</html>
-\ No newline at end of file