`;
const slot = root.querySelector("slot");
const containerDiv = slot?.parentElement as HTMLElement;
if (containerDiv) {
containerDiv.replaceWith(wrapper);
}
const content = wrapper.querySelector(".content") as HTMLElement;
const dropZone = wrapper.querySelector(".drop-zone") as HTMLElement;
const urlInput = wrapper.querySelector(".url-input") as HTMLInputElement;
const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
// URL input
const handleUrlSubmit = () => {
let inputUrl = urlInput.value.trim();
if (!inputUrl) return;
if (!inputUrl.startsWith("http://") && !inputUrl.startsWith("https://")) {
inputUrl = `https://${inputUrl}`;
}
this.src = inputUrl;
this.#renderImage(content, dropZone);
};
urlInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
e.preventDefault();
handleUrlSubmit();
}
});
urlInput.addEventListener("blur", () => {
if (urlInput.value.trim()) handleUrlSubmit();
});
// Drop image files directly onto shape
dropZone.addEventListener("dragover", (e) => {
e.preventDefault();
e.stopPropagation();
dropZone.classList.add("dragover");
});
dropZone.addEventListener("dragleave", () => {
dropZone.classList.remove("dragover");
});
dropZone.addEventListener("drop", (e) => {
e.preventDefault();
e.stopPropagation();
dropZone.classList.remove("dragover");
const file = Array.from(e.dataTransfer?.files || []).find((f) =>
f.type.startsWith("image/")
);
if (file) {
this.#uploadFile(file, content, dropZone);
return;
}
const url = e.dataTransfer?.getData("text/plain") || "";
if (url.trim()) {
this.src = url.trim();
this.#renderImage(content, dropZone);
}
});
// Close button
closeBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.dispatchEvent(new CustomEvent("close"));
});
// If src already set, render image
if (this.#src) {
this.#renderImage(content, dropZone);
}
return root;
}
async #uploadFile(
file: File,
content: HTMLElement,
dropZone: HTMLElement
) {
const reader = new FileReader();
reader.onload = async () => {
try {
const res = await fetch("/api/image-upload", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ image: reader.result }),
});
const data = await res.json();
if (data.url) {
this.src = data.url;
this.alt = file.name;
this.#renderImage(content, dropZone);
}
} catch (err) {
console.error("[folk-image] upload failed:", err);
}
};
reader.readAsDataURL(file);
}
#renderImage(content: HTMLElement, dropZone: HTMLElement) {
if (!this.#src) return;
dropZone.style.display = "none";
// Remove existing image if any
const existing = content.querySelector(".image-display");
if (existing) existing.remove();
const img = document.createElement("img");
img.className = "image-display";
img.src = this.#src;
img.alt = this.#alt || "Image";
img.draggable = false;
content.appendChild(img);
// Update header title
const titleText = this.renderRoot.querySelector(".title-text");
if (titleText) {
titleText.textContent = this.#alt || "Image";
}
}
static override fromData(data: Record