import Quill from "quill";
import "quill/dist/quill.snow.css";

// Initialize Quill editor
export const editorInit = () => {
    const editorElements = document.querySelectorAll(`.text-editor`);
    if (editorElements.length === 0) {
        return;
    }

    editorElements.forEach((element) => {
        if (element.dataset.initialized === "true") return;
        const inputElement = element.querySelector("input");
 
        const textEditorElement = element.querySelector(".text-editor-content");
        const toolbarOptions = [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],
            ["link", "image", "video", "formula"],
            [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
            [{ script: "sub" }, { script: "super" }], // superscript/subscript
            [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
            [{ direction: "rtl" }], // text direction
            [{ size: ["small", false, "large", "huge"] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }],
            ["clean"], // remove formatting button
        ];

        const quill = new Quill(textEditorElement, {
            theme: "snow",
            modules: {
                toolbar: toolbarOptions,
            },
        });

        quill.on("text-change", function () {
            inputElement.value = quill.root.innerHTML;
        });
        element.dataset.initialized = "true";
    });
};

// Call the function to initialize the editor
editorInit();
