Revert "use div instead of textarea"
This reverts commit 6d35b97651d76aa8e0f3297c2844c3e262971d55.
Hunter
Monday, July 7th, 2025 at 5:49 PM
50 font-family: monospace;
51 font-size: 21px;
52 padding: 15px;
53 + resize: none;
54 overflow: auto;
55 background: var(--editor-bg);
56 color: var(--text-color);
57 + spellcheck: false;
58 tab-size: 4;
- white-space: pre;
59 + white-space: nowrap;
60 overflow-x: auto;
61 }
62
- #editor:empty::before {
- content: attr(data-placeholder);
- color: #666;
- pointer-events: none;
- }
-
63 #preview {
64 width: 100%;
65 height: 100%;
97 </head>
98 <body>
99 <div class="editor-pane">
- <div id="editor" contenteditable="true" spellcheck="false" data-placeholder="Type your HTML, CSS, and JavaScript here..."></div>
100 + <textarea id="editor" placeholder="Type your HTML, CSS, and JavaScript here..." spellcheck="false"></textarea>
101 </div>
102
103 <div class="preview-pane">
111 const storageKey = 'html-lab-content';
112
113 function updatePreview() {
- const code = editor.textContent || editor.innerText || '';
114 + const code = editor.value;
115 const blob = new Blob([code], { type: 'text/html' });
116 const url = URL.createObjectURL(blob);
117 preview.src = url;
122
123 function saveToStorage() {
124 try {
- localStorage.setItem(storageKey, editor.textContent || '');
125 + localStorage.setItem(storageKey, editor.value);
126 } catch (e) {
127 // Handle localStorage errors silently
128 console.warn('Could not save to localStorage:', e);
133 try {
134 const saved = localStorage.getItem(storageKey);
135 if (saved !== null) {
- editor.textContent = saved;
136 + editor.value = saved;
137 return true;
138 }
139 } catch (e) {
149 if (e.key === 'Tab') {
150 e.preventDefault();
151
152 + const start = this.selectionStart;
153 + const end = this.selectionEnd;
154 +
155 // Insert tab character at cursor position
- document.execCommand('insertText', false, '\t');
156 + this.value = this.value.substring(0, start) + '\t' + this.value.substring(end);
157 +
158 + // Move cursor to after the inserted tab
159 + this.selectionStart = this.selectionEnd = start + 1;
160
161 // Trigger input event to update preview
162 this.dispatchEvent(new Event('input'));
181 });
182
183 function saveFile() {
- const code = editor.textContent || '';
184 + const code = editor.value;
185 const blob = new Blob([code], { type: 'text/html' });
186 const url = URL.createObjectURL(blob);
187
-<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>