Add ability to see preview in full screen
Jennifer Lu
Tuesday, July 15th, 2025 at 8:24 PM
51 position: relative;
52 }
53
54 + .fullscreen-toggle {
55 + position: absolute;
56 + top: 5px;
57 + left: 5px;
58 + z-index: 1000;
59 + background: rgba(0, 0, 0, 0.2);
60 + color: white;
61 + border: none;
62 + border-radius: 4px;
63 + padding: 5px 8px;
64 + cursor: pointer;
65 + font-size: 16px;
66 + transition: background-color 0.2s;
67 + }
68 +
69 + .fullscreen-toggle:hover {
70 + background: rgba(0, 0, 0, 0.5);
71 + }
72 +
73 + .preview-pane.fullscreen {
74 + position: fixed;
75 + top: 0;
76 + left: 0;
77 + width: 100vw;
78 + height: 100vh;
79 + z-index: 9999;
80 + background: white;
81 + }
82 +
83 + .preview-pane.fullscreen .fullscreen-toggle {
84 + top: 20px;
85 + left: 20px;
86 + }
87 +
88 + /* Hide editor when preview is fullscreen */
89 + .editor-pane.hidden {
90 + display: none;
91 + }
92 +
93 #editor {
94 width: 100%;
95 height: 100%;
171 </div>
172
173 <div class="preview-pane">
174 + <button class="fullscreen-toggle" id="fullscreenToggle" title="Toggle fullscreen">⛶</button>
175 <iframe id="preview"></iframe>
176 </div>
177
180 let editorView;
181 const preview = document.getElementById('preview');
182 const storageKey = 'html-lab-content';
183 + let isFullscreen = false;
184 +
185 + // Fullscreen toggle functionality
186 + function toggleFullscreen() {
187 + const previewPane = document.querySelector('.preview-pane');
188 + const editorPane = document.querySelector('.editor-pane');
189 + const toggleButton = document.getElementById('fullscreenToggle');
190 +
191 + isFullscreen = !isFullscreen;
192 +
193 + if (isFullscreen) {
194 + previewPane.classList.add('fullscreen');
195 + editorPane.classList.add('hidden');
196 + toggleButton.textContent = '⛶';
197 + toggleButton.title = 'Exit fullscreen';
198 + } else {
199 + previewPane.classList.remove('fullscreen');
200 + editorPane.classList.remove('hidden');
201 + toggleButton.textContent = '⛶';
202 + toggleButton.title = 'Toggle fullscreen';
203 + }
204 + }
205 +
206 + // Add event listener for fullscreen toggle
207 + document.addEventListener('DOMContentLoaded', function() {
208 + const toggleButton = document.getElementById('fullscreenToggle');
209 + toggleButton.addEventListener('click', toggleFullscreen);
210 + });
211
212 function updatePreview() {
213 const code = editorView.state.doc.toString();