${content || 'Add your content here...'}
Empty page
", })); } else { // Single page for now - can be enhanced to auto-split based on content length pages = [ { id: "page-1", content: content, }, ]; } return pages; } // Update preview pages when content changes updatePreviewPages() { if (this.htmlContent) { this.previewPages = this.splitContentIntoPages(this.htmlContent); } else { this.previewPages = null; } this.updatePageCount(); // Force proper HTML rendering after content changes setTimeout(() => { this.forceHTMLRendering(); }, 100); } fitToWidth() { const container = this.template?.querySelector(".pdf-viewport"); if (!container) { return; } // Use exact PDF dimensions for perfect matching const baseWidth = this.selectedPageSize === "A3" ? 1123 : 794; const baseHeight = this.selectedPageSize === "A3" ? 1587 : 1123; const available = Math.max((container.clientWidth || baseWidth) - 20, 100); this.zoom = Math.max(Math.min(available / baseWidth, 4), 0.2); // Update canvas dimensions to match PDF exactly const canvas = this.template?.querySelector(".pdf-canvas"); if (canvas) { canvas.style.width = `${baseWidth}px`; canvas.style.height = `${baseHeight}px`; canvas.setAttribute('data-page-size', this.selectedPageSize); } } fitToPage() { const container = this.template?.querySelector(".pdf-viewport"); if (!container) { return; } // Use exact PDF dimensions for perfect matching const baseWidth = this.selectedPageSize === "A3" ? 1123 : 794; const baseHeight = this.selectedPageSize === "A3" ? 1587 : 1123; const availableW = Math.max((container.clientWidth || baseWidth) - 20, 100); const availableH = Math.max((container.clientHeight || baseHeight) - 20, 100); const scaleW = availableW / baseWidth; const scaleH = availableH / baseHeight; this.zoom = Math.max(Math.min(Math.min(scaleW, scaleH), 4), 0.2); // Update canvas dimensions to match PDF exactly const canvas = this.template?.querySelector(".pdf-canvas"); if (canvas) { canvas.style.width = `${baseWidth}px`; canvas.style.height = `${baseHeight}px`; canvas.setAttribute('data-page-size', this.selectedPageSize); } } // Update preview frame size based on selected page size updatePreviewFrameSize(pageSize) { const previewFrame = this.template.querySelector( ".enhanced-editor-content" ); if (previewFrame) { // Update the data attribute for the CSS content previewFrame.setAttribute("data-page-size", pageSize); // Set exact PDF dimensions for perfect matching const baseWidth = pageSize === "A3" ? 1123 : 794; const baseHeight = pageSize === "A3" ? 1587 : 1123; // Update canvas dimensions const canvas = this.template?.querySelector(".pdf-canvas"); if (canvas) { canvas.style.width = `${baseWidth}px`; canvas.style.height = `${baseHeight}px`; canvas.setAttribute('data-page-size', pageSize); } // Re-render content with new page size this.renderContentInPages(pageSize); // Update page count based on new page size this.updatePageCountForSize(pageSize); } } // Render content exactly as generated HTML - no modifications renderContentInPages(pageSize) { const previewFrame = this.template.querySelector( ".enhanced-editor-content" ); if (!previewFrame) return; // Get the current template content const templateHTML = this.createTemplateHTML(); if (!templateHTML) return; // Clear existing content previewFrame.innerHTML = ""; // Render the exact HTML without any wrapper containers or modifications previewFrame.innerHTML = templateHTML; // Force proper HTML rendering after content is set setTimeout(() => { this.forceHTMLRendering(); }, 50); } // Split HTML content into pages based on page size splitContentIntoPages(htmlContent, pageSize) { const pages = []; let currentPage = ""; let currentHeight = 0; // Define page heights in mm const pageHeights = { A4: 297, A3: 420, }; const maxHeight = pageHeights[pageSize] || 297; // Create a temporary div to parse HTML const tempDiv = document.createElement("div"); tempDiv.innerHTML = htmlContent; // Get all direct children (brochure pages) const children = Array.from(tempDiv.children); children.forEach((child, index) => { // If it's a brochure-page div, treat it as a separate page if (child.classList.contains("brochure-page")) { if (currentPage) { pages.push(currentPage); } currentPage = child.outerHTML; currentHeight = 0; } else { // For other content, check if it fits in current page const estimatedHeight = this.estimateElementHeight(child, pageSize); if (currentHeight + estimatedHeight > maxHeight && currentPage) { // Start new page pages.push(currentPage); currentPage = child.outerHTML; currentHeight = estimatedHeight; } else { // Add to current page currentPage += child.outerHTML; currentHeight += estimatedHeight; } } }); // Add the last page if (currentPage) { pages.push(currentPage); } return pages; } // Estimate element height based on page size estimateElementHeight(element, pageSize) { // Base height estimation in mm let baseHeight = 50; // Default height // Adjust based on element type if (element.tagName === "IMG") { baseHeight = 100; } else if (element.tagName === "H1") { baseHeight = 30; } else if (element.tagName === "H2") { baseHeight = 25; } else if (element.tagName === "P") { baseHeight = 20; } else if (element.tagName === "DIV") { baseHeight = 80; } // Adjust for page size if (pageSize === "A3") { baseHeight *= 1.4; // A3 is larger } return baseHeight; } // Update page count based on selected page size updatePageCountForSize(pageSize) { const previewFrame = this.template.querySelector( ".enhanced-editor-content" ); if (previewFrame) { let pageHeight = 297; // Default A4 height in mm switch (pageSize) { case "A3": pageHeight = 420; // A3 height in mm break; case "A4": default: pageHeight = 297; // A4 height in mm break; } // Calculate content height and estimate pages needed const contentHeight = previewFrame.scrollHeight; const contentHeightMm = contentHeight * 0.264583; // Convert px to mm const pagesNeeded = Math.ceil(contentHeightMm / pageHeight); this.pageCount = Math.max(1, Math.min(pagesNeeded, 20)); // Limit to 1-20 pages } } // Navigation methods async nextStep() { if (this.currentStep === 1 && !this.selectedTemplateId) { this.showError("Please select a template first."); return; } if (this.currentStep < 3) { this.currentStep++; // Reset click tracking when changing steps this.resetImageClickTracking(); // If moving to step 3, ensure images are loaded before loading template if (this.currentStep === 3) { // Ensure property images are loaded before creating template if (this.realPropertyImages.length === 0) { await this.loadPropertyImages(); } this.loadTemplateInStep3(); requestAnimationFrame(() => { this.updatePreviewFrameSize(this.selectedPageSize || "A4"); }); } this.scrollToTop(); } } previousStep() { if (this.currentStep > 1) { this.currentStep--; // Reset click tracking when changing steps this.resetImageClickTracking(); if (this.currentStep === 1) { this.resetStep1Grid(); } this.scrollToTop(); } } replaceStaticWithDynamic(content) { if (!this.propertyData || !content) return content; let result = content; // Replace hardcoded values with actual property data result = result.replace( /Concorde Tower/g, this.propertyData.propertyName || "Property Name" ); result = result.replace( /AED 81,999/g, this.propertyData.rentPriceMin || this.propertyData.price || "Price" ); result = result.replace( /Modern Villa/g, this.propertyData.propertyName || "Property Name" ); result = result.replace( /AED 2,500,000/g, this.propertyData.salePriceMin || this.propertyData.price || "Price" ); result = result.replace(/Dubai/g, this.propertyData.city || "Location"); result = result.replace( /This beautiful property offers exceptional value and modern amenities\./g, this.propertyData.descriptionEnglish || "Property description" ); return result; } async goToStep(event) { const step = parseInt(event.currentTarget.dataset.step); this.currentStep = step; // Reset click tracking when changing steps this.resetImageClickTracking(); if (this.currentStep === 1) { this.resetStep1Grid(); // Also reconstruct grid HTML from original snapshot if available to fully reset content if ( this.originalTemplateGridHTML && this.originalTemplateGridHTML.length > 50 ) { const grid = this.template.querySelector("#all-templates"); if (grid) { grid.innerHTML = this.originalTemplateGridHTML; } } // Restore any styles that could have been mutated during step 3 this.restoreComponentStyles(); // Rebind click handlers for fresh grid without page reload requestAnimationFrame(() => { const cards = this.template.querySelectorAll( "#all-templates .template-card" ); cards.forEach((card) => { card.onclick = this.handleTemplateSelect.bind(this); // Restore selected state if this card matches the selected template if ( this.selectedTemplateId && card.dataset.templateId === this.selectedTemplateId ) { card.classList.add("selected"); } }); }); } // If going directly to step 3, ensure images are loaded before loading template if ( this.currentStep === 3 && (!this.htmlContent || this.htmlContent.trim() === "") ) { // Ensure property images are loaded before creating template if (this.realPropertyImages.length === 0) { await this.loadPropertyImages(); } this.loadTemplateInStep3(); requestAnimationFrame(() => { this.updatePreviewFrameSize(this.selectedPageSize || "A4"); // Auto fit width for better initial experience this.fitToWidth && this.fitToWidth(); }); } this.scrollToTop(); } // Scroll to top of page when changing steps scrollToTop() { window.scrollTo({ top: 0, behavior: "smooth", }); } // Load template content into step 3 enhanced editor async loadTemplateInStep3() { if (this.selectedTemplateId && this.selectedPropertyId) { try { // Use cached content if available to prevent regeneration if ( this.cachedTemplateContent && this.cachedTemplateContent.templateId === this.selectedTemplateId && this.cachedTemplateContent.propertyId === this.selectedPropertyId ) { this.htmlContent = this.cachedTemplateContent.html; this.updatePreviewPages(); this.updatePreviewFrameSize(this.selectedPageSize); setTimeout(() => { this.updatePageCountForSize(this.selectedPageSize); this.updatePageCount(); // Set exact PDF dimensions for perfect matching const baseWidth = this.selectedPageSize === "A3" ? 1123 : 794; const baseHeight = this.selectedPageSize === "A3" ? 1587 : 1123; // Update canvas dimensions to match PDF exactly const canvas = this.template?.querySelector(".pdf-canvas"); if (canvas) { canvas.style.width = `${baseWidth}px`; canvas.style.height = `${baseHeight}px`; canvas.setAttribute('data-page-size', this.selectedPageSize); } this.fitToWidth && this.fitToWidth(); // Apply dynamic font sizing for cached content this.applyDynamicFontSizing(); // Force image reload to ensure they display properly this.forceImageReload(); // Force proper HTML rendering to match PDF exactly this.forceHTMLRendering(); }, 100); return; } // Ensure property images are loaded before creating template if (this.realPropertyImages.length === 0) { console.log("Loading property images before template creation..."); await this.loadPropertyImages(); // Double-check that images were loaded successfully if (this.realPropertyImages.length === 0) { console.warn("No property images found after loading attempt"); } else { console.log(`Successfully loaded ${this.realPropertyImages.length} property images`); } } const templateHTML = this.createTemplateHTML(); // Replace any hardcoded background-image URLs with property images const processedTemplateHTML = this.replaceBackgroundImagesInHTML(templateHTML); // Cache the template content this.cachedTemplateContent = { templateId: this.selectedTemplateId, propertyId: this.selectedPropertyId, html: processedTemplateHTML, }; // Set the HTML content for the template binding this.htmlContent = processedTemplateHTML; // Update preview pages with the new content this.updatePreviewPages(); // Set initial page size class and data attribute this.updatePreviewFrameSize(this.selectedPageSize); // Update page count after template is loaded setTimeout(() => { this.updatePageCountForSize(this.selectedPageSize); this.updatePageCount(); // Update page count display // Set exact PDF dimensions for perfect matching const baseWidth = this.selectedPageSize === "A3" ? 1123 : 794; const baseHeight = this.selectedPageSize === "A3" ? 1587 : 1123; // Update canvas dimensions to match PDF exactly const canvas = this.template?.querySelector(".pdf-canvas"); if (canvas) { canvas.style.width = `${baseWidth}px`; canvas.style.height = `${baseHeight}px`; canvas.setAttribute('data-page-size', this.selectedPageSize); } // After content settles, fit viewport to width this.fitToWidth && this.fitToWidth(); // Ensure CSS background images reflect current property images this.updateCSSBackgroundImages(); // Apply dynamic font sizing after template loads this.applyDynamicFontSizing(); // Force image reload to ensure they display properly this.forceImageReload(); // Force proper HTML rendering to match PDF exactly this.forceHTMLRendering(); }, 100); } catch (error) { this.error = "Error loading template: " + error.message; // Show error message in preview frame const previewFrame = this.template.querySelector( ".enhanced-editor-content" ); if (previewFrame) { previewFrame.innerHTML = `Error Loading Template
${error.message}
Please try selecting a different template or contact support.
No Template Selected
Please go back to step 1 and select a template.
No Property Selected
Please go back to step 2 and select a property.
${title}
${title}
Add your images here
Add your images here
${title}
Feature 1
Feature 2
Feature 3
Feature 4
${content}
${title}
Contact Information
Agent: ${data.contactName || data.Agent_Name__c || "N/A"}
Phone: ${data.contactPhone || data.Agent_Phone__c || "N/A"}
Email: ${data.contactEmail || data.Agent_Email__c || "N/A"}
Get in Touch
Ready to learn more about this property? Contact us today for a personalized consultation.
${content ? `${content}
${title}
${content || 'Add your content here...'}
Rent Price (Min): ${this.propertyData.rentPriceMin || "N/A"}
`);
}
if (this.pricingSelection.includeRentPriceMax) {
selectedFields.push(`Rent Price (Max): ${this.propertyData.rentPriceMax || "N/A"}
`);
}
if (this.pricingSelection.includeSalePriceMin) {
selectedFields.push(`Sale Price (Min): ${this.propertyData.salePriceMin || "N/A"}
`);
}
if (this.pricingSelection.includeSalePriceMax) {
selectedFields.push(`Sale Price (Max): ${this.propertyData.salePriceMax || "N/A"}
`);
}
if (selectedFields.length === 0) {
return ''; // Don't show pricing section if no fields are selected
}
return `
Pricing
${selectedFields.join('')}
-separated bullet/number lines inside a single block const brBlocks = tempDiv.querySelectorAll("p, div"); brBlocks.forEach((block) => { if (block.closest("ul,ol")) return; const html = block.innerHTML || ""; if (!/br\s*\/?/i.test(html)) return; const parts = html .split(/
${this.selectedProperty?.Name || this.propertyData?.propertyName || "Property Details" }
Exclusive Property Brochure
🏠
Property Image
Property Information
Property Type:
${this.selectedProperty.Property_Type__c ||
"N/A"
}
Location:
${this.selectedProperty.Location__c || "N/A"
}
Price:
${this.selectedProperty.Price__c
? "$" +
this.selectedProperty.Price__c.toLocaleString()
: "N/A"
}
Additional Details
Bedrooms:
${this.selectedProperty.Bedrooms__c || "N/A"
}
Bathrooms:
${this.selectedProperty.Bathrooms__c || "N/A"
}
Square Feet:
${this.selectedProperty.Square_Feet__c
? this.selectedProperty.Square_Feet__c.toLocaleString()
: "N/A"
}
Description
${this.selectedProperty.Description__c || "This beautiful property offers exceptional value and is located in a prime area. Contact us for more details and to schedule a viewing." }
Interested in this property?
Contact our team for more information and to schedule a viewing.
📞 Call Us
📧 Email Us
💬 Chat
Property Brochure
Property: ${this.selectedProperty?.Name || "Selected Property" }
Template: ${this.selectedTemplateId || "Selected Template" }
Generated on: ${new Date().toLocaleDateString()}
💡 If download didn\'t start, right-click the PDF link below and select "Save as..."'; // Add a visible download link as fallback const fallbackLink = document.createElement("a"); fallbackLink.href = pdfUrl; fallbackLink.textContent = "📄 Click here to download PDF"; fallbackLink.className = "slds-button slds-button_brand"; fallbackLink.style.marginTop = "10px"; fallbackLink.style.display = "inline-block"; progressMsg.appendChild(fallbackLink); } }, 2000); } catch (error) { this.error = "Error downloading PDF: " + error.message; } } // Handle large PDF responses async handleLargePDFResponse(decodedResponse) { try { const responseData = JSON.parse(decodedResponse); this.hideProgress(); this.isLoading = false; if (responseData.status === "large_pdf") { // Show options for large PDFs this.showLargePDFOptions(responseData); } } catch (error) { this.showError("Error handling large PDF response: " + error.message); } } // Show options for large PDFs showLargePDFOptions(responseData) { const message = ` `; this.showSuccess(message); } // Generate compressed PDF to stay under Salesforce limits async generateCompressedPDF() { try { this.showProgress("Generating compressed PDF..."); // Get current editor content const editorFrame = this.template.querySelector( ".enhanced-editor-content" ); let htmlContent = ""; if (editorFrame && editorFrame.innerHTML) { htmlContent = editorFrame.innerHTML; // Check if there are draggable elements - if so, don't regenerate template const tempDiv = document.createElement("div"); tempDiv.innerHTML = htmlContent; const draggableElements = tempDiv.querySelectorAll( ".draggable-element, .draggable-image-container, .draggable-table-container" ); if (draggableElements.length === 0 && htmlContent.length < 100) { // Only regenerate if truly empty and no draggable elements htmlContent = this.createCompleteTemplateHTML(); } } else { htmlContent = this.createCompleteTemplateHTML(); } // Call the compressed PDF generation method const compressedPDF = await generateCompressedPDF({ htmlContent: htmlContent, pageSize: this.selectedPageSize, }); if (compressedPDF) { // Process the compressed PDF const pdfBlob = this.base64ToBlob(compressedPDF, "application/pdf"); const pdfUrl = window.URL.createObjectURL(pdfBlob); // Download the compressed PDF const downloadLink = document.createElement("a"); downloadLink.href = pdfUrl; downloadLink.download = `${this.selectedProperty?.Name || "Property" }_Brochure_Compressed_${this.selectedPageSize}.pdf`; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); // Clean up setTimeout(() => { window.URL.revokeObjectURL(pdfUrl); }, 1000); this.hideProgress(); this.showSuccess( "Compressed PDF generated and downloaded successfully!" ); } } catch (error) { this.showError("Failed to generate compressed PDF: " + error.message); } } // Handle PDF download ready response async handlePDFDownloadReady(pdfResult) { try { // Hide loading state this.isLoading = false; this.hideProgress(); // Set the download info for the modal this.downloadInfo = { filename: pdfResult.filename || "Unknown", fileSize: pdfResult.file_size_mb ? pdfResult.file_size_mb + " MB" : "Unknown", generatedAt: this.formatDate(pdfResult.generated_at), expiresAt: this.formatDate(pdfResult.expires_at), downloadUrl: pdfResult.download_url, }; // Automatically open download URL in new tab window.open(pdfResult.download_url, "_blank"); // Show simple success message this.showSuccess( `✅ PDF generated successfully! File: ${pdfResult.filename} (${pdfResult.file_size_mb} MB) - Download opened in new tab.` ); this.showSuccess( `✅ PDF generated successfully! File: ${pdfResult.filename} (${pdfResult.file_size_mb} MB)` ); } catch (error) { this.showError("Error handling PDF download: " + error.message); } } // Modal control methods closeDownloadModal() { this.showDownloadModal = false; } stopPropagation(event) { event.stopPropagation(); } copyDownloadLink() { if (navigator.clipboard && this.downloadInfo) { navigator.clipboard .writeText(this.downloadInfo.downloadUrl) .then(() => { // Show feedback const copyBtn = this.template.querySelector(".copy-btn"); if (copyBtn) { const originalText = copyBtn.textContent; copyBtn.textContent = "✅ Copied!"; copyBtn.classList.add("copied"); setTimeout(() => { copyBtn.textContent = originalText; copyBtn.classList.remove("copied"); }, 2000); } }) .catch((err) => { alert("Failed to copy link to clipboard"); }); } } openInNewTab() { if (this.downloadInfo && this.downloadInfo.downloadUrl) { window.open(this.downloadInfo.downloadUrl, "_blank"); } } // Helper method to format dates formatDate(dateString) { if (!dateString) return "Unknown"; const date = new Date(dateString); return date.toLocaleString(); } // Create template HTML based on selection createTemplateHTML() { switch (this.selectedTemplateId) { case "blank-template": return this.createBlankTemplate(); case "modern-home-template": return this.createModernHomeTemplate(); case "grand-oak-villa-template": // Grand Oak Villa (black theme with gold accents) return this.createGrandOakVillaTemplate(); case "serenity-house-template": return this.createSerenityHouseTemplate(); case "luxury-mansion-template": return this.createLuxuryMansionTemplate(); case "modern-home-a3-template": return this.createModernHomeA3Template(); case "grand-oak-villa-a3-template": return this.createGrandOakVillaA3Template(); case "serenity-house-a3-template": return this.createSerenityHouseA3Template(); case "luxury-mansion-a3-template": return this.createLuxuryMansionA3Template(); default: return this.createBlankTemplate(); } } // Format description for PDF generation formatDescriptionForPDF(description) { if (!description || description.trim() === "") { return "
Property description not available.
"; } const raw = String(description).trim(); // If the description already contains HTML tags, trust it and return as-is if (/[<][a-zA-Z][^>]*>/.test(raw)) { return raw; } const escapeHtml = (str) => str .replace(/&/g, "&") .replace(//g, ">") .replace(/\"/g, """) .replace(/'/g, "'"); const lines = raw .replace(/\r\n?/g, "\n") .split("\n") .map((l) => l.trim()); const bulletRe = /^\s*(?:[-*•]|\u2022)\s+(.*)$/; // -,*,• bullets const numberedRe = /^\s*(\d+)[\.)]\s+(.*)$/; // 1. or 1) let htmlParts = []; let listType = null; // 'ul' | 'ol' let listBuffer = []; const flushList = () => { if (!listType || listBuffer.length === 0) return; htmlParts.push( `<${listType}>` + listBuffer.map((item) => `${escapeHtml(trimmed)}
`); } flushList(); return htmlParts.join(""); } // Map amenity codes to full text descriptions mapAmenityCodes(amenityCodes) { const amenityMap = { 'BA': 'Balcony', 'BR': 'Barbecue Area', 'BK': 'Built in Kitchen Appliances', 'BW': 'Built in Wardrobes', 'CO': 'Children\'s Pool', 'CS': 'Concierge Service', 'CP': 'Covered Parking', 'GY': 'Gym/Fitness Center', 'PO': 'Swimming Pool', 'GA': 'Garden', 'TE': 'Tennis Court', 'SQ': 'Squash Court', 'PL': 'Playground', 'LI': 'Library', 'CA': 'Cafeteria', 'MA': 'Maintenance Service', 'SE': 'Security Service', 'EL': 'Elevator', 'AC': 'Air Conditioning', 'HE': 'Heating', 'WA': 'Washing Machine', 'DR': 'Dryer', 'DI': 'Dishwasher', 'RE': 'Refrigerator', 'ST': 'Storage', 'RO': 'Roof Access', 'PA': 'Pet Allowed', 'SM': 'Smoking Allowed', 'WI': 'WiFi', 'CA': 'Cable TV', 'SA': 'Satellite TV', // Additional common amenities 'SA': 'Sauna', 'JA': 'Jacuzzi', 'SP': 'Spa', 'BI': 'Bike Storage', 'PE': 'Pet Friendly', 'NO': 'Non-Smoking', 'FU': 'Furnished', 'UN': 'Unfurnished', 'SE': 'Semi-Furnished', 'WO': 'Wooden Floors', 'TI': 'Tiled Floors', 'CA': 'Carpeted', 'MA': 'Marble Floors', 'GR': 'Granite Countertops', 'QU': 'Quartz Countertops', 'ST': 'Stainless Steel Appliances', 'GL': 'Glass Windows', 'DO': 'Double Glazed Windows', 'BL': 'Blinds', 'CU': 'Curtains', 'SH': 'Shutters', 'CE': 'Central Air', 'SP': 'Split AC', 'WI': 'Window AC', 'FA': 'Fans', 'LI': 'Lighting', 'CH': 'Chandelier', 'SP': 'Spotlights', 'RE': 'Recessed Lighting', 'DI': 'Dimming Lights', 'SM': 'Smart Home', 'AU': 'Automation', 'VO': 'Voice Control', 'AP': 'App Control', 'SE': 'Sensor Lights', 'MO': 'Motion Sensors', 'CA': 'Carbon Monoxide Detector', 'SM': 'Smoke Detector', 'FI': 'Fire Extinguisher', 'ES': 'Emergency Exit', 'ST': 'Staircase', 'RA': 'Ramp Access', 'WH': 'Wheelchair Accessible', 'EL': 'Electricity', 'WA': 'Water', 'GA': 'Gas', 'SE': 'Sewage', 'IN': 'Internet', 'PH': 'Phone Line', 'VE': 'Ventilation', 'IN': 'Insulation', 'SO': 'Soundproofing', 'FI': 'Fire Safety', 'CA': 'CCTV', 'AL': 'Alarm', 'IN': 'Intercom', 'DO': 'Doorman', 'PO': 'Porter', 'SE': 'Security Guard', 'PA': 'Patrol', 'GA': 'Gated Community', 'FE': 'Fenced', 'WA': 'Wall', 'GA': 'Gate', 'IN': 'Intercom Gate', 'RE': 'Remote Control', 'CA': 'Card Access', 'KE': 'Key Access', 'CO': 'Code Access', 'BI': 'Biometric Access', 'FA': 'Facial Recognition', 'FI': 'Fingerprint Access', 'IR': 'Iris Recognition', 'VO': 'Voice Recognition', 'AP': 'App Access', 'SM': 'Smart Lock', 'DI': 'Digital Lock', 'EL': 'Electronic Lock', 'MA': 'Magnetic Lock', 'RE': 'Retina Scanner', 'PA': 'Palm Scanner', 'HA': 'Hand Scanner', 'VE': 'Vein Scanner', 'RE': 'Retinal Scanner', 'IR': 'Iris Scanner', 'FA': 'Face Scanner', 'FI': 'Fingerprint Scanner', 'PA': 'Palm Scanner', 'HA': 'Hand Scanner', 'VE': 'Vein Scanner', 'RE': 'Retinal Scanner', 'IR': 'Iris Scanner', 'FA': 'Face Scanner', 'FI': 'Fingerprint Scanner', 'PA': 'Palm Scanner', 'HA': 'Hand Scanner', 'VE': 'Vein Scanner', 'BU': 'Bus Stop Nearby', 'ME': 'Metro Nearby', 'SC': 'Shopping Center Nearby', 'HO': 'Hospital Nearby', 'SC': 'School Nearby', 'RE': 'Restaurant Nearby', 'EN': 'Entertainment Nearby', 'BE': 'Beach Nearby', 'PA': 'Park Nearby', 'GO': 'Golf Course Nearby', 'MA': 'Marina Nearby', 'AI': 'Airport Nearby' }; if (!amenityCodes || amenityCodes === 'N/A') { return []; } // Split by semicolon and map each code to full text return amenityCodes.split(';') .map(code => code.trim()) .filter(code => code) .map(code => amenityMap[code] || code) // Use full name if found, otherwise use original code .filter(amenity => amenity); // Remove any empty values } // Generate amenities HTML from property data generateAmenitiesHTML(data) { const amenities = []; // Check for Private Amenities field first if (data.privateAmenities && data.privateAmenities !== 'N/A') { const privateAmenities = this.mapAmenityCodes(data.privateAmenities); amenities.push(...privateAmenities); } // Check for common amenity fields in the property data const amenityFields = [ "amenities", "features", "facilities", "amenitiesList", "propertyAmenities", "Amenities__c", "Features__c", "Facilities__c", "Property_Amenities__c", // Add the actual fields that are available in propertyData "parkingSpaces", "furnished", "offeringType", ]; // Try to find amenities in various field formats for (const field of amenityFields) { if (data[field] && data[field] !== "N/A") { if (Array.isArray(data[field])) { amenities.push(...data[field]); } else if (typeof data[field] === "string") { // For specific fields, format them properly if (field === "parkingSpaces") { amenities.push(`Parking: ${data[field]} spaces`); } else if (field === "furnished") { amenities.push(`Furnished: ${data[field]}`); } else if (field === "offeringType") { amenities.push(`Offering Type: ${data[field]}`); } else { // Split by common delimiters for other fields const amenityList = data[field] .split(/[,;|\n]/) .map((a) => a.trim()) .filter((a) => a); amenities.push(...amenityList); } } } } // If no amenities found, return empty string if (amenities.length === 0) { return 'No amenities specified
${amenity}
`
)
.join("");
}
// Generate amenity list items (
${this.generatePropertyGalleryHTMLForImages(chunk)}
Basic Information
Property Type: ${propertyType}
Status: ${status}
City: ${city}
Community: ${community}
Sub Community: ${subCommunity}
Furnished: ${furnished}
Contact Details
Name: ${data.contactName || "N/A"}
Email: ${data.contactEmail || "N/A"}
Phone: ${data.contactPhone || "N/A"}
Location Details
City (Bayut): ${data.cityBayut || "N/A"}
City (Propertyfinder): ${data.cityPropertyfinder || "N/A"}
Community (Bayut): ${data.communityBayut || "N/A"}
Sub Community (Bayut): ${data.subCommunityBayut || "N/A"}
Locality (Bayut): ${data.localityBayut || "N/A"}
Sub Locality (Bayut): ${data.subLocalityBayut || "N/A"}
Tower (Bayut): ${data.towerBayut || "N/A"}
Unit Number: ${data.unitNumber || "N/A"}
Specifications
Bedrooms: ${bedrooms}
Bathrooms: ${bathrooms}
Size: ${size} ${sizeUnit}
Parking Spaces: ${parkingSpaces}
Build Year: ${buildYear}
Floor: ${data.floor || "N/A"}
Rent Availability
Available From: ${data.rentAvailableFrom || "N/A"}
Available To: ${data.rentAvailableTo || "N/A"}
Property Description
${titleEnglish}
${descriptionEnglish}
Amenities & Features
Parking Spaces: ${data.parkingSpaces || "N/A"}
Furnished: ${data.furnished || "N/A"}
Offering Type: ${data.offeringType || "N/A"}
Build Year: ${data.buildYear || "N/A"}
${data.privateAmenities && data.privateAmenities !== 'N/A' ?
`
Private Amenities:
` : ''
}
${this.mapAmenityCodes(data.privateAmenities).map(amenity =>
`${amenity}`
).join('')}
${firstChunk.length > 0
? this.generatePropertyGalleryHTMLForImages(firstChunk)
: this.generatePropertyGalleryHTML()
}
About this Property
${description}Specifications
Type: ${propertyType}
Floor: ${floor}
Parking: ${parking}
Year Built: ${yearBuilt}
Furnishing: ${furnishing}
Maintenance Fee: ${maintenanceFee}
Service Charge: ${serviceCharge}
Amenities & Features
${amenitiesHTML}
Location & Nearby
City: ${this.propertyData.city}
Community: ${this.propertyData.community}
Sub Community: ${this.propertyData.subCommunity}
Locality: ${this.propertyData.locality}
Tower: ${this.propertyData.tower}
Unit Number: ${this.propertyData.unitNumber}
Additional Information
Available From: ${availableFrom}
Rent Available To: ${this.propertyData.rentAvailableTo}
Smoking: ${smokingAllowed}
Minimum Contract: ${minimumContract}
Security Deposit: ${securityDeposit}
Property Gallery
${chunkHTML}
${propertyName}
Property Overview
${propertyName}Description
${description}
Specifications & Location Details
${location}City
${this.propertyData.city}
Community
${this.propertyData.community}
Sub Community
${this.propertyData.subCommunity}
Locality
${this.propertyData.locality}
Tower
${this.propertyData.tower}
Unit Number
${this.propertyData.unitNumber}
Sale Price (Min):
${this.propertyData.salePriceMin}
Sale Price (Max):
${this.propertyData.salePriceMax}
Layout & Lifestyle
${propertyName}Additional Information
Parking Spaces: ${this.propertyData.parkingSpaces}
Offering Type: ${this.propertyData.offeringType}
Furnished: ${this.propertyData.furnished}
Available From: ${this.propertyData.rentAvailableFrom}
Available To: ${this.propertyData.rentAvailableTo}
Private Amenities
${this.propertyAmenitiesList.map(amenity =>
`${amenity}`
).join('')}
${propertyName}
${location}
Reference ID: ${referenceId}
${squareFeet} • ${bedrooms} Bedrooms • ${bathrooms} Bathrooms
${priceDisplay}
Property Description
${description}
Property Specifications
${bedrooms}
Bedrooms
${bathrooms}
Bathrooms
${squareFeet}
Area
Property Details
Status${status}
Year Built${yearBuilt}
Type${propertyType}
Furnishing${furnishing}
Floor${floor}
Maintenance Fee${maintenanceFee}
Parking${parking}
Service Charge${serviceCharge}
Location & Nearby
City ${this.propertyData.city}
Community ${this.propertyData.community}
Sub community ${this.propertyData.subCommunity}
Locality ${this.propertyData.locality}
Tower ${this.propertyData.tower}
Additional Information
Available from ${this.propertyData.rentAvailableFrom}
Available to ${this.propertyData.rentAvailableTo}
Smoking ${smoking}
Availability ${availability}
Utilities ${utilities}
Private Amenities
-
${this.propertyAmenitiesList.map(amenity =>
`
- • ${amenity} ` ).join('')}
Property Gallery
Visual Excellence${chunkHTML}
${propertyName}
${location}
Elevated Living
${description}
Amenities & Features
Lifestyle Amenities
- ${this.generateAmenitiesListItems(data)}
Key Specifications
Status ${status}
Property Type ${propertyType}
Year Built ${yearBuilt}
Bedrooms ${bedrooms}
Bathrooms ${bathrooms}
Parking ${parking}
Furnished ${furnishing}
Floor ${floor}
Maintenance Fee ${maintenanceFee}
Service Charge ${serviceCharge}
Floor Plans & Details
Designed for Modern Life${propertyName}
${this.propertyData.size
}
SQ. FT.
${this.propertyData.bedrooms
}
BEDROOMS
${this.propertyData.bathrooms
}
BATHROOMS
${this.propertyData.floor
}
Floors
${propertyName}
${this.propertyData.size
}
SQ. FT.
${this.propertyData.bedrooms
}
BEDROOMS
${this.propertyData.bathrooms
}
BATHROOMS
${this.propertyData.floor
}
Floors
Additional Information
Available from
${this.propertyData.rentAvailableFrom}
Rent Available To
${this.propertyData.rentAvailableTo}
Availability
${availability}
Unit Number
${this.propertyData.unitNumber}
Offereing type
${this.propertyData.offeringType}
Utilities
${utilities}
Location & Inquiry
Your Future Awaits- City: ${this.propertyData.city }
- Community: ${this.propertyData.community }
- Sub Community: ${this.propertyData.subCommunity }
- Locality: ${this.propertyData.locality }
- Tower: ${this.propertyData.tower }
- Unit Number: ${this.propertyData.unitNumber }
${this.propertyData.propertyName}
${status.toUpperCase()}
${propertyName}
${location}
Property Overview
${propertyName}Description
${description}
Specifications
Reference ID: ${referenceId}
Status: ${status}
Type: ${propertyType}
Year Built: ${yearBuilt}
Floor: ${floor}
Parking: ${parking}
Furnishing: ${furnishing}
Amenities & Features
- ${amenitiesHTML}
No images available
';
}
return this.realPropertyImages.map((img, index) => {
const title = img.title || img.pcrm__Title__c || `Property Image ${index + 1}`;
const imageUrl = img.url && img.url.startsWith('http') ? img.url :
img.url ? `https://salesforce.tech4biz.io${img.url}` :
'https://via.placeholder.com/400x200?text=No+Image';
return `
About this Property
${description}Specifications
Status: ${status}
Type: ${propertyType}
Floor: ${floor}
Parking: ${parking}
Year Built: ${yearBuilt}
Furnishing: ${furnishing}
Amenities & Features
${amenitiesHTML}
Grand Oak Villa
Luxury Living RedefinedProperty Overview
Property Name:
${propertyName}
Location:
${location}
Price:
${price}
Reference ID:
${referenceId}
Specifications
Bedrooms:
${bedrooms}
Bathrooms:
${bathrooms}
Area:
${squareFeet}
Status:
${status}
Year Built:
${yearBuilt}
Floor:
${floor}
Description
${description}
Amenities & Features
${amenitiesHTML}
Serenity House
Peaceful LivingProperty Overview
Property Name:
${propertyName}
Location:
${location}
Price:
${price}
Reference ID:
${referenceId}
Specifications
Bedrooms:
${bedrooms}
Bathrooms:
${bathrooms}
Area:
${squareFeet}
Status:
${status}
Year Built:
${yearBuilt}
Floor:
${floor}
Description
${description}
Amenities & Features
${amenitiesHTML}
Luxury Mansion
Ultimate Living ExperienceProperty Overview
Property Name:
${propertyName}
Location:
${location}
Price:
${price}
Reference ID:
${referenceId}
Specifications
Bedrooms:
${bedrooms}
Bathrooms:
${bathrooms}
Area:
${squareFeet}
Status:
${status}
Year Built:
${yearBuilt}
Floor:
${floor}
Description
${description}
Amenities & Features
${amenitiesHTML}
Agent: ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
${content}
`;
console.log("Creating content for download, length:", fullHtml.length);
// Try multiple download methods for Salesforce compatibility
try {
// Method 1: Try data URL with download attribute (no target="_blank")
const dataUrl = 'data:text/html;charset=utf-8,' + encodeURIComponent(fullHtml);
const a = document.createElement("a");
a.href = dataUrl;
a.download = `property-brochure-${Date.now()}.html`;
a.style.display = 'none';
// Remove target="_blank" to prevent opening in new tab
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
this.showSuccess("HTML file download initiated!");
} catch (error) {
console.log("Data URL download failed, trying alternative method");
// Method 2: Try creating a temporary link with blob-like behavior
try {
const textBlob = new Blob([fullHtml], { type: 'text/html' });
const url = window.URL.createObjectURL(textBlob);
const link = document.createElement("a");
link.href = url;
link.download = `property-brochure-${Date.now()}.html`;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Clean up the URL
setTimeout(() => {
window.URL.revokeObjectURL(url);
}, 100);
this.showSuccess("HTML file downloaded successfully!");
} catch (blobError) {
console.log("Blob method failed, trying text file approach");
// Method 3: Force download as text file
const textDataUrl = 'data:text/plain;charset=utf-8,' + encodeURIComponent(fullHtml);
const textLink = document.createElement("a");
textLink.href = textDataUrl;
textLink.download = `property-brochure-${Date.now()}.html`;
textLink.style.display = 'none';
document.body.appendChild(textLink);
textLink.click();
document.body.removeChild(textLink);
this.showSuccess("HTML file downloaded as text file!");
}
}
} catch (error) {
console.error("Error saving template:", error);
console.error("Error details:", error.message, error.stack);
// Try fallback method - copy to clipboard
try {
console.log("Attempting fallback save method - clipboard copy");
// Try modern clipboard API first
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(fullHtml).then(() => {
this.showSuccess("HTML copied to clipboard! You can paste it into a text editor and save as .html");
}).catch(() => {
// Continue to execCommand fallback
throw new Error("Clipboard API failed");
});
return;
}
// Fallback to execCommand
const textArea = document.createElement("textarea");
textArea.value = fullHtml;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
textArea.style.opacity = "0";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
const successful = document.execCommand('copy');
document.body.removeChild(textArea);
if (successful) {
this.showSuccess("HTML copied to clipboard! You can paste it into a text editor and save as .html");
} else {
// Last resort - show content in alert for manual copy
this.showError("Unable to download or copy. Please use the Export HTML button instead.");
}
} catch (fallbackError) {
console.error("Fallback save also failed:", fallbackError);
this.showError("Unable to save template. Please use the Export HTML button instead.");
}
}
}
handleReset() {
// Reload the template
this.loadTemplateInStep3();
}
handleLoad() {
// Create a file input to load template
const input = document.createElement("input");
input.type = "file";
input.accept = ".html,.txt";
input.onchange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result;
const editorContent = this.template.querySelector(
".enhanced-editor-content"
);
if (editorContent) {
editorContent.innerHTML = content;
this.htmlContent = content;
this.showSuccess("Template loaded successfully");
}
};
reader.readAsText(file);
}
};
input.click();
}
handleFontFamilyChange(event) { }
handleFontSizeChange(event) {
const fontSize = event.target.value;
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("fontSize", false, fontSize);
this.showSuccess(`Font size changed to ${fontSize}`);
} else {
this.showError("Please select text first");
}
}
handleBold() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("bold", false, null);
this.showSuccess("Text made bold");
} else {
this.showError("Please select text first");
}
}
handleItalic() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("italic", false, null);
this.showSuccess("Text made italic");
} else {
this.showError("Please select text first");
}
}
handleUnderline() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("underline", false, null);
this.showSuccess("Text underlined");
} else {
this.showError("Please select text first");
}
}
handleHighlight() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("hiliteColor", false, "#ffff00");
this.showSuccess("Text highlighted");
} else {
this.showError("Please select text first");
}
}
// Helper function to ensure editor is properly focused and editable
ensureEditorFocus() {
const editorContent = this.template.querySelector(
".enhanced-editor-content"
);
if (!editorContent) {
return false;
}
// Ensure contenteditable is enabled
editorContent.setAttribute("contenteditable", "true");
editorContent.style.userSelect = "text";
editorContent.style.webkitUserSelect = "text";
editorContent.style.cursor = "text";
// Focus the editor
editorContent.focus();
// Ensure the editor is in the document's active element chain
if (document.activeElement !== editorContent) {
// Try to focus a child element if the parent won't focus
const focusableChild = editorContent.querySelector(
"p, div, span, h1, h2, h3, h4, h5, h6"
);
if (focusableChild) {
focusableChild.focus();
} else {
editorContent.focus();
}
}
return true;
}
// Modern bullet and numbered list handling (no execCommand)
handleBulletList() {
const editorContent = this.template.querySelector(
".enhanced-editor-content"
);
if (!editorContent) {
this.showError("Editor not found");
return;
}
this.insertList("ul");
}
handleNumberedList() {
const editorContent = this.template.querySelector(
".enhanced-editor-content"
);
if (!editorContent) {
this.showError("Editor not found");
return;
}
this.insertList("ol");
}
// Unified list insertion method
insertList(listType) {
const editorContent = this.template.querySelector(
".enhanced-editor-content"
);
const selection = window.getSelection();
editorContent.focus();
let range;
let selectedText = "";
if (selection.rangeCount > 0) {
range = selection.getRangeAt(0);
selectedText = range.toString().trim();
} else {
range = document.createRange();
range.selectNodeContents(editorContent);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
const currentList = this.findParentList(range.commonAncestorContainer);
if (
currentList &&
currentList.tagName.toLowerCase() === listType.toLowerCase()
) {
this.convertListToParagraph(currentList);
return;
}
if (
currentList &&
currentList.tagName.toLowerCase() !== listType.toLowerCase()
) {
this.convertListType(currentList, listType);
return;
}
// Enhanced multi-line detection - prioritize actual selection
let multiLineSelection = selectedText;
// If we have a selection, use it directly
if (selectedText && selectedText.trim()) {
multiLineSelection = selectedText;
} else {
// If no selection, check for multi-line paragraph
multiLineSelection = this.detectMultiLineSelection(range, selectedText);
}
this.createNewList(listType, multiLineSelection, range);
}
// Find parent UL/OL from a node
findParentList(node) {
let current = node;
while (current && current !== document.body) {
if (current.nodeType === Node.ELEMENT_NODE) {
if (current.tagName === "UL" || current.tagName === "OL")
return current;
if (current.tagName === "LI") return current.parentElement;
}
current = current.parentElement;
}
return null;
}
// Get selected lines from current paragraph or selection
getSelectedLines(range) {
try {
// If we have a selection range, try to get only the selected lines
if (range.toString().trim()) {
const selectedText = range.toString();
const selectedLines = selectedText.split(/\r?\n/).filter((l) => l.trim());
if (selectedLines.length > 0) {
return selectedLines;
}
}
const container = range.commonAncestorContainer;
let textContent = "";
// If we're in a text node, get the parent element
if (container.nodeType === Node.TEXT_NODE) {
textContent = container.parentElement.textContent || container.textContent;
} else {
textContent = container.textContent || "";
}
// Split by newlines and filter out empty lines
const lines = textContent.split(/\r?\n/).filter((l) => l.trim());
return lines;
} catch (error) {
console.error("Error getting selected lines:", error);
return null;
}
}
// Get selected lines with HTML formatting preserved
getSelectedLinesWithHTML(range) {
try {
// If we have a selection range, try to get only the selected lines with HTML
if (range.toString().trim()) {
const selectedHTML = this.getSelectedHTML(range);
if (selectedHTML) {
// For multiple line selections, split by tags or newlines const lines = selectedHTML.split(/(
tags or newlines and filter out empty lines const lines = htmlContent.split(/(
Element Options
${img.category || "Uncategorized"
}
Select Property Image
${imageGrid}
`;
}
// Select property image
selectPropertyImage(imageUrl) {
if (this.selectedElement) {
const img = document.createElement("img");
img.src = imageUrl;
img.style.maxWidth = "200px";
img.style.height = "auto";
img.draggable = true;
img.addEventListener("dragstart", this.handleImageDragStart.bind(this));
img.addEventListener("dragend", this.handleImageDragEnd.bind(this));
img.addEventListener("dragover", this.handleImageDragOver.bind(this));
img.addEventListener("dragleave", this.handleImageDragLeave.bind(this));
img.addEventListener("drop", this.handleImageDrop.bind(this));
this.selectedElement.parentNode.insertBefore(
img,
this.selectedElement.nextSibling
);
this.clearSelection();
}
this.closePropertyImagePopup();
}
// Close property image popup
closePropertyImagePopup() {
const popup = this.template.querySelector(".property-image-popup");
if (popup) {
popup.remove();
}
}
// Create table element with enhanced drag and resize functionality
createTableElement() {
// Create the main table container with absolute positioning for drag/resize
const tableContainer = document.createElement("div");
tableContainer.className = "draggable-table-container";
tableContainer.style.cssText = `
position: absolute;
left: 50px;
top: 50px;
width: 400px;
min-width: 200px;
min-height: 150px;
z-index: 1000;
border: 2px solid transparent;
cursor: move;
user-select: none;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
`;
// Create the actual table
const table = document.createElement("table");
table.style.cssText = `
width: 100%;
height: 100%;
border-collapse: collapse;
margin: 0;
background: white;
`;
// Create header row
const headerRow = document.createElement("tr");
for (let i = 0; i < this.tableCols; i++) {
const th = document.createElement("th");
th.textContent = `Header ${i + 1}`;
th.style.cssText = `
border: 1px solid #ddd;
padding: 8px;
background: #f8f9fa;
font-weight: 600;
text-align: left;
`;
headerRow.appendChild(th);
}
table.appendChild(headerRow);
// Create data rows
const startRow = this.includeHeader ? 1 : 0;
for (let i = startRow; i < this.tableRows; i++) {
const row = document.createElement("tr");
for (let j = 0; j < this.tableCols; j++) {
const td = document.createElement("td");
td.textContent = `Cell ${i + 1},${j + 1}`;
td.style.cssText = `
border: 1px solid #ddd;
padding: 8px;
background: white;
`;
// Make cells editable
td.contentEditable = true;
td.addEventListener("blur", () => {
// Save changes when cell loses focus
});
row.appendChild(td);
}
table.appendChild(row);
}
tableContainer.appendChild(table);
// Add resize handles (same as images)
this.addResizeHandles(tableContainer);
// Add delete handle (same as images)
this.addDeleteHandle(tableContainer);
// Add drag functionality (same as images)
this.makeDraggable(tableContainer);
// Add click to select functionality
tableContainer.addEventListener("click", (e) => {
e.stopPropagation();
this.selectDraggableElement(tableContainer);
});
// Add table controls overlay
this.addTableControls(tableContainer, table);
// Select the table after a short delay
setTimeout(() => {
this.selectDraggableElement(tableContainer);
}, 100);
return tableContainer;
}
// Add table controls overlay
addTableControls(container, table) {
const controls = document.createElement("div");
controls.className = "table-controls-overlay";
controls.style.cssText = `
position: absolute;
top: -40px;
left: 0;
background: white;
padding: 8px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
opacity: 0;
transition: opacity 0.2s ease;
display: flex;
gap: 4px;
z-index: 1002;
`;
// Add Row button
const addRowBtn = document.createElement("button");
addRowBtn.innerHTML = "+ Row";
addRowBtn.style.cssText = `
padding: 4px 8px;
font-size: 12px;
background: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
addRowBtn.onclick = (e) => {
e.stopPropagation();
this.addTableRow(table);
};
// Add Column button
const addColBtn = document.createElement("button");
addColBtn.innerHTML = "+ Col";
addColBtn.style.cssText = `
padding: 4px 8px;
font-size: 12px;
background: #17a2b8;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
addColBtn.onclick = (e) => {
e.stopPropagation();
this.addTableColumn(table);
};
// Delete Row button
const delRowBtn = document.createElement("button");
delRowBtn.innerHTML = "- Row";
delRowBtn.style.cssText = `
padding: 4px 8px;
font-size: 12px;
background: #ffc107;
color: black;
border: none;
border-radius: 4px;
cursor: pointer;
`;
delRowBtn.onclick = (e) => {
e.stopPropagation();
this.deleteTableRow(table);
};
// Delete Column button
const delColBtn = document.createElement("button");
delColBtn.innerHTML = "- Col";
delColBtn.style.cssText = `
padding: 4px 8px;
font-size: 12px;
background: #fd7e14;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
delColBtn.onclick = (e) => {
e.stopPropagation();
this.deleteTableColumn(table);
};
controls.appendChild(addRowBtn);
controls.appendChild(addColBtn);
controls.appendChild(delRowBtn);
controls.appendChild(delColBtn);
container.appendChild(controls);
// Show/hide controls on hover
container.addEventListener("mouseenter", () => {
controls.style.opacity = "1";
});
container.addEventListener("mouseleave", () => {
controls.style.opacity = "1";
});
}
// Table manipulation methods (updated for new structure)
addTableRow(table) {
const newRow = document.createElement("tr");
const colCount = table.rows[0].cells.length;
for (let i = 0; i < colCount; i++) {
const td = document.createElement("td");
td.textContent = `New Cell`;
td.style.cssText = `
border: 1px solid #ddd;
padding: 8px;
background: white;
`;
td.contentEditable = true;
newRow.appendChild(td);
}
table.appendChild(newRow);
}
addTableColumn(table) {
const rows = table.rows;
for (let i = 0; i < rows.length; i++) {
const cell = document.createElement(i === 0 ? "th" : "td");
cell.textContent =
i === 0 ? `Header ${rows[i].cells.length + 1}` : `New Cell`;
cell.style.cssText = `
border: 1px solid #ddd;
padding: 8px;
background: ${i === 0 ? "#f8f9fa" : "white"};
font-weight: ${i === 0 ? "600" : "normal"};
`;
if (i > 0) {
cell.contentEditable = true;
}
rows[i].appendChild(cell);
}
}
deleteTableRow(table) {
if (table.rows.length > 1) {
table.deleteRow(-1);
}
}
deleteTableColumn(table) {
const rows = table.rows;
if (rows[0].cells.length > 1) {
for (let i = 0; i < rows.length; i++) {
rows[i].deleteCell(-1);
}
}
}
deleteTable(event) {
const tableContainer = event.target.closest("div");
tableContainer.remove();
}
// Make images draggable and resizable
makeImagesDraggableAndResizable() {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) return;
const images = editor.querySelectorAll("img");
images.forEach((img) => {
// Prevent position changes on click
img.style.position = "relative";
img.style.zIndex = "1000";
img.style.transition = "none"; // Disable transitions during drag
// Add resize handles
this.addResizeHandles(img);
// Add smooth drag event listeners
img.addEventListener("mousedown", this.handleImageMouseDown.bind(this));
img.addEventListener("mousemove", this.handleImageMouseMove.bind(this));
img.addEventListener("mouseup", this.handleImageMouseUp.bind(this));
img.addEventListener("mouseleave", this.handleImageMouseUp.bind(this));
});
}
// Smooth drag handlers for images
handleImageMouseDown(e) {
if (e.target.tagName !== "IMG") return;
e.preventDefault();
this.isDraggingImage = true;
this.dragStartX = e.clientX;
this.dragStartY = e.clientY;
this.dragElement = e.target;
this.dragInitiated = false; // will flip to true only after threshold is exceeded
// Store initial position
const rect = this.dragElement.getBoundingClientRect();
const editor = this.template.querySelector(".enhanced-editor-content");
const editorRect = editor.getBoundingClientRect();
this.initialLeft = rect.left - editorRect.left;
this.initialTop = rect.top - editorRect.top;
// Add dragging class for visual feedback
this.dragElement.style.cursor = "grabbing";
// Prevent text selection during drag
document.body.style.userSelect = "none";
}
handleImageMouseMove(e) {
if (!this.isDraggingImage || !this.dragElement) return;
e.preventDefault();
const deltaX = e.clientX - this.dragStartX;
const deltaY = e.clientY - this.dragStartY;
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
// Only start moving the image if the cursor moved beyond a small threshold
if (!this.dragInitiated && distance > 5) {
this.dragInitiated = true;
this.dragElement.style.opacity = "0.85";
this.dragElement.style.position = "absolute";
}
if (!this.dragInitiated) return;
// Update position smoothly after drag actually begins
this.dragElement.style.left = this.initialLeft + deltaX + "px";
this.dragElement.style.top = this.initialTop + deltaY + "px";
}
handleImageMouseUp(e) {
if (!this.isDraggingImage || !this.dragElement) return;
this.isDraggingImage = false;
// Restore cursor and opacity
this.dragElement.style.cursor = "grab";
this.dragElement.style.opacity = "";
// Re-enable text selection
document.body.style.userSelect = "";
// Save undo state after drag
if (this.dragInitiated) {
this.saveUndoState();
}
this.dragElement = null;
this.dragInitiated = false;
}
// Add resize handles to image
addResizeHandles(img) {
const handles = ["nw", "ne", "sw", "se"];
handles.forEach((handle) => {
const resizeHandle = document.createElement("div");
resizeHandle.className = `resize-handle resize-${handle}`;
resizeHandle.style.cssText = `
position: absolute;
width: 8px;
height: 8px;
background: #6b7280;
border: 1px solid white;
cursor: ${handle}-resize;
z-index: 1001;
`;
// Position handles
switch (handle) {
case "nw":
resizeHandle.style.top = "-4px";
resizeHandle.style.left = "-4px";
break;
case "ne":
resizeHandle.style.top = "-4px";
resizeHandle.style.right = "-4px";
break;
case "sw":
resizeHandle.style.bottom = "-4px";
resizeHandle.style.left = "-4px";
break;
case "se":
resizeHandle.style.bottom = "-4px";
resizeHandle.style.right = "-4px";
break;
}
img.appendChild(resizeHandle);
// Add resize functionality
resizeHandle.addEventListener("mousedown", (e) => {
e.preventDefault();
this.startResize(e, img, handle);
});
});
}
// Handle image drag start
handleImageDragStart(event) {
console.log("=== IMAGE DRAG START ===");
console.log("Dragged element:", event.target);
console.log("Element src:", event.target.src);
console.log("Element alt:", event.target.alt);
console.log("Element draggable:", event.target.draggable);
// Store the dragged image element and its properties
this.draggedImageElement = event.target;
this.draggedImageSrc = event.target.src;
this.draggedImageAlt = event.target.alt;
event.dataTransfer.setData("text/plain", "image");
event.dataTransfer.effectAllowed = "move";
// Add visual feedback
event.target.style.opacity = "0.5";
event.target.style.transform = "scale(0.95)";
event.target.style.transition = "all 0.2s ease";
console.log("✅ Drag state stored:", {
element: this.draggedImageElement,
src: this.draggedImageSrc,
alt: this.draggedImageAlt
});
// Test: Add a simple alert to confirm drag is working
console.log("🚀 DRAG STARTED - Check if you see this message!");
}
// Handle image drag end
handleImageDragEnd(event) {
// Remove visual feedback
if (this.draggedImageElement) {
this.draggedImageElement.style.opacity = "";
this.draggedImageElement.style.transform = "";
}
// Clear drag state
this.draggedImageElement = null;
this.draggedImageSrc = null;
this.draggedImageAlt = null;
}
// Handle image drag over
handleImageDragOver(event) {
console.log("🔄 DRAG OVER EVENT!");
event.preventDefault();
event.dataTransfer.dropEffect = "move";
// Find the target image element (could be the target itself or a child)
let targetImage = event.target;
if (event.target.tagName !== 'IMG') {
targetImage = event.target.querySelector('img');
}
// Add visual feedback to drop target
if (targetImage && targetImage.tagName === 'IMG' && targetImage !== this.draggedImageElement) {
console.log("🎯 Valid drop target detected:", targetImage);
targetImage.style.border = "3px dashed #007bff";
targetImage.style.borderRadius = "8px";
targetImage.style.transition = "all 0.2s ease";
}
}
// Handle image drag leave
handleImageDragLeave(event) {
// Find the target image element (could be the target itself or a child)
let targetImage = event.target;
if (event.target.tagName !== 'IMG') {
targetImage = event.target.querySelector('img');
}
// Remove visual feedback
if (targetImage && targetImage.tagName === 'IMG') {
targetImage.style.border = "";
targetImage.style.borderRadius = "";
}
}
// Handle image drop for swapping
handleImageDrop(event) {
console.log("🎯 DROP EVENT TRIGGERED!");
event.preventDefault();
event.stopPropagation();
console.log("=== IMAGE DROP EVENT ===");
console.log("Event target:", event.target);
console.log("Event target tagName:", event.target.tagName);
console.log("Dragged image element:", this.draggedImageElement);
console.log("Dragged image src:", this.draggedImageSrc);
// Find the target image element (could be the target itself or a child)
let targetImage = event.target;
if (event.target.tagName !== 'IMG') {
// Look for an img element within the target
targetImage = event.target.querySelector('img');
console.log("Looking for img in container, found:", targetImage);
}
// Remove visual feedback
if (targetImage && targetImage.tagName === 'IMG') {
targetImage.style.border = "";
targetImage.style.borderRadius = "";
}
// Check if we're dropping on another image
if (targetImage &&
targetImage.tagName === 'IMG' &&
this.draggedImageElement &&
targetImage !== this.draggedImageElement) {
console.log("✅ Valid drop detected - performing swap");
console.log("Target image:", targetImage);
// Swap the image sources
const targetImageSrc = targetImage.src;
const targetImageAlt = targetImage.alt;
console.log("Target image src:", targetImageSrc);
console.log("Target image alt:", targetImageAlt);
// Perform the swap
targetImage.src = this.draggedImageSrc;
targetImage.alt = this.draggedImageAlt;
this.draggedImageElement.src = targetImageSrc;
this.draggedImageElement.alt = targetImageAlt;
console.log("✅ Images swapped successfully!");
console.log("New target src:", targetImage.src);
console.log("New dragged src:", this.draggedImageElement.src);
// Show success message
this.showSuccess("Images swapped successfully!");
// Save undo state
this.saveUndoState();
} else {
console.log("❌ Invalid drop - conditions not met");
console.log("Target image found:", !!targetImage);
console.log("Is IMG:", targetImage && targetImage.tagName === 'IMG');
console.log("Has dragged element:", !!this.draggedImageElement);
console.log("Different elements:", targetImage !== this.draggedImageElement);
}
}
// Start resize operation
startResize(event, target, handle) {
const container = target.classList.contains("draggable-image-container")
? target
: target.parentElement;
const startX = event.clientX;
const startY = event.clientY;
const startWidth = container.offsetWidth;
const startHeight = container.offsetHeight;
const startLeft = container.offsetLeft;
const startTop = container.offsetTop;
const handleMouseMove = (e) => {
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
let newWidth = startWidth;
let newHeight = startHeight;
let newLeft = startLeft;
let newTop = startTop;
switch (handle) {
case "se":
newWidth = startWidth + deltaX;
newHeight = startHeight + deltaY;
break;
case "sw":
newWidth = startWidth - deltaX;
newHeight = startHeight + deltaY;
newLeft = startLeft + deltaX;
break;
case "ne":
newWidth = startWidth + deltaX;
newHeight = startHeight - deltaY;
newTop = startTop + deltaY;
break;
case "nw":
newWidth = startWidth - deltaX;
newHeight = startHeight - deltaY;
newLeft = startLeft + deltaX;
newTop = startTop + deltaY;
break;
}
container.style.width = Math.max(50, newWidth) + "px";
container.style.height = Math.max(50, newHeight) + "px";
container.style.left = newLeft + "px";
container.style.top = newTop + "px";
};
const handleMouseUp = () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
}
handleAlignLeft() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("justifyLeft", false, null);
this.showSuccess("Text aligned left");
} else {
this.showError("Please select text first");
}
}
handleAlignCenter() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("justifyCenter", false, null);
this.showSuccess("Text aligned center");
} else {
this.showError("Please select text first");
}
}
handleAlignRight() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("justifyRight", false, null);
this.showSuccess("Text aligned right");
} else {
this.showError("Please select text first");
}
}
handleTextColorChange(event) {
const color = event.target.value;
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("foreColor", false, color);
this.showSuccess(`Text color changed to ${color}`);
} else {
this.showError("Please select text first");
}
}
handleBackgroundColorChange(event) {
const color = event.target.value;
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("hiliteColor", false, color);
this.showSuccess(`Background color changed to ${color}`);
} else {
this.showError("Please select text first");
}
}
handleIndent() {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) {
this.showError("Editor not found");
return;
}
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) {
editor.focus();
return;
}
const range = selection.getRangeAt(0);
// If inside a list item, increase nesting by wrapping current LI into a new nested UL
let li = range.commonAncestorContainer;
while (li && li.nodeType === Node.ELEMENT_NODE && li.tagName !== "LI") {
li = li.parentElement;
}
if (li && li.tagName === "LI") {
// Move LI into a nested list if not already first-level child of a nested list
const parentList = li.parentElement;
let prev = li.previousElementSibling;
if (!prev) {
// If no previous sibling, create a new empty LI to hold the nested list
prev = document.createElement("li");
prev.innerHTML = "";
parentList.insertBefore(prev, li);
}
let nested = prev.querySelector("ul, ol");
if (!nested) {
nested = document.createElement(parentList.tagName.toLowerCase());
prev.appendChild(nested);
}
nested.appendChild(li);
return;
}
// Otherwise add a visual tab (4 NBSP) at the start of the current block
const getBlock = (node) => {
let n = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
while (n && !/(P|DIV|LI|H1|H2|H3|H4|H5|H6)/i.test(n.tagName)) {
n = n.parentElement;
}
return n || editor;
};
const block = getBlock(range.startContainer);
if (!block) return;
const TAB = "\u00A0\u00A0\u00A0\u00A0"; // 4 NBSP
const first = block.firstChild;
if (first && first.nodeType === Node.TEXT_NODE) {
first.textContent = TAB + first.textContent;
} else {
block.insertBefore(document.createTextNode(TAB), first || null);
}
editor.dispatchEvent(new Event("input", { bubbles: true }));
}
handleOutdent() {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) {
this.showError("Editor not found");
return;
}
const sel1 = window.getSelection();
if (!sel1 || sel1.rangeCount === 0) {
editor.focus();
return;
}
const range1 = sel1.getRangeAt(0);
// If inside a nested list, move LI up one level
let li = range1.commonAncestorContainer;
while (li && li.nodeType === Node.ELEMENT_NODE && li.tagName !== "LI") {
li = li.parentElement;
}
if (li && li.tagName === "LI") {
const parentList = li.parentElement; // UL/OL
const listContainer = parentList.parentElement; // LI or block
if (listContainer && listContainer.tagName === "LI") {
// Move current LI to be after its parent LI
listContainer.parentElement.insertBefore(li, listContainer.nextSibling);
return;
}
}
// Otherwise, remove one indentation level (up to 4 NBSP/spaces) at start of the current block
const getBlock = (node) => {
let n = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
while (n && !/(P|DIV|LI|H1|H2|H3|H4|H5|H6)/i.test(n.tagName)) {
n = n.parentElement;
}
return n || editor;
};
const block = getBlock(range1.startContainer);
if (!block) return;
const first = block.firstChild;
if (first && first.nodeType === Node.TEXT_NODE) {
// Remove up to 4 leading NBSP/spaces
first.textContent = first.textContent.replace(/^(?:\u00A0|\s){1,4}/, "");
}
editor.dispatchEvent(new Event("input", { bubbles: true }));
}
handleFontFamilyChange(event) {
const fontFamily = event.target.value;
const selection = window.getSelection();
if (selection.rangeCount > 0) {
document.execCommand("fontName", false, fontFamily);
this.showSuccess(`Font family changed to ${fontFamily}`);
} else {
this.showError("Please select text first");
}
}
handleContentChange() {
// Update the HTML content when user types in the editor
const editorContent = this.template.querySelector(
".enhanced-editor-content"
);
if (editorContent) {
this.htmlContent = editorContent.innerHTML;
}
}
openPdfPreview() {
// Get current content from editor
const editorContent = this.template.querySelector(
".enhanced-editor-content"
);
if (editorContent) {
this.htmlContent = editorContent.innerHTML;
}
this.showPdfPreview = true;
}
closePdfPreview() {
this.showPdfPreview = false;
}
generatePdfFromPreview() {
// Close preview and generate PDF
this.showPdfPreview = false;
this.generatePdfSimple();
}
// Property insertion functions
insertPropertyName() {
this.ensureEditorFocus();
const propertyName = this.propertyData.propertyName || this.propertyData.Name || "Property Name";
this.insertTextAtCursor(propertyName + " | ");
}
insertPropertyPrice() {
this.ensureEditorFocus();
// Get the first selected pricing field
let price = "Price on Request";
if (this.pricingSelection.includeSalePriceMin && this.propertyData.salePriceMin && this.propertyData.salePriceMin !== "N/A") {
price = this.propertyData.salePriceMin;
} else if (this.pricingSelection.includeRentPriceMin && this.propertyData.rentPriceMin && this.propertyData.rentPriceMin !== "N/A") {
price = this.propertyData.rentPriceMin;
} else if (this.propertyData.price && this.propertyData.price !== "N/A") {
price = this.propertyData.price;
}
this.insertTextAtCursor(price + " | ");
}
insertPropertyType() {
this.ensureEditorFocus();
const type = this.propertyData.propertyType || this.propertyData.Property_Type__c || "Property Type";
this.insertTextAtCursor(type + " | ");
}
insertPropertyBathrooms() {
const bathrooms = this.propertyData.bathrooms || this.propertyData.Bathrooms__c || "0";
this.insertTextAtCursor(bathrooms + " | ");
}
insertPropertySqft() {
const sqft = this.propertyData.area || this.propertyData.size || this.propertyData.Square_Footage__c || "0";
this.insertTextAtCursor(sqft + " | ");
}
insertPropertyAddress() {
const address = this.propertyData.location || this.propertyData.Location__c || "Property Address";
this.insertTextAtCursor(address + " | ");
}
insertPropertyDescription() {
this.ensureEditorFocus();
const description = this.propertyData.descriptionEnglish || this.propertyData.Description_English__c || this.propertyData.Description__c || "Property Description";
// Wrap into paragraphs and basic formatting
const lines = String(description)
.split(/\n+/)
.map((l) => l.trim())
.filter(Boolean);
const html = lines.map((l) => `${l}
`).join(""); this.insertHtmlAtCursor(html); } // Additional property insertion methods insertPropertyBedrooms() { const bedrooms = this.propertyData.bedrooms || this.propertyData.Bedrooms__c || "0"; this.insertTextAtCursor(bedrooms + " | "); } insertPropertyStatus() { const status = this.propertyData.status || this.propertyData.Status__c || "Available"; this.insertTextAtCursor(status + " | "); } insertPropertyCity() { const city = this.propertyData.city || this.propertyData.City__c || "City"; this.insertTextAtCursor(city + " | "); } insertPropertyCommunity() { const community = this.propertyData.community || this.propertyData.Community__c || "Community"; this.insertTextAtCursor(community + " | "); } insertPropertyFloor() { const floor = this.propertyData.floor || this.propertyData.Floor__c || "N/A"; this.insertTextAtCursor(floor + " | "); } insertPropertyBuildYear() { const buildYear = this.propertyData.buildYear || this.propertyData.yearBuilt || this.propertyData.Build_Year__c || "N/A"; this.insertTextAtCursor(buildYear + " | "); } insertPropertyParking() { const parking = this.propertyData.parking || this.propertyData.parkingSpaces || this.propertyData.Parking_Spaces__c || "N/A"; this.insertTextAtCursor(parking + " | "); } insertPropertyFurnished() { const furnished = this.propertyData.furnished || this.propertyData.furnishing || this.propertyData.Furnished__c || "N/A"; this.insertTextAtCursor(furnished + " | "); } insertPropertyOfferingType() { const offeringType = this.propertyData.offeringType || this.propertyData.Offering_Type__c || "N/A"; this.insertTextAtCursor(offeringType + " | "); } insertPropertyRentPrice() { const rentPrice = this.propertyData.rentPriceMin || this.propertyData.Rent_Price_min__c || "N/A"; this.insertTextAtCursor(rentPrice + " | "); } insertPropertySalePrice() { const salePrice = this.propertyData.salePriceMin || this.propertyData.Sale_Price_min__c || "N/A"; this.insertTextAtCursor(salePrice + " | "); } insertPropertyContactName() { const contactName = this.propertyData.contactName || this.propertyData.Contact_Name__c || "Contact Name"; this.insertTextAtCursor(contactName + " | "); } insertPropertyContactEmail() { const contactEmail = this.propertyData.contactEmail || this.propertyData.Contact_Email__c || "contact@example.com"; this.insertTextAtCursor(contactEmail + " | "); } insertPropertyContactPhone() { const contactPhone = this.propertyData.contactPhone || this.propertyData.Contact_Phone__c || "N/A"; this.insertTextAtCursor(contactPhone + " | "); } insertPropertyReferenceNumber() { const referenceNumber = this.propertyData.referenceNumber || this.propertyData.Reference_Number__c || "REF-001"; this.insertTextAtCursor(referenceNumber + " | "); } insertPropertyTitle() { const title = this.propertyData.titleEnglish || this.propertyData.Title_English__c || "Property Title"; this.insertTextAtCursor(title + " | "); } insertPropertyLocality() { const locality = this.propertyData.locality || this.propertyData.Locality__c || "Locality"; this.insertTextAtCursor(locality + " | "); } insertPropertyTower() { const tower = this.propertyData.tower || this.propertyData.Tower__c || "N/A"; this.insertTextAtCursor(tower + " | "); } insertPropertyUnitNumber() { const unitNumber = this.propertyData.unitNumber || this.propertyData.Unit_Number__c || "N/A"; this.insertTextAtCursor(unitNumber + " | "); } insertPropertyRentAvailableFrom() { const rentAvailableFrom = this.propertyData.rentAvailableFrom || this.propertyData.Rent_Available_From__c || "N/A"; this.insertTextAtCursor(rentAvailableFrom + " | "); } insertPropertyRentAvailableTo() { const rentAvailableTo = this.propertyData.rentAvailableTo || this.propertyData.Rent_Available_To__c || "N/A"; this.insertTextAtCursor(rentAvailableTo + " | "); } // Helper function to ensure editor is focused ensureEditorFocus() { const editor = this.template.querySelector(".enhanced-editor-content"); if (editor) { editor.focus(); } } // Dynamic font sizing based on content length and viewport applyDynamicFontSizing() { const editor = this.template.querySelector(".enhanced-editor-content"); if (!editor) return; // Get all text elements in the editor const textElements = editor.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, div'); textElements.forEach(element => { const text = element.textContent || element.innerText || ''; const textLength = text.length; const viewportWidth = window.innerWidth; // Remove existing content classes element.classList.remove('content-short', 'content-medium', 'content-long'); // Determine content scale class based on text length if (textLength < 50) { element.classList.add('content-short'); } else if (textLength < 200) { element.classList.add('content-medium'); } else { element.classList.add('content-long'); } // Add viewport-based classes element.classList.remove('viewport-small', 'viewport-large', 'viewport-xl'); if (viewportWidth < 480) { element.classList.add('viewport-small'); } else if (viewportWidth > 1600) { element.classList.add('viewport-xl'); } else if (viewportWidth > 1200) { element.classList.add('viewport-large'); } }); } // Enhanced content change handler with dynamic font sizing handleContentChangeWithDynamicSizing() { this.handleContentChange(); // Apply dynamic font sizing after a short delay to ensure DOM is updated setTimeout(() => { this.applyDynamicFontSizing(); }, 100); } // Helper function to get center position of the screen for element insertion getCenterPosition() { const editor = this.template.querySelector(".enhanced-editor-content"); if (!editor) { return { x: 50, y: 50 }; // Default position if editor not found } const editorRect = editor.getBoundingClientRect(); // Get screen center position const screenCenterX = window.innerWidth / 2; const screenCenterY = window.innerHeight / 2 - (window.innerHeight * 0.5); // Bring up by 60vh // Calculate position relative to editor const x = screenCenterX - editorRect.left; const y = screenCenterY - editorRect.top; // Offset by half the element size to center it properly // Default element sizes: images (300x200), text (150x40), tables (400x150) const elementWidth = 300; // Default width for most elements const elementHeight = 200; // Default height for most elements const finalX = x - (elementWidth / 2); const finalY = y - (elementHeight / 2); // Ensure position is within editor bounds const maxX = editorRect.width - elementWidth; const maxY = editorRect.height - elementHeight; return { x: Math.max(10, Math.min(finalX, maxX)), y: Math.max(10, Math.min(finalY, maxY)) }; } // Helper function to get center position for specific element types getCenterPositionForElement(elementType = 'default') { const editor = this.template.querySelector(".enhanced-editor-content"); if (!editor) { return { x: 50, y: 50 }; } const editorRect = editor.getBoundingClientRect(); // Get screen center position const screenCenterX = window.innerWidth / 2; const screenCenterY = window.innerHeight / 2 - (window.innerHeight * 0.6); // Bring up by 60vh // Calculate position relative to editor const x = screenCenterX - editorRect.left; const y = screenCenterY - editorRect.top; // Define element-specific dimensions let elementWidth, elementHeight; switch(elementType) { case 'image': elementWidth = 300; elementHeight = 200; break; case 'text': elementWidth = 150; elementHeight = 40; break; case 'table': elementWidth = 400; elementHeight = 150; break; default: elementWidth = 300; elementHeight = 200; } const finalX = x - (elementWidth / 2); const finalY = y - (elementHeight / 2); // Ensure position is within editor bounds const maxX = editorRect.width - elementWidth; const maxY = editorRect.height - elementHeight; return { x: Math.max(10, Math.min(finalX, maxX)), y: Math.max(10, Math.min(finalY, maxY)) }; } // Helper function to insert text at cursor position insertTextAtCursor(text) { const editor = this.template.querySelector(".enhanced-editor-content"); if (!editor) { this.showError("Editor not found"); return; } const selection = window.getSelection(); let range; if (selection.rangeCount > 0) { // Use existing cursor position range = selection.getRangeAt(0); } else { // No cursor position, place at end of editor content range = document.createRange(); range.selectNodeContents(editor); range.collapse(false); // Move to end } range.deleteContents(); const textNode = document.createTextNode(text); range.insertNode(textNode); range.setStartAfter(textNode); range.setEndAfter(textNode); selection.removeAllRanges(); selection.addRange(range); // Focus the editor to ensure cursor is visible editor.focus(); this.showSuccess(`Inserted: ${text}`); } // Helper to insert HTML at cursor insertHtmlAtCursor(html) { const editor = this.template.querySelector(".enhanced-editor-content"); if (!editor) { this.showError("Editor not found"); return; } const selection = window.getSelection(); let range; if (selection.rangeCount > 0) { // Use existing cursor position range = selection.getRangeAt(0); } else { // No cursor position, place at end of editor content range = document.createRange(); range.selectNodeContents(editor); range.collapse(false); // Move to end } range.deleteContents(); const temp = document.createElement("div"); temp.innerHTML = html; const fragment = document.createDocumentFragment(); while (temp.firstChild) { fragment.appendChild(temp.firstChild); } range.insertNode(fragment); // Move caret to end of inserted content range.collapse(false); selection.removeAllRanges(); selection.addRange(range); // Focus the editor to ensure cursor is visible editor.focus(); const editorContent = this.template.querySelector( ".enhanced-editor-content" ); if (editorContent) editorContent.dispatchEvent(new Event("input", { bubbles: true })); } // Setup editor click handler to deselect elements setupEditorClickHandler() { const editor = this.template.querySelector(".enhanced-editor-content"); if (editor && !editor.hasClickHandler) { editor.addEventListener("click", (e) => { console.log("=== CLICK EVENT DETECTED ==="); console.log("Click target:", e.target); console.log("Click coordinates:", { x: e.clientX, y: e.clientY }); console.log("Target details:", { tagName: e.target.tagName, className: e.target.className, id: e.target.id, src: e.target.src }); // Enhanced image detection - check multiple ways to find images let clickedImage = null; // Method 1: Direct image click console.log("=== METHOD 1: Direct image click ==="); if ( e.target.tagName === "IMG" && e.target.src && e.target.src.trim() !== "" ) { clickedImage = e.target; console.log("✅ Method 1 SUCCESS: Direct IMG click detected", clickedImage); } else { console.log("❌ Method 1 FAILED: Not a direct IMG click"); } // Method 2: Click on element containing an image (children) console.log("=== METHOD 2: Element containing image ==="); if (!clickedImage && e.target.querySelector) { const containedImg = e.target.querySelector("img"); if ( containedImg && containedImg.src && containedImg.src.trim() !== "" ) { clickedImage = containedImg; console.log("✅ Method 2 SUCCESS: Container with IMG detected", clickedImage); } else { console.log("❌ Method 2 FAILED: No IMG in container"); } } else { console.log("❌ Method 2 SKIPPED: No querySelector or already found image"); } // Method 3: Click on element that is inside a container with an image (parent traversal) console.log("=== METHOD 3: Parent traversal ==="); if (!clickedImage) { let currentElement = e.target; let traversalCount = 0; while (currentElement && currentElement !== editor && traversalCount < 10) { traversalCount++; console.log(`Traversal step ${traversalCount}:`, { tagName: currentElement.tagName, className: currentElement.className, id: currentElement.id }); // Check if current element is an IMG if ( currentElement.tagName === "IMG" && currentElement.src && currentElement.src.trim() !== "" ) { clickedImage = currentElement; console.log("✅ Method 3 SUCCESS: Found IMG in parent traversal", clickedImage); break; } // Check if current element contains an IMG if ( currentElement.querySelector && currentElement.querySelector("img") ) { const img = currentElement.querySelector("img"); if (img && img.src && img.src.trim() !== "") { clickedImage = img; console.log("✅ Method 3 SUCCESS: Found IMG in container during traversal", clickedImage); break; } } // Check siblings for IMG elements only if current element is positioned if ( currentElement.parentElement && (currentElement.style.position === "absolute" || currentElement.style.position === "relative" || currentElement.classList.contains("draggable-element")) ) { const siblingImg = currentElement.parentElement.querySelector("img"); if ( siblingImg && siblingImg.src && siblingImg.src.trim() !== "" ) { clickedImage = siblingImg; break; } } currentElement = currentElement.parentElement; } if (!clickedImage) { console.log("❌ Method 3 FAILED: No IMG found in parent traversal"); } } else { console.log("❌ Method 3 SKIPPED: Already found image"); } // Method 4: Check for background images in the element hierarchy (enhanced for property cards) console.log("=== METHOD 4: Background image detection ==="); if (!clickedImage) { let currentElement = e.target; let heroBackgroundImage = null; let otherBackgroundImage = null; let clickedElementBackgroundImage = null; // First, check the clicked element and its immediate children for background images console.log("Checking clicked element and immediate children first..."); const elementsToCheck = [currentElement]; // Add immediate children that might have background images if (currentElement.children) { for (let child of currentElement.children) { elementsToCheck.push(child); } } for (let element of elementsToCheck) { const computedStyle = window.getComputedStyle(element); const backgroundImage = computedStyle.backgroundImage; if ( backgroundImage && backgroundImage !== "none" && backgroundImage !== "initial" ) { // Check if this is a hero section const isHeroSection = element.classList.contains('hero') || element.classList.contains('p1-image-side') || element.classList.contains('p2-image') || element.classList.contains('cover-page') || element.classList.contains('banner'); if (isHeroSection) { // Create a virtual IMG element for hero background images const virtualImg = document.createElement("img"); virtualImg.src = backgroundImage.replace( /url\(['"]?(.+?)['"]?\)/, "$1" ); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = backgroundImage; virtualImg.originalElement = element; heroBackgroundImage = virtualImg; console.log("✅ Method 4 SUCCESS: Found HERO background image in clicked area", virtualImg); break; // Prioritize hero sections - break immediately } else if (element === currentElement) { // Store the clicked element's background image as priority const virtualImg = document.createElement("img"); virtualImg.src = backgroundImage.replace( /url\(['"]?(.+?)['"]?\)/, "$1" ); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = backgroundImage; virtualImg.originalElement = element; clickedElementBackgroundImage = virtualImg; console.log("✅ Method 4: Found clicked element background image", virtualImg); } else { // Store other background images for fallback if (!otherBackgroundImage) { const virtualImg = document.createElement("img"); virtualImg.src = backgroundImage.replace( /url\(['"]?(.+?)['"]?\)/, "$1" ); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = backgroundImage; virtualImg.originalElement = element; otherBackgroundImage = virtualImg; console.log("✅ Method 4: Found other background image", virtualImg); } } } } // If no hero image found in clicked area, traverse up the DOM tree if (!heroBackgroundImage) { console.log("No hero image found in clicked area, traversing up DOM tree..."); currentElement = e.target.parentElement; while (currentElement && currentElement !== editor) { // Check for background images on any element (not just positioned ones) const computedStyle = window.getComputedStyle(currentElement); const backgroundImage = computedStyle.backgroundImage; if ( backgroundImage && backgroundImage !== "none" && backgroundImage !== "initial" ) { // Check if this is a hero section const isHeroSection = currentElement.classList.contains('hero') || currentElement.classList.contains('p1-image-side') || currentElement.classList.contains('p2-image') || currentElement.classList.contains('cover-page') || currentElement.classList.contains('banner'); if (isHeroSection) { // Create a virtual IMG element for hero background images const virtualImg = document.createElement("img"); virtualImg.src = backgroundImage.replace( /url\(['"]?(.+?)['"]?\)/, "$1" ); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = backgroundImage; virtualImg.originalElement = currentElement; heroBackgroundImage = virtualImg; console.log("✅ Method 4 SUCCESS: Found HERO background image in parent", virtualImg); break; // Prioritize hero sections - break immediately } else { // Store other background images for fallback if (!otherBackgroundImage) { const virtualImg = document.createElement("img"); virtualImg.src = backgroundImage.replace( /url\(['"]?(.+?)['"]?\)/, "$1" ); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = backgroundImage; virtualImg.originalElement = currentElement; otherBackgroundImage = virtualImg; console.log("✅ Method 4: Found other background image in parent", virtualImg); } } } // Also check if this element has a background image set via CSS classes if (currentElement.className) { const classList = currentElement.className.split(" "); for (let className of classList) { // Look for common background image class patterns if ( className.includes("bg-") || className.includes("background") || className.includes("hero") || className.includes("banner") || className.includes("card") || className.includes("property") || className.includes("p1-image-side") || className.includes("p2-image") ) { const classStyle = window.getComputedStyle(currentElement); const classBgImage = classStyle.backgroundImage; if ( classBgImage && classBgImage !== "none" && classBgImage !== "initial" ) { // Check if this is a hero section const isHeroSection = currentElement.classList.contains('hero') || currentElement.classList.contains('p1-image-side') || currentElement.classList.contains('p2-image'); if (isHeroSection) { const virtualImg = document.createElement("img"); virtualImg.src = classBgImage.replace( /url\(['"]?(.+?)['"]?\)/, "$1" ); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = classBgImage; virtualImg.originalElement = currentElement; heroBackgroundImage = virtualImg; console.log("✅ Method 4 SUCCESS: Found HERO CSS class background image", virtualImg); break; // Prioritize hero sections - break immediately } else if (!otherBackgroundImage) { const virtualImg = document.createElement("img"); virtualImg.src = classBgImage.replace( /url\(['"]?(.+?)['"]?\)/, "$1" ); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = classBgImage; virtualImg.originalElement = currentElement; otherBackgroundImage = virtualImg; console.log("✅ Method 4: Found other CSS class background image", virtualImg); } } } } } currentElement = currentElement.parentElement; } } // Use hero background image if found, otherwise fall back to clicked element's background image, then other background image if (heroBackgroundImage) { clickedImage = heroBackgroundImage; console.log("✅ Method 4 SUCCESS: Using HERO background image", clickedImage); } else if (clickedElementBackgroundImage) { clickedImage = clickedElementBackgroundImage; console.log("✅ Method 4 SUCCESS: Using clicked element background image", clickedImage); } else if (otherBackgroundImage) { clickedImage = otherBackgroundImage; console.log("✅ Method 4 SUCCESS: Using other background image", clickedImage); } else { console.log("❌ Method 4 FAILED: No background image found"); } } else { console.log("❌ Method 4 SKIPPED: Already found image"); } // Method 5: Enhanced detection for layered images with z-index and overlapping elements console.log("=== METHOD 5: Layered image detection ==="); if (!clickedImage) { const clickPoint = { x: e.clientX, y: e.clientY }; const elementsAtPoint = document.elementsFromPoint(clickPoint.x, clickPoint.y); console.log("Elements at click point:", elementsAtPoint.map(el => ({ tagName: el.tagName, className: el.className, zIndex: window.getComputedStyle(el).zIndex, position: window.getComputedStyle(el).position }))); // Look for images in the elements at the click point for (let element of elementsAtPoint) { // Skip if element is the editor itself if (element === editor) continue; // Check if this element is an image if (element.tagName === "IMG" && element.src && element.src.trim() !== "") { clickedImage = element; console.log("Found layered IMG element:", element); break; } // Check if this element contains an image const imgInElement = element.querySelector && element.querySelector("img"); if (imgInElement && imgInElement.src && imgInElement.src.trim() !== "") { clickedImage = imgInElement; console.log("Found layered container with IMG:", element, imgInElement); break; } // Check for background images in layered elements const computedStyle = window.getComputedStyle(element); const bgImage = computedStyle.backgroundImage; if (bgImage && bgImage !== "none" && bgImage !== "initial" && bgImage.includes("url(")) { // Check if this is a hero section const isHeroSection = element.classList.contains('hero') || element.classList.contains('p1-image-side') || element.classList.contains('p2-image'); if (isHeroSection) { const virtualImg = document.createElement("img"); virtualImg.src = bgImage.replace(/url\(['"]?([^'"]*)['"]?\)/, "$1"); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = bgImage; virtualImg.originalElement = element; clickedImage = virtualImg; console.log("Found layered HERO background image:", element, bgImage); break; // Prioritize hero sections - break immediately } else if (!clickedImage) { const virtualImg = document.createElement("img"); virtualImg.src = bgImage.replace(/url\(['"]?([^'"]*)['"]?\)/, "$1"); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = bgImage; virtualImg.originalElement = element; clickedImage = virtualImg; console.log("Found layered background image:", element, bgImage); } } // Check for pseudo-elements with background images (::before, ::after) try { const beforeBg = window.getComputedStyle(element, '::before').backgroundImage; const afterBg = window.getComputedStyle(element, '::after').backgroundImage; if (beforeBg && beforeBg !== "none" && beforeBg !== "initial" && beforeBg.includes("url(")) { const virtualImg = document.createElement("img"); virtualImg.src = beforeBg.replace(/url\(['"]?([^'"]*)['"]?\)/, "$1"); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = beforeBg; virtualImg.originalElement = element; virtualImg.isPseudoElement = 'before'; clickedImage = virtualImg; console.log("Found layered pseudo-element background (::before):", element, beforeBg); break; } if (afterBg && afterBg !== "none" && afterBg !== "initial" && afterBg.includes("url(")) { const virtualImg = document.createElement("img"); virtualImg.src = afterBg.replace(/url\(['"]?([^'"]*)['"]?\)/, "$1"); virtualImg.isBackgroundImage = true; virtualImg.style.backgroundImage = afterBg; virtualImg.originalElement = element; virtualImg.isPseudoElement = 'after'; clickedImage = virtualImg; console.log("Found layered pseudo-element background (::after):", element, afterBg); break; } } catch (error) { // Pseudo-element access might fail in some browsers, continue console.log("Could not access pseudo-elements for:", element); } } } // Final result console.log("=== FINAL DETECTION RESULT ==="); if (clickedImage) { console.log("🎯 IMAGE DETECTED:", { tagName: clickedImage.tagName, alt: clickedImage.alt, src: clickedImage.src, isBackgroundImage: clickedImage.isBackgroundImage, originalElement: clickedImage.originalElement }); // Additional validation to ensure we have a valid image if ( clickedImage.tagName === "IMG" || clickedImage.isBackgroundImage ) { console.log("✅ VALID IMAGE - Calling handleImageClick"); this.handleImageClick(clickedImage, e); return; } else { console.log("❌ INVALID IMAGE TYPE - Not calling handleImageClick"); } } else { console.log("❌ NO IMAGE DETECTED - All methods failed"); } // Reset image click tracking when clicking on non-image areas this.resetImageClickTracking(); // Only deselect if clicking on the editor background or non-editable content if ( e.target === editor || (!e.target.classList.contains("draggable-element") && !e.target.closest(".draggable-element")) ) { // Remove selection from all draggable elements const allDraggable = editor.querySelectorAll( ".draggable-element, .draggable-image-container, .draggable-table-container" ); allDraggable.forEach((el) => { el.classList.remove("selected"); // Remove any resize handles const resizeHandles = el.querySelectorAll(".resize-handle"); resizeHandles.forEach((handle) => handle.remove()); // Remove any delete buttons const deleteButtons = el.querySelectorAll( ".delete-handle, .delete-image-btn" ); deleteButtons.forEach((btn) => btn.remove()); }); // Clear the selected element reference this.clearSelection(); } }); // Ensure contenteditable is always enabled editor.setAttribute("contenteditable", "true"); // Prevent default scroll behavior when selecting draggable elements editor.addEventListener("selectstart", (e) => { if ( e.target.classList.contains("draggable-element") && !e.target.classList.contains("draggable-text") ) { e.preventDefault(); } }); // Prevent focus from jumping to top editor.addEventListener( "focus", (e) => { e.preventDefault(); }, true ); // Add keyboard event handling for undo/redo editor.addEventListener("keydown", (e) => { if (e.ctrlKey || e.metaKey) { if (e.key === "z" && !e.shiftKey) { e.preventDefault(); this.undo(); } else if (e.key === "y" || (e.key === "z" && e.shiftKey)) { e.preventDefault(); this.redo(); } } }); editor.hasClickHandler = true; } } addDeselectFunctionality() { const editor = this.template.querySelector(".enhanced-editor-content"); if (!editor || editor.hasDeselectHandler) return; editor.addEventListener( "click", (e) => { // Only deselect if we're NOT clicking on: // 1. Images or image containers // 2. Resize handles // 3. Delete buttons // 4. Any draggable elements const isImageClick = e.target.tagName === "IMG" || e.target.closest(".draggable-image-container") || e.target.closest(".draggable-table-container") || e.target.classList.contains("resize-handle") || e.target.classList.contains("delete-handle") || e.target.closest(".resize-handle") || e.target.closest(".delete-handle"); if (!isImageClick) { this.deselectAllElements(); } }, true ); // Use capture phase to run before your existing handlers editor.hasDeselectHandler = true; } // Keep the deselectAllElements method as I suggested deselectAllElements() { const editor = this.template.querySelector(".enhanced-editor-content"); if (!editor) return; const allDraggable = editor.querySelectorAll( ".draggable-element, .draggable-image-container, .draggable-table-container" ); allDraggable.forEach((el) => { el.classList.remove("selected"); el.style.border = ""; el.style.boxShadow = ""; const resizeHandles = el.querySelectorAll(".resize-handle"); resizeHandles.forEach((handle) => handle.remove()); const deleteButtons = el.querySelectorAll( ".delete-handle, .delete-image-btn" ); deleteButtons.forEach((btn) => btn.remove()); }); this.selectedElement = null; } // Insert draggable text element insertDraggableText() { const editor = this.template.querySelector(".enhanced-editor-content"); if (editor) { this.setupEditorClickHandler(); // Get center position for insertion const centerPos = this.getCenterPositionForElement('text'); const textElement = document.createElement("div"); textElement.className = "draggable-element draggable-text"; textElement.contentEditable = true; textElement.innerHTML = "Click to edit text"; textElement.style.left = `${centerPos.x}px`; textElement.style.top = `${centerPos.y}px`; textElement.style.width = "200px"; textElement.style.height = "40px"; textElement.style.zIndex = "1000"; textElement.style.position = "absolute"; // Add resize handles this.addResizeHandles(textElement); // Add drag functionality this.makeDraggable(textElement); // Focus on the text element after a short delay setTimeout(() => { textElement.focus(); textElement.classList.add("selected"); }, 100); editor.appendChild(textElement); } } // Show image insertion modal showImageInsertModal() { this.showImageModal = true; this.selectedImageUrl = ""; this.selectedImageName = ""; this.uploadedImageData = ""; this.selectedImageCategory = "all"; this.insertButtonDisabled = true; // Populate property images from the existing data this.populatePropertyImages(); } // Populate property images array populatePropertyImages() { this.propertyImages = []; // Add images from imagesByCategory Object.keys(this.imagesByCategory).forEach((category) => { this.imagesByCategory[category].forEach((image) => { this.propertyImages.push({ url: image.url, name: image.title || image.name || `${category} Image`, category: category.toLowerCase(), }); }); }); // Add real property images if available if (this.realPropertyImages && this.realPropertyImages.length > 0) { this.realPropertyImages.forEach((image) => { this.propertyImages.push({ url: image.url || image.Url__c, name: image.name || image.Name || "Property Image", category: ( image.category || image.Category__c || "none" ).toLowerCase(), }); }); } } // Close image insertion modal closeImageModal() { this.showImageModal = false; this.selectedImageUrl = ""; this.selectedImageName = ""; this.uploadedImageData = ""; this.insertButtonDisabled = true; // Clear any selections document.querySelectorAll(".property-image-item").forEach((item) => { item.classList.remove("selected"); }); // Reset upload area this.resetUploadArea(); } // Set image source (property or local) setImageSource(event) { const source = event.target.dataset.source; this.imageSource = source; this.selectedImageUrl = ""; this.selectedImageName = ""; this.uploadedImageData = ""; this.insertButtonDisabled = true; // Clear any selections document.querySelectorAll(".property-image-item").forEach((item) => { item.classList.remove("selected"); }); // Reset upload area this.resetUploadArea(); } // Select image category selectImageCategory(event) { const category = event.target.dataset.category; this.selectedImageCategory = category; // Update button states document.querySelectorAll(".category-btn").forEach((btn) => { btn.classList.remove("active"); if (btn.dataset.category === category) { btn.classList.add("active"); } }); } // Select property image selectPropertyImage(event) { // Get the image URL from the closest element with data-image-url const imageItem = event.target.closest("[data-image-url]"); const imageUrl = imageItem ? imageItem.dataset.imageUrl : null; const imageName = event.target.alt || event.target.textContent || "Property Image"; if (!imageUrl) { return; } // Remove previous selection document.querySelectorAll(".property-image-item").forEach((item) => { item.classList.remove("selected"); }); // Add selection to clicked item const targetItem = event.target.closest(".property-image-item"); if (targetItem) { targetItem.classList.add("selected"); } // Force reactivity by creating new objects this.selectedImageUrl = imageUrl; this.selectedImageName = imageName; this.uploadedImageData = ""; this.insertButtonDisabled = false; // Log current state for debugging this.logCurrentState(); // Reset upload area if we're on local tab if (this.imageSource === "local") { this.resetUploadArea(); } // Force a re-render by updating a tracked property this.forceRerender(); } // Reset upload area to default state resetUploadArea() { const uploadArea = this.template.querySelector(".upload-area"); if (uploadArea) { // Remove existing preview if any const existingPreview = uploadArea.querySelector( ".uploaded-image-preview" ); if (existingPreview) { existingPreview.remove(); } // Show upload content again const uploadContent = uploadArea.querySelector(".upload-content"); if (uploadContent) { uploadContent.style.display = "flex"; } } } // Trigger file upload for main image modal triggerFileUpload() { const fileInput = this.template.querySelector(".file-input"); if (fileInput) { fileInput.click(); } else { } } // Handle file upload handleFileUpload(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { this.uploadedImageData = e.target.result; this.selectedImageUrl = e.target.result; this.selectedImageName = file.name; this.insertButtonDisabled = false; // Log current state for debugging this.logCurrentState(); // Update the upload area to show selected image this.updateUploadAreaWithSelectedImage(e.target.result, file.name); // Force a re-render by updating a tracked property this.forceRerender(); }; reader.readAsDataURL(file); } } // Update upload area to show selected image updateUploadAreaWithSelectedImage(imageUrl, fileName) { const uploadArea = this.template.querySelector(".upload-area"); if (uploadArea) { // Remove existing preview if any const existingPreview = uploadArea.querySelector( ".uploaded-image-preview" ); if (existingPreview) { existingPreview.remove(); } // Create preview container const previewContainer = document.createElement("div"); previewContainer.className = "uploaded-image-preview"; previewContainer.style.cssText = ` position: relative; width: 100%; max-width: 200px; margin: 0 auto; border-radius: 8px; overflow: hidden; border: 2px solid #4f46e5; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2); `; // Create image element const img = document.createElement("img"); img.src = imageUrl; img.alt = fileName; img.draggable = true; // Enable dragging img.style.cssText = ` width: 100%; height: auto; display: block; max-height: 150px; object-fit: cover; `; // Add drag and drop listeners for image swapping img.addEventListener("dragstart", this.handleImageDragStart.bind(this)); img.addEventListener("dragend", this.handleImageDragEnd.bind(this)); img.addEventListener("dragover", this.handleImageDragOver.bind(this)); img.addEventListener("dragleave", this.handleImageDragLeave.bind(this)); img.addEventListener("drop", this.handleImageDrop.bind(this)); // Create file name overlay const fileNameOverlay = document.createElement("div"); fileNameOverlay.style.cssText = ` position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: white; padding: 8px; font-size: 12px; font-weight: 500; `; fileNameOverlay.textContent = fileName; previewContainer.appendChild(img); previewContainer.appendChild(fileNameOverlay); // Replace upload content with preview const uploadContent = uploadArea.querySelector(".upload-content"); if (uploadContent) { uploadContent.style.display = "none"; } uploadArea.appendChild(previewContainer); // Add click handler to change image uploadArea.onclick = () => { this.triggerFileUpload(); }; } } // Handle insert button click with debugging handleInsertButtonClick() { this.logCurrentState(); this.insertSelectedImage(); } // Insert selected image insertSelectedImage() { // Check if we have a valid image URL const imageUrl = this.selectedImageUrl || this.uploadedImageData; const imageName = this.selectedImageName || "Uploaded Image"; if (this.insertButtonDisabled || !imageUrl) { alert("Please select an image first"); return; } const editor = this.template.querySelector(".enhanced-editor-content"); if (editor) { // Save undo state before making changes this.saveUndoState(); this.setupEditorClickHandler(); // Get center position for insertion const centerPos = this.getCenterPositionForElement('image'); // Create draggable image container const imageContainer = document.createElement("div"); imageContainer.className = "draggable-image-container"; imageContainer.style.left = `${centerPos.x}px`; imageContainer.style.top = `${centerPos.y}px`; imageContainer.style.width = "200px"; imageContainer.style.height = "150px"; imageContainer.style.zIndex = "1000"; imageContainer.style.position = "absolute"; imageContainer.style.overflow = "hidden"; imageContainer.style.border = "none"; imageContainer.style.cursor = "move"; imageContainer.style.userSelect = "none"; imageContainer.style.boxSizing = "border-box"; imageContainer.style.borderRadius = "4px"; // Create image element const img = document.createElement("img"); img.src = imageUrl; img.alt = imageName; img.draggable = true; // Enable dragging img.style.width = "100%"; img.style.height = "100%"; img.style.objectFit = "cover"; // Add drag and drop listeners for image swapping img.addEventListener("dragstart", this.handleImageDragStart.bind(this)); img.addEventListener("dragend", this.handleImageDragEnd.bind(this)); img.addEventListener("dragover", this.handleImageDragOver.bind(this)); img.addEventListener("dragleave", this.handleImageDragLeave.bind(this)); img.addEventListener("drop", this.handleImageDrop.bind(this)); img.style.display = "block"; img.style.border = "none"; img.style.outline = "none"; img.style.borderRadius = "4px"; imageContainer.appendChild(img); // Add resize handles this.addResizeHandles(imageContainer); // Add delete handle this.addDeleteHandle(imageContainer); // Add drag functionality this.makeDraggable(imageContainer); // Add click to select functionality imageContainer.addEventListener("click", (e) => { e.stopPropagation(); this.selectDraggableElement(imageContainer); }); // Select the image after a short delay setTimeout(() => { this.selectDraggableElement(imageContainer); }, 100); editor.appendChild(imageContainer); // Close modal this.closeImageModal(); } } // Insert draggable image element insertDraggableImage() { const input = document.createElement("input"); input.type = "file"; input.accept = "image/*"; input.onchange = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { const editor = this.template.querySelector( ".enhanced-editor-content" ); if (editor) { // Save undo state before making changes this.saveUndoState(); this.setupEditorClickHandler(); // Get center position for insertion const centerPos = this.getCenterPositionForElement('image'); const imageContainer = document.createElement("div"); imageContainer.className = "draggable-image-container"; imageContainer.style.left = `${centerPos.x}px`; imageContainer.style.top = `${centerPos.y}px`; imageContainer.style.width = "200px"; imageContainer.style.height = "150px"; imageContainer.style.zIndex = "1000"; imageContainer.style.position = "absolute"; imageContainer.style.overflow = "hidden"; imageContainer.style.border = "none"; imageContainer.style.boxSizing = "border-box"; imageContainer.style.borderRadius = "4px"; const img = document.createElement("img"); img.src = event.target.result; img.className = "draggable-image"; img.alt = "Inserted Image"; img.style.width = "100%"; img.style.height = "100%"; img.style.objectFit = "cover"; img.style.border = "none"; img.style.outline = "none"; img.style.borderRadius = "4px"; imageContainer.appendChild(img); // Add resize handles this.addResizeHandles(imageContainer); // Add drag functionality this.makeDraggable(imageContainer); // Select the image after a short delay setTimeout(() => { imageContainer.classList.add("selected"); }, 100); editor.appendChild(imageContainer); } }; reader.readAsDataURL(file); } }; input.click(); } // Add resize handles to element addResizeHandles(element) { // Avoid duplicate handles const existing = element.querySelectorAll(".resize-handle"); if (existing && existing.length > 0) return; const handles = ["nw", "ne", "sw", "se", "n", "s", "w", "e"]; handles.forEach((direction) => { const handle = document.createElement("div"); handle.className = `resize-handle ${direction}`; handle.style.position = "absolute"; handle.style.width = "8px"; handle.style.height = "8px"; handle.style.background = "#6c63ff"; handle.style.border = "2px solid white"; handle.style.borderRadius = "50%"; handle.style.zIndex = "1001"; handle.addEventListener("mousedown", (e) => this.startResize(e, element, direction) ); element.appendChild(handle); }); } // Make element draggable makeDraggable(element) { let isDragging = false; let startX, startY, startLeft, startTop; let dragStarted = false; // Handle mousedown on the element (not on resize handles) const handleMouseDown = (e) => { if (e.target.classList.contains("resize-handle")) return; isDragging = true; dragStarted = false; element.classList.add("selected"); // Remove selection from other elements const editor = element.closest(".enhanced-editor-content"); if (editor) { const allDraggable = editor.querySelectorAll(".draggable-element"); allDraggable.forEach((el) => { if (el !== element) el.classList.remove("selected"); }); } startX = e.clientX; startY = e.clientY; startLeft = parseInt(element.style.left) || 0; startTop = parseInt(element.style.top) || 0; if (editor) { editor.initialScrollLeft = editor.scrollLeft; editor.initialScrollTop = editor.scrollTop; } e.preventDefault(); e.stopPropagation(); // Prevent scrolling while dragging document.body.style.overflow = "hidden"; }; const handleMouseMove = (e) => { if (!isDragging) return; const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; // Only start dragging if mouse moved more than 5px if (!dragStarted && (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5)) { dragStarted = true; element.classList.add("dragging"); } if (dragStarted) { const editor = element.closest(".enhanced-editor-content"); const editorRect = editor ? editor.getBoundingClientRect() : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight, }; // Calculate new position relative to editor // let newLeft = startLeft + deltaX; // let newTop = startTop + deltaY; // Calculate new position relative to editor (FIXED for smooth scroll) // Use existing 'editor' and 'editorRect' variables declared above to avoid redeclaration let newLeft = startLeft + deltaX; let newTop = startTop + deltaY; // Account for editor scroll position for smooth dragging if (editor) { const currentScrollLeft = editor.scrollLeft; const currentScrollTop = editor.scrollTop; // Adjust position based on scroll changes since drag started const scrollDeltaX = currentScrollLeft - (editor.initialScrollLeft || 0); const scrollDeltaY = currentScrollTop - (editor.initialScrollTop || 0); newLeft -= scrollDeltaX; newTop -= scrollDeltaY; } // Keep element within editor bounds - use scrollHeight for full template height const maxWidth = editor ? editor.clientWidth : editorRect.width; const maxHeight = editor ? editor.scrollHeight : editorRect.height; newLeft = Math.max( 0, Math.min(newLeft, maxWidth - element.offsetWidth) ); newTop = Math.max( 0, Math.min(newTop, maxHeight - element.offsetHeight) ); element.style.left = newLeft + "px"; element.style.top = newTop + "px"; element.style.position = "absolute"; } e.preventDefault(); e.stopPropagation(); }; const handleMouseUp = () => { if (isDragging) { isDragging = false; dragStarted = false; element.classList.remove("dragging"); // Restore scrolling document.body.style.overflow = ""; } }; element.addEventListener("mousedown", handleMouseDown); document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); // Handle click to select without dragging element.addEventListener("click", (e) => { if (!dragStarted) { e.stopPropagation(); element.classList.add("selected"); // Ensure controls (resize + delete) are visible on click this.addResizeHandles(element); this.addDeleteButton(element); // Remove selection from other elements const editor = element.closest(".enhanced-editor-content"); if (editor) { const allDraggable = editor.querySelectorAll( ".draggable-element, .draggable-image-container, .draggable-table-container" ); allDraggable.forEach((el) => { if (el !== element) el.classList.remove("selected"); }); } } }); // Handle text editing for text elements if (element.classList.contains("draggable-text")) { element.addEventListener("dblclick", (e) => { if (!dragStarted) { e.stopPropagation(); element.focus(); element.style.cursor = "text"; } }); element.addEventListener("input", (e) => { e.stopPropagation(); }); element.addEventListener("keydown", (e) => { e.stopPropagation(); }); } } // Start resize operation startResize(e, element, direction) { e.preventDefault(); e.stopPropagation(); const startX = e.clientX; const startY = e.clientY; const startWidth = parseInt(element.style.width) || element.offsetWidth; const startHeight = parseInt(element.style.height) || element.offsetHeight; const startLeft = parseInt(element.style.left) || 0; const startTop = parseInt(element.style.top) || 0; // Add resizing class and prevent scrolling element.classList.add("resizing"); document.body.style.overflow = "hidden"; const handleMouseMove = (e) => { e.preventDefault(); e.stopPropagation(); const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; let newWidth = startWidth; let newHeight = startHeight; let newLeft = startLeft; let newTop = startTop; const editor = element.closest(".enhanced-editor-content"); const editorRect = editor ? editor.getBoundingClientRect() : { width: window.innerWidth, height: window.innerHeight }; // Use scrollHeight for full template height const maxWidth = editor ? editor.clientWidth : editorRect.width; const maxHeight = editor ? editor.scrollHeight : editorRect.height; switch (direction) { case "se": newWidth = Math.max( 50, Math.min(startWidth + deltaX, maxWidth - startLeft) ); newHeight = Math.max( 20, Math.min(startHeight + deltaY, maxHeight - startTop) ); break; case "sw": newWidth = Math.max(50, startWidth - deltaX); newHeight = Math.max( 20, Math.min(startHeight + deltaY, maxHeight - startTop) ); if (newWidth >= 50) { newLeft = Math.max(0, startLeft + deltaX); } break; case "ne": newWidth = Math.max( 50, Math.min(startWidth + deltaX, maxWidth - startLeft) ); newHeight = Math.max(20, startHeight - deltaY); if (newHeight >= 20) { newTop = Math.max(0, startTop + deltaY); } break; case "nw": newWidth = Math.max(50, startWidth - deltaX); newHeight = Math.max(20, startHeight - deltaY); if (newWidth >= 50) { newLeft = Math.max(0, startLeft + deltaX); } if (newHeight >= 20) { newTop = Math.max(0, startTop + deltaY); } break; case "e": newWidth = Math.max( 50, Math.min(startWidth + deltaX, maxWidth - startLeft) ); break; case "w": newWidth = Math.max(50, startWidth - deltaX); if (newWidth >= 50) { newLeft = Math.max(0, startLeft + deltaX); } break; case "s": newHeight = Math.max( 20, Math.min(startHeight + deltaY, maxHeight - startTop) ); break; case "n": newHeight = Math.max(20, startHeight - deltaY); if (newHeight >= 20) { newTop = Math.max(0, startTop + deltaY); } break; } // Apply the new dimensions and position element.style.width = newWidth + "px"; element.style.height = newHeight + "px"; element.style.left = newLeft + "px"; element.style.top = newTop + "px"; element.style.position = "absolute"; }; const handleMouseUp = () => { element.classList.remove("resizing"); document.body.style.overflow = ""; document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); }; document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); } handleBringForward() { const selection = window.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); const element = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement; if (element && element.style) { const currentZIndex = parseInt(element.style.zIndex) || 0; element.style.zIndex = currentZIndex + 1; this.showSuccess(`Z-index increased to ${currentZIndex + 1}`); } } else { this.showError("Please select an element first"); } } handleSendBackward() { const selection = window.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); const element = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement; if (element && element.style) { const currentZIndex = parseInt(element.style.zIndex) || 0; element.style.zIndex = Math.max(0, currentZIndex - 1); this.showSuccess( `Z-index decreased to ${Math.max(0, currentZIndex - 1)}` ); } } else { this.showError("Please select an element first"); } } setZIndex() { const zIndexInput = this.template.querySelector("#zIndexInput"); const zIndex = parseInt(zIndexInput.value) || 0; const selection = window.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); const element = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement; if (element && element.style) { element.style.zIndex = zIndex; this.showSuccess(`Z-index set to ${zIndex}`); } } else { this.showError("Please select an element first"); } } // Helper method to make elements draggable makeDraggable(element) { let isDragging = false; let currentX; let currentY; let initialX; let initialY; let xOffset = 0; let yOffset = 0; element.addEventListener("mousedown", (e) => { // Only start dragging if clicking on the element itself (not on text inside) if ( e.target === element || (element.classList.contains("draggable-text-box") && e.target.parentNode === element) ) { initialX = e.clientX - xOffset; initialY = e.clientY - yOffset; isDragging = true; element.style.cursor = "grabbing"; } }); document.addEventListener("mousemove", (e) => { if (isDragging) { e.preventDefault(); currentX = e.clientX - initialX; currentY = e.clientY - initialY; xOffset = currentX; yOffset = currentY; element.style.left = currentX + "px"; element.style.top = currentY + "px"; } }); document.addEventListener("mouseup", () => { if (isDragging) { isDragging = false; element.style.cursor = element.classList.contains("draggable-text-box") ? "text" : "move"; } }); } // Helper method to make elements resizable makeResizable(element) { const resizer = document.createElement("div"); resizer.className = "resizer"; resizer.style.position = "absolute"; resizer.style.width = "10px"; resizer.style.height = "10px"; resizer.style.background = "#667eea"; resizer.style.borderRadius = "50%"; resizer.style.bottom = "-5px"; resizer.style.right = "-5px"; resizer.style.cursor = "se-resize"; resizer.style.zIndex = "1001"; element.appendChild(resizer); let isResizing = false; let startWidth, startHeight, startX, startY; resizer.addEventListener("mousedown", (e) => { isResizing = true; startX = e.clientX; startY = e.clientY; startWidth = parseInt(element.style.width) || element.offsetWidth; startHeight = parseInt(element.style.height) || element.offsetHeight; e.stopPropagation(); }); document.addEventListener("mousemove", (e) => { if (isResizing) { const newWidth = startWidth + (e.clientX - startX); const newHeight = startHeight + (e.clientY - startY); if (newWidth > 50) element.style.width = newWidth + "px"; if (newHeight > 30) element.style.height = newHeight + "px"; } }); document.addEventListener("mouseup", () => { isResizing = false; }); } insertText() { const previewFrame = this.template.querySelector( ".enhanced-editor-content" ); if (previewFrame) { // Get center position for insertion const centerPos = this.getCenterPositionForElement('text'); // Create draggable and resizable text box const textBox = document.createElement("div"); textBox.className = "draggable-text-box"; textBox.contentEditable = true; textBox.textContent = "Double-click to edit text"; textBox.style.position = "absolute"; textBox.style.left = `${centerPos.x}px`; textBox.style.top = `${centerPos.y}px`; textBox.style.width = "150px"; textBox.style.height = "40px"; textBox.style.minWidth = "100px"; textBox.style.minHeight = "30px"; textBox.style.padding = "8px"; textBox.style.border = "2px solid #ddd"; textBox.style.borderRadius = "4px"; textBox.style.backgroundColor = "white"; textBox.style.cursor = "text"; textBox.style.zIndex = "1000"; textBox.style.fontSize = "14px"; textBox.style.fontFamily = "Arial, sans-serif"; textBox.style.color = "#333"; textBox.style.boxSizing = "border-box"; textBox.style.outline = "none"; // Handle Enter key to keep text in place textBox.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); // Insert a line break instead of creating new element document.execCommand("insertLineBreak", false); } }); // Handle selection like Word/Google Docs textBox.addEventListener("click", (e) => { e.stopPropagation(); this.selectElement(textBox); }); // Make text box draggable this.makeDraggable(textBox); // Make text box resizable this.makeResizable(textBox); previewFrame.appendChild(textBox); textBox.focus(); // Select the text for easy editing const range = document.createRange(); range.selectNodeContents(textBox); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } } insertImage() { // Prevent multiple simultaneous file dialogs (international standard) if (this.isFileDialogOpen) { console.warn('File dialog already open, ignoring duplicate request'); return; } try { // Create file input for local image upload with proper validation const fileInput = document.createElement("input"); fileInput.type = "file"; fileInput.accept = "image/jpeg,image/jpg,image/png,image/gif,image/webp"; fileInput.style.display = "none"; fileInput.setAttribute('aria-label', 'Select image file to upload'); // Set flag to prevent multiple dialogs this.isFileDialogOpen = true; fileInput.onchange = (event) => { this.isFileDialogOpen = false; const file = event.target?.files?.[0]; if (!file) { console.log('No file selected'); return; } // Validate file size (10MB limit - international standard) const maxSize = 10 * 1024 * 1024; // 10MB if (file.size > maxSize) { this.showError('File size must be less than 10MB'); return; } // Validate file type const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp']; if (!allowedTypes.includes(file.type)) { this.showError('Please select a valid image file (JPEG, PNG, GIF, or WebP)'); return; } // Show loading state this.showSuccess('Processing image...'); const reader = new FileReader(); reader.onload = (e) => { try { this.createImageElement(e.target.result, file.name); this.showSuccess('Image inserted successfully!'); } catch (error) { console.error('Error creating image element:', error); this.showError('Failed to insert image. Please try again.'); } }; reader.onerror = () => { this.isFileDialogOpen = false; this.showError('Failed to read image file'); }; reader.readAsDataURL(file); }; // Handle dialog cancellation fileInput.oncancel = () => { this.isFileDialogOpen = false; }; // Add to DOM, trigger, and remove document.body.appendChild(fileInput); fileInput.click(); // Clean up after a short delay to ensure dialog has time to open setTimeout(() => { if (document.body.contains(fileInput)) { document.body.removeChild(fileInput); } }, 100); } catch (error) { this.isFileDialogOpen = false; console.error('Error in insertImage:', error); this.showError('Failed to open file dialog'); } } // Separate method for creating image element (following single responsibility principle) createImageElement(imageDataUrl, fileName = 'Inserted Image') { const previewFrame = this.template.querySelector('.enhanced-editor-content'); if (!previewFrame) { throw new Error('Preview frame not found'); } // Get center position for insertion const centerPos = this.getCenterPositionForElement('image'); // Generate unique ID for the image container const uniqueId = `img_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; // Create draggable and resizable image container const imageContainer = document.createElement("div"); imageContainer.className = "draggable-image-container"; imageContainer.id = uniqueId; imageContainer.setAttribute('data-image-type', 'inserted'); imageContainer.setAttribute('data-original-filename', fileName); // Apply consistent styling with center position Object.assign(imageContainer.style, { position: "absolute", left: `${centerPos.x}px`, top: `${centerPos.y}px`, width: "300px", height: "200px", cursor: "move", zIndex: "1000", border: "2px solid transparent", borderRadius: "4px", overflow: "hidden", transition: "border-color 0.2s ease" }); const img = document.createElement("img"); img.src = imageDataUrl; img.alt = fileName; img.setAttribute('loading', 'lazy'); // Performance optimization img.draggable = true; // Enable dragging Object.assign(img.style, { width: "100%", height: "100%", objectFit: "cover", borderRadius: "4px", boxShadow: "0 2px 8px rgba(0,0,0,0.1)", display: "block" }); // Add drag and drop listeners for image swapping img.addEventListener("dragstart", this.handleImageDragStart.bind(this)); img.addEventListener("dragend", this.handleImageDragEnd.bind(this)); img.addEventListener("dragover", this.handleImageDragOver.bind(this)); img.addEventListener("dragleave", this.handleImageDragLeave.bind(this)); img.addEventListener("drop", this.handleImageDrop.bind(this)); // Add click handler for selection imageContainer.addEventListener("click", (e) => { e.stopPropagation(); this.selectElement(imageContainer); }); // Add triple-click handler for replacement imageContainer.addEventListener("click", (e) => { this.handleImageClick(img, e); }); // Create delete button const deleteBtn = this.createDeleteButton(imageContainer); imageContainer.appendChild(deleteBtn); // Make container interactive this.makeDraggable(imageContainer); this.makeResizable(imageContainer); // Append image and container imageContainer.appendChild(img); previewFrame.appendChild(imageContainer); // Auto-select the newly inserted image setTimeout(() => { this.selectElement(imageContainer); }, 100); } // Create delete button with proper accessibility createDeleteButton(parentContainer) { const deleteBtn = document.createElement("button"); deleteBtn.className = "delete-btn"; deleteBtn.innerHTML = "×"; deleteBtn.setAttribute('aria-label', 'Delete image'); deleteBtn.setAttribute('title', 'Delete image'); Object.assign(deleteBtn.style, { position: "absolute", top: "-10px", right: "-10px", width: "20px", height: "20px", borderRadius: "50%", background: "#ff4757", color: "white", border: "none", cursor: "pointer", fontSize: "16px", fontWeight: "bold", zIndex: "1002", opacity: "1", transition: "opacity 0.2s ease", display: "flex", alignItems: "center", justifyContent: "center" }); deleteBtn.onclick = (e) => { e.stopPropagation(); e.preventDefault(); // Confirm deletion for better UX if (confirm('Are you sure you want to delete this image?')) { parentContainer.remove(); this.showSuccess('Image deleted successfully'); } }; return deleteBtn; } // Helper method to duplicate an image duplicateImage(originalContainer) { const previewFrame = this.template.querySelector( ".enhanced-editor-content" ); if (previewFrame) { const newContainer = originalContainer.cloneNode(true); newContainer.style.left = parseInt(originalContainer.style.left) + 20 + "px"; newContainer.style.top = parseInt(originalContainer.style.top) + 20 + "px"; newContainer.style.zIndex = parseInt(originalContainer.style.zIndex) + 1; // Reattach event listeners this.makeDraggable(newContainer); this.makeResizable(newContainer); // Update control panel event listeners const controlPanel = newContainer.querySelector(".image-control-panel"); if (controlPanel) { controlPanel.addEventListener("mouseenter", () => { controlPanel.style.opacity = "1"; }); controlPanel.addEventListener("mouseleave", () => { controlPanel.style.opacity = "1"; }); } previewFrame.appendChild(newContainer); this.showSuccess("Image duplicated successfully!"); } } // Select element like Word/Google Docs selectElement(element) { // Remove selection from all other elements const allElements = this.template.querySelectorAll( ".draggable-text-box, .draggable-image-container" ); allElements.forEach((el) => { el.classList.remove("selected"); // Do not use border to avoid layout shifts; use outline which doesn't affect layout el.style.outline = "none"; el.style.outlineOffset = "0px"; // Hide delete buttons const deleteBtn = el.querySelector(".delete-btn"); if (deleteBtn) { deleteBtn.style.opacity = "0"; } }); // Select current element element.classList.add("selected"); // Use outline to show selection without affecting layout/position element.style.outline = "2px solid #667eea"; element.style.outlineOffset = "0px"; // Show delete button (support both legacy and new class names) const deleteBtn = element.querySelector(".delete-btn") || element.querySelector(".delete-handle"); if (deleteBtn) { deleteBtn.style.opacity = "1"; deleteBtn.style.display = "flex"; } // Show selection handles this.showSelectionHandles(element); } // Show selection handles like Word/Google Docs showSelectionHandles(element) { // Remove existing handles const existingHandles = element.querySelectorAll(".selection-handle"); existingHandles.forEach((handle) => handle.remove()); // Create selection handles const handles = [ { position: "top-left", cursor: "nw-resize" }, { position: "top-right", cursor: "ne-resize" }, { position: "bottom-left", cursor: "sw-resize" }, { position: "bottom-right", cursor: "se-resize" }, ]; handles.forEach((handle) => { const handleElement = document.createElement("div"); handleElement.className = "selection-handle"; handleElement.style.position = "absolute"; handleElement.style.width = "8px"; handleElement.style.height = "8px"; handleElement.style.background = "#667eea"; handleElement.style.border = "1px solid white"; handleElement.style.borderRadius = "50%"; handleElement.style.cursor = handle.cursor; handleElement.style.zIndex = "1003"; // Position handles switch (handle.position) { case "top-left": handleElement.style.top = "-4px"; handleElement.style.left = "-4px"; break; case "top-right": handleElement.style.top = "-4px"; handleElement.style.right = "-4px"; break; case "bottom-left": handleElement.style.bottom = "-4px"; handleElement.style.left = "-4px"; break; case "bottom-right": handleElement.style.bottom = "-4px"; handleElement.style.right = "-4px"; break; } element.appendChild(handleElement); }); } addShape() { } // Helper method to build amenities list dynamically buildAmenitiesList(data) { let amenitiesList = ""; // First priority: Use amenities array if available if ( data.amenities && Array.isArray(data.amenities) && data.amenities.length > 0 ) { amenitiesList = data.amenities .map( (amenity) => `
${htmlContent}
`;
this.exportedHtml = fullHtml;
this.showHtmlDialog = true;
document.body.style.overflow = "hidden";
}
closeHtmlDialog() {
this.showHtmlDialog = false;
document.body.style.overflow = "";
}
copyHtmlToClipboard() {
if (navigator.clipboard) {
navigator.clipboard
.writeText(this.exportedHtml)
.then(() => {
this.showSuccess("HTML copied to clipboard!");
})
.catch(() => {
this.fallbackCopyToClipboard();
});
} else {
this.fallbackCopyToClipboard();
}
}
fallbackCopyToClipboard() {
const textArea = document.createElement("textarea");
textArea.value = this.exportedHtml;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand("copy");
this.showSuccess("HTML copied to clipboard!");
} catch (err) {
this.showError("Failed to copy HTML");
}
document.body.removeChild(textArea);
}
showHtml() {
// Get the current template content
const previewFrame = this.template.querySelector(".enhanced-editor-content");
if (!previewFrame) {
this.showError("No content found to export.");
return;
}
// Get the HTML content from the editor
let htmlContent = previewFrame.innerHTML;
// If no content in editor, try to get from cached template
if (!htmlContent || htmlContent.trim() === "") {
htmlContent = this.htmlContent || this.createTemplateHTML();
}
// Create a complete HTML document
const fullHtml = `
${htmlContent}
`;
this.exportedHtml = fullHtml;
this.showHtmlDialog = true;
document.body.style.overflow = "hidden";
}
downloadHtml() {
if (!this.exportedHtml) {
this.showError("No HTML content to download. Please export HTML first.");
return;
}
const blob = new Blob([this.exportedHtml], { type: "text/html" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `property-brochure-${Date.now()}.html`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
this.showSuccess("HTML file downloaded!");
}
// Table Dialog Methods
openTableDialog() {
this.showTableDialog = true;
document.body.style.overflow = "hidden";
}
closeTableDialog() {
this.showTableDialog = false;
document.body.style.overflow = "";
}
handleTableRowsChange(event) {
this.tableRows = parseInt(event.target.value) || 3;
}
handleTableColsChange(event) {
this.tableCols = parseInt(event.target.value) || 3;
}
handleHeaderChange(event) {
this.includeHeader = event.target.checked;
}
insertTable() {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) {
this.showError("Editor not found");
return;
}
// Save undo state
this.saveUndoState();
// Get center position for insertion
const centerPos = this.getCenterPositionForElement('table');
// Create table element using our new method (draggable/resizeable container like images)
const tableContainer = this.createTableElement();
editor.appendChild(tableContainer);
// Place at center position
tableContainer.style.left = `${centerPos.x}px`;
tableContainer.style.top = `${centerPos.y}px`;
// Enable drag + resize
this.addTableResizeHandles(tableContainer);
this.makeDraggable(tableContainer);
this.setupTableEventListeners(tableContainer);
this.closeTableDialog();
this.showSuccess("Table inserted successfully!");
}
// ===== DYNAMIC IMAGE REPLACEMENT UTILITIES =====
// Get first image from a specific category
getFirstImageByCategory(category) {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
return null;
}
const categoryImages = this.realPropertyImages.filter((img) => {
const imgCategory = img.category || img.pcrm__Category__c;
return (
imgCategory && imgCategory.toLowerCase() === category.toLowerCase()
);
});
return categoryImages.length > 0 ? categoryImages[0] : null;
}
// Direct method to get exterior image URL
getExteriorImageUrl() {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
return "";
}
// Look for exterior images first
const exteriorImages = this.realPropertyImages.filter((img) => {
const category = img.category || img.pcrm__Category__c;
return category && category.toLowerCase().includes("exterior");
});
if (exteriorImages.length > 0) {
return exteriorImages[0].url;
}
// If no exterior, use first available image
if (this.realPropertyImages.length > 0) {
return this.realPropertyImages[0].url;
}
return "";
}
// Direct method to get maps image URL
getMapsImageUrl() {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
return "";
}
// Look for maps images first - check both exact match and contains
const mapsImages = this.realPropertyImages.filter((img) => {
const category = img.category || img.pcrm__Category__c;
return (
category &&
(category.toLowerCase() === "maps" ||
category.toLowerCase().includes("maps"))
);
});
if (mapsImages.length > 0) {
return mapsImages[0].url;
}
// Look for anchor images as fallback
const anchorImages = this.realPropertyImages.filter((img) => {
const category = img.category || img.pcrm__Category__c;
return (
category &&
(category.toLowerCase() === "anchor" ||
category.toLowerCase().includes("anchor"))
);
});
if (anchorImages.length > 0) {
return anchorImages[0].url;
}
return "";
}
// Get random image from property images
getRandomImage() {
const allImages = Array.isArray(this.realPropertyImages) ? this.realPropertyImages : [];
if (allImages.length === 0) {
// Return a default placeholder image if no property images available
return 'https://via.placeholder.com/400x300?text=No+Image+Available';
}
// Get a random index
const randomIndex = Math.floor(Math.random() * allImages.length);
const randomImage = allImages[randomIndex];
// Ensure image URL is absolute for PDF generation
if (randomImage && randomImage.url) {
return randomImage.url.startsWith('http') ? randomImage.url :
`https://salesforce.tech4biz.io${randomImage.url}`;
}
// Fallback to placeholder if image URL is invalid
return 'https://via.placeholder.com/400x300?text=No+Image+Available';
}
// Method to replace background-image URLs in CSS at runtime
replaceBackgroundImagesInHTML(htmlContent) {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
return htmlContent;
}
const exteriorImageUrl = this.getExteriorImageUrl();
// Replace any hardcoded background-image URLs with the property's exterior image
let updatedHTML = htmlContent;
// Pattern to match background-image: url('...') or background-image: url("...")
const backgroundImagePattern =
/background-image\s*:\s*url\(['"][^'"]*['"]\)/gi;
// Replace all background-image URLs with the property's exterior image
updatedHTML = updatedHTML.replace(backgroundImagePattern, (match) => {
return exteriorImageUrl
? `background-image: url('${exteriorImageUrl}')`
: "background-image: none";
});
return updatedHTML;
}
// Method to dynamically update CSS background-image rules after template loads
updateCSSBackgroundImages() {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) return;
if (!this.realPropertyImages || this.realPropertyImages.length === 0)
return;
const exteriorImageUrl = this.getExteriorImageUrl();
// Scope to styles inside the editor only
const styleElements = editor.querySelectorAll("style");
styleElements.forEach((styleElement) => {
const cssText = styleElement.textContent || "";
const backgroundImagePattern =
/background-image\s*:\s*url\(['"][^'"]*['"]\)/gi;
const updatedCSS = cssText.replace(backgroundImagePattern, (match) => {
return exteriorImageUrl
? `background-image: url('${exteriorImageUrl}')`
: "background-image: none";
});
if (updatedCSS !== cssText) styleElement.textContent = updatedCSS;
});
// Update inline background-image styles only within editor
const elementsWithBackground = editor.querySelectorAll(
'[style*="background-image"]'
);
elementsWithBackground.forEach((element) => {
const currentStyle = element.getAttribute("style") || "";
const backgroundImagePattern =
/background-image\s*:\s*url\(['"][^'"]*['"]\)/gi;
const updatedStyle = currentStyle.replace(
backgroundImagePattern,
(match) => {
return exteriorImageUrl
? `background-image: url('${exteriorImageUrl}')`
: "background-image: none";
}
);
if (updatedStyle !== currentStyle)
element.setAttribute("style", updatedStyle);
});
}
// Force image reload to ensure proper display in viewport
forceImageReload() {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) return;
// Find all images in the viewport
const images = editor.querySelectorAll("img");
images.forEach((img) => {
if (img.src) {
// Force reload by adding timestamp to URL
const originalSrc = img.src;
const url = new URL(originalSrc);
url.searchParams.set('t', Date.now().toString());
img.src = url.toString();
// Add error handling for failed images
img.onerror = () => {
console.warn('Image failed to load:', originalSrc);
// Try to reload with original URL as fallback
img.src = originalSrc;
};
// Ensure images are properly sized for viewport
img.style.maxWidth = '100%';
img.style.height = 'auto';
img.style.display = 'block';
}
});
// Also handle background images
const elementsWithBg = editor.querySelectorAll('[style*="background-image"]');
elementsWithBg.forEach((element) => {
const style = element.getAttribute('style') || '';
if (style.includes('background-image')) {
// Force reload by updating the style
const newStyle = style.replace(/url\(['"]([^'"]*)['"]\)/g, (match, url) => {
const urlObj = new URL(url);
urlObj.searchParams.set('t', Date.now().toString());
return `url('${urlObj.toString()}')`;
});
element.setAttribute('style', newStyle);
}
});
}
// Force proper HTML rendering to match PDF exactly
forceHTMLRendering() {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) return;
// Apply exact PDF dimensions and styling
const baseWidth = this.selectedPageSize === "A3" ? 1123 : 794;
const baseHeight = this.selectedPageSize === "A3" ? 1587 : 1123;
// Set exact dimensions on the editor
editor.style.width = `${baseWidth}px`;
editor.style.minHeight = `${baseHeight}px`;
editor.style.maxWidth = `${baseWidth}px`;
editor.style.margin = '0';
editor.style.padding = '0';
editor.style.boxSizing = 'border-box';
editor.style.background = 'white';
editor.style.color = '#000';
editor.style.fontSize = '12px';
editor.style.lineHeight = '1.3';
// Ensure all content elements are properly sized
const allElements = editor.querySelectorAll('*');
allElements.forEach((element) => {
// Reset any conflicting styles
element.style.boxSizing = 'border-box';
// Fix images
if (element.tagName === 'IMG') {
element.style.maxWidth = '100%';
element.style.height = 'auto';
element.style.display = 'block';
element.style.margin = '0 0 6px 0';
element.style.padding = '0';
}
// Fix headings
if (['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(element.tagName)) {
element.style.margin = '0 0 8px 0';
element.style.padding = '0';
element.style.fontWeight = 'bold';
}
// Fix paragraphs
if (element.tagName === 'P') {
element.style.margin = '0 0 6px 0';
element.style.padding = '0';
}
// Fix tables
if (element.tagName === 'TABLE') {
element.style.borderCollapse = 'collapse';
element.style.borderSpacing = '0';
element.style.width = '100%';
element.style.margin = '0 0 8px 0';
element.style.padding = '0';
}
// Fix table cells
if (['TD', 'TH'].includes(element.tagName)) {
element.style.margin = '0';
element.style.padding = '3px';
element.style.border = 'none';
element.style.verticalAlign = 'top';
}
});
// Force a reflow to ensure changes take effect
editor.offsetHeight;
}
// Get all images from a specific category
getAllImagesByCategory(category) {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
return [];
}
return this.realPropertyImages.filter(
(img) =>
img.category && img.category.toLowerCase() === category.toLowerCase()
);
}
// Get uncategorized images (no category or category is null/empty)
getUncategorizedImages() {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
return [];
}
const uncategorized = this.realPropertyImages.filter(
(img) =>
!img.category ||
img.category.trim() === "" ||
img.category.toLowerCase() === "none"
);
return uncategorized;
}
// Smart image replacement - tries multiple categories in order of preference
getSmartImageForSection(sectionType, fallbackUrl) {
const categoryPriority = {
exterior: ["Exterior", "Anchor", "None"],
interior: ["Interior", "Living Area", "Kitchen", "Bedroom", "None"],
kitchen: ["Kitchen", "Interior", "Living Area", "None"],
bedroom: ["Bedroom", "Interior", "None"],
living: ["Living Area", "Interior", "Kitchen", "None"],
bathroom: ["Bathroom", "Interior", "None"],
parking: ["Parking", "Exterior", "None"],
maps: ["Maps", "Anchor", "Exterior", "None"],
gallery: [
"Interior",
"Exterior",
"Kitchen",
"Bedroom",
"Living Area",
"None",
],
};
const categories = categoryPriority[sectionType] || [
"Interior",
"Exterior",
"None",
];
for (const category of categories) {
const image = this.getFirstImageByCategory(category);
if (image && image.url) {
return image.url;
}
}
return fallbackUrl;
}
// Generate Property Gallery HTML for uncategorized images
generatePropertyGalleryHTML() {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
return "";
}
let galleryHTML = "";
this.realPropertyImages.forEach((image, index) => {
const title =
image.title || image.pcrm__Title__c || `Property Image ${index + 1}`;
galleryHTML += ``;
});
return galleryHTML;
}
// Generate gallery HTML for a provided subset of images
generatePropertyGalleryHTMLForImages(imagesSubset) {
if (!imagesSubset || imagesSubset.length === 0) {
return "";
}
let galleryHTML = "";
imagesSubset.forEach((image, index) => {
const title =
image.title || image.pcrm__Title__c || `Property Image ${index + 1}`;
galleryHTML += ``;
});
return galleryHTML;
}
// ===== TABLE DRAG AND DROP FUNCTIONALITY =====
// Handle table drag start
handleTableDragStart(event) {
this.isDraggingTable = true;
// Store table configuration data
this.draggedTableData = {
rows: this.tableRows,
cols: this.tableCols,
includeHeader: this.includeHeader,
};
// Set drag data
event.dataTransfer.setData("text/plain", "table");
event.dataTransfer.effectAllowed = "copy";
// Add visual feedback
event.currentTarget.classList.add("dragging");
// Add drag over class to editor
setTimeout(() => {
const editor = this.template.querySelector(".enhanced-editor-content");
if (editor) {
editor.classList.add("drag-over");
}
}, 100);
}
// Handle editor drag over
handleEditorDragOver(event) {
// Allow dropping tables and images
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
}
// Handle editor drop
handleEditorDrop(event) {
event.preventDefault();
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) {
this.showError("Editor not found");
return;
}
const dataType = event.dataTransfer.getData("text/plain");
if (dataType === "image" && this.currentImage) {
// Insert draggable image at drop
const img = document.createElement("img");
img.src = this.currentImage.url;
img.style.maxWidth = "300px";
img.style.height = "auto";
img.className = "draggable-image";
const container = document.createElement("div");
container.className = "draggable-image-container";
container.style.position = "absolute";
container.style.left =
event.clientX - editor.getBoundingClientRect().left + "px";
container.style.top =
event.clientY - editor.getBoundingClientRect().top + "px";
container.appendChild(img);
editor.appendChild(container);
this.makeImagesDraggableAndResizable([img]);
this.showSuccess("Image inserted via drag and drop!");
return;
}
if (!this.isDraggingTable || !this.draggedTableData) {
return;
}
// Remove visual feedback
this.removeTableDragFeedback();
// Get drop position
// editor already resolved above
// Save undo state before making changes
this.saveUndoState();
// Insert table at drop position
this.insertTableAtPosition(editor, this.draggedTableData, event);
// Reset drag state
this.isDraggingTable = false;
this.draggedTableData = null;
this.showSuccess("Table inserted via drag and drop!");
}
// Insert table at specific position
insertTableAtPosition(editor, tableData, event) {
// Get cursor position relative to editor
const rect = editor.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// Create table element directly using DOM methods (same as insertTable)
const tableId = `table-${Date.now()}-${Math.random()
.toString(36)
.substr(2, 9)}`;
// Create container div (use draggable-table-container to get drag/resize behavior)
const container = document.createElement("div");
container.className = "draggable-table-container";
container.setAttribute("data-table-id", tableId);
container.style.cssText =
"position: absolute; left: 0; top: 0; width: 400px; min-width: 200px; min-height: 150px; z-index: 1000; border: 2px dashed #667eea; border-radius: 8px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden;";
// Create table controls
const controls = document.createElement("div");
controls.className = "table-controls";
controls.style.cssText =
"position: absolute; top: -40px; left: 0; background: white; padding: 5px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); opacity: 1; transition: opacity 0.2s;";
// Add control buttons (same as insertTable)
const controlGroup1 = document.createElement("div");
controlGroup1.className = "table-control-group";
controlGroup1.style.cssText = "display: flex; gap: 5px;";
const addRowBtn = document.createElement("button");
addRowBtn.className = "table-control-btn";
addRowBtn.setAttribute("data-table-id", tableId);
addRowBtn.textContent = "+ Row";
addRowBtn.style.cssText =
"padding: 4px 8px; border: 1px solid #ddd; background: white; cursor: pointer;";
const addColBtn = document.createElement("button");
addColBtn.className = "table-control-btn";
addColBtn.setAttribute("data-table-id", tableId);
addColBtn.textContent = "+ Col";
addColBtn.style.cssText =
"padding: 4px 8px; border: 1px solid #ddd; background: white; cursor: pointer;";
const delRowBtn = document.createElement("button");
delRowBtn.className = "table-control-btn";
delRowBtn.setAttribute("data-table-id", tableId);
delRowBtn.textContent = "- Row";
delRowBtn.style.cssText =
"padding: 4px 8px; border: 1px solid #ddd; background: white; cursor: pointer;";
const delColBtn = document.createElement("button");
delColBtn.className = "table-control-btn";
delColBtn.setAttribute("data-table-id", tableId);
delColBtn.textContent = "- Col";
delColBtn.style.cssText =
"padding: 4px 8px; border: 1px solid #ddd; background: white; cursor: pointer;";
const deleteBtn = document.createElement("button");
deleteBtn.className = "table-control-btn delete";
deleteBtn.setAttribute("data-table-id", tableId);
deleteBtn.textContent = "🗑️";
deleteBtn.style.cssText =
"padding: 4px 8px; border: 1px solid #ff4444; background: #ff4444; color: white; cursor: pointer;";
controlGroup1.appendChild(addRowBtn);
controlGroup1.appendChild(addColBtn);
controlGroup1.appendChild(delRowBtn);
controlGroup1.appendChild(delColBtn);
const controlGroup2 = document.createElement("div");
controlGroup2.className = "table-control-group";
controlGroup2.style.cssText = "display: flex; gap: 5px; margin-left: 10px;";
controlGroup2.appendChild(deleteBtn);
controls.appendChild(controlGroup1);
controls.appendChild(controlGroup2);
// Create table
const table = document.createElement("table");
table.className = "inserted-table";
table.id = tableId;
table.style.cssText =
"border-collapse: collapse; width: 100%; margin: 1rem 0; border: 2px solid #333; background-color: white;";
// Create table body
const tbody = document.createElement("tbody");
// Add header row if requested
if (tableData.includeHeader) {
const thead = document.createElement("thead");
const headerRow = document.createElement("tr");
for (let col = 0; col < tableData.cols; col++) {
const th = document.createElement("th");
th.style.cssText =
"border: 1px solid #333; padding: 12px; background-color: #4f46e5; color: white; font-weight: bold; text-align: center;";
th.setAttribute("contenteditable", "true");
th.textContent = `Header ${col + 1}`;
headerRow.appendChild(th);
}
thead.appendChild(headerRow);
table.appendChild(thead);
}
// Add body rows
for (let row = 0; row < tableData.rows; row++) {
const tr = document.createElement("tr");
for (let col = 0; col < tableData.cols; col++) {
const td = document.createElement("td");
td.style.cssText =
"border: 1px solid #333; padding: 12px; background-color: #f8f9fa; min-width: 100px; min-height: 40px;";
td.setAttribute("contenteditable", "true");
td.textContent = `Cell ${row + 1}-${col + 1}`;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
// Assemble the container
container.appendChild(controls);
container.appendChild(table);
const tableElement = container;
// Try to find the best insertion point
const range = document.createRange();
const walker = document.createTreeWalker(
editor,
NodeFilter.SHOW_TEXT,
null,
false
);
let bestNode = null;
let bestDistance = Infinity;
let node;
// Find the closest text node to the drop position
while ((node = walker.nextNode())) {
const nodeRect = node.getBoundingClientRect();
const nodeX = nodeRect.left - rect.left;
const nodeY = nodeRect.top - rect.top;
const distance = Math.sqrt((x - nodeX) ** 2 + (y - nodeY) ** 2);
if (distance < bestDistance) {
bestDistance = distance;
bestNode = node;
}
}
// Insert into editor (append at end for simplicity)
editor.appendChild(tableElement);
// Position at drop point
tableElement.style.left =
Math.max(0, Math.min(x, editor.clientWidth - tableElement.offsetWidth)) +
"px";
tableElement.style.top =
Math.max(
0,
Math.min(y, editor.scrollHeight - tableElement.offsetHeight)
) + "px";
// Add drag/resize to the new table
this.addTableResizeHandles(tableElement);
this.makeDraggable(tableElement);
this.setupTableEventListeners(tableElement);
}
// Remove table drag feedback
removeTableDragFeedback() {
// Remove dragging class from button
const tableBtn = this.template.querySelector(".draggable-table-btn");
if (tableBtn) {
tableBtn.classList.remove("dragging");
}
// Remove drag-over class from editor
const editor = this.template.querySelector(".enhanced-editor-content");
if (editor) {
editor.classList.remove("drag-over");
}
}
// ===== TABLE EDITING FUNCTIONALITY =====
// Add row to table
addTableRow(event) {
const tableId = event.currentTarget.dataset.tableId;
const table = document.getElementById(tableId);
if (!table) return;
this.saveUndoState();
const tbody = table.querySelector("tbody");
const firstRow = tbody.querySelector("tr");
if (!firstRow) return;
const newRow = firstRow.cloneNode(true);
const cells = newRow.querySelectorAll("td, th");
cells.forEach((cell, index) => {
cell.textContent = `Cell ${tbody.children.length + 1}-${index + 1}`;
});
tbody.appendChild(newRow);
this.showSuccess("Row added successfully!");
}
// Add column to table
addTableColumn(event) {
const tableId = event.currentTarget.dataset.tableId;
const table = document.getElementById(tableId);
if (!table) return;
this.saveUndoState();
const rows = table.querySelectorAll("tr");
rows.forEach((row, rowIndex) => {
const newCell = document.createElement(
row.cells[0].tagName.toLowerCase()
);
newCell.style.border = "1px solid #ddd";
newCell.style.padding = "8px";
newCell.contentEditable = "true";
if (row.cells[0].tagName === "TH") {
newCell.style.backgroundColor = "#f2f2f2";
newCell.style.fontWeight = "bold";
newCell.textContent = `Header ${row.cells.length + 1}`;
} else {
newCell.textContent = `Cell ${rowIndex}-${row.cells.length + 1}`;
}
row.appendChild(newCell);
});
this.showSuccess("Column added successfully!");
}
// Delete row from table
deleteTableRow(event) {
const tableId = event.currentTarget.dataset.tableId;
const table = document.getElementById(tableId);
if (!table) return;
const tbody = table.querySelector("tbody");
if (tbody.children.length <= 1) {
this.showError("Cannot delete the last row!");
return;
}
this.saveUndoState();
tbody.removeChild(tbody.lastChild);
this.showSuccess("Row deleted successfully!");
}
// Delete column from table
deleteTableColumn(event) {
const tableId = event.currentTarget.dataset.tableId;
const table = document.getElementById(tableId);
if (!table) return;
const firstRow = table.querySelector("tr");
if (!firstRow || firstRow.cells.length <= 1) {
this.showError("Cannot delete the last column!");
return;
}
this.saveUndoState();
const rows = table.querySelectorAll("tr");
rows.forEach((row) => {
if (row.cells.length > 0) {
row.removeChild(row.lastChild);
}
});
this.showSuccess("Column deleted successfully!");
}
// Delete entire table
deleteTable(event) {
const tableId = event.currentTarget.dataset.tableId;
const tableContainer = document.querySelector(
`[data-table-id="${tableId}"]`
);
if (!tableContainer) return;
this.saveUndoState();
tableContainer.remove();
this.showSuccess("Table deleted successfully!");
}
// Handle table drag start (for moving tables)
handleTableContainerDragStart(event) {
if (event.target.classList.contains("table-control-btn")) {
event.preventDefault();
return;
}
const tableId = event.currentTarget.dataset.tableId;
event.dataTransfer.setData("text/plain", "table-container");
event.dataTransfer.setData("table-id", tableId);
event.dataTransfer.effectAllowed = "move";
// Add visual feedback
event.currentTarget.style.opacity = "0.5";
event.currentTarget.style.transform = "rotate(2deg)";
}
// Handle table container drag end
handleTableContainerDragEnd(event) {
event.currentTarget.style.opacity = "1";
event.currentTarget.style.transform = "rotate(0deg)";
}
// Setup event listeners for table controls
setupTableEventListeners(tableContainer) {
const tableId = tableContainer.dataset.tableId;
// Add row button
const addRowBtn = tableContainer.querySelector(
'.table-control-btn[title="Add Row"]'
);
if (addRowBtn) {
addRowBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.addTableRow(e);
});
}
// Add column button
const addColBtn = tableContainer.querySelector(
'.table-control-btn[title="Add Column"]'
);
if (addColBtn) {
addColBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.addTableColumn(e);
});
}
// Delete row button
const deleteRowBtn = tableContainer.querySelector(
'.table-control-btn[title="Delete Row"]'
);
if (deleteRowBtn) {
deleteRowBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.deleteTableRow(e);
});
}
// Delete column button
const deleteColBtn = tableContainer.querySelector(
'.table-control-btn[title="Delete Column"]'
);
if (deleteColBtn) {
deleteColBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.deleteTableColumn(e);
});
}
// Delete table button
const deleteTableBtn = tableContainer.querySelector(
'.table-control-btn[title="Delete Table"]'
);
if (deleteTableBtn) {
deleteTableBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.deleteTable(e);
});
}
// Drag and drop for table container
tableContainer.addEventListener("dragstart", (e) => {
this.handleTableContainerDragStart(e);
});
tableContainer.addEventListener("dragend", (e) => {
this.handleTableContainerDragEnd(e);
});
// Prevent drag on control buttons
const controlButtons =
tableContainer.querySelectorAll(".table-control-btn");
controlButtons.forEach((btn) => {
btn.addEventListener("dragstart", (e) => {
e.preventDefault();
});
});
}
// Improved text insertion that's draggable anywhere
insertDraggableText() {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) {
this.showError("Editor not found");
return;
}
// Save undo state before making changes
this.saveUndoState();
// Get center position for insertion
const centerPos = this.getCenterPositionForElement('text');
// Create draggable text element
const textElement = document.createElement("div");
textElement.className = "draggable-element draggable-text";
textElement.contentEditable = true;
textElement.innerHTML = "Click to edit text";
// Position absolutely for free placement
textElement.style.position = "absolute";
textElement.style.left = `${centerPos.x}px`;
textElement.style.top = `${centerPos.y}px`;
textElement.style.minWidth = "150px";
textElement.style.minHeight = "30px";
textElement.style.padding = "8px";
textElement.style.border = "2px solid transparent";
textElement.style.borderRadius = "4px";
textElement.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
textElement.style.zIndex = "1000";
textElement.style.cursor = "move";
textElement.style.fontFamily = "Inter, sans-serif";
textElement.style.fontSize = "14px";
textElement.style.lineHeight = "1.4";
// Add delete button/cross to text
this.addDeleteButton(textElement);
// Add to editor
editor.appendChild(textElement);
// Make it draggable and resizable
this.addResizeHandles(textElement);
this.makeDraggable(textElement);
// Select the text for immediate editing
setTimeout(() => {
textElement.focus();
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(textElement);
selection.removeAllRanges();
selection.addRange(range);
}, 100);
}
// Undo/Redo functionality
saveUndoState() {
try {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) {
console.warn("No editor found for saveUndoState");
return;
}
const currentState = {
content: editor.innerHTML,
timestamp: Date.now(),
};
this.undoStack.push(currentState);
// Limit undo stack size
if (this.undoStack.length > this.maxUndoSteps) {
this.undoStack.shift();
}
// Clear redo stack when new action is performed
this.redoStack = [];
} catch (error) {
console.error("Error in saveUndoState:", error);
}
}
undo() {
if (this.undoStack.length === 0) return;
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) return;
// Save current state to redo stack
const currentState = {
content: editor.innerHTML,
timestamp: Date.now(),
};
this.redoStack.push(currentState);
// Restore previous state
const previousState = this.undoStack.pop();
editor.innerHTML = previousState.content;
// Re-setup event handlers for any dynamic elements
this.setupEditorEventHandlers();
}
redo() {
if (this.redoStack.length === 0) return;
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) return;
// Save current state to undo stack
const currentState = {
content: editor.innerHTML,
timestamp: Date.now(),
};
this.undoStack.push(currentState);
// Restore next state
const nextState = this.redoStack.pop();
editor.innerHTML = nextState.content;
// Re-setup event handlers for any dynamic elements
this.setupEditorEventHandlers();
}
// Setup editor event handlers after undo/redo
setupEditorEventHandlers() {
this.setupEditorClickHandler();
this.ensureEditorEditable();
}
// Find the first available category that has images
findFirstAvailableCategory() {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
return "None";
}
// Define the order of categories to check
const categoryOrder = [
"Interior",
"Exterior",
"Kitchen",
"Bedroom",
"Living Area",
"Parking",
"Anchor",
"Maps",
"None",
];
// Check each category in order
for (let category of categoryOrder) {
const hasImages = this.realPropertyImages.some((img) => {
const imgCategory = img.category || img.pcrm__Category__c;
if (category === "None") {
return (
!imgCategory ||
imgCategory === "" ||
imgCategory === null ||
imgCategory === undefined ||
imgCategory === "None"
);
}
return imgCategory === category;
});
if (hasImages) {
return category;
}
}
// Fallback to None if no specific category has images
return "None";
}
// Ensure smart category selection only on initial load
ensureSmartCategorySelection() {
// Only run if initial category selection hasn't been done yet
if (
!this.initialCategorySelected &&
this.realPropertyImages &&
this.realPropertyImages.length > 0
) {
const firstAvailableCategory = this.findFirstAvailableCategory();
this.selectedCategory = firstAvailableCategory;
this.filterImagesByCategory(firstAvailableCategory);
this.initialCategorySelected = true;
// Update button states
const categoryButtons = this.template.querySelectorAll(
".category-btn-step2"
);
categoryButtons.forEach((btn) => {
btn.classList.remove("active");
if (btn.dataset.category === firstAvailableCategory) {
btn.classList.add("active");
}
});
}
}
// Enhanced keyboard event handler
handleEditorKeydown(event) {
// Check for Ctrl+Z (Undo)
if (
(event.ctrlKey || event.metaKey) &&
event.key === "z" &&
!event.shiftKey
) {
event.preventDefault();
this.undo();
return;
}
// Check for Ctrl+Y or Ctrl+Shift+Z (Redo)
if (
(event.ctrlKey || event.metaKey) &&
(event.key === "y" || (event.key === "z" && event.shiftKey))
) {
event.preventDefault();
this.redo();
return;
}
// Save state before modifications (with debouncing)
if (!this.pendingUndoSave) {
this.pendingUndoSave = true;
setTimeout(() => {
this.saveUndoState();
this.pendingUndoSave = false;
}, 500);
}
}
// Enhanced image manipulation methods
addResizeHandles(container) {
const handles = ["nw", "ne", "sw", "se", "n", "s", "w", "e"];
handles.forEach((handle) => {
const resizeHandle = document.createElement("div");
resizeHandle.className = `resize-handle ${handle}`;
resizeHandle.style.position = "absolute";
resizeHandle.style.background = "#4f46e5";
resizeHandle.style.border = "2px solid white";
resizeHandle.style.borderRadius = "50%";
resizeHandle.style.width = "12px";
resizeHandle.style.height = "12px";
resizeHandle.style.zIndex = "1001";
// Position handles
switch (handle) {
case "nw":
resizeHandle.style.top = "-6px";
resizeHandle.style.left = "-6px";
resizeHandle.style.cursor = "nw-resize";
break;
case "ne":
resizeHandle.style.top = "-6px";
resizeHandle.style.right = "-6px";
resizeHandle.style.cursor = "ne-resize";
break;
case "sw":
resizeHandle.style.bottom = "-6px";
resizeHandle.style.left = "-6px";
resizeHandle.style.cursor = "sw-resize";
break;
case "se":
resizeHandle.style.bottom = "-6px";
resizeHandle.style.right = "-6px";
resizeHandle.style.cursor = "se-resize";
break;
case "n":
resizeHandle.style.top = "-6px";
resizeHandle.style.left = "50%";
resizeHandle.style.transform = "translateX(-50%)";
resizeHandle.style.cursor = "n-resize";
break;
case "s":
resizeHandle.style.bottom = "-6px";
resizeHandle.style.left = "50%";
resizeHandle.style.transform = "translateX(-50%)";
resizeHandle.style.cursor = "s-resize";
break;
case "w":
resizeHandle.style.top = "50%";
resizeHandle.style.left = "-6px";
resizeHandle.style.transform = "translateY(-50%)";
resizeHandle.style.cursor = "w-resize";
break;
case "e":
resizeHandle.style.top = "50%";
resizeHandle.style.right = "-6px";
resizeHandle.style.transform = "translateY(-50%)";
resizeHandle.style.cursor = "e-resize";
break;
}
// Add resize functionality
this.addResizeFunctionality(resizeHandle, container, handle);
container.appendChild(resizeHandle);
});
}
// Add delete handle to image
addDeleteHandle(container) {
const deleteHandle = document.createElement("button");
deleteHandle.className = "delete-handle";
deleteHandle.innerHTML = "×";
deleteHandle.style.position = "absolute";
deleteHandle.style.top = "-8px";
deleteHandle.style.right = "-8px";
deleteHandle.style.background = "#ef4444";
deleteHandle.style.color = "white";
deleteHandle.style.border = "none";
deleteHandle.style.borderRadius = "50%";
deleteHandle.style.width = "20px";
deleteHandle.style.height = "20px";
deleteHandle.style.fontSize = "12px";
deleteHandle.style.cursor = "pointer";
deleteHandle.style.zIndex = "1002";
deleteHandle.style.display = "flex";
deleteHandle.style.alignItems = "center";
deleteHandle.style.justifyContent = "center";
deleteHandle.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.2)";
deleteHandle.addEventListener("click", (e) => {
e.stopPropagation();
this.saveUndoState();
container.remove();
});
deleteHandle.addEventListener("mouseenter", () => {
deleteHandle.style.background = "#dc2626";
deleteHandle.style.transform = "scale(1.1)";
});
deleteHandle.addEventListener("mouseleave", () => {
deleteHandle.style.background = "#ef4444";
deleteHandle.style.transform = "scale(1)";
});
container.appendChild(deleteHandle);
}
// Add resize functionality to handle
addResizeFunctionality(handle, container, direction) {
let isResizing = false;
let startX, startY, startWidth, startHeight, startLeft, startTop;
handle.addEventListener("mousedown", (e) => {
e.stopPropagation();
isResizing = true;
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(window.getComputedStyle(container).width, 10);
startHeight = parseInt(window.getComputedStyle(container).height, 10);
startLeft = parseInt(window.getComputedStyle(container).left, 10);
startTop = parseInt(window.getComputedStyle(container).top, 10);
document.addEventListener("mousemove", handleResize);
document.addEventListener("mouseup", stopResize);
});
const handleResize = (e) => {
if (!isResizing) return;
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
let newWidth = startWidth;
let newHeight = startHeight;
let newLeft = startLeft;
let newTop = startTop;
switch (direction) {
case "se":
newWidth = Math.max(50, startWidth + deltaX);
newHeight = Math.max(50, startHeight + deltaY);
break;
case "sw":
newWidth = Math.max(50, startWidth - deltaX);
newHeight = Math.max(50, startHeight + deltaY);
newLeft = startLeft + (startWidth - newWidth);
break;
case "ne":
newWidth = Math.max(50, startWidth + deltaX);
newHeight = Math.max(50, startHeight - deltaY);
newTop = startTop + (startHeight - newHeight);
break;
case "nw":
newWidth = Math.max(50, startWidth - deltaX);
newHeight = Math.max(50, startHeight - deltaY);
newLeft = startLeft + (startWidth - newWidth);
newTop = startTop + (startHeight - newHeight);
break;
case "e":
newWidth = Math.max(50, startWidth + deltaX);
break;
case "w":
newWidth = Math.max(50, startWidth - deltaX);
newLeft = startLeft + (startWidth - newWidth);
break;
case "s":
newHeight = Math.max(50, startHeight + deltaY);
break;
case "n":
newHeight = Math.max(50, startHeight - deltaY);
newTop = startTop + (startHeight - newHeight);
break;
}
container.style.width = newWidth + "px";
container.style.height = newHeight + "px";
container.style.left = newLeft + "px";
container.style.top = newTop + "px";
};
const stopResize = () => {
isResizing = false;
document.removeEventListener("mousemove", handleResize);
document.removeEventListener("mouseup", stopResize);
};
}
// Make element draggable (enhanced version)
makeDraggable(element) {
let isDragging = false;
let startX, startY, startLeft, startTop;
element.addEventListener("mousedown", (e) => {
// Don't start drag if clicking on resize handles or delete button
if (
e.target.classList.contains("resize-handle") ||
e.target.classList.contains("delete-handle")
) {
return;
}
isDragging = true;
startX = e.clientX;
startY = e.clientY;
startLeft = parseInt(window.getComputedStyle(element).left, 10);
startTop = parseInt(window.getComputedStyle(element).top, 10);
element.style.cursor = "grabbing";
document.addEventListener("mousemove", handleDrag);
document.addEventListener("mouseup", stopDrag);
});
const handleDrag = (e) => {
if (!isDragging) return;
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
// Calculate new position with pixel precision
const newLeft = Math.round(startLeft + deltaX);
const newTop = Math.round(startTop + deltaY);
// Ensure absolute positioning is maintained
element.style.position = "absolute";
element.style.left = newLeft + "px";
element.style.top = newTop + "px";
// Ensure box-sizing is correct for precise positioning
element.style.boxSizing = "border-box";
// Ensure z-index is maintained
if (!element.style.zIndex) {
element.style.zIndex = "1000";
}
// Log position for debugging
console.log("Dragging to position:", {
left: newLeft + "px",
top: newTop + "px",
deltaX: deltaX,
deltaY: deltaY
});
};
const stopDrag = () => {
isDragging = false;
element.style.cursor = "move";
// Lock in the final position with precise pixel values
const finalLeft = Math.round(parseFloat(element.style.left) || 0);
const finalTop = Math.round(parseFloat(element.style.top) || 0);
// Ensure all positioning is locked precisely
element.style.position = "absolute";
element.style.left = finalLeft + "px";
element.style.top = finalTop + "px";
element.style.boxSizing = "border-box";
element.style.zIndex = element.style.zIndex || "1000";
// Add a data attribute to track the position for debugging
element.setAttribute('data-final-left', finalLeft);
element.setAttribute('data-final-top', finalTop);
console.log("Final position locked:", {
left: finalLeft + "px",
top: finalTop + "px",
zIndex: element.style.zIndex,
element: element.className
});
document.removeEventListener("mousemove", handleDrag);
document.removeEventListener("mouseup", stopDrag);
};
}
// Select draggable element
selectDraggableElement(element) {
// Remove selection from all draggable elements
const editor = this.template.querySelector(".enhanced-editor-content");
if (editor) {
const allDraggable = editor.querySelectorAll(
".draggable-element, .draggable-image-container, .draggable-table-container"
);
allDraggable.forEach((el) => {
if (el !== element) {
el.classList.remove("selected");
// Remove any resize handles
const resizeHandles = el.querySelectorAll(".resize-handle");
resizeHandles.forEach((handle) => handle.remove());
// Remove any delete buttons
const deleteButtons = el.querySelectorAll(
".delete-handle, .delete-image-btn"
);
deleteButtons.forEach((btn) => btn.remove());
}
});
}
// Add selection to clicked element
element.classList.add("selected");
// Add resize handles and controls to the selected element
if (element.classList.contains("draggable-image-container")) {
const img = element.querySelector("img");
if (img) {
this.addResizeHandles(img);
this.addDeleteButton(element);
}
} else if (element.classList.contains("draggable-table-container")) {
this.addTableResizeHandles(element);
this.addDeleteButton(element);
} else if (element.tagName && element.tagName.toLowerCase() === "img") {
// If already wrapped, ensure handles on container
if (
element.parentElement &&
element.parentElement.classList &&
element.parentElement.classList.contains("draggable-image-container")
) {
const container = element.parentElement;
this.addResizeHandles(container);
this.makeDraggable(container);
this.addDeleteButton(container);
this.highlightSelectedElement(container);
// Do NOT change position here; keep intact unless dragged
return;
}
// Wrap plain image and add handles; preserve on-screen size and position
const editor = this.template.querySelector(".enhanced-editor-content");
const rect = element.getBoundingClientRect();
const editorRect = editor
? editor.getBoundingClientRect()
: { left: 0, top: 0 };
const scale = this.zoom || 1;
const currentWidth = rect.width / scale;
const currentHeight = rect.height / scale;
// Insert a placeholder to avoid layout shift in the original flow
const placeholder = document.createElement("div");
placeholder.style.width = currentWidth + "px";
placeholder.style.height = currentHeight + "px";
placeholder.style.display =
window.getComputedStyle(element).display || "inline-block";
const container = document.createElement("div");
container.className = "draggable-image-container";
container.style.position = "absolute"; // anchored to editor (set to relative elsewhere)
// Account for preview zoom scale to avoid displacement
container.style.left =
(rect.left - editorRect.left + (editor ? editor.scrollLeft : 0)) /
scale +
"px";
container.style.top =
(rect.top - editorRect.top + (editor ? editor.scrollTop : 0)) / scale +
"px";
container.style.zIndex =
window.getComputedStyle(element).zIndex || "auto";
container.style.display = "inline-block";
// Move the image into container and preserve size
// Set container and image sizing
container.style.width = currentWidth + "px";
container.style.height = currentHeight + "px";
container.style.boxSizing = "border-box";
element.style.width = "100%";
element.style.height = "100%";
element.style.maxWidth = "none";
element.style.maxHeight = "none";
element.style.margin = "0";
element.style.display = "block";
element.style.boxSizing = "border-box";
element.style.objectFit =
window.getComputedStyle(element).objectFit || "cover";
// Replace the image in the flow with placeholder, then move image to absolute container
const originalParent = element.parentNode;
originalParent.insertBefore(placeholder, element);
if (editor) {
editor.appendChild(container);
} else {
originalParent.insertBefore(container, placeholder);
}
container.appendChild(element);
container.classList.add("no-frame");
this.addResizeHandles(container);
this.makeDraggable(container);
this.addDeleteButton(container);
this.highlightSelectedElement(container);
}
}
// Ensure all draggable elements maintain their exact positions
preserveElementPositions() {
const editor = this.template.querySelector(".enhanced-editor-content");
if (!editor) return;
const draggableElements = editor.querySelectorAll(
".draggable-element, .draggable-image-container, .draggable-table-container"
);
draggableElements.forEach((element) => {
// Ensure absolute positioning
element.style.position = "absolute";
element.style.boxSizing = "border-box";
// Preserve existing position values
if (element.style.left) {
const leftValue = parseInt(element.style.left, 10);
element.style.left = leftValue + "px";
}
if (element.style.top) {
const topValue = parseInt(element.style.top, 10);
element.style.top = topValue + "px";
}
// Ensure z-index is maintained
if (!element.style.zIndex) {
element.style.zIndex = "1000";
}
console.log("Preserved position for element:", {
left: element.style.left,
top: element.style.top,
position: element.style.position
});
});
}
// Add delete button to element
addDeleteButton(element) {
// Remove existing delete button if any
const existingDelete = element.querySelector(
".delete-handle, .delete-image-btn"
);
if (existingDelete) {
existingDelete.remove();
}
const deleteBtn = document.createElement("div");
deleteBtn.className = "delete-handle";
deleteBtn.innerHTML = "×";
deleteBtn.style.cssText = `
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
background: #dc3545;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 12px;
font-weight: bold;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
`;
deleteBtn.addEventListener("click", (e) => {
e.stopPropagation();
element.remove();
});
element.appendChild(deleteBtn);
}
// Add table resize handles
addTableResizeHandles(tableContainer) {
// Remove existing resize handles if any
const existingHandles = tableContainer.querySelectorAll(".resize-handle");
existingHandles.forEach((handle) => handle.remove());
const table = tableContainer.querySelector("table");
if (!table) return;
// Add resize handles to table corners
const positions = ["nw", "ne", "sw", "se"];
positions.forEach((pos) => {
const handle = document.createElement("div");
handle.className = `resize-handle resize-${pos}`;
handle.dataset.position = pos;
handle.style.cssText = `
position: absolute;
width: 8px;
height: 8px;
background: #007bff;
border: 1px solid white;
cursor: ${pos}-resize;
z-index: 1000;
`;
// Position the handle
switch (pos) {
case "nw":
handle.style.top = "-4px";
handle.style.left = "-4px";
break;
case "ne":
handle.style.top = "-4px";
handle.style.right = "-4px";
break;
case "sw":
handle.style.bottom = "-4px";
handle.style.left = "-4px";
break;
case "se":
handle.style.bottom = "-4px";
handle.style.right = "-4px";
break;
}
// Enable resizing using shared startResize
handle.addEventListener("mousedown", (e) => {
e.preventDefault();
e.stopPropagation();
this.startResize(e, tableContainer, pos);
});
tableContainer.appendChild(handle);
});
}
// Force re-render by updating a tracked property
forceRerender() {
// Update a dummy property to force reactivity
this.renderKey = this.renderKey ? this.renderKey + 1 : 1;
}
// Debug method to log current state
logCurrentState() { }
// Test method to manually set an image (for debugging)
testSetImage() {
this.selectedImageUrl =
"https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200";
this.selectedImageName = "Test Image";
this.insertButtonDisabled = false;
this.logCurrentState();
}
// Global function to get a random image from available images
getRandomImage() {
const fallbackImage =
"https://plus.unsplash.com/premium_photo-1676467963268-5a20d7a7a448?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
// Get all available images from different sources
const allImages = [];
// Add real property images
if (
Array.isArray(this.realPropertyImages) &&
this.realPropertyImages.length > 0
) {
allImages.push(...this.realPropertyImages);
}
// Add property images
if (Array.isArray(this.propertyImages) && this.propertyImages.length > 0) {
allImages.push(...this.propertyImages);
}
// Add images from all categories
Object.values(this.imagesByCategory).forEach((categoryImages) => {
if (Array.isArray(categoryImages) && categoryImages.length > 0) {
allImages.push(...categoryImages);
}
});
// If no images available, return fallback
if (allImages.length === 0) {
return fallbackImage;
}
// Get a random image from available images
const randomIndex = Math.floor(Math.random() * allImages.length);
const randomImage = allImages[randomIndex];
// Return the image URL, handling different possible structures
return randomImage?.url || randomImage?.src || randomImage || fallbackImage;
}
connectedCallback() {
this.loadSavedTemplates();
}
disconnectedCallback() {
// Clean up event listeners
if (this.resizeHandler) {
window.removeEventListener('resize', this.resizeHandler);
}
}
}