+
${template.name}${template.is_default ? ' (default)' : ''}
-
- ${this.truncateHtml(template.html_template, 100)}
+
+ ${this.createStyledTemplatePreview(template.html_template)}
`).join('')}
-
-
+
+
+
`;
let selectedTemplate = null;
+ let userHasInteracted = false;
- // Add event listeners
- modal.querySelectorAll('.template-option').forEach(option => {
- option.addEventListener('click', () => {
- // Remove previous selection
- modal.querySelectorAll('.template-option').forEach(opt => {
- opt.style.borderColor = '#e5e7eb';
- opt.style.background = 'white';
+ // Add event listeners for template selection
+ modal.querySelectorAll('.insertr-template-option').forEach(option => {
+ option.addEventListener('click', (e) => {
+ // Mark that user has interacted
+ userHasInteracted = true;
+
+ // Remove previous selection from all options
+ modal.querySelectorAll('.insertr-template-option').forEach(opt => {
+ opt.classList.remove('insertr-template-selected');
});
- // Apply selection styling
- option.style.borderColor = '#3b82f6';
- option.style.background = '#eff6ff';
+ // Add selection class to clicked option
+ option.classList.add('insertr-template-selected');
// Find selected template
const templateId = parseInt(option.dataset.templateId);
selectedTemplate = templates.find(t => t.template_id === templateId);
// Enable select button
- const selectBtn = modal.querySelector('.select-btn');
+ const selectBtn = modal.querySelector('.insertr-template-btn-select');
selectBtn.disabled = false;
- selectBtn.style.opacity = '1';
+
+ console.log('🎯 Template selected by user:', selectedTemplate.name);
});
});
- // Auto-select default template after all event listeners are set up
+ // Auto-select default template only if user hasn't interacted
const defaultTemplate = templates.find(t => t.is_default);
if (defaultTemplate) {
+ // Set initial selection without triggering click event
+ selectedTemplate = defaultTemplate;
const defaultOption = modal.querySelector(`[data-template-id="${defaultTemplate.template_id}"]`);
if (defaultOption) {
- defaultOption.click();
+ // Apply visual selection without click event
+ defaultOption.classList.add('insertr-template-selected');
+ const selectBtn = modal.querySelector('.insertr-template-btn-select');
+ selectBtn.disabled = false;
+ console.log('🎯 Default template pre-selected:', defaultTemplate.name);
}
}
- modal.querySelector('.cancel-btn').addEventListener('click', () => {
+ // Cancel button handler
+ modal.querySelector('.insertr-template-btn-cancel').addEventListener('click', () => {
document.body.removeChild(overlay);
resolve(null);
});
- modal.querySelector('.select-btn').addEventListener('click', () => {
+ // Select button handler
+ modal.querySelector('.insertr-template-btn-select').addEventListener('click', () => {
+ console.log('✅ Adding item with template:', selectedTemplate ? selectedTemplate.name : 'none');
document.body.removeChild(overlay);
resolve(selectedTemplate);
});
@@ -638,14 +607,59 @@ export class CollectionManager {
}
/**
- * Truncate HTML for preview
+ * Create safe template preview text (no HTML truncation)
* @param {string} html - HTML string
* @param {number} maxLength - Maximum character length
- * @returns {string} Truncated HTML
+ * @returns {string} Safe preview text
*/
- truncateHtml(html, maxLength) {
- if (html.length <= maxLength) return html;
- return html.substring(0, maxLength) + '...';
+ createTemplatePreview(html, maxLength = 60) {
+ try {
+ // Create a temporary DOM element to safely extract text
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = html;
+
+ // Extract just the text content
+ const textContent = tempDiv.textContent || tempDiv.innerText || '';
+
+ // Truncate the text (not HTML)
+ if (textContent.length <= maxLength) {
+ return textContent;
+ }
+
+ return textContent.substring(0, maxLength).trim() + '...';
+ } catch (error) {
+ // Fallback to safer extraction
+ console.warn('Template preview extraction failed:', error);
+ return html.replace(/<[^>]*>/g, '').substring(0, maxLength) + '...';
+ }
+ }
+
+ /**
+ * Create styled template preview that shows actual template styling
+ * @param {string} html - HTML template string
+ * @returns {string} HTML preview with actual styles
+ */
+ createStyledTemplatePreview(html) {
+ try {
+ // Clean the HTML and replace .insertr elements with placeholder content
+ let previewHtml = html
+ .replace(/class="insertr"/g, 'class="insertr-preview-content"')
+ .replace(/class="([^"]*\s+)?insertr(\s+[^"]*)?"/g, 'class="$1insertr-preview-content$2"')
+ .replace(/>([^<]{0,50}) {
+ // Replace long content with placeholder text
+ if (content.trim().length > 30) {
+ return '>Sample content...<';
+ }
+ return match;
+ });
+
+ // Wrap in a preview container with scaling
+ return `
${previewHtml}
`;
+ } catch (error) {
+ console.warn('Styled template preview failed:', error);
+ // Fallback to text preview
+ return `
${this.createTemplatePreview(html, 50)}
`;
+ }
}
/**