1632 lines
50 KiB
JavaScript
1632 lines
50 KiB
JavaScript
(() => {
|
||
const OVERLAY_ID = "__kleap_overlay__";
|
||
let overlay, label;
|
||
|
||
// The possible states are:
|
||
// { type: 'inactive' }
|
||
// { type: 'inspecting', element: ?HTMLElement }
|
||
// { type: 'selected', element: HTMLElement }
|
||
let state = { type: "inactive" };
|
||
|
||
/* ---------- i18n translations ----------------------------------------- */
|
||
const translations = {
|
||
en: {
|
||
editText: "Edit text",
|
||
mentionToAI: "Mention to AI",
|
||
replaceImage: "Replace image",
|
||
chooseFromLibrary: "Choose from library",
|
||
changeUrl: "Change URL",
|
||
generateWithAI: "Generate with AI",
|
||
uploadImage: "Upload image",
|
||
imageUrl: "Image URL",
|
||
cancel: "Cancel",
|
||
apply: "Apply",
|
||
generate: "🎨 Generate",
|
||
generating: "Generating...",
|
||
enterImageUrl: "Enter image URL...",
|
||
chooseModel: "Choose Model:",
|
||
describeImage: "Describe your image:",
|
||
aiPromptPlaceholder:
|
||
"A beautiful landscape with mountains and a sunset...",
|
||
stylePresets: "Style presets (optional):",
|
||
urlPlaceholder: "https://example.com/image.jpg",
|
||
generatingWith: "Generating with",
|
||
mayTakeTime: "This may take 10-30 seconds",
|
||
},
|
||
fr: {
|
||
editText: "Modifier le texte",
|
||
mentionToAI: "Mentionner à l'IA",
|
||
replaceImage: "Remplacer l'image",
|
||
chooseFromLibrary: "Choisir dans la bibliothèque",
|
||
changeUrl: "Changer l'URL",
|
||
generateWithAI: "Générer avec l'IA",
|
||
uploadImage: "Télécharger une image",
|
||
imageUrl: "URL de l'image",
|
||
cancel: "Annuler",
|
||
apply: "Appliquer",
|
||
generate: "🎨 Générer",
|
||
generating: "Génération...",
|
||
enterImageUrl: "Entrez l'URL de l'image...",
|
||
chooseModel: "Choisir le modèle :",
|
||
describeImage: "Décrivez votre image :",
|
||
aiPromptPlaceholder:
|
||
"Un beau paysage avec des montagnes et un coucher de soleil...",
|
||
stylePresets: "Préréglages de style (optionnel) :",
|
||
urlPlaceholder: "https://exemple.com/image.jpg",
|
||
generatingWith: "Génération avec",
|
||
mayTakeTime: "Cela peut prendre 10-30 secondes",
|
||
},
|
||
de: {
|
||
editText: "Text bearbeiten",
|
||
mentionToAI: "KI erwähnen",
|
||
replaceImage: "Bild ersetzen",
|
||
chooseFromLibrary: "Aus Bibliothek wählen",
|
||
changeUrl: "URL ändern",
|
||
generateWithAI: "Mit KI generieren",
|
||
uploadImage: "Bild hochladen",
|
||
imageUrl: "Bild-URL",
|
||
cancel: "Abbrechen",
|
||
apply: "Anwenden",
|
||
generate: "🎨 Generieren",
|
||
generating: "Generierung...",
|
||
enterImageUrl: "Bild-URL eingeben...",
|
||
chooseModel: "Modell wählen:",
|
||
describeImage: "Beschreiben Sie Ihr Bild:",
|
||
aiPromptPlaceholder:
|
||
"Eine schöne Landschaft mit Bergen und Sonnenuntergang...",
|
||
stylePresets: "Stilvorlagen (optional):",
|
||
urlPlaceholder: "https://beispiel.com/bild.jpg",
|
||
generatingWith: "Generierung mit",
|
||
mayTakeTime: "Dies kann 10-30 Sekunden dauern",
|
||
},
|
||
es: {
|
||
editText: "Editar texto",
|
||
mentionToAI: "Mencionar a la IA",
|
||
replaceImage: "Reemplazar imagen",
|
||
chooseFromLibrary: "Elegir de la biblioteca",
|
||
changeUrl: "Cambiar URL",
|
||
generateWithAI: "Generar con IA",
|
||
uploadImage: "Subir imagen",
|
||
imageUrl: "URL de imagen",
|
||
cancel: "Cancelar",
|
||
apply: "Aplicar",
|
||
generate: "🎨 Generar",
|
||
generating: "Generando...",
|
||
enterImageUrl: "Ingrese URL de imagen...",
|
||
chooseModel: "Elegir modelo:",
|
||
describeImage: "Describe tu imagen:",
|
||
aiPromptPlaceholder: "Un hermoso paisaje con montañas y atardecer...",
|
||
stylePresets: "Estilos predefinidos (opcional):",
|
||
urlPlaceholder: "https://ejemplo.com/imagen.jpg",
|
||
generatingWith: "Generando con",
|
||
mayTakeTime: "Esto puede tomar 10-30 segundos",
|
||
},
|
||
pt: {
|
||
editText: "Editar texto",
|
||
mentionToAI: "Mencionar à IA",
|
||
replaceImage: "Substituir imagem",
|
||
chooseFromLibrary: "Escolher da biblioteca",
|
||
changeUrl: "Alterar URL",
|
||
generateWithAI: "Gerar com IA",
|
||
uploadImage: "Enviar imagem",
|
||
imageUrl: "URL da imagem",
|
||
cancel: "Cancelar",
|
||
apply: "Aplicar",
|
||
generate: "🎨 Gerar",
|
||
generating: "Gerando...",
|
||
enterImageUrl: "Digite a URL da imagem...",
|
||
chooseModel: "Escolher modelo:",
|
||
describeImage: "Descreva sua imagem:",
|
||
aiPromptPlaceholder: "Uma bela paisagem com montanhas e pôr do sol...",
|
||
stylePresets: "Estilos predefinidos (opcional):",
|
||
urlPlaceholder: "https://exemplo.com/imagem.jpg",
|
||
generatingWith: "Gerando com",
|
||
mayTakeTime: "Isso pode levar 10-30 segundos",
|
||
},
|
||
it: {
|
||
editText: "Modifica testo",
|
||
mentionToAI: "Menziona all'IA",
|
||
replaceImage: "Sostituisci immagine",
|
||
chooseFromLibrary: "Scegli dalla libreria",
|
||
changeUrl: "Cambia URL",
|
||
generateWithAI: "Genera con IA",
|
||
uploadImage: "Carica immagine",
|
||
imageUrl: "URL immagine",
|
||
cancel: "Annulla",
|
||
apply: "Applica",
|
||
generate: "🎨 Genera",
|
||
generating: "Generazione...",
|
||
enterImageUrl: "Inserisci URL immagine...",
|
||
chooseModel: "Scegli modello:",
|
||
describeImage: "Descrivi la tua immagine:",
|
||
aiPromptPlaceholder: "Un bellissimo paesaggio con montagne e tramonto...",
|
||
stylePresets: "Stili predefiniti (opzionale):",
|
||
urlPlaceholder: "https://esempio.com/immagine.jpg",
|
||
generatingWith: "Generazione con",
|
||
mayTakeTime: "Potrebbe richiedere 10-30 secondi",
|
||
},
|
||
nl: {
|
||
editText: "Tekst bewerken",
|
||
mentionToAI: "AI vermelden",
|
||
replaceImage: "Afbeelding vervangen",
|
||
chooseFromLibrary: "Kies uit bibliotheek",
|
||
changeUrl: "URL wijzigen",
|
||
generateWithAI: "Genereren met AI",
|
||
uploadImage: "Afbeelding uploaden",
|
||
imageUrl: "Afbeelding-URL",
|
||
cancel: "Annuleren",
|
||
apply: "Toepassen",
|
||
generate: "🎨 Genereren",
|
||
generating: "Genereren...",
|
||
enterImageUrl: "Voer afbeelding-URL in...",
|
||
chooseModel: "Kies model:",
|
||
describeImage: "Beschrijf je afbeelding:",
|
||
aiPromptPlaceholder:
|
||
"Een prachtig landschap met bergen en zonsondergang...",
|
||
stylePresets: "Stijlvoorinstellingen (optioneel):",
|
||
urlPlaceholder: "https://voorbeeld.com/afbeelding.jpg",
|
||
generatingWith: "Genereren met",
|
||
mayTakeTime: "Dit kan 10-30 seconden duren",
|
||
},
|
||
ar: {
|
||
editText: "تعديل النص",
|
||
mentionToAI: "إشارة للذكاء الاصطناعي",
|
||
replaceImage: "استبدال الصورة",
|
||
chooseFromLibrary: "اختر من المكتبة",
|
||
changeUrl: "تغيير الرابط",
|
||
generateWithAI: "إنشاء بالذكاء الاصطناعي",
|
||
uploadImage: "رفع صورة",
|
||
imageUrl: "رابط الصورة",
|
||
cancel: "إلغاء",
|
||
apply: "تطبيق",
|
||
generate: "🎨 إنشاء",
|
||
generating: "جاري الإنشاء...",
|
||
enterImageUrl: "أدخل رابط الصورة...",
|
||
chooseModel: "اختر النموذج:",
|
||
describeImage: "صف صورتك:",
|
||
aiPromptPlaceholder: "منظر طبيعي جميل مع الجبال وغروب الشمس...",
|
||
stylePresets: "أنماط مسبقة (اختياري):",
|
||
urlPlaceholder: "https://example.com/image.jpg",
|
||
generatingWith: "إنشاء باستخدام",
|
||
mayTakeTime: "قد يستغرق هذا 10-30 ثانية",
|
||
},
|
||
zh: {
|
||
editText: "编辑文本",
|
||
mentionToAI: "提及AI",
|
||
replaceImage: "替换图片",
|
||
chooseFromLibrary: "从库中选择",
|
||
changeUrl: "更改链接",
|
||
generateWithAI: "AI生成",
|
||
uploadImage: "上传图片",
|
||
imageUrl: "图片链接",
|
||
cancel: "取消",
|
||
apply: "应用",
|
||
generate: "🎨 生成",
|
||
generating: "生成中...",
|
||
enterImageUrl: "输入图片链接...",
|
||
chooseModel: "选择模型：",
|
||
describeImage: "描述你的图片：",
|
||
aiPromptPlaceholder: "美丽的山景和日落...",
|
||
stylePresets: "风格预设（可选）：",
|
||
urlPlaceholder: "https://example.com/image.jpg",
|
||
generatingWith: "使用生成",
|
||
mayTakeTime: "这可能需要10-30秒",
|
||
},
|
||
ja: {
|
||
editText: "テキストを編集",
|
||
mentionToAI: "AIに言及",
|
||
replaceImage: "画像を置換",
|
||
chooseFromLibrary: "ライブラリから選択",
|
||
changeUrl: "URLを変更",
|
||
generateWithAI: "AIで生成",
|
||
uploadImage: "画像をアップロード",
|
||
imageUrl: "画像URL",
|
||
cancel: "キャンセル",
|
||
apply: "適用",
|
||
generate: "🎨 生成",
|
||
generating: "生成中...",
|
||
enterImageUrl: "画像URLを入力...",
|
||
chooseModel: "モデルを選択：",
|
||
describeImage: "画像を説明してください：",
|
||
aiPromptPlaceholder: "山と夕日の美しい風景...",
|
||
stylePresets: "スタイルプリセット（オプション）：",
|
||
urlPlaceholder: "https://example.com/image.jpg",
|
||
generatingWith: "生成中：",
|
||
mayTakeTime: "10〜30秒かかる場合があります",
|
||
},
|
||
el: {
|
||
editText: "Επεξεργασία κειμένου",
|
||
mentionToAI: "Αναφορά στην ΤΝ",
|
||
replaceImage: "Αντικατάσταση εικόνας",
|
||
chooseFromLibrary: "Επιλογή από βιβλιοθήκη",
|
||
changeUrl: "Αλλαγή URL",
|
||
generateWithAI: "Δημιουργία με ΤΝ",
|
||
uploadImage: "Μεταφόρτωση εικόνας",
|
||
imageUrl: "URL εικόνας",
|
||
cancel: "Ακύρωση",
|
||
apply: "Εφαρμογή",
|
||
generate: "🎨 Δημιουργία",
|
||
generating: "Δημιουργία...",
|
||
enterImageUrl: "Εισάγετε URL εικόνας...",
|
||
chooseModel: "Επιλογή μοντέλου:",
|
||
describeImage: "Περιγράψτε την εικόνα σας:",
|
||
aiPromptPlaceholder: "Ένα όμορφο τοπίο με βουνά και ηλιοβασίλεμα...",
|
||
stylePresets: "Προεπιλογές στυλ (προαιρετικό):",
|
||
urlPlaceholder: "https://example.com/image.jpg",
|
||
generatingWith: "Δημιουργία με",
|
||
mayTakeTime: "Μπορεί να χρειαστεί 10-30 δευτερόλεπτα",
|
||
},
|
||
sq: {
|
||
editText: "Redakto tekstin",
|
||
mentionToAI: "Përmend AI-në",
|
||
replaceImage: "Zëvendëso imazhin",
|
||
chooseFromLibrary: "Zgjidh nga biblioteka",
|
||
changeUrl: "Ndrysho URL-në",
|
||
generateWithAI: "Gjenero me AI",
|
||
uploadImage: "Ngarko imazh",
|
||
imageUrl: "URL e imazhit",
|
||
cancel: "Anulo",
|
||
apply: "Apliko",
|
||
generate: "🎨 Gjenero",
|
||
generating: "Duke gjeneruar...",
|
||
enterImageUrl: "Fut URL-në e imazhit...",
|
||
chooseModel: "Zgjidh modelin:",
|
||
describeImage: "Përshkruaj imazhin tënd:",
|
||
aiPromptPlaceholder: "Një peizazh i bukur me male dhe perëndim dielli...",
|
||
stylePresets: "Paracaktime stili (opsionale):",
|
||
urlPlaceholder: "https://example.com/image.jpg",
|
||
generatingWith: "Duke gjeneruar me",
|
||
mayTakeTime: "Kjo mund të zgjasë 10-30 sekonda",
|
||
},
|
||
id: {
|
||
editText: "Edit teks",
|
||
mentionToAI: "Sebut ke AI",
|
||
replaceImage: "Ganti gambar",
|
||
chooseFromLibrary: "Pilih dari perpustakaan",
|
||
changeUrl: "Ubah URL",
|
||
generateWithAI: "Hasilkan dengan AI",
|
||
uploadImage: "Unggah gambar",
|
||
imageUrl: "URL gambar",
|
||
cancel: "Batal",
|
||
apply: "Terapkan",
|
||
generate: "🎨 Hasilkan",
|
||
generating: "Menghasilkan...",
|
||
enterImageUrl: "Masukkan URL gambar...",
|
||
chooseModel: "Pilih model:",
|
||
describeImage: "Deskripsikan gambar Anda:",
|
||
aiPromptPlaceholder:
|
||
"Pemandangan indah dengan gunung dan matahari terbenam...",
|
||
stylePresets: "Preset gaya (opsional):",
|
||
urlPlaceholder: "https://contoh.com/gambar.jpg",
|
||
generatingWith: "Menghasilkan dengan",
|
||
mayTakeTime: "Ini mungkin memakan waktu 10-30 detik",
|
||
},
|
||
tr: {
|
||
editText: "Metni düzenle",
|
||
mentionToAI: "AI'ya bahset",
|
||
replaceImage: "Resmi değiştir",
|
||
chooseFromLibrary: "Kütüphaneden seç",
|
||
changeUrl: "URL'yi değiştir",
|
||
generateWithAI: "AI ile oluştur",
|
||
uploadImage: "Resim yükle",
|
||
imageUrl: "Resim URL'si",
|
||
cancel: "İptal",
|
||
apply: "Uygula",
|
||
generate: "🎨 Oluştur",
|
||
generating: "Oluşturuluyor...",
|
||
enterImageUrl: "Resim URL'sini girin...",
|
||
chooseModel: "Model seçin:",
|
||
describeImage: "Resminizi tanımlayın:",
|
||
aiPromptPlaceholder: "Dağlar ve gün batımı ile güzel bir manzara...",
|
||
stylePresets: "Stil ön ayarları (isteğe bağlı):",
|
||
urlPlaceholder: "https://ornek.com/resim.jpg",
|
||
generatingWith: "İle oluşturuluyor",
|
||
mayTakeTime: "Bu 10-30 saniye sürebilir",
|
||
},
|
||
vi: {
|
||
editText: "Chỉnh sửa văn bản",
|
||
mentionToAI: "Đề cập đến AI",
|
||
replaceImage: "Thay thế hình ảnh",
|
||
chooseFromLibrary: "Chọn từ thư viện",
|
||
changeUrl: "Thay đổi URL",
|
||
generateWithAI: "Tạo với AI",
|
||
uploadImage: "Tải lên hình ảnh",
|
||
imageUrl: "URL hình ảnh",
|
||
cancel: "Hủy",
|
||
apply: "Áp dụng",
|
||
generate: "🎨 Tạo",
|
||
generating: "Đang tạo...",
|
||
enterImageUrl: "Nhập URL hình ảnh...",
|
||
chooseModel: "Chọn mô hình:",
|
||
describeImage: "Mô tả hình ảnh của bạn:",
|
||
aiPromptPlaceholder: "Phong cảnh đẹp với núi và hoàng hôn...",
|
||
stylePresets: "Cài đặt phong cách (tùy chọn):",
|
||
urlPlaceholder: "https://example.com/image.jpg",
|
||
generatingWith: "Đang tạo với",
|
||
mayTakeTime: "Có thể mất 10-30 giây",
|
||
},
|
||
fa: {
|
||
editText: "ویرایش متن",
|
||
mentionToAI: "اشاره به هوش مصنوعی",
|
||
replaceImage: "جایگزینی تصویر",
|
||
chooseFromLibrary: "انتخاب از کتابخانه",
|
||
changeUrl: "تغییر لینک",
|
||
generateWithAI: "تولید با هوش مصنوعی",
|
||
uploadImage: "آپلود تصویر",
|
||
imageUrl: "لینک تصویر",
|
||
cancel: "لغو",
|
||
apply: "اعمال",
|
||
generate: "🎨 تولید",
|
||
generating: "در حال تولید...",
|
||
enterImageUrl: "لینک تصویر را وارد کنید...",
|
||
chooseModel: "انتخاب مدل:",
|
||
describeImage: "تصویر خود را توصیف کنید:",
|
||
aiPromptPlaceholder: "منظره زیبا با کوهها و غروب آفتاب...",
|
||
stylePresets: "پیشتنظیمات سبک (اختیاری):",
|
||
urlPlaceholder: "https://example.com/image.jpg",
|
||
generatingWith: "تولید با",
|
||
mayTakeTime: "این ممکن است ۱۰-۳۰ ثانیه طول بکشد",
|
||
},
|
||
};
|
||
|
||
// Supported languages list
|
||
const supportedLangs = [
|
||
"en",
|
||
"fr",
|
||
"de",
|
||
"es",
|
||
"pt",
|
||
"it",
|
||
"nl",
|
||
"ar",
|
||
"zh",
|
||
"ja",
|
||
"el",
|
||
"sq",
|
||
"id",
|
||
"tr",
|
||
"vi",
|
||
"fa",
|
||
];
|
||
|
||
// Detect language from document or parent frame
|
||
function detectLanguage() {
|
||
// Check document lang attribute
|
||
const docLang = document.documentElement.lang || "";
|
||
const langCode = docLang.split("-")[0].toLowerCase();
|
||
if (supportedLangs.includes(langCode)) return langCode;
|
||
|
||
// Check URL for locale pattern (e.g., /fr/, /en/)
|
||
const pathMatch = window.location.pathname.match(/^\/([a-z]{2})\//);
|
||
if (pathMatch && supportedLangs.includes(pathMatch[1])) return pathMatch[1];
|
||
|
||
// Default to English
|
||
return "en";
|
||
}
|
||
|
||
const currentLang = detectLanguage();
|
||
const t = (key) =>
|
||
translations[currentLang]?.[key] || translations.en[key] || key;
|
||
|
||
/* ---------- helpers --------------------------------------------------- */
|
||
const css = (el, obj) => Object.assign(el.style, obj);
|
||
|
||
function getElementPath(element) {
|
||
const path = [];
|
||
let current = element;
|
||
let depth = 0;
|
||
const maxDepth = 5;
|
||
|
||
while (current && current !== document.body && depth < maxDepth) {
|
||
let identifier = current.tagName.toLowerCase();
|
||
|
||
if (current.id) {
|
||
identifier += `#${current.id}`;
|
||
} else if (current.className && typeof current.className === "string") {
|
||
const firstClass = current.className
|
||
.trim()
|
||
.split(" ")
|
||
.filter((c) => c && !c.startsWith("_"))[0];
|
||
if (firstClass) {
|
||
identifier += `.${firstClass}`;
|
||
}
|
||
}
|
||
|
||
path.unshift(identifier);
|
||
current = current.parentElement;
|
||
depth++;
|
||
}
|
||
|
||
return path.join(" > ");
|
||
}
|
||
|
||
function isTextElement(el) {
|
||
// Check if element contains ANY text (even nested)
|
||
if (!el) return false;
|
||
|
||
// Get all text content including nested elements
|
||
const textContent = el.textContent || "";
|
||
|
||
// Check if it's a text-focused element
|
||
const textTags = [
|
||
"H1",
|
||
"H2",
|
||
"H3",
|
||
"H4",
|
||
"H5",
|
||
"H6",
|
||
"P",
|
||
"SPAN",
|
||
"A",
|
||
"BUTTON",
|
||
"LI",
|
||
"TD",
|
||
"TH",
|
||
"LABEL",
|
||
"DIV",
|
||
];
|
||
const hasText = textContent.trim().length > 0;
|
||
const isTextTag = textTags.includes(el.tagName);
|
||
|
||
// If element has text and is a common text element, it's editable
|
||
return hasText && (isTextTag || el.childNodes.length === 1);
|
||
}
|
||
|
||
function isImageElement(el) {
|
||
return el && el.tagName === "IMG";
|
||
}
|
||
|
||
// Shared menu styles (shadcn-inspired)
|
||
function injectMenuStyles() {
|
||
if (document.getElementById("kleap-menu-styles")) return;
|
||
|
||
const style = document.createElement("style");
|
||
style.id = "kleap-menu-styles";
|
||
style.textContent = `
|
||
@keyframes kleapMenuIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.kleap-menu {
|
||
position: fixed;
|
||
background: white;
|
||
border: 1px solid hsl(240 5.9% 90%);
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||
z-index: 2147483648;
|
||
padding: 4px;
|
||
min-width: 180px;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
animation: kleapMenuIn 0.15s ease-out;
|
||
}
|
||
|
||
.kleap-menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 10px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: background-color 0.1s;
|
||
color: hsl(240 10% 3.9%);
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
user-select: none;
|
||
}
|
||
|
||
.kleap-menu-item:hover {
|
||
background: hsl(240 4.8% 95.9%);
|
||
}
|
||
|
||
.kleap-menu-item:active {
|
||
background: hsl(240 5% 92%);
|
||
}
|
||
|
||
.kleap-menu-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: hsl(240 3.8% 46.1%);
|
||
}
|
||
|
||
.kleap-menu-icon svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.kleap-menu-separator {
|
||
height: 1px;
|
||
background: hsl(240 5.9% 90%);
|
||
margin: 4px -4px;
|
||
}
|
||
|
||
.kleap-menu-label {
|
||
padding: 8px 10px 4px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: hsl(240 3.8% 46.1%);
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
// SVG icons (Lucide-style)
|
||
const icons = {
|
||
image: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`,
|
||
link: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`,
|
||
upload: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>`,
|
||
sparkles: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>`,
|
||
pencil: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>`,
|
||
messageCircle: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>`,
|
||
};
|
||
|
||
function createMenu(rect, items) {
|
||
injectMenuStyles();
|
||
|
||
const menu = document.createElement("div");
|
||
menu.className = "kleap-menu";
|
||
|
||
// Position menu below element, or above if not enough space
|
||
const spaceBelow = window.innerHeight - rect.bottom;
|
||
const spaceAbove = rect.top;
|
||
const menuHeight = items.length * 36 + 8; // approximate
|
||
|
||
let top, left;
|
||
if (spaceBelow >= menuHeight || spaceBelow >= spaceAbove) {
|
||
top = Math.min(rect.bottom + 6, window.innerHeight - menuHeight - 10);
|
||
} else {
|
||
top = Math.max(10, rect.top - menuHeight - 6);
|
||
}
|
||
left = Math.min(Math.max(10, rect.left), window.innerWidth - 200);
|
||
|
||
css(menu, {
|
||
top: `${top}px`,
|
||
left: `${left}px`,
|
||
});
|
||
|
||
items.forEach((item) => {
|
||
if (item.separator) {
|
||
const sep = document.createElement("div");
|
||
sep.className = "kleap-menu-separator";
|
||
menu.appendChild(sep);
|
||
return;
|
||
}
|
||
|
||
const menuItem = document.createElement("div");
|
||
menuItem.className = "kleap-menu-item";
|
||
|
||
const icon = document.createElement("span");
|
||
icon.className = "kleap-menu-icon";
|
||
icon.innerHTML = item.icon;
|
||
|
||
const label = document.createElement("span");
|
||
label.textContent = item.label;
|
||
|
||
menuItem.appendChild(icon);
|
||
menuItem.appendChild(label);
|
||
|
||
menuItem.onclick = (e) => {
|
||
e.stopPropagation();
|
||
closeMenu();
|
||
item.action();
|
||
};
|
||
|
||
menu.appendChild(menuItem);
|
||
});
|
||
|
||
document.body.appendChild(menu);
|
||
|
||
// Close menu on click outside or escape
|
||
const closeMenu = () => {
|
||
menu.remove();
|
||
document.removeEventListener("click", handleOutsideClick);
|
||
document.removeEventListener("keydown", handleEscape);
|
||
};
|
||
|
||
const handleOutsideClick = (e) => {
|
||
if (!menu.contains(e.target)) {
|
||
closeMenu();
|
||
}
|
||
};
|
||
|
||
const handleEscape = (e) => {
|
||
if (e.key === "Escape") {
|
||
closeMenu();
|
||
}
|
||
};
|
||
|
||
setTimeout(() => {
|
||
document.addEventListener("click", handleOutsideClick);
|
||
document.addEventListener("keydown", handleEscape);
|
||
}, 0);
|
||
|
||
return { menu, closeMenu };
|
||
}
|
||
|
||
function enableImageEdit(img) {
|
||
const rect = img.getBoundingClientRect();
|
||
|
||
createMenu(rect, [
|
||
{
|
||
icon: icons.image,
|
||
label: t("chooseFromLibrary"),
|
||
action: () => showLibraryDialog(img),
|
||
},
|
||
{
|
||
icon: icons.upload,
|
||
label: t("uploadImage"),
|
||
action: () => showUploadDialog(img),
|
||
},
|
||
{
|
||
icon: icons.link,
|
||
label: t("changeUrl"),
|
||
action: () => showUrlDialog(img),
|
||
},
|
||
{ separator: true },
|
||
{
|
||
icon: icons.sparkles,
|
||
label: t("generateWithAI"),
|
||
action: () => showAIDialog(img),
|
||
},
|
||
]);
|
||
}
|
||
|
||
function showTextMenu(el) {
|
||
const rect = el.getBoundingClientRect();
|
||
|
||
createMenu(rect, [
|
||
{
|
||
icon: icons.pencil,
|
||
label: t("editText"),
|
||
action: () => enableInlineEdit(el),
|
||
},
|
||
{
|
||
icon: icons.messageCircle,
|
||
label: t("mentionToAI"),
|
||
action: () => sendToAI(el),
|
||
},
|
||
]);
|
||
}
|
||
|
||
function sendToAI(el) {
|
||
// Generate ID and name
|
||
let id = el.dataset.kleapId;
|
||
let name = el.dataset.kleapName;
|
||
let path = el.dataset.kleapPath;
|
||
|
||
if (!id) {
|
||
const tag = el.tagName.toLowerCase();
|
||
const uniqueId = Math.random().toString(36).substr(2, 9);
|
||
if (el.id) {
|
||
id = `${tag}#${el.id}`;
|
||
} else if (el.className && typeof el.className === "string") {
|
||
const firstClass = el.className.trim().split(" ")[0];
|
||
id = `${tag}.${firstClass}-${uniqueId}`;
|
||
} else {
|
||
id = `${tag}-${uniqueId}`;
|
||
}
|
||
}
|
||
|
||
if (!name) {
|
||
const tag = el.tagName.toLowerCase();
|
||
if (el.className && typeof el.className === "string") {
|
||
const classes = el.className
|
||
.trim()
|
||
.split(" ")
|
||
.filter((c) => c && !c.startsWith("_"));
|
||
const meaningfulClass = classes.find(
|
||
(c) =>
|
||
!c.match(
|
||
/^(flex|grid|block|inline|absolute|relative|fixed|sticky|w-|h-|p-|m-|text-|bg-|border-|rounded-|shadow-|opacity-|z-)/,
|
||
),
|
||
);
|
||
name = meaningfulClass
|
||
? `${tag}.${meaningfulClass}`
|
||
: `${tag}.${classes[0] || ""}`;
|
||
} else {
|
||
name = tag;
|
||
}
|
||
}
|
||
|
||
if (!path) {
|
||
path = getElementPath(el);
|
||
}
|
||
|
||
window.parent.postMessage(
|
||
{
|
||
type: "kleap-component-selected",
|
||
id: id,
|
||
name: name,
|
||
path: path,
|
||
tagName: el.tagName.toLowerCase(),
|
||
className: el.className || "",
|
||
textContent: el.textContent ? el.textContent.substring(0, 100) : "",
|
||
hasChildren: el.children.length > 0,
|
||
rect: {
|
||
width: el.offsetWidth,
|
||
height: el.offsetHeight,
|
||
},
|
||
},
|
||
"*",
|
||
);
|
||
}
|
||
|
||
function showLibraryDialog(img) {
|
||
// Send message to parent to open Asset Manager
|
||
window.parent.postMessage(
|
||
{
|
||
type: "kleap-image-library-select",
|
||
id:
|
||
img.dataset.kleapId ||
|
||
`img-${Math.random().toString(36).substr(2, 9)}`,
|
||
oldSrc: img.src,
|
||
alt: img.alt || "",
|
||
},
|
||
"*",
|
||
);
|
||
}
|
||
|
||
function showUrlDialog(img) {
|
||
const dialog = createDialog(t("changeUrl"));
|
||
|
||
const input = document.createElement("input");
|
||
input.type = "text";
|
||
input.value = img.src;
|
||
input.placeholder = t("enterImageUrl");
|
||
css(input, {
|
||
width: "100%",
|
||
padding: "10px 12px",
|
||
border: "1px solid #ddd",
|
||
borderRadius: "8px",
|
||
fontSize: "14px",
|
||
marginBottom: "16px",
|
||
boxSizing: "border-box",
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||
});
|
||
|
||
dialog.content.appendChild(input);
|
||
|
||
dialog.onSave = () => {
|
||
const newSrc = input.value.trim();
|
||
if (newSrc && newSrc !== img.src) {
|
||
updateImage(img, newSrc);
|
||
}
|
||
};
|
||
|
||
input.focus();
|
||
input.select();
|
||
}
|
||
|
||
function showUploadDialog(img) {
|
||
// Open Asset Manager directly - it has full upload functionality
|
||
window.parent.postMessage(
|
||
{
|
||
type: "kleap-image-library-select",
|
||
id:
|
||
img.dataset.kleapId ||
|
||
`img-${Math.random().toString(36).substr(2, 9)}`,
|
||
oldSrc: img.src,
|
||
alt: img.alt || "",
|
||
},
|
||
"*",
|
||
);
|
||
}
|
||
|
||
function showAIDialog(img) {
|
||
const dialog = createDialog(t("generateWithAI"));
|
||
|
||
// Model selection
|
||
const modelLabel = document.createElement("div");
|
||
css(modelLabel, {
|
||
fontSize: "12px",
|
||
color: "#666",
|
||
marginBottom: "8px",
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||
});
|
||
modelLabel.textContent = t("chooseModel");
|
||
|
||
const modelContainer = document.createElement("div");
|
||
css(modelContainer, {
|
||
display: "grid",
|
||
gridTemplateColumns: "repeat(2, 1fr)",
|
||
gap: "8px",
|
||
marginBottom: "16px",
|
||
});
|
||
|
||
const models = [
|
||
{ id: "flux-pro", name: "🚀 Flux Pro", desc: "Fast & High quality" },
|
||
{ id: "flux-dev", name: "⚡ Flux Dev", desc: "Good balance" },
|
||
{ id: "sdxl", name: "🎨 Stable Diffusion", desc: "Classic & reliable" },
|
||
{
|
||
id: "playground-v2",
|
||
name: "✨ Playground v2",
|
||
desc: "Aesthetic focus",
|
||
},
|
||
{ id: "kandinsky", name: "🖼️ Kandinsky", desc: "Artistic style" },
|
||
{ id: "dalle-3", name: "🤖 DALL-E 3", desc: "OpenAI (if available)" },
|
||
];
|
||
|
||
let selectedModel = "flux-pro";
|
||
const modelButtons = [];
|
||
|
||
models.forEach((model) => {
|
||
const button = document.createElement("div");
|
||
css(button, {
|
||
padding: "8px",
|
||
borderRadius: "8px",
|
||
border: "2px solid #ddd",
|
||
cursor: "pointer",
|
||
transition: "all 0.2s",
|
||
textAlign: "center",
|
||
background: model.id === selectedModel ? "#ff0055" : "white",
|
||
color: model.id === selectedModel ? "white" : "#333",
|
||
});
|
||
|
||
button.innerHTML = `
|
||
<div style="font-size: 20px; margin-bottom: 4px;">${model.name.split(" ")[0]}</div>
|
||
<div style="font-size: 11px; font-weight: 500;">${model.name.substring(model.name.indexOf(" ") + 1)}</div>
|
||
<div style="font-size: 9px; opacity: 0.8; margin-top: 2px;">${model.desc}</div>
|
||
`;
|
||
|
||
button.onclick = () => {
|
||
selectedModel = model.id;
|
||
// Update button styles
|
||
modelButtons.forEach((btn) => {
|
||
css(btn, {
|
||
background: btn === button ? "#ff0055" : "white",
|
||
color: btn === button ? "white" : "#333",
|
||
border: btn === button ? "2px solid #ff0055" : "2px solid #ddd",
|
||
});
|
||
});
|
||
};
|
||
|
||
modelButtons.push(button);
|
||
modelContainer.appendChild(button);
|
||
});
|
||
|
||
// Prompt textarea
|
||
const promptLabel = document.createElement("div");
|
||
css(promptLabel, {
|
||
fontSize: "12px",
|
||
color: "#666",
|
||
marginBottom: "8px",
|
||
marginTop: "16px",
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||
});
|
||
promptLabel.textContent = t("describeImage");
|
||
|
||
const textarea = document.createElement("textarea");
|
||
textarea.placeholder = t("aiPromptPlaceholder");
|
||
css(textarea, {
|
||
width: "100%",
|
||
minHeight: "80px",
|
||
padding: "10px 12px",
|
||
border: "1px solid #ddd",
|
||
borderRadius: "8px",
|
||
fontSize: "14px",
|
||
marginBottom: "12px",
|
||
resize: "vertical",
|
||
boxSizing: "border-box",
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||
});
|
||
|
||
// Style presets
|
||
const styleLabel = document.createElement("div");
|
||
css(styleLabel, {
|
||
fontSize: "12px",
|
||
color: "#666",
|
||
marginBottom: "8px",
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||
});
|
||
styleLabel.textContent = t("stylePresets");
|
||
|
||
const styleContainer = document.createElement("div");
|
||
css(styleContainer, {
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
gap: "6px",
|
||
marginBottom: "16px",
|
||
});
|
||
|
||
const styles = [
|
||
"Photorealistic",
|
||
"Artistic",
|
||
"Anime",
|
||
"3D Render",
|
||
"Watercolor",
|
||
"Oil Painting",
|
||
"Minimalist",
|
||
"Vintage",
|
||
];
|
||
|
||
styles.forEach((style) => {
|
||
const chip = document.createElement("div");
|
||
css(chip, {
|
||
padding: "4px 10px",
|
||
borderRadius: "12px",
|
||
border: "1px solid #ddd",
|
||
fontSize: "12px",
|
||
cursor: "pointer",
|
||
transition: "all 0.15s",
|
||
background: "white",
|
||
color: "#666",
|
||
});
|
||
chip.textContent = style;
|
||
|
||
chip.onclick = () => {
|
||
const isSelected = chip.style.background === "rgb(255, 0, 85)";
|
||
css(chip, {
|
||
background: isSelected ? "white" : "#ff0055",
|
||
color: isSelected ? "#666" : "white",
|
||
border: isSelected ? "1px solid #ddd" : "1px solid #ff0055",
|
||
});
|
||
|
||
// Add/remove from prompt
|
||
if (!isSelected) {
|
||
if (!textarea.value.includes(style.toLowerCase())) {
|
||
textarea.value =
|
||
textarea.value.trim() +
|
||
(textarea.value ? ", " : "") +
|
||
style.toLowerCase() +
|
||
" style";
|
||
}
|
||
} else {
|
||
textarea.value = textarea.value.replace(
|
||
new RegExp(`,?\\s*${style.toLowerCase()}\\s*style`, "gi"),
|
||
"",
|
||
);
|
||
}
|
||
};
|
||
|
||
styleContainer.appendChild(chip);
|
||
});
|
||
|
||
// Append all elements
|
||
dialog.content.appendChild(modelLabel);
|
||
dialog.content.appendChild(modelContainer);
|
||
dialog.content.appendChild(promptLabel);
|
||
dialog.content.appendChild(textarea);
|
||
dialog.content.appendChild(styleLabel);
|
||
dialog.content.appendChild(styleContainer);
|
||
|
||
dialog.saveBtn.textContent = t("generate");
|
||
|
||
dialog.onSave = () => {
|
||
const prompt = textarea.value.trim();
|
||
if (prompt) {
|
||
// Send to parent for AI generation with selected model
|
||
window.parent.postMessage(
|
||
{
|
||
type: "kleap-image-ai-generate",
|
||
id:
|
||
img.dataset.kleapId ||
|
||
`img-${Math.random().toString(36).substr(2, 9)}`,
|
||
prompt: prompt,
|
||
model: selectedModel,
|
||
oldSrc: img.src,
|
||
},
|
||
"*",
|
||
);
|
||
|
||
// Show generating state
|
||
dialog.content.innerHTML = `
|
||
<div style="text-align: center; padding: 30px;">
|
||
<div style="font-size: 48px; margin-bottom: 12px; animation: spin 2s linear infinite;">✨</div>
|
||
<div style="color: #333; font-size: 16px; font-weight: 600;">${t("generatingWith")} ${models.find((m) => m.id === selectedModel)?.name || "AI"}...</div>
|
||
<div style="color: #666; font-size: 14px; margin-top: 8px;">"${prompt.substring(0, 50)}${prompt.length > 50 ? "..." : ""}"</div>
|
||
<div style="color: #999; font-size: 12px; margin-top: 12px;">${t("mayTakeTime")}</div>
|
||
</div>
|
||
<style>
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
</style>
|
||
`;
|
||
dialog.saveBtn.style.display = "none";
|
||
}
|
||
};
|
||
|
||
textarea.focus();
|
||
}
|
||
|
||
function createDialog(title) {
|
||
const overlay = document.createElement("div");
|
||
css(overlay, {
|
||
position: "fixed",
|
||
top: "0",
|
||
left: "0",
|
||
right: "0",
|
||
bottom: "0",
|
||
background: "rgba(0,0,0,0.5)",
|
||
zIndex: "2147483647",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
});
|
||
|
||
const dialog = document.createElement("div");
|
||
css(dialog, {
|
||
background: "white",
|
||
borderRadius: "16px",
|
||
boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
|
||
minWidth: "400px",
|
||
maxWidth: "500px",
|
||
animation: "kleapDialogIn 0.2s ease-out",
|
||
});
|
||
|
||
const header = document.createElement("div");
|
||
css(header, {
|
||
padding: "20px 24px",
|
||
borderBottom: "1px solid #eee",
|
||
fontSize: "16px",
|
||
fontWeight: "600",
|
||
color: "#333",
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||
});
|
||
header.textContent = title;
|
||
|
||
const content = document.createElement("div");
|
||
css(content, {
|
||
padding: "20px 24px",
|
||
});
|
||
|
||
const footer = document.createElement("div");
|
||
css(footer, {
|
||
padding: "16px 24px",
|
||
borderTop: "1px solid #eee",
|
||
display: "flex",
|
||
gap: "8px",
|
||
justifyContent: "flex-end",
|
||
});
|
||
|
||
const cancelBtn = document.createElement("button");
|
||
cancelBtn.textContent = t("cancel");
|
||
css(cancelBtn, {
|
||
padding: "8px 16px",
|
||
border: "1px solid #ddd",
|
||
borderRadius: "8px",
|
||
background: "white",
|
||
color: "#666",
|
||
fontSize: "14px",
|
||
cursor: "pointer",
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||
});
|
||
|
||
const saveBtn = document.createElement("button");
|
||
saveBtn.textContent = t("apply");
|
||
css(saveBtn, {
|
||
padding: "8px 20px",
|
||
border: "none",
|
||
borderRadius: "8px",
|
||
background: "#ff0055",
|
||
color: "white",
|
||
fontSize: "14px",
|
||
cursor: "pointer",
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||
});
|
||
|
||
footer.appendChild(cancelBtn);
|
||
footer.appendChild(saveBtn);
|
||
|
||
dialog.appendChild(header);
|
||
dialog.appendChild(content);
|
||
dialog.appendChild(footer);
|
||
overlay.appendChild(dialog);
|
||
document.body.appendChild(overlay);
|
||
|
||
const close = () => overlay.remove();
|
||
|
||
cancelBtn.onclick = close;
|
||
overlay.onclick = (e) => {
|
||
if (e.target === overlay) close();
|
||
};
|
||
|
||
const result = {
|
||
content,
|
||
saveBtn,
|
||
close,
|
||
onSave: null,
|
||
};
|
||
|
||
saveBtn.onclick = () => {
|
||
if (result.onSave) result.onSave();
|
||
close();
|
||
};
|
||
|
||
// Handle keyboard
|
||
document.addEventListener("keydown", function handleKey(e) {
|
||
if (e.key === "Escape") {
|
||
close();
|
||
document.removeEventListener("keydown", handleKey);
|
||
}
|
||
});
|
||
|
||
return result;
|
||
}
|
||
|
||
function updateImage(img, newSrc) {
|
||
const originalSrc = img.src;
|
||
img.src = newSrc;
|
||
|
||
// Send the change to parent
|
||
window.parent.postMessage(
|
||
{
|
||
type: "kleap-image-edited",
|
||
id:
|
||
img.dataset.kleapId ||
|
||
`img-${Math.random().toString(36).substr(2, 9)}`,
|
||
oldSrc: originalSrc,
|
||
newSrc: newSrc,
|
||
alt: img.alt || "",
|
||
},
|
||
"*",
|
||
);
|
||
}
|
||
|
||
function enableInlineEdit(el) {
|
||
// Store original state
|
||
const originalText = el.textContent;
|
||
const originalHTML = el.innerHTML;
|
||
|
||
// Store ALL original styles
|
||
const originalStyles = {
|
||
outline: el.style.outline,
|
||
outlineOffset: el.style.outlineOffset,
|
||
boxShadow: el.style.boxShadow,
|
||
cursor: el.style.cursor,
|
||
contentEditable: el.contentEditable,
|
||
// Don't modify background, border, or any other styles!
|
||
};
|
||
|
||
// Make element editable
|
||
el.contentEditable = "true";
|
||
el.focus();
|
||
|
||
// Add ONLY non-intrusive visual feedback
|
||
css(el, {
|
||
outline: "2px solid #ff0055",
|
||
outlineOffset: "3px",
|
||
cursor: "text",
|
||
boxShadow:
|
||
"0 0 0 4px rgba(255, 0, 85, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08)",
|
||
// DO NOT change background, border, borderRadius, or any other properties!
|
||
});
|
||
|
||
// Select all text
|
||
const range = document.createRange();
|
||
range.selectNodeContents(el);
|
||
const selection = window.getSelection();
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
|
||
// Handle blur to save changes
|
||
const handleBlur = () => {
|
||
const newText = el.textContent;
|
||
|
||
if (newText !== originalText) {
|
||
// Show saving status on the border
|
||
css(el, {
|
||
outline: "2px solid #FFA500", // Orange for saving
|
||
boxShadow:
|
||
"0 0 0 4px rgba(255, 165, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08)",
|
||
});
|
||
|
||
// Send the change to parent
|
||
// Generate ID and name if not present
|
||
const id =
|
||
el.dataset.kleapId ||
|
||
`element-${Math.random().toString(36).substr(2, 9)}`;
|
||
let name = el.dataset.kleapName || el.tagName.toLowerCase();
|
||
|
||
if (
|
||
!el.dataset.kleapName &&
|
||
el.className &&
|
||
typeof el.className === "string"
|
||
) {
|
||
const classes = el.className
|
||
.trim()
|
||
.split(" ")
|
||
.filter((c) => c);
|
||
if (classes.length > 0) {
|
||
name = `${el.tagName.toLowerCase()}.${classes[0]}`;
|
||
}
|
||
}
|
||
|
||
window.parent.postMessage(
|
||
{
|
||
type: "kleap-text-edited",
|
||
id: id,
|
||
name: name,
|
||
path: el.dataset.kleapPath || getElementPath(el),
|
||
oldText: originalText,
|
||
newText: newText,
|
||
tagName: el.tagName.toLowerCase(),
|
||
},
|
||
"*",
|
||
);
|
||
|
||
// Show success after a moment
|
||
setTimeout(() => {
|
||
css(el, {
|
||
outline: "2px solid #00C851", // Green for success
|
||
boxShadow:
|
||
"0 0 0 4px rgba(0, 200, 81, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08)",
|
||
});
|
||
|
||
// Remove all styles after showing success
|
||
setTimeout(() => {
|
||
el.contentEditable = originalStyles.contentEditable || "false";
|
||
css(el, {
|
||
outline: originalStyles.outline || "",
|
||
outlineOffset: originalStyles.outlineOffset || "",
|
||
boxShadow: originalStyles.boxShadow || "",
|
||
cursor: originalStyles.cursor || "",
|
||
});
|
||
}, 1000);
|
||
}, 500);
|
||
} else {
|
||
// Restore original HTML if no changes
|
||
el.innerHTML = originalHTML;
|
||
|
||
// Restore styles immediately if no changes
|
||
el.contentEditable = originalStyles.contentEditable || "false";
|
||
css(el, {
|
||
outline: originalStyles.outline || "",
|
||
outlineOffset: originalStyles.outlineOffset || "",
|
||
boxShadow: originalStyles.boxShadow || "",
|
||
cursor: originalStyles.cursor || "",
|
||
});
|
||
}
|
||
|
||
el.removeEventListener("blur", handleBlur);
|
||
el.removeEventListener("keydown", handleKeydown);
|
||
};
|
||
|
||
// Handle escape key to cancel
|
||
const handleKeydown = (e) => {
|
||
if (e.key === "Escape") {
|
||
e.preventDefault();
|
||
el.innerHTML = originalHTML;
|
||
el.blur();
|
||
}
|
||
};
|
||
|
||
el.addEventListener("blur", handleBlur);
|
||
el.addEventListener("keydown", handleKeydown);
|
||
}
|
||
|
||
function makeOverlay() {
|
||
overlay = document.createElement("div");
|
||
overlay.id = OVERLAY_ID;
|
||
css(overlay, {
|
||
position: "absolute",
|
||
border: "2px solid #ff0055",
|
||
background: "rgba(255,0,85,.05)",
|
||
pointerEvents: "none",
|
||
zIndex: "2147483647", // max
|
||
borderRadius: "8px",
|
||
boxShadow: "0 0 0 1px rgba(255,0,85,0.2), 0 4px 12px rgba(0,0,0,0.08)",
|
||
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
});
|
||
|
||
label = document.createElement("div");
|
||
css(label, {
|
||
position: "absolute",
|
||
left: "50%",
|
||
top: "100%",
|
||
transform: "translateX(-50%) translateY(8px)",
|
||
background: "linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%)",
|
||
color: "#fff",
|
||
fontFamily:
|
||
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
|
||
fontSize: "13px",
|
||
fontWeight: "500",
|
||
lineHeight: "1.4",
|
||
padding: "0",
|
||
borderRadius: "12px",
|
||
boxShadow:
|
||
"0 8px 32px rgba(0,0,0,0.24), 0 2px 8px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.06)",
|
||
border: "1px solid rgba(255,255,255,0.08)",
|
||
overflow: "hidden",
|
||
minWidth: "180px",
|
||
animation: "kleapFadeIn 0.2s ease-out",
|
||
pointerEvents: "auto", // Enable clicks on the label
|
||
});
|
||
overlay.appendChild(label);
|
||
document.body.appendChild(overlay);
|
||
|
||
// Add animation keyframes
|
||
const style = document.createElement("style");
|
||
style.textContent = `
|
||
@keyframes kleapFadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(-50%) translateY(4px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(-50%) translateY(8px);
|
||
}
|
||
}
|
||
|
||
#${OVERLAY_ID} .kleap-option {
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
#${OVERLAY_ID} .kleap-option:hover {
|
||
background: rgba(255,255,255,0.06);
|
||
}
|
||
|
||
#${OVERLAY_ID} .kleap-option:active {
|
||
transform: scale(0.98);
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
function updateOverlay(el) {
|
||
if (!overlay) makeOverlay();
|
||
|
||
const rect = el.getBoundingClientRect();
|
||
css(overlay, {
|
||
top: `${rect.top + window.scrollY}px`,
|
||
left: `${rect.left + window.scrollX}px`,
|
||
width: `${rect.width}px`,
|
||
height: `${rect.height}px`,
|
||
display: "block",
|
||
});
|
||
|
||
// Clear previous contents
|
||
while (label.firstChild) {
|
||
label.removeChild(label.firstChild);
|
||
}
|
||
|
||
// Always show minimal info when hovering
|
||
const info = document.createElement("div");
|
||
css(info, {
|
||
padding: "8px 12px",
|
||
fontSize: "12px",
|
||
opacity: "0.9",
|
||
});
|
||
|
||
// Get a descriptive name for the element
|
||
let name = el.dataset.kleapName || el.tagName.toLowerCase();
|
||
|
||
// Try to get a better description
|
||
if (!el.dataset.kleapName) {
|
||
const tag = el.tagName.toLowerCase();
|
||
|
||
// Add class names if available
|
||
if (el.className && typeof el.className === "string") {
|
||
const classes = el.className
|
||
.trim()
|
||
.split(" ")
|
||
.filter((c) => c && !c.startsWith("_"));
|
||
if (classes.length > 0) {
|
||
// Filter out utility classes
|
||
const meaningfulClass = classes.find(
|
||
(c) =>
|
||
!c.match(
|
||
/^(flex|grid|block|inline|absolute|relative|fixed|sticky|w-|h-|p-|m-|text-|bg-|border-|rounded-|shadow-|opacity-|z-)/,
|
||
),
|
||
);
|
||
name = meaningfulClass
|
||
? `${tag}.${meaningfulClass}`
|
||
: `${tag}.${classes[0]}`;
|
||
}
|
||
} else if (el.id) {
|
||
name = `${tag}#${el.id}`;
|
||
} else if (el.getAttribute("aria-label")) {
|
||
name = `${tag}[${el.getAttribute("aria-label")}]`;
|
||
} else if (el.getAttribute("role")) {
|
||
name = `${tag}[role=${el.getAttribute("role")}]`;
|
||
}
|
||
}
|
||
|
||
let actionHint = "";
|
||
if (isTextElement(el)) {
|
||
actionHint = " • Click for options";
|
||
} else if (isImageElement(el)) {
|
||
actionHint = " • Click for options";
|
||
}
|
||
info.textContent = name + actionHint;
|
||
label.appendChild(info);
|
||
}
|
||
|
||
/* ---------- event handlers -------------------------------------------- */
|
||
function onMouseMove(e) {
|
||
if (state.type !== "inspecting") return;
|
||
|
||
let el = e.target;
|
||
|
||
// Don't require data-kleap-id - any element can be selected
|
||
// Skip only truly non-selectable elements
|
||
const nonSelectableTags = [
|
||
"SCRIPT",
|
||
"STYLE",
|
||
"META",
|
||
"LINK",
|
||
"HTML",
|
||
"BODY",
|
||
];
|
||
while (el && nonSelectableTags.includes(el.tagName)) {
|
||
el = el.parentElement;
|
||
}
|
||
|
||
if (state.element === el) return;
|
||
state.element = el;
|
||
|
||
if (el) {
|
||
updateOverlay(el);
|
||
} else {
|
||
if (overlay) overlay.style.display = "none";
|
||
}
|
||
}
|
||
|
||
function onClick(e) {
|
||
if (state.type !== "inspecting" || !state.element) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
const el = state.element;
|
||
|
||
// If it's a text element, show text menu (edit or mention to AI)
|
||
if (isTextElement(el)) {
|
||
showTextMenu(el);
|
||
deactivate();
|
||
} else if (isImageElement(el)) {
|
||
// If it's an image, show image edit dialog
|
||
enableImageEdit(el);
|
||
deactivate();
|
||
} else {
|
||
// For non-text elements, send to parent for AI editing
|
||
// Generate better ID and name
|
||
let id = el.dataset.kleapId;
|
||
let name = el.dataset.kleapName;
|
||
let path = el.dataset.kleapPath;
|
||
|
||
// Generate ID if not present
|
||
if (!id) {
|
||
// Try to create a meaningful ID from element properties
|
||
const tag = el.tagName.toLowerCase();
|
||
const uniqueId = Math.random().toString(36).substr(2, 9);
|
||
|
||
if (el.id) {
|
||
id = `${tag}#${el.id}`;
|
||
} else if (el.className && typeof el.className === "string") {
|
||
const firstClass = el.className.trim().split(" ")[0];
|
||
id = `${tag}.${firstClass}-${uniqueId}`;
|
||
} else {
|
||
id = `${tag}-${uniqueId}`;
|
||
}
|
||
}
|
||
|
||
// Generate name if not present
|
||
if (!name) {
|
||
const tag = el.tagName.toLowerCase();
|
||
if (el.className && typeof el.className === "string") {
|
||
const classes = el.className
|
||
.trim()
|
||
.split(" ")
|
||
.filter((c) => c && !c.startsWith("_"));
|
||
const meaningfulClass = classes.find(
|
||
(c) =>
|
||
!c.match(
|
||
/^(flex|grid|block|inline|absolute|relative|fixed|sticky|w-|h-|p-|m-|text-|bg-|border-|rounded-|shadow-|opacity-|z-)/,
|
||
),
|
||
);
|
||
name = meaningfulClass
|
||
? `${tag}.${meaningfulClass}`
|
||
: `${tag}.${classes[0] || ""}`;
|
||
} else {
|
||
name = tag;
|
||
}
|
||
}
|
||
|
||
// Generate path if not present
|
||
if (!path) {
|
||
path = getElementPath(el);
|
||
}
|
||
|
||
window.parent.postMessage(
|
||
{
|
||
type: "kleap-component-selected",
|
||
id: id,
|
||
name: name,
|
||
path: path,
|
||
tagName: el.tagName.toLowerCase(),
|
||
className: el.className || "",
|
||
textContent: el.textContent ? el.textContent.substring(0, 100) : "",
|
||
hasChildren: el.children.length > 0,
|
||
rect: {
|
||
width: el.offsetWidth,
|
||
height: el.offsetHeight,
|
||
},
|
||
},
|
||
"*",
|
||
);
|
||
deactivate();
|
||
}
|
||
}
|
||
|
||
/* ---------- activation / deactivation --------------------------------- */
|
||
function activate() {
|
||
if (state.type === "inactive") {
|
||
window.addEventListener("mousemove", onMouseMove, true);
|
||
window.addEventListener("click", onClick, true);
|
||
}
|
||
state = { type: "inspecting", element: null };
|
||
if (overlay) {
|
||
overlay.style.display = "none";
|
||
}
|
||
}
|
||
|
||
function deactivate() {
|
||
if (state.type === "inactive") return;
|
||
|
||
window.removeEventListener("mousemove", onMouseMove, true);
|
||
window.removeEventListener("click", onClick, true);
|
||
if (overlay) {
|
||
overlay.remove();
|
||
overlay = null;
|
||
label = null;
|
||
}
|
||
state = { type: "inactive" };
|
||
}
|
||
|
||
/* ---------- message bridge -------------------------------------------- */
|
||
window.addEventListener("message", (e) => {
|
||
if (e.source !== window.parent) return;
|
||
if (e.data.type === "activate-kleap-component-selector") activate();
|
||
if (e.data.type === "deactivate-kleap-component-selector") deactivate();
|
||
});
|
||
|
||
function initializeComponentSelector() {
|
||
if (!document.body) {
|
||
console.error(
|
||
"Kleap component selector initialization failed: document.body not found.",
|
||
);
|
||
return;
|
||
}
|
||
setTimeout(() => {
|
||
if (document.body.querySelector("[data-kleap-id]")) {
|
||
window.parent.postMessage(
|
||
{
|
||
type: "kleap-component-selector-initialized",
|
||
},
|
||
"*",
|
||
);
|
||
console.debug("Kleap component selector initialized");
|
||
} else {
|
||
console.warn(
|
||
"Kleap component selector not initialized because no DOM elements were tagged",
|
||
);
|
||
}
|
||
}, 0);
|
||
}
|
||
|
||
if (document.readyState === "loading") {
|
||
document.addEventListener("DOMContentLoaded", initializeComponentSelector);
|
||
} else {
|
||
initializeComponentSelector();
|
||
}
|
||
})();
|