Merge pull request #3 from hunterirving/feature/full-screen-view
Add ability to see preview in full screen
Hunter Irving
Wednesday, July 16th, 2025 at 10:26 AM
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 + function toggleFullscreen() {
186 + const previewPane = document.querySelector('.preview-pane');
187 + const editorPane = document.querySelector('.editor-pane');
188 + const toggleButton = document.getElementById('fullscreenToggle');
189 +
190 + isFullscreen = !isFullscreen;
191 +
192 + if (isFullscreen) {
193 + previewPane.classList.add('fullscreen');
194 + editorPane.classList.add('hidden');
195 + toggleButton.textContent = '⛶';
196 + toggleButton.title = 'Exit fullscreen';
197 + } else {
198 + previewPane.classList.remove('fullscreen');
199 + editorPane.classList.remove('hidden');
200 + toggleButton.textContent = '⛶';
201 + toggleButton.title = 'Toggle fullscreen';
202 + }
203 + }
204 +
205 + document.addEventListener('DOMContentLoaded', function() {
206 + const toggleButton = document.getElementById('fullscreenToggle');
207 + toggleButton.addEventListener('click', toggleFullscreen);
208 + });
209
210 function updatePreview() {
211 const code = editorView.state.doc.toString();