allow stock images to be referenced by bare filename
Hunter
Friday, December 19th, 2025 at 9:04 PM
240 let updateTimer;
241 let editorView;
242 const preview = document.getElementById('preview');
243 +
244 + // Stock images loaded from manifest - can be referenced by bare filename
245 + let stockImages = new Set();
246 +
247 + // Load stock image list from manifest
248 + const stockImagesReady = fetch('resource-manifest.json')
249 + .then(r => r.json())
250 + .then(manifest => {
251 + manifest.images.forEach(path => {
252 + const filename = path.split('/').pop().toLowerCase();
253 + stockImages.add(filename);
254 + });
255 + })
256 + .catch(() => console.log('Could not load resource manifest'));
257 +
258 + // Rewrite bare image filenames to use images/ prefix
259 + function rewriteBareImageSrcs(html) {
260 + return html.replace(/(<img\s[^>]*\bsrc\s*=\s*["'])([^"'/:]+\.(gif|png|jpg|jpeg|svg|webp))(["'])/gi,
261 + (match, before, filename, ext, after) => {
262 + if (stockImages.has(filename.toLowerCase())) {
263 + return before + 'images/' + filename + after;
264 + }
265 + return match;
266 + });
267 + }
268 const editorPane = document.querySelector('.editor-pane');
269 const previewPane = document.querySelector('.preview-pane');
270 const storageKey = 'html-lab-content';
381 }
382
383 // Use srcdoc to create a completely fresh document context
- preview.srcdoc = code.trim() || '<!DOCTYPE html><html><head></head><body></body></html>';
384 + // Rewrite bare stock image filenames to include images/ prefix
385 + const processedCode = rewriteBareImageSrcs(code.trim()) || '<!DOCTYPE html><html><head></head><body></body></html>';
386 + preview.srcdoc = processedCode;
387
388 // Add our functionality after the iframe loads
389 const onLoad = () => {
419 if (doc.body) {
420 doc.body.appendChild(button);
421 }
-
422 +
423 // Restore scroll position
424 setTimeout(() => {
425 try {
634 parent: document.getElementById('editor')
635 });
636
- // Initial render
- updatePreview();
637 + // Initial render (wait for stock images manifest to load first)
638 + stockImagesReady.then(() => updatePreview());
639
640 // Track editor focus and handle keyboard dismissal
641 editorView.contentDOM.addEventListener('focus', () => { isEditorFocused = true; });