(?:\s*)/i)
+ .map((s) => s.trim())
+ .filter(Boolean);
+ if (parts.length < 2) return;
+ const bulletMarker = /^\s*(?: \s*)*(\*|\-|•)\s+/i;
+ const numberMarker = /^\s*(?: \s*)*\d+[\.)]\s+/i;
+ const allBullets = parts.every((p) =>
+ bulletMarker.test(p.replace(/<[^>]+>/g, ""))
+ );
+ const allNumbers = parts.every((p) =>
+ numberMarker.test(p.replace(/<[^>]+>/g, ""))
+ );
+ if (!(allBullets || allNumbers)) return;
+ const list = document.createElement(allNumbers ? "ol" : "ul");
+ list.style.listStyleType = allNumbers ? "decimal" : "disc";
+ list.style.paddingLeft = "22px";
+ list.style.margin = "0 0 8px 0";
+ list.style.breakInside = "avoid";
+ list.style.pageBreakInside = "avoid";
+ parts.forEach((line) => {
+ const li = document.createElement("li");
+ li.innerHTML = line.replace(
+ /^\s*(?: \s*)*(\*|\-|•|\d+[\.)])\s+/i,
+ ""
+ );
+ li.style.breakInside = "avoid";
+ li.style.pageBreakInside = "avoid";
+ list.appendChild(li);
+ });
+ block.replaceWith(list);
+ });
+
+ return tempDiv.innerHTML;
+ }
+ // Generate PDF via external API using Apex proxy
+ async generatePdfViaExternalApi() {
+ try {
+ // Show loading state
+ this.isLoading = true;
+ this.showProgress("Preparing content for AI processing...");
+
+ // First, ensure we have template content loaded
+ let htmlContent = "";
+
+ // Check if preview frame has content
+ const previewFrame = this.template.querySelector(
+ ".enhanced-editor-content"
+ );
+ if (!previewFrame) {
+ throw new Error("Editor content not found");
+ }
+
+ htmlContent = previewFrame.innerHTML;
+
+ // Debug: Check if draggable elements are present
+ const tempDiv = document.createElement("div");
+ tempDiv.innerHTML = htmlContent;
+ const draggableElements = tempDiv.querySelectorAll(
+ ".draggable-element, .draggable-image-container, .draggable-table-container"
+ );
+ draggableElements.forEach((el, index) => {});
+
+ // If preview frame is empty, generate the template HTML first
+ if (
+ !htmlContent ||
+ htmlContent.trim() === "" ||
+ htmlContent.length < 100
+ ) {
+ this.showProgress("Generating template content...");
+
+ // Generate the template HTML using the selected template and property
+ if (this.selectedTemplateId && this.selectedPropertyId) {
+ // Create a complete HTML template with property data
+ htmlContent = this.createCompleteTemplateHTML();
+
+ // Load it into the preview frame so user can see it
+ previewFrame.innerHTML = htmlContent;
+ } else {
+ throw new Error("No template or property selected");
+ }
+ }
+
+ // Ensure we have a complete HTML document with page size information
+ if (!htmlContent.includes("")) {
+ htmlContent = `
+
+
+ Property Brochure - ${this.selectedPageSize}
+ Property Brochure - ${this.selectedPageSize}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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() +
+ " sq ft"
+ : "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."
+ }
+
+
+
+
+
+
+
+
+
+
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 = `
+
+
📄 PDF Generated Successfully!
+
Size: ${responseData.size_mb} MB
+
This PDF is too large for direct download due to Salesforce limits.
+
+
+
+ 🌐 Download from Server
+
+
+
+ 📦 Generate Compressed Version
+
+
+
+
+
💡 Why is this happening?
+
+ Your template contains high-quality images
+ Salesforce has a 6MB response limit
+ The compressed version will reduce image quality but keep all content
+
+
+
");
+
+ // Wrap in paragraph tags if not already wrapped
+ if (!formattedDescription.startsWith("
")) {
+ formattedDescription = "
" + formattedDescription + "
";
+ }
+
+ // Ensure proper spacing between paragraphs
+ formattedDescription = formattedDescription.replace(/<\/p>/g, "
");
+
+ return formattedDescription;
+ }
+
+ // Generate amenities HTML from property data
+ generateAmenitiesHTML(data) {
+ const amenities = [];
+
+ // 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 '
';
+ }
+
+ // Generate HTML for amenities
+ return amenities
+ .map(
+ (amenity) =>
+ `${amenity}
`
+ )
+ .join("");
+ }
+
+ // Template methods
+ createBlankTemplate() {
+ const data = this.propertyData || {};
+ const propertyName = data.Name || data.propertyName || "Property Name";
+ const location = data.Address__c || data.location || "Location";
+ const price = data.Price__c || data.price || "Price";
+ const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A";
+ const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A";
+ const size = data.Square_Feet__c || data.size || "N/A";
+ const sizeUnit = data.sizeUnit || "sq ft";
+ const status = data.Status__c || data.status || "Available";
+ const propertyType =
+ data.Property_Type__c || data.propertyType || "Property Type";
+ const city = data.City__c || data.city || "City";
+ const community = data.Community__c || data.community || "Community";
+ const subCommunity =
+ data.Sub_Community__c || data.subCommunity || "Sub Community";
+ const furnished = data.Furnished__c || data.furnished || "N/A";
+ const parkingSpaces = data.Parking_Spaces__c || data.parkingSpaces || "N/A";
+ const buildYear = data.Build_Year__c || data.buildYear || "N/A";
+ const titleEnglish =
+ data.Title_English__c || data.titleEnglish || "Property Title";
+ const descriptionEnglish =
+ data.Description_English__c ||
+ data.descriptionEnglish ||
+ "Property Description";
+ const rentPriceMin = data.Rent_Price_Min__c || data.rentPriceMin || "N/A";
+ const salePriceMin = data.Sale_Price_Min__c || data.salePriceMin || "N/A";
+
+ // Build gallery pages so ALL images render in the empty template
+ const allImages = Array.isArray(this.realPropertyImages)
+ ? this.realPropertyImages
+ : [];
+ const imagesPerPage = 8;
+ const firstChunk = allImages.slice(0, imagesPerPage);
+ let additionalGalleryPagesHTML = "";
+ if (allImages.length > imagesPerPage) {
+ for (let i = imagesPerPage; i < allImages.length; i += imagesPerPage) {
+ const chunk = allImages.slice(i, i + imagesPerPage);
+ additionalGalleryPagesHTML += `
+
+
+
Property Gallery
+
+ ${this.generatePropertyGalleryHTMLForImages(chunk)}
+
+
+
+
+
+
+
+
+
${propertyName}
+
${location}
+
${price}
+
+
+
+
+
+
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"
+ }
+
+
+
+
+
Pricing Information
+
+
Rent Price: ${rentPriceMin}
+
Sale Price: ${salePriceMin}
+
Rent Price (Max): ${
+ data.rentPriceMax || "N/A"
+ }
+
Sale Price (Max): ${
+ data.salePriceMax || "N/A"
+ }
+
+
+
+
+
+
Rent Availability
+
+
Rent Available From: ${
+ data.rentAvailableFrom || "N/A"
+ }
+
Rent Available To: ${
+ data.rentAvailableTo || "N/A"
+ }
+
+
+
+
+
+
Property Description
+
+
${titleEnglish}
+
+
+ ${descriptionEnglish}
+
+
+
+
Property Type: ${propertyType}
+
Status: ${status}
+
Furnished: ${furnished}
+
Build Year: ${buildYear}
+
+
+
+
+
+
+
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"
+ }
+
+
+
+
+
Property Gallery
+
+ ${
+ firstChunk.length > 0
+ ? this.generatePropertyGalleryHTMLForImages(
+ firstChunk
+ )
+ : this.generatePropertyGalleryHTML()
+ }
+
+
+
Luxury Villa Luxury Villa Template Elegance. Precision. Luxury.
`;
+ }
+ createShiftTemplate() {
+ const data = this.propertyData || {};
+ const propertyName = data.Name || data.propertyName || "SHIFT PROPERTY";
+ const location = data.Address__c || data.location || "Modern Living";
+ const price = data.Price__c || data.price || "Starting from $1,500,000";
+ const referenceId =
+ data.pcrm__Title_English__c || data.Name || data.propertyName || "";
+ const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A";
+ const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A";
+ const size = data.Square_Feet__c || data.size || "N/A";
+ const propertyType =
+ data.Property_Type__c || data.propertyType || "Property Type";
+ const description =
+ data.Description_English__c ||
+ data.descriptionEnglish ||
+ "Modern living at its finest.";
+
+ // Get smart images - use direct method for exterior
+ const exteriorImage = this.getExteriorImageUrl();
+ // Gallery HTML generated once in each template scope when needed
+ const allGalleryImages = this.realPropertyImages || [];
+ const firstGalleryCount = Math.min(4, allGalleryImages.length);
+ const firstPageImages = allGalleryImages.slice(0, firstGalleryCount);
+ const propertyGallery = this.generatePropertyGalleryHTML();
+ const interiorImage = this.getSmartImageForSection(
+ "interior",
+ ""
+ );
+ const kitchenImage = this.getSmartImageForSection(
+ "kitchen",
+ ""
+ );
+
+ // Debug logging
+
+ // Generate property gallery for uncategorized images (already declared above)
+
+ return `Shift Property - Modern Living EXTERIOR IMAGE TEST: ${exteriorImage}
About Shift Property Experience the future of living with Shift Property, where innovation meets comfort in perfect harmony.
Contact Information Reference ID: ${referenceId}
Agent: ${
+ data.agentName || "Innovation Specialist"
+ }
Phone: ${
+ data.agentPhone || "(555) 789-0123"
+ }
${propertyGallery}
Saint Barts Villa - Caribbean Paradise About Saint Barts Villa Discover paradise at Saint Barts Villa, where tropical luxury meets Caribbean charm in an idyllic setting.
Contact Information Reference ID: ${referenceId}
Agent: ${
+ data.agentName || "Caribbean Specialist"
+ }
Phone: ${
+ data.agentPhone || "(555) 456-7890"
+ }
${propertyGallery}
Learnoy Estate - Heritage Collection About ${propertyName} ${description}
Property Type: ${propertyType}
Bedrooms: ${bedrooms}
Bathrooms: ${bathrooms}
Size: ${size} sq ft
Status: ${
+ data.Status__c || data.status || "N/A"
+ }
Year Built: ${
+ data.Build_Year__c || data.yearBuilt || "N/A"
+ }
Furnished: ${
+ data.Furnished__c || data.furnished || "N/A"
+ }
Parking: ${
+ data.Parking_Spaces__c || data.parking || "N/A"
+ }
Property Features ${amenitiesHTML}
Contact Information Reference ID: ${
+ data.Reference_Number__c || data.referenceNumber || "N/A"
+ }
Agent: ${
+ data.Agent_Name__c || data.agentName || "N/A"
+ }
Phone: ${
+ data.Agent_Phone__c || data.agentPhone || "N/A"
+ }
Email: ${
+ data.Agent_Email__c || data.agentEmail || "N/A"
+ }
Property Gallery ${propertyGallery}
Leafamp Urban - City Living Experience About Leafamp Urban Experience the pulse of city life at Leafamp Urban, where modern design meets urban convenience in the heart of the metropolis.
Floor Plan & Location Discover the strategic location and layout of Leafamp Urban, perfectly positioned for modern urban living with easy access to all city amenities.
MAPS IMAGE TEST: ${mapsImage}
Contact Information Reference ID: ${referenceId}
Agent: ${
+ data.agentName || "Urban Specialist"
+ }
Phone: ${
+ data.agentPhone || "(555) 987-6543"
+ }
${propertyGallery}
Property Brochure - A4 Size
+
+
+
+
${propertyName}
+
${location}
+
+
${price}
+
+
+
+
+
+
+
+
+
About this Property
+
${description}
+
+
+
+
+
+
+
+
+
+
+
+
Specifications
+
+
Status: ${status}
+
Type: ${propertyType}
+
Floor: ${floor}
+
Parking: ${parking}
+
Year Built: ${yearBuilt}
+
Furnishing: ${furnishing}
+
Maintenance Fee: ${maintenanceFee}
+
Service Charge: ${serviceCharge}
+
+
+
+
+
Amenities & Features
+
+ ${amenitiesHTML}
+
+
+
+
+
+
+
+
+
Location & Nearby
+
+
Landmarks: ${nearbyLandmarks}
+
Transportation: ${transportation}
+
+
+
Shopping: ${shoppingCenters}
+
Airport: ${airportDistance}
+
+
+
+
+
+
+ Additional Information
+
+
Pet Friendly: ${petFriendly}
+
Smoking: ${smokingAllowed}
+
Available From: ${availableFrom}
+
Minimum Contract: ${minimumContract}
+
Security Deposit: ${securityDeposit}
+
+
+
+
+
+ Property Gallery
+
+ ${propertyGallery}
+
+
+
+
+
Prestige Real Estate Brochure - 4 Page - A3 Size
+
+
+
+
+ ${propertyName}
+
+
+
+
+
+
+
+
+
Description
+
+ ${description}
+
+
+
+
Specifications
+
+
Reference ID: [Reference ID]
+
Status: [Status]
+
Type: [Property Type]
+
Year Built: [Year Built]
+
Floor: [Floor]
+
Parking: [Parking]
+
Furnishing: [Furnishing]
+
Maintenance Fee: [Maintenance Fee]
+
Service Charge: [Service Charge]
+
+
+
+
Amenities & Features
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Schools
+
[Schools]
+
+
+
+
Shopping
+
[Shopping Centers]
+
+
+
+
Airport
+
[Airport Distance]
+
+
+
+
Landmarks
+
[Nearby Landmarks]
+
+
+
+
Transportation
+
[Transportation]
+
+
+
+
Hospitals
+
[Hospitals]
+
+
+
+
Beach
+
[Beach Distance]
+
+
+
+
Metro
+
[Metro Distance]
+
+
+
+
+
+
+
+
+
+
+
+ Additional Information
+
+
Pet Friendly: [Pet Friendly Status]
+
Smoking: [Smoking Allowed]
+
Available From: [Available From Date]
+
Minimum Contract: [Minimum Contract Duration]
+
Security Deposit: [Security Deposit]
+
Utilities Included: [Utilities Included]
+
Internet Included: [Internet Included]
+
Cable Included: [Cable Included]
+
+
+
+
+
+
+ //
+ //
+ //
06
+ //
${propertyName} - Property Gallery
+
+ //
+ // ${propertyGalleryHTML}
+ //
+ //
+ //
+
+
Modern Urban Residences Brochure - Updated - A4 Size
+
+
+
+
An Urban Oasis
+
THE VERTICE
+
18 Skyline Avenue, Metropolis Centre, MC 90210
+
+
+
+
+
+
+
+
Where Design Meets Desire.
+
The Vertice is not just a building; it's a bold statement on modern urban living. Conceived for the discerning individual, it offers a unique blend of architectural prowess, bespoke interiors, and an unparalleled lifestyle experience right in the heart of the city.
+
Every residence is a testament to quality, featuring panoramic city views from floor-to-ceiling windows, intelligent home systems, and finishes selected from the finest materials around the globe. This is more than a home; it's a new perspective.
+
+
+
+
+
+
+
+
+ Open-Concept Living Space
+ Master Bedroom Suite
+ Gourmet Chef's Kitchen
+ Spa-Inspired Bathroom
+ Private Balcony Views
+
+
+
+
+
+
+
An unrivaled collection of amenities offers residents a resort-style living experience. From the serene rooftop pool to the state-of-the-art wellness center, every detail is crafted for comfort, convenience, and luxury.
+
+
+
+
+
Lifestyle Amenities
+
+
+
+
+
Key Specifications
+
Status New Development
+
Property Type Condominium
+
Year Built 2025
+
Technology Integrated Smart Home
+
Design Sustainable & Eco-Friendly
+
+
+
+
+
+
+
+
+
+
+
+
Two-Bedroom Residence
+
+
A thoughtfully designed space perfect for urban professionals or small families, combining comfort with panoramic city views.
+
+
+
+
+
Three-Bedroom Penthouse
+
+
The pinnacle of luxury living, this penthouse offers expansive spaces, premium finishes, and exclusive access to a private rooftop terrace.
+
+
+
Additional Information
+
+
Pets
Allowed (w/ restrictions)
+
Smoking
In designated areas
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Schedule a Private Viewing
+
Experience The Vertice firsthand. Contact our sales executive to arrange an exclusive tour of the property and available residences.
+
+
+
Neighborhood Highlights
+
+ Landmarks: Central Park (5 min)Transportation: Metro Line A (2 min walk)Schools: Metropolis Intl. (10 min)Shopping: The Galleria Mall (8 min)Airport: 25 min drive
+
+
+
+
Editorial Real Estate Brochure - Updated - A4 Size
+
+
+
02
+
A Sanctuary of Modern Design
+
Where light, space, and nature converge to create an unparalleled living experience.
+
+
+
Designed by the world-renowned architect, Helena Vance, The Serenity House is more than a home; it is a living sculpture. Every line, material, and detail has been thoughtfully considered to evoke a sense of peace and connection with the surrounding landscape. Soaring ceilings and floor-to-ceiling glass walls dissolve the boundaries between inside and out, flooding the space with natural light.
+
A timeless residence built not just for living, but for thriving.
+
The interior palette is a harmonious blend of natural oak, Italian travertine, and warm bronze accents, creating an atmosphere of understated luxury. This property represents a unique opportunity to own a piece of architectural history.
+
+
+
+
+
+
+
03
+
Property Specifications
+
A comprehensive overview of the property's features, details, and amenities.
+
+
+
+
+
+
+
Property Details
+
+
Status For Sale
+
Year Built 2023
+
Type Single-Family Home
+
Furnishing Partially Furnished
+
Floor 2 Levels
+
Maintenance Fee $1,200 / month
+
Parking 3-Car Garage
+
Service Charge Included
+
+
+
+
+
Amenities & Features
+
+
+
+
+
+
+
04
+
Floor Plan & Details
+
+
+
+
Location & Nearby
+
Schools 5 min drive
+
Shopping 10 min drive
+
Hospitals 12 min drive
+
Country Club 8 min drive
+
Airport 20 min drive
+
+
+
Additional Information
+
Pet-Friendly By Approval
+
Smoking Not Permitted
+
Availability Immediate
+
Utilities Not Included
+
+
+
+
+
+
Floor Plan & Location
+
+
+
+
+
+ Element Options
+
+
+ ↑ Move Up
+ ↓ Move Down
+
+
+ Insert Text
+ Insert Table
+
+
+ Property Image
+ Local Image
+
+ Delete Element
+ `;
+ }
+
+ // Hide selector options
+ hideSelectorOptions() {
+ const optionsPanel = this.template.querySelector(".selector-options-panel");
+ if (optionsPanel) {
+ optionsPanel.remove();
+ }
+ }
+
+ // Insert content at selected position
+ insertAtSelection(type) {
+ if (!this.selectedElement) return;
+
+ let content;
+ switch (type) {
+ case "text":
+ content = document.createElement("p");
+ content.textContent = "New Text";
+ content.contentEditable = true;
+ break;
+ case "image":
+ content = document.createElement("img");
+ content.src = "https://via.placeholder.com/200x150";
+ content.style.maxWidth = "200px";
+ content.style.height = "auto";
+ content.draggable = true;
+ content.addEventListener(
+ "dragstart",
+ this.handleImageDragStart.bind(this)
+ );
+ break;
+ case "table":
+ content = this.createTableElement();
+ // Make table draggable
+ content.draggable = true;
+ content.addEventListener(
+ "dragstart",
+ this.handleTableDragStart.bind(this)
+ );
+ break;
+ }
+
+ if (content) {
+ this.selectedElement.parentNode.insertBefore(
+ content,
+ this.selectedElement.nextSibling
+ );
+ this.clearSelection();
+ }
+ }
+
+ // Remove selected element
+ removeSelectedElement() {
+ if (this.selectedElement) {
+ this.selectedElement.remove();
+ this.clearSelection();
+ }
+ }
+
+ // Move element up
+ moveElementUp() {
+ if (this.selectedElement && this.selectedElement.previousElementSibling) {
+ this.selectedElement.parentNode.insertBefore(
+ this.selectedElement,
+ this.selectedElement.previousElementSibling
+ );
+ }
+ }
+
+ // Move element down
+ moveElementDown() {
+ if (this.selectedElement && this.selectedElement.nextElementSibling) {
+ this.selectedElement.parentNode.insertBefore(
+ this.selectedElement.nextElementSibling,
+ this.selectedElement
+ );
+ }
+ }
+
+ // Insert property image
+ insertPropertyImage() {
+ if (!this.selectedElement) return;
+
+ // Show property image selection popup
+ this.showPropertyImagePopup();
+ }
+
+ // Insert local image
+ insertLocalImage() {
+ if (!this.selectedElement) return;
+
+ 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 = (e) => {
+ const img = document.createElement("img");
+ img.src = e.target.result;
+ img.style.maxWidth = "200px";
+ img.style.height = "auto";
+ img.draggable = true;
+ img.addEventListener(
+ "dragstart",
+ this.handleImageDragStart.bind(this)
+ );
+
+ this.selectedElement.parentNode.insertBefore(
+ img,
+ this.selectedElement.nextSibling
+ );
+ this.clearSelection();
+ };
+ reader.readAsDataURL(file);
+ }
+ };
+ input.click();
+ }
+ // Show property image popup
+ showPropertyImagePopup() {
+ // Create property image selection popup
+ let popup = this.template.querySelector(".property-image-popup");
+ if (!popup) {
+ popup = document.createElement("div");
+ popup.className = "property-image-popup";
+ popup.style.cssText = `
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: white;
+ border: 2px solid #6b7280;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+ z-index: 10001;
+ max-width: 400px;
+ max-height: 500px;
+ overflow-y: auto;
+ `;
+ document.body.appendChild(popup);
+ }
+
+ // Get property images
+ const images = this.realPropertyImages || [];
+ const imageGrid = images
+ .map(
+ (img) => `
+
+
+
${
+ img.category || "Uncategorized"
+ }
+
+ Select Property Image
+
+
+ ${imageGrid}
+
+ Close
+ `;
+ }
+ // 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));
+
+ 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 = "0";
+ });
+ }
+
+ // 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) {
+ event.dataTransfer.setData("text/plain", "image");
+ event.dataTransfer.effectAllowed = "move";
+ }
+
+ // Handle image drag end
+ handleImageDragEnd(event) {
+ // Remove any drag feedback
+ }
+
+ // 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 editorContent = this.template.querySelector(
+ ".enhanced-editor-content"
+ );
+ if (!editorContent) {
+ this.showError("Editor not found");
+ return;
+ }
+ editorContent.focus();
+ // For list contexts, execCommand handles nesting properly
+ document.execCommand("indent", false, null);
+ editorContent.dispatchEvent(new Event("input", { bubbles: true }));
+ }
+
+ handleOutdent() {
+ const editorContent = this.template.querySelector(
+ ".enhanced-editor-content"
+ );
+ if (!editorContent) {
+ this.showError("Editor not found");
+ return;
+ }
+ editorContent.focus();
+ document.execCommand("outdent", false, null);
+ editorContent.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() {
+ const propertyName = this.propertyData.Name || "Property Name";
+ this.insertTextAtCursor(propertyName);
+ }
+
+ insertPropertyPrice() {
+ const price = this.propertyData.Price__c || "$0";
+ this.insertTextAtCursor(price);
+ }
+
+ insertPropertyType() {
+ const type = this.propertyData.Property_Type__c || "Property Type";
+ this.insertTextAtCursor(type);
+ }
+
+ insertPropertyBedrooms() {
+ const bedrooms = this.propertyData.Bedrooms__c || "0";
+ this.insertTextAtCursor(bedrooms + " Bedrooms");
+ }
+
+ insertPropertyBathrooms() {
+ const bathrooms = this.propertyData.Bathrooms__c || "0";
+ this.insertTextAtCursor(bathrooms + " Bathrooms");
+ }
+
+ insertPropertySqft() {
+ const sqft = this.propertyData.Square_Footage__c || "0";
+ this.insertTextAtCursor(sqft + " sq ft");
+ }
+
+ insertPropertyAddress() {
+ const address = this.propertyData.Location__c || "Property Address";
+ this.insertTextAtCursor(address);
+ }
+
+ insertPropertyDescription() {
+ const description =
+ this.propertyData.Description_English__c ||
+ this.propertyData.pcrm__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);
+ }
+
+ // Helper function to insert text at cursor position
+ insertTextAtCursor(text) {
+ const selection = window.getSelection();
+ if (selection.rangeCount > 0) {
+ const range = selection.getRangeAt(0);
+ range.deleteContents();
+ const textNode = document.createTextNode(text);
+ range.insertNode(textNode);
+ range.setStartAfter(textNode);
+ range.setEndAfter(textNode);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ this.showSuccess(`Inserted: ${text}`);
+ } else {
+ this.showError("Please place cursor in the editor first");
+ }
+ }
+ // Helper to insert HTML at cursor
+ insertHtmlAtCursor(html) {
+ const selection = window.getSelection();
+ if (!selection.rangeCount) {
+ this.showError("Please place cursor in the editor first");
+ return;
+ }
+ const range = selection.getRangeAt(0);
+ 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);
+ 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) => {
+ // Enhanced image detection - check multiple ways to find images
+ let clickedImage = null;
+
+ // Method 1: Direct image click
+ if (
+ e.target.tagName === "IMG" &&
+ e.target.src &&
+ e.target.src.trim() !== ""
+ ) {
+ clickedImage = e.target;
+ }
+
+ // Method 2: Click on element containing an image (children)
+ if (!clickedImage && e.target.querySelector) {
+ const containedImg = e.target.querySelector("img");
+ if (
+ containedImg &&
+ containedImg.src &&
+ containedImg.src.trim() !== ""
+ ) {
+ clickedImage = containedImg;
+ }
+ }
+
+ // Method 3: Click on element that is inside a container with an image (parent traversal)
+ if (!clickedImage) {
+ let currentElement = e.target;
+ while (currentElement && currentElement !== editor) {
+ // Check if current element is an IMG
+ if (
+ currentElement.tagName === "IMG" &&
+ currentElement.src &&
+ currentElement.src.trim() !== ""
+ ) {
+ clickedImage = currentElement;
+ 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;
+ 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;
+ }
+ }
+ // Method 4: Check for background images in the element hierarchy (enhanced for property cards)
+ if (!clickedImage) {
+ let currentElement = e.target;
+ 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"
+ ) {
+ // Create a virtual IMG element for background images
+ const virtualImg = document.createElement("img");
+ virtualImg.src = backgroundImage.replace(
+ /url\(['"]?(.+?)['"]?\)/,
+ "$1"
+ );
+ virtualImg.isBackgroundImage = true;
+ virtualImg.style.backgroundImage = backgroundImage;
+ virtualImg.originalElement = currentElement; // Store reference to original element
+ clickedImage = virtualImg;
+ break;
+ }
+
+ // 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")
+ ) {
+ const classStyle = window.getComputedStyle(currentElement);
+ const classBgImage = classStyle.backgroundImage;
+ if (
+ classBgImage &&
+ classBgImage !== "none" &&
+ classBgImage !== "initial"
+ ) {
+ const virtualImg = document.createElement("img");
+ virtualImg.src = classBgImage.replace(
+ /url\(['"]?(.+?)['"]?\)/,
+ "$1"
+ );
+ virtualImg.isBackgroundImage = true;
+ virtualImg.style.backgroundImage = classBgImage;
+ virtualImg.originalElement = currentElement;
+ clickedImage = virtualImg;
+ break;
+ }
+ }
+ }
+ }
+
+ currentElement = currentElement.parentElement;
+ }
+ }
+
+ if (clickedImage) {
+ // Additional validation to ensure we have a valid image
+ if (
+ clickedImage.tagName === "IMG" ||
+ clickedImage.isBackgroundImage
+ ) {
+ this.handleImageClick(clickedImage, e);
+ return;
+ } else {
+ }
+ }
+
+ // 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();
+ const textElement = document.createElement("div");
+ textElement.className = "draggable-element draggable-text";
+ textElement.contentEditable = true;
+ textElement.innerHTML = "Click to edit text";
+ textElement.style.left = "50px";
+ textElement.style.top = "50px";
+ 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.style.cssText = `
+ width: 100%;
+ height: auto;
+ display: block;
+ max-height: 150px;
+ object-fit: cover;
+ `;
+
+ // 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();
+
+ // Create draggable image container
+ const imageContainer = document.createElement("div");
+ imageContainer.className = "draggable-image-container";
+ imageContainer.style.left = "50px";
+ imageContainer.style.top = "50px";
+ imageContainer.style.width = "200px";
+ imageContainer.style.height = "150px";
+ imageContainer.style.zIndex = "1000";
+ imageContainer.style.position = "absolute";
+ imageContainer.style.overflow = "hidden";
+ imageContainer.style.border = "2px solid transparent";
+ imageContainer.style.cursor = "move";
+ imageContainer.style.userSelect = "none";
+
+ // Create image element
+ const img = document.createElement("img");
+ img.src = imageUrl;
+ img.alt = imageName;
+ img.style.width = "100%";
+ img.style.height = "100%";
+ img.style.objectFit = "cover";
+ img.style.display = "block";
+
+ 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();
+ const imageContainer = document.createElement("div");
+ imageContainer.className = "draggable-element";
+ imageContainer.style.left = "50px";
+ imageContainer.style.top = "50px";
+ imageContainer.style.width = "200px";
+ imageContainer.style.height = "150px";
+ imageContainer.style.zIndex = "1000";
+ imageContainer.style.position = "absolute";
+ imageContainer.style.overflow = "hidden";
+
+ 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";
+
+ 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");
+
+ // 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");
+ });
+ }
+ }
+ });
+
+ // 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) {
+ // 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 = "50px";
+ textBox.style.top = "50px";
+ 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() {
+ // Create file input for local image upload
+ const fileInput = document.createElement("input");
+ fileInput.type = "file";
+ fileInput.accept = "image/*";
+ fileInput.style.display = "none";
+
+ fileInput.onchange = (event) => {
+ const file = event.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const previewFrame = this.template.querySelector(
+ ".enhanced-editor-content"
+ );
+ if (previewFrame) {
+ // Create draggable and resizable image container
+ const imageContainer = document.createElement("div");
+ imageContainer.className = "draggable-image-container";
+ imageContainer.style.position = "absolute";
+ imageContainer.style.left = "50px";
+ imageContainer.style.top = "50px";
+ imageContainer.style.width = "300px";
+ imageContainer.style.height = "200px";
+ imageContainer.style.cursor = "move";
+ imageContainer.style.zIndex = "1000";
+ imageContainer.style.border = "2px dashed #667eea";
+ imageContainer.style.borderRadius = "4px";
+ imageContainer.style.overflow = "hidden";
+
+ const img = document.createElement("img");
+ img.src = e.target.result;
+ img.alt = "Inserted Image";
+ img.style.width = "100%";
+ img.style.height = "100%";
+ img.style.objectFit = "cover";
+ img.style.borderRadius = "4px";
+ img.style.boxShadow = "0 2px 8px rgba(0,0,0,0.1)";
+
+ // Handle selection like Word/Google Docs
+ imageContainer.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.selectElement(imageContainer);
+ });
+
+ // Add delete button (only visible when selected)
+ const deleteBtn = document.createElement("button");
+ deleteBtn.className = "delete-btn";
+ deleteBtn.innerHTML = "×";
+ deleteBtn.style.position = "absolute";
+ deleteBtn.style.top = "-10px";
+ deleteBtn.style.right = "-10px";
+ deleteBtn.style.width = "20px";
+ deleteBtn.style.height = "20px";
+ deleteBtn.style.borderRadius = "50%";
+ deleteBtn.style.background = "#ff4757";
+ deleteBtn.style.color = "white";
+ deleteBtn.style.border = "none";
+ deleteBtn.style.cursor = "pointer";
+ deleteBtn.style.fontSize = "16px";
+ deleteBtn.style.fontWeight = "bold";
+ deleteBtn.style.zIndex = "1002";
+ deleteBtn.style.opacity = "0";
+ deleteBtn.style.transition = "opacity 0.2s ease";
+
+ deleteBtn.onclick = (e) => {
+ e.stopPropagation();
+ imageContainer.remove();
+ };
+
+ imageContainer.appendChild(deleteBtn);
+
+ // Make image container draggable
+ this.makeDraggable(imageContainer);
+
+ // Make image container resizable
+ this.makeResizable(imageContainer);
+
+ imageContainer.appendChild(img);
+ previewFrame.appendChild(imageContainer);
+ }
+ };
+ reader.readAsDataURL(file);
+ }
+ };
+
+ // Trigger file selection
+ document.body.appendChild(fileInput);
+ fileInput.click();
+ document.body.removeChild(fileInput);
+ }
+ // 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 = "0";
+ });
+ }
+
+ 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");
+ el.style.border = el.classList.contains("draggable-text-box")
+ ? "2px solid #ddd"
+ : "2px solid #ddd";
+
+ // Hide delete buttons
+ const deleteBtn = el.querySelector(".delete-btn");
+ if (deleteBtn) {
+ deleteBtn.style.opacity = "0";
+ }
+ });
+
+ // Select current element
+ element.classList.add("selected");
+ element.style.border = "2px solid #667eea";
+
+ // Show delete button
+ const deleteBtn = element.querySelector(".delete-btn");
+ if (deleteBtn) {
+ deleteBtn.style.opacity = "1";
+ }
+
+ // 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) => `Property Brochure
+
+
+
+
+ ${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);
+ }
+
+ downloadHtml() {
+ 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();
+
+ // Create table element using our new method (draggable/resizeable container like images)
+ const tableContainer = this.createTableElement();
+ editor.appendChild(tableContainer);
+ // Default placement similar to images
+ tableContainer.style.left = "50px";
+ tableContainer.style.top = "50px";
+ // 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 "";
+ }
+
+ // 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);
+ });
+ }
+
+ // 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 += `Luxury Villa Luxury Villa Template Elegance. Precision. Luxury.
`;
- }
- createShiftTemplate() {
- const data = this.propertyData || {};
- const propertyName = data.Name || data.propertyName || "SHIFT PROPERTY";
- const location = data.Address__c || data.location || "Modern Living";
- const price = data.Price__c || data.price || "Starting from $1,500,000";
- const referenceId =
- data.pcrm__Title_English__c || data.Name || data.propertyName || "";
- const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A";
- const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A";
- const size = data.Square_Feet__c || data.size || "N/A";
- const propertyType =
- data.Property_Type__c || data.propertyType || "Property Type";
- const description =
- data.Description_English__c ||
- data.descriptionEnglish ||
- "Modern living at its finest.";
-
- // Get smart images - use direct method for exterior
- const exteriorImage = this.getExteriorImageUrl();
- // Gallery HTML generated once in each template scope when needed
- const allGalleryImages = this.realPropertyImages || [];
- const firstGalleryCount = Math.min(4, allGalleryImages.length);
- const firstPageImages = allGalleryImages.slice(0, firstGalleryCount);
- const propertyGallery = this.generatePropertyGalleryHTML();
- const interiorImage = this.getSmartImageForSection(
- "interior",
- ""
- );
- const kitchenImage = this.getSmartImageForSection(
- "kitchen",
- ""
- );
-
- // Debug logging
-
- // Generate property gallery for uncategorized images (already declared above)
-
- return `Shift Property - Modern Living EXTERIOR IMAGE TEST: ${exteriorImage}
About Shift Property Experience the future of living with Shift Property, where innovation meets comfort in perfect harmony.
Contact Information Reference ID: ${referenceId}
Agent: ${
- data.agentName || "Innovation Specialist"
- }
Phone: ${
- data.agentPhone || "(555) 789-0123"
- }
${propertyGallery}
Saint Barts Villa - Caribbean Paradise About Saint Barts Villa Discover paradise at Saint Barts Villa, where tropical luxury meets Caribbean charm in an idyllic setting.
Contact Information Reference ID: ${referenceId}
Agent: ${
- data.agentName || "Caribbean Specialist"
- }
Phone: ${
- data.agentPhone || "(555) 456-7890"
- }
${propertyGallery}
Learnoy Estate - Heritage Collection About ${propertyName} ${description}
Property Type: ${propertyType}
Bedrooms: ${bedrooms}
Bathrooms: ${bathrooms}
Size: ${size} sq ft
Status: ${
- data.Status__c || data.status || "N/A"
- }
Year Built: ${
- data.Build_Year__c || data.yearBuilt || "N/A"
- }
Furnished: ${
- data.Furnished__c || data.furnished || "N/A"
- }
Parking: ${
- data.Parking_Spaces__c || data.parking || "N/A"
- }
Property Features ${amenitiesHTML}
Contact Information Reference ID: ${
- data.Reference_Number__c || data.referenceNumber || "N/A"
- }
Agent: ${
- data.Agent_Name__c || data.agentName || "N/A"
- }
Phone: ${
- data.Agent_Phone__c || data.agentPhone || "N/A"
- }
Email: ${
- data.Agent_Email__c || data.agentEmail || "N/A"
- }
Property Gallery ${propertyGallery}
Leafamp Urban - City Living Experience About Leafamp Urban Experience the pulse of city life at Leafamp Urban, where modern design meets urban convenience in the heart of the metropolis.
Floor Plan & Location Discover the strategic location and layout of Leafamp Urban, perfectly positioned for modern urban living with easy access to all city amenities.
MAPS IMAGE TEST: ${mapsImage}
Contact Information Reference ID: ${referenceId}
Agent: ${
- data.agentName || "Urban Specialist"
- }
Phone: ${
- data.agentPhone || "(555) 987-6543"
- }
${propertyGallery}
Commercial Properties Commercial Properties Template Unlock Your Business Potential
`;
- }
createModernHomeTemplate() {
const data = this.propertyData || {};
const propertyName = data.Name || data.propertyName || "Property Name";
@@ -2728,12 +2539,9 @@ return result;
const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A";
const area = data.Square_Feet__c || data.area || "N/A";
const description = this.formatDescriptionForPDF(
- data.pcrm__Description_English__c ||
data.Description_English__c ||
- data.descriptionEnglish ||
- data.Description__c ||
data.description ||
- "Property description not available."
+ "This beautiful property offers exceptional value and modern amenities. Located in a prime area, it represents an excellent investment opportunity."
);
const referenceId =
data.pcrm__Title_English__c || data.Name || data.propertyName || "";
@@ -2746,92 +2554,510 @@ return result;
const agentEmail =
data.contactEmail || data.Agent_Email__c || data.agentEmail || "N/A";
- // Gallery images for 3x2 grid (fallbacks to exterior)
- const exteriorImage = this.getExteriorImageUrl();
- const galleryImg1 = this.getSmartImageForSection("interior", exteriorImage);
- const galleryImg2 = this.getSmartImageForSection("bedroom", exteriorImage);
- const galleryImg3 = this.getSmartImageForSection("kitchen", exteriorImage);
- const galleryImg4 = this.getSmartImageForSection("bathroom", exteriorImage);
- const g1 = galleryImg1 || exteriorImage;
- const g2 = galleryImg2 || exteriorImage;
- const g3 = galleryImg3 || exteriorImage;
- const g4 = galleryImg4 || exteriorImage;
-
// Dynamic gallery and amenities
const propertyGallery = this.generatePropertyGalleryHTML();
const amenitiesHTML = this.generateAmenitiesHTML(data);
- data.Reference_Number__c || data.referenceNumber || "REF-001"
- }Specifications Status: ${
- data.status || "Available"
- }
Type: ${propertyType}
Floor: ${
- data.Floor__c || data.floor || "N/A"
- }
Parking: ${
- data.Parking_Spaces__c || data.parking || "N/A"
- }
Year Built: ${
- data.Build_Year__c || data.yearBuilt || "N/A"
- }
Furnishing: ${
- data.Furnished__c || data.furnishing || "N/A"
- }
Maintenance Fee: ${
- data.Maintenance_Fee__c || data.maintenanceFee || "N/A"
- }
Service Charge: ${
- data.Service_Charge__c || data.serviceCharge || "N/A"
- }
Amenities & Features ${amenitiesHTML}
-
-
- Property Gallery
-
-
Feature
-
Highlight
-
Kitchen
-
Bathroom
-
-
Location & Nearby Landmarks: ${
- data.Landmarks__c || data.nearbyLandmarks || "N/A"
- }
Transportation: ${
- data.Transportation__c || data.transportation || "N/A"
- }
Schools: ${
- data.Schools__c || data.schools || "N/A"
- }
Hospitals: ${
- data.Hospitals__c || data.hospitals || "N/A"
- }
Shopping: ${
- data.Shopping_Centers__c || data.shoppingCenters || "N/A"
- }
Airport: ${
- data.Airport_Distance__c || data.airportDistance || "N/A"
- }
City: ${
- data.City__c || data.cityBayut || data.cityPropertyfinder || "N/A"
- }
Community: ${
- data.Community__c || data.communityBayut || "N/A"
- }
Sub Community: ${
- data.Sub_Community__c || data.subCommunityBayut || "N/A"
- }
Locality: ${
- data.Locality__c || data.localityBayut || "N/A"
- }
Sub Locality: ${
- data.Sub_Locality__c || data.subLocalityBayut || "N/A"
- }
Tower: ${
- data.Tower__c || data.towerBayut || "N/A"
- }
Beach Distance: ${
- data.Beach_Distance__c || data.beachDistance || "N/A"
- }
Metro Distance: ${
- data.Metro_Distance__c || data.metroDistance || "N/A"
- }
Country Club: ${
- data.Country_Club__c || data.countryClub || "N/A"
- }
Additional Information Pet Friendly: ${
- data.petFriendly || "Pet Friendly Status"
- }
Smoking: ${
- data.smokingAllowed || "Smoking Allowed"
- }
Available From: ${
- data.availableFrom || "Available From Date"
- }
Minimum Contract: ${
- data.minimumContract || "Minimum Contract Duration"
- }
Security Deposit: ${
- data.securityDeposit || "Security Deposit"
- }
Property Gallery ${propertyGallery}
+