peerpad/codeEditor.js at main · p2plabsxyz/peerpad · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { $, loadingSpinner, backdrop, iframe } from './common.js'; // Import common functions

// Attach event listeners directly using the $ selector function
[$('#htmlCode'), $('#javascriptCode'), $('#cssCode')].forEach(element => {
    element.addEventListener('input', () => update());
});

// CSS for published files: default white background, black text
export let basicCSS = `
    body {
        font-size: 1.2rem;
        margin: 0;
        padding: 0;
        background: #FFFFFF;
        color: #000000;
    }
`;

// CSS for iframe preview: Use current theme colors
function getPreviewCSS() {
    const computedStyle = getComputedStyle(document.documentElement);
    const bgColor = computedStyle.getPropertyValue('--browser-theme-background').trim();
    const textColor = computedStyle.getPropertyValue('--browser-theme-text-color').trim();

    return `
        :root {
            --browser-theme-background: ${bgColor};
            --browser-theme-text-color: ${textColor};
        }
        body {
            font-size: 1.2rem;
            margin: 0;
            padding: 0;
            background: var(--browser-theme-background);
            color: var(--browser-theme-text-color);
        }
    `;
}

// Function for live rendering
export function update() {
    let htmlCode = $('#htmlCode').value;
    console.log('HTML Code:', htmlCode);
    let cssCode = $('#cssCode').value;
    console.log('CSS Code:', cssCode);
    let javascriptCode = $('#javascriptCode').value;
    console.log('JavaScript Code:', javascriptCode);
    // Assemble all elements for the iframe preview, using dynamic theme CSS
    let iframeContent = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <style>${getPreviewCSS()}</style>
        <style>${cssCode}</style>
    </head>
    <body>
        ${htmlCode}
        <script>${javascriptCode}</script>
    </body>
    </html>
    `;

    let iframeDoc = iframe.contentWindow.document;
    iframeDoc.open();
    iframeDoc.write(iframeContent);
    iframeDoc.close();
}

// Show or hide the loading spinner
export function showSpinner(show) {
    backdrop.style.display = show ? 'block' : 'none';
    loadingSpinner.style.display = show ? 'block' : 'none';
}