webprogrammierung/js/editor.js

console.log("Die JavaScript-Datei wurde erfolgreich geladen!");

function initEditor() {
    const form = document.getElementById("editor-form");

    if (!form) {
        console.error("Skript abgebrochen: Formular nicht gefunden!");
        return;
    } else {
        console.log("Formular gefunden und Editor initialisiert:", form);
    }

    const container = document.getElementById("block-container");
    const plusButton = document.getElementById("plus-button");
    const popup = document.getElementById("block-popup");
    const hiddenContentInput = document.getElementById("content");

    const initialImages = [];

    // Pop-up umschalten bei Klick auf das Plus
    plusButton.addEventListener("click", () => {
        popup.classList.toggle("hidden");
    });

    // Klick auf eine Block-Option im Pop-up
    popup.querySelectorAll("button").forEach(btn => {
        btn.addEventListener("click", function() {
            const type = this.getAttribute("data-type");
            addBlockElement(type, "");
            popup.classList.add("hidden");
        });
    });

    // Erstellt ein visuelles HTML-Element im Editor
    function addBlockElement(type, value = "") {
        const blockDiv = document.createElement("div");
        blockDiv.classList.add("editor-block");
        blockDiv.setAttribute("data-type", type);

        // Wenn es ein existierendes Server-Bild beim Laden ist, Pfad im globalen Array sichern
        if (type === "image" && value && typeof value === 'string' && value.startsWith('uploads/')) {
            initialImages.push(value);
            blockDiv.setAttribute("data-value", value);
        }

        // Löschen-Button
        const deleteBtn = document.createElement("button");
        deleteBtn.type = "button";
        deleteBtn.innerHTML = "✕";
        deleteBtn.classList.add("delete-block-btn");
        deleteBtn.addEventListener("click", () => {
            // ANPASSUNG 2B: Logik hier komplett geleert. Das '✕' entfernt den Block jetzt nur noch sicher aus dem HTML.
            blockDiv.remove();
        });
        blockDiv.appendChild(deleteBtn);

        if (type === "text") {
            const textarea = document.createElement("textarea");
            textarea.placeholder = "Schreibe deinen Textblock...";
            textarea.value = value;
            blockDiv.appendChild(textarea);
        } else if (type === "image") {
            const fileInput = document.createElement("input");
            fileInput.type = "file";
            fileInput.accept = "image/*";

            const imgPreview = document.createElement("img");
            imgPreview.style.maxWidth = "200px";
            imgPreview.style.display = "block";
            imgPreview.style.marginTop = "10px";

            if (value && typeof value === 'string') {
                if (value.startsWith('uploads/') || value.startsWith('data:image/')) {
                    imgPreview.src = value;
                    blockDiv.setAttribute("data-value", value);
                }
            }

            fileInput.addEventListener("change", function() {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        imgPreview.src = e.target.result;
                        blockDiv.setAttribute("data-value", e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });

            blockDiv.appendChild(fileInput);
            blockDiv.appendChild(imgPreview);
        }

        container.appendChild(blockDiv);
    }

    // beim Abschicken verbleibende Blöcke auslesen UND gelöschte Bilder ermitteln
    form.addEventListener("submit", function(e) {
        e.preventDefault();
        
        const blocks = [];
        const currentImages = [];

        // alle aktuell im Formular verbliebenen Blöcke scannen
        container.querySelectorAll(".editor-block").forEach(blockDiv => {
            const type = blockDiv.getAttribute("data-type");
            let value = "";

            if (type === "text") {
                value = blockDiv.querySelector("textarea").value;
            } else if (type === "image") {

                const imgTag = blockDiv.querySelector("img");
                if (imgTag) {
                    const srcValue = imgTag.getAttribute("src") || "";
                    // Wenn es ein neues Bild ist, nutzen wir das data-value (Base64)
                    if (srcValue.startsWith('data:image/')) {
                        value = blockDiv.getAttribute("data-value") || "";
                    } else {
                        value = srcValue;
                    }
                }

                // Pfade sammeln, die der Nutzer NICHT gelöscht hat (für den Abgleich)
                if (value && value.startsWith('uploads/')) {
                    currentImages.push(value);
                }
            }

            blocks.push({ type: type, value: value });
        });

        // das reguläre unsichtbare Content-Feld befüllen
        hiddenContentInput.value = JSON.stringify(blocks);

        // Differenz berechnen: Welche Bilder aus 'initialImages' fehlen in 'currentImages' ?
        const deletedImages = initialImages.filter(img => !currentImages.includes(img));

        // das 'deleted_images'-Feld dynamisch befüllen und an den Controller senden
        let deletedInput = document.getElementById("deleted-images");
        if (!deletedInput) {
            deletedInput = document.createElement("input");
            deletedInput.type = "hidden";
            deletedInput.id = "deleted-images";
            deletedInput.name = "deleted_images";
            form.appendChild(deletedInput);
        }
        deletedInput.value = JSON.stringify(deletedImages);
    });

    // Existierende Blöcke laden (stellt alte Daten aus der Session wieder her)
    try {
        const initialBlocks = JSON.parse(hiddenContentInput.value);
        if (Array.isArray(initialBlocks)) {
            initialBlocks.forEach(b => addBlockElement(b.type, b.value));
        }
    } catch(e) {
        if (hiddenContentInput.value.trim() !== "") {
            addBlockElement("text", hiddenContentInput.value);
        }
    }
}

// SICHERER START: Prüft, ob das HTML bereits bereit ist
if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initEditor);
} else {
    // Falls das DOM schon fertig geladen ist, führen wir es direkt aus
    initEditor();
}