`; svgPreviewFrame.srcdoc = htmlContent; };// Initial preview update updatePreview();// Listen for changes in the editor and update preview (with a small debounce for performance) let debounceTimeout; editor.on('change', () => { clearTimeout(debounceTimeout); debounceTimeout = setTimeout(() => { updatePreview(); localStorage.setItem('svgEditorContent', editor.getValue()); // Save content to local storage }, 300); // Debounce by 300ms });// Always load default content on page load editor.setValue(defaultSvg); // You might also want to clear localStorage for svgEditorContent if you truly never want previous sessions to interfere // localStorage.removeItem('svgEditorContent');// --- Background Color Picker Functionality --- bgColorPicker.addEventListener('input', updatePreview); // Update preview when color changes // Load saved color or use default. This preference is retained across reloads. bgColorPicker.value = localStorage.getItem('previewBgColor') || '#dddddd';// --- Toolbar Functionality ---// Upload SVG uploadBtn.addEventListener('click', () => uploadInput.click()); // Trigger file input click uploadInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { currentFileName = file.name; // Store the uploaded file name const reader = new FileReader(); reader.onload = (e) => { editor.setValue(e.target.result); updatePreview(); }; reader.onerror = (e) => { console.error("Error reading file:", e); // Message box removed, so just console error }; reader.readAsText(file); } });// Download SVG downloadBtn.addEventListener('click', () => { const svgCode = editor.getValue(); // Removed XML declaration and DOCTYPE for better WordPress compatibility. // WordPress often prefers raw SVG content and applies its own sanitization. let finalSvgCode = svgCode;const blob = new Blob([finalSvgCode], { type: 'image/svg+xml' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = currentFileName; // Use stored filename or default document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); // Clean up the object URL });// Save to Local Storage saveBtn.addEventListener('click', () => { localStorage.setItem('svgEditorContent', editor.getValue()); localStorage.setItem('previewBgColor', bgColorPicker.value); // Save background color // Simple visual feedback saveBtn.textContent = 'Saved!'; setTimeout(() => { saveBtn.textContent = 'Save'; }, 1500); });// --- Resizable Split Layout --- let isResizing = false; let isHorizontalResize = true; // True for desktop (horizontal), false for mobile (vertical) const minPaneSizePx = 100; // Minimum size in pixels for each paneconst updateResizerOrientation = () => { if (window.innerWidth >= 768) { // Tailwind's 'md' breakpoint isHorizontalResize = true; resizer.classList.add('horizontal'); resizer.classList.remove('vertical'); } else { isHorizontalResize = false; resizer.classList.add('vertical'); resizer.classList.remove('horizontal'); } };// This function calculates and applies the sizes based on percentages const setPaneSizesFromPercentage = (editorPercentage) => { const containerRect = mainContainer.getBoundingClientRect(); const resizerThickness = isHorizontalResize ? resizer.offsetWidth : resizer.offsetHeight;let editorSizePx; let previewSizePx;if (isHorizontalResize) { editorSizePx = containerRect.width * editorPercentage; previewSizePx = containerRect.width * (1 - editorPercentage) - resizerThickness; } else { editorSizePx = containerRect.height * editorPercentage; previewSizePx = containerRect.height * (1 - editorPercentage) - resizerThickness; }// Apply clamping editorSizePx = Math.max(minPaneSizePx, editorSizePx); previewSizePx = Math.max(minPaneSizePx, previewSizePx);// Re-adjust if total size exceeds container after clamping const totalSizeWithoutResizer = editorSizePx + previewSizePx; const containerTotalSize = isHorizontalResize ? containerRect.width : containerRect.height;if (totalSizeWithoutResizer + resizerThickness > containerTotalSize) { const excess = (totalSizeWithoutResizer + resizerThickness) - containerTotalSize; editorSizePx -= excess / 2; previewSizePx -= excess / 2; // Re-clamp after adjustment in case it goes below min editorSizePx = Math.max(minPaneSizePx, editorSizePx); previewSizePx = Math.max(minPaneSizePx, previewSizePx); }// Finally apply sizes if (isHorizontalResize) { editorPane.style.flexBasis = `${editorSizePx}px`; previewPane.style.flexBasis = `${previewSizePx}px`; } else { editorPane.style.flexBasis = `${editorSizePx}px`; previewPane.style.flexBasis = `${previewSizePx}px`; } editor.refresh(); // Refresh CodeMirror after sizing };const calculateAndSetInitialSizes = () => { updateResizerOrientation(); // Set initial percentages for flexibility if (isHorizontalResize) { setPaneSizesFromPercentage(0.65); // 65% for editor, rest for preview } else { setPaneSizesFromPercentage(0.5); // 50% for editor, 50% for preview } };// Call initial sizing on load and on resize calculateAndSetInitialSizes(); window.addEventListener('resize', calculateAndSetInitialSizes);resizer.addEventListener('mousedown', (e) => { isResizing = true; // Prevent default behavior to avoid text selection or other issues e.preventDefault(); // Add class to disable pointer events on relevant panes during dragging editorPane.classList.add('no-pointer-events'); previewPane.classList.add('no-pointer-events');if (isHorizontalResize) { document.body.style.cursor = 'ew-resize'; } else { document.body.style.cursor = 'ns-resize'; } document.body.style.userSelect = 'none'; });document.addEventListener('mousemove', (e) => { if (!isResizing) return; e.preventDefault(); // Prevent default behavior during dragconst containerRect = mainContainer.getBoundingClientRect(); const resizerThickness = isHorizontalResize ? resizer.offsetWidth : resizer.offsetHeight; let newEditorSizePx;if (isHorizontalResize) { newEditorSizePx = e.clientX - containerRect.left; let newEditorPercentage = newEditorSizePx / containerRect.width;// Clamp percentage newEditorPercentage = Math.max(minPaneSizePx / containerRect.width, newEditorPercentage); newEditorPercentage = Math.min(1 - (minPaneSizePx + resizerThickness) / containerRect.width, newEditorPercentage);setPaneSizesFromPercentage(newEditorPercentage);} else { newEditorSizePx = e.clientY - containerRect.top; let newEditorPercentage = newEditorSizePx / containerRect.height;// Clamp percentage newEditorPercentage = Math.max(minPaneSizePx / containerRect.height, newEditorPercentage); newEditorPercentage = Math.min(1 - (minPaneSizePx + resizerThickness) / containerRect.height, newEditorPercentage);setPaneSizesFromPercentage(newEditorPercentage); } });document.addEventListener('mouseup', () => { isResizing = false; // Remove class to re-enable pointer events editorPane.classList.remove('no-pointer-events'); previewPane.classList.remove('no-pointer-events');document.body.style.cursor = 'default'; // Reset cursor document.body.style.userSelect = 'auto'; // Re-enable text selection }); });