Editor
Preview
Loading preview...

Code Snippets

Three.js Example
Bitcoin Styles
Flexbox Center
Responsive Grid
Line: 1, Column: 1 Unsaved Changes Bitcoin Code Editor v2.0
`, 'bitcoin-styles': ``, 'flexbox-center': `
Centered Content
`, 'responsive-grid': `
` }; // Initialize editor const editor = ace.edit("editor"); ace.require("ace/ext/language_tools"); const beautify = ace.require("ace/ext/beautify"); // Editor configuration editor.setTheme("ace/theme/bitcoin"); editor.session.setMode("ace/mode/html"); editor.setOptions({ fontSize: "14px", wrap: true, showPrintMargin: false, enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, fontFamily: "'SF Mono', 'Roboto Mono', monospace", showGutter: true, highlightActiveLine: true, displayIndentGuides: true, scrollPastEnd: 0.5, tabSize: 2, }); // Set initial content editor.setValue(codeSnippets['html-template'], -1); // Rest of your JavaScript code remains the same... // Preview functionality const previewLoader = document.getElementById('preview-loader'); const previewError = document.getElementById('preview-error'); let previewUpdateTimeout; function showPreviewLoader() { previewLoader.style.display = 'flex'; } function hidePreviewLoader() { previewLoader.style.display = 'none'; } function showPreviewError(message) { previewError.textContent = message; previewError.style.display = 'block'; } function hidePreviewError() { previewError.style.display = 'none'; } function updatePreview() { hidePreviewError(); showPreviewLoader(); try { const oldFrame = document.getElementById('preview'); const newFrame = document.createElement('iframe'); newFrame.id = 'preview'; newFrame.sandbox = 'allow-scripts allow-same-origin allow-pointer-lock'; newFrame.onload = () => { hidePreviewLoader(); if (oldFrame) { oldFrame.remove(); } }; oldFrame.parentNode.replaceChild(newFrame, oldFrame); const preview = newFrame.contentDocument || newFrame.contentWindow.document; preview.open(); preview.write(editor.getValue()); preview.close(); } catch (error) { console.error('Preview update error:', error); hidePreviewLoader(); showPreviewError(`Preview error: ${error.message}`); } } function debouncedUpdatePreview() { clearTimeout(previewUpdateTimeout); previewUpdateTimeout = setTimeout(updatePreview, 1000); } // Editor change handlers editor.session.on('change', debouncedUpdatePreview); editor.session.on('changeScrollTop', () => { localStorage.setItem('scrollTop', editor.session.getScrollTop()); }); // Cursor position tracking editor.selection.on('changeCursor', () => { const pos = editor.getCursorPosition(); document.getElementById('cursor-position').textContent = `Line: ${pos.row + 1}, Column: ${pos.column + 1}`; }); // File handling let hasUnsavedChanges = false; function updateFileStatus() { const fileInfo = document.getElementById('file-info'); fileInfo.textContent = hasUnsavedChanges ? 'Unsaved Changes' : 'All Changes Saved'; fileInfo.style.color = hasUnsavedChanges ? 'var(--accent-error)' : 'var(--accent-success)'; } editor.on('change', () => { hasUnsavedChanges = true; updateFileStatus(); }); // New file handler document.getElementById('new-file').addEventListener('click', () => { if (hasUnsavedChanges) { if (!confirm('You have unsaved changes. Create new file anyway?')) { return; } } editor.setValue(codeSnippets['html-template'], -1); hasUnsavedChanges = false; updateFileStatus(); }); // Save functionality document.getElementById('save-button').addEventListener('click', function () { try { const blob = new Blob([editor.getValue()], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'code.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); setTimeout(() => URL.revokeObjectURL(url), 100); hasUnsavedChanges = false; updateFileStatus(); } catch (error) { console.error('Error saving file:', error); alert('Failed to save file. Please try again.'); } }); // Layout toggle document.getElementById('toggle-layout-button').addEventListener('click', function () { const layout = document.getElementById('layout'); const isCurrentlySideBySide = layout.classList.contains('side-by-side'); layout.classList.remove('side-by-side', 'top-and-bottom'); if (isCurrentlySideBySide) { layout.classList.add('top-and-bottom'); this.textContent = 'Side by Side'; } else { layout.classList.add('side-by-side'); this.textContent = 'Stack Layout'; } setTimeout(() => { editor.resize(); updatePreview(); }, 300); localStorage.setItem('layout', isCurrentlySideBySide ? 'top-and-bottom' : 'side-by-side'); }); // Word wrap toggle document.getElementById('toggle-wrap').addEventListener('click', function () { const wrap = !editor.getSession().getUseWrapMode(); editor.getSession().setUseWrapMode(wrap); this.textContent = wrap ? '↩ī¸' : '⏎'; localStorage.setItem('wordWrap', wrap); }); // Code formatting document.getElementById('format-code').addEventListener('click', () => { beautify.beautify(editor.session); }); // Snippets panel const snippetsPanel = document.getElementById('snippets-panel'); document.getElementById('toggle-snippets').addEventListener('click', () => { snippetsPanel.classList.toggle('show'); }); // Snippet insertion document.querySelectorAll('.snippet-item').forEach(item => { item.addEventListener('click', () => { const snippetKey = item.dataset.snippet; if (codeSnippets[snippetKey]) { editor.insert(codeSnippets[snippetKey]); snippetsPanel.classList.remove('show'); } }); }); // Open in new window document.getElementById('open-in-new-window').addEventListener('click', () => { const newWindow = window.open('', '_blank'); newWindow.document.write(editor.getValue()); newWindow.document.close(); }); // Handle window resize window.addEventListener('resize', () => { editor.resize(); }); // Load saved preferences function loadSavedPreferences() { // Layout const savedLayout = localStorage.getItem('layout'); if (savedLayout) { document.getElementById('layout').classList.remove('side-by-side', 'top-and-bottom'); document.getElementById('layout').classList.add(savedLayout); document.getElementById('toggle-layout-button').textContent = savedLayout === 'side-by-side' ? 'Stack Layout' : 'Side by Side'; } // Word wrap const savedWrap = localStorage.getItem('wordWrap'); if (savedWrap !== null) { const wrap = savedWrap === 'true'; editor.getSession().setUseWrapMode(wrap); document.getElementById('toggle-wrap').textContent = wrap ? '↩ī¸' : '⏎'; } // Scroll position const scrollTop = localStorage.getItem('scrollTop'); if (scrollTop) { editor.session.setScrollTop(parseInt(scrollTop)); } } // Initialize loadSavedPreferences(); updatePreview(); // Keyboard shortcuts editor.commands.addCommand({ name: 'saveFile', bindKey: { win: 'Ctrl-S', mac: 'Command-S' }, exec: () => document.getElementById('save-button').click() }); editor.commands.addCommand({ name: 'formatCode', bindKey: { win: 'Ctrl-Alt-L', mac: 'Command-Alt-L' }, exec: () => document.getElementById('format-code').click() }); editor.commands.addCommand({ name: 'togglePreview', bindKey: { win: 'Ctrl-P', mac: 'Command-P' }, exec: () => document.getElementById('refresh-preview').click() }); // Prevent accidental navigation away window.addEventListener('beforeunload', (e) => { if (hasUnsavedChanges) { e.preventDefault(); e.returnValue = ''; } });