Onchain Code Editor

Loading preview...

Code Snippets

HTML5 Template

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": `

Grid Item 1

Grid Item 2

Grid Item 3

`, }; // 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); // Preview functionality const previewFrame = document.getElementById("preview"); 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"; 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(); }); // Rest of the JavaScript remains the same... // 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 = ""; } });