Joakim
3f90bf9c3b
MAJOR UX IMPROVEMENT: Replace basic prompt() with professional forms
New Features:
- Professional modal overlays with backdrop and ESC/click-outside cancel
- Dynamic form generation based on content type and HTML element
- Smart field detection: H1-H6→text, P→textarea, A→link with URL
- Mobile-responsive form positioning and widths
- Complete CSS styling with focus states and transitions
- Proper save/cancel event handling
Technical Implementation:
- Created lib/src/ui/form-renderer.js with modern ES6+ modules
- Integrated into core editor.js with form renderer instance
- Support for text, textarea, markdown, and link field types
- XSS protection with HTML escaping
- Responsive design: mobile-first form sizing
- Professional styling matching prototype quality
Before: Basic browser prompt() for all editing
After: Content-aware professional modal forms
This brings the library from proof-of-concept to professional-grade
editing experience, closing the major UX gap with the archived prototype.
Phase 1.2 ✅ COMPLETED - Next: Authentication system (Phase 1.1)
678 lines
23 KiB
JavaScript
678 lines
23 KiB
JavaScript
var Insertr = (function () {
|
|
'use strict';
|
|
|
|
/**
|
|
* InsertrCore - Core functionality for content management
|
|
*/
|
|
class InsertrCore {
|
|
constructor(options = {}) {
|
|
this.options = {
|
|
apiEndpoint: options.apiEndpoint || '/api/content',
|
|
siteId: options.siteId || 'default',
|
|
...options
|
|
};
|
|
}
|
|
|
|
// Find all enhanced elements on the page
|
|
findEnhancedElements() {
|
|
return document.querySelectorAll('[data-insertr-enhanced="true"]');
|
|
}
|
|
|
|
// Get element metadata
|
|
getElementMetadata(element) {
|
|
return {
|
|
contentId: element.getAttribute('data-content-id'),
|
|
contentType: element.getAttribute('data-content-type'),
|
|
element: element
|
|
};
|
|
}
|
|
|
|
// Get all elements with their metadata
|
|
getAllElements() {
|
|
const elements = this.findEnhancedElements();
|
|
return Array.from(elements).map(el => this.getElementMetadata(el));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* InsertrFormRenderer - Professional modal editing forms
|
|
* Ported from prototype with modern ES6+ architecture
|
|
*/
|
|
class InsertrFormRenderer {
|
|
constructor() {
|
|
this.currentOverlay = null;
|
|
this.setupStyles();
|
|
}
|
|
|
|
/**
|
|
* Create and show edit form for content element
|
|
* @param {Object} meta - Element metadata {element, contentId, contentType}
|
|
* @param {string} currentContent - Current content value
|
|
* @param {Function} onSave - Save callback
|
|
* @param {Function} onCancel - Cancel callback
|
|
*/
|
|
showEditForm(meta, currentContent, onSave, onCancel) {
|
|
// Close any existing form
|
|
this.closeForm();
|
|
|
|
const { element, contentId, contentType } = meta;
|
|
const config = this.getFieldConfig(element, contentType);
|
|
|
|
// Create form
|
|
const form = this.createEditForm(contentId, config, currentContent);
|
|
|
|
// Create overlay with backdrop
|
|
const overlay = this.createOverlay(form);
|
|
|
|
// Position form
|
|
this.positionForm(element, overlay);
|
|
|
|
// Setup event handlers
|
|
this.setupFormHandlers(form, overlay, { onSave, onCancel });
|
|
|
|
// Show form
|
|
document.body.appendChild(overlay);
|
|
this.currentOverlay = overlay;
|
|
|
|
// Focus first input
|
|
const firstInput = form.querySelector('input, textarea');
|
|
if (firstInput) {
|
|
setTimeout(() => firstInput.focus(), 100);
|
|
}
|
|
|
|
return overlay;
|
|
}
|
|
|
|
/**
|
|
* Close current form
|
|
*/
|
|
closeForm() {
|
|
if (this.currentOverlay) {
|
|
this.currentOverlay.remove();
|
|
this.currentOverlay = null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generate field configuration based on element
|
|
*/
|
|
getFieldConfig(element, contentType) {
|
|
const tagName = element.tagName.toLowerCase();
|
|
const classList = Array.from(element.classList);
|
|
|
|
// Default configurations based on element type
|
|
const configs = {
|
|
h1: { type: 'text', label: 'Headline', maxLength: 60, placeholder: 'Enter headline...' },
|
|
h2: { type: 'text', label: 'Subheading', maxLength: 80, placeholder: 'Enter subheading...' },
|
|
h3: { type: 'text', label: 'Section Title', maxLength: 100, placeholder: 'Enter title...' },
|
|
h4: { type: 'text', label: 'Title', maxLength: 100, placeholder: 'Enter title...' },
|
|
h5: { type: 'text', label: 'Title', maxLength: 100, placeholder: 'Enter title...' },
|
|
h6: { type: 'text', label: 'Title', maxLength: 100, placeholder: 'Enter title...' },
|
|
p: { type: 'textarea', label: 'Paragraph', rows: 3, placeholder: 'Enter paragraph text...' },
|
|
a: { type: 'link', label: 'Link', placeholder: 'Enter link text...', includeUrl: true },
|
|
span: { type: 'text', label: 'Text', placeholder: 'Enter text...' },
|
|
button: { type: 'text', label: 'Button Text', placeholder: 'Enter button text...' },
|
|
};
|
|
|
|
let config = configs[tagName] || { type: 'text', label: 'Text', placeholder: 'Enter text...' };
|
|
|
|
// CSS class enhancements
|
|
if (classList.includes('lead')) {
|
|
config = { ...config, label: 'Lead Paragraph', rows: 4, placeholder: 'Enter lead paragraph...' };
|
|
}
|
|
|
|
// Override with contentType from CLI if specified
|
|
if (contentType === 'markdown') {
|
|
config = { ...config, type: 'markdown', label: 'Markdown Content', rows: 8 };
|
|
}
|
|
|
|
return config;
|
|
}
|
|
|
|
/**
|
|
* Create form HTML structure
|
|
*/
|
|
createEditForm(contentId, config, currentContent) {
|
|
const form = document.createElement('div');
|
|
form.className = 'insertr-edit-form';
|
|
|
|
let formHTML = `<div class="insertr-form-header">${config.label}</div>`;
|
|
|
|
if (config.type === 'markdown') {
|
|
formHTML += this.createMarkdownField(config, currentContent);
|
|
} else if (config.type === 'link' && config.includeUrl) {
|
|
formHTML += this.createLinkField(config, currentContent);
|
|
} else if (config.type === 'textarea') {
|
|
formHTML += this.createTextareaField(config, currentContent);
|
|
} else {
|
|
formHTML += this.createTextField(config, currentContent);
|
|
}
|
|
|
|
// Form buttons
|
|
formHTML += `
|
|
<div class="insertr-form-actions">
|
|
<button type="button" class="insertr-btn-save">Save</button>
|
|
<button type="button" class="insertr-btn-cancel">Cancel</button>
|
|
</div>
|
|
`;
|
|
|
|
form.innerHTML = formHTML;
|
|
return form;
|
|
}
|
|
|
|
/**
|
|
* Create markdown field with preview
|
|
*/
|
|
createMarkdownField(config, currentContent) {
|
|
return `
|
|
<div class="insertr-form-group">
|
|
<textarea class="insertr-form-textarea insertr-markdown-editor" name="content"
|
|
rows="${config.rows || 8}"
|
|
placeholder="${config.placeholder}">${this.escapeHtml(currentContent)}</textarea>
|
|
<div class="insertr-form-help">
|
|
Supports Markdown formatting (bold, italic, links, etc.)
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Create link field (text + URL)
|
|
*/
|
|
createLinkField(config, currentContent) {
|
|
const linkText = typeof currentContent === 'object' ? currentContent.text || '' : currentContent;
|
|
const linkUrl = typeof currentContent === 'object' ? currentContent.url || '' : '';
|
|
|
|
return `
|
|
<div class="insertr-form-group">
|
|
<label class="insertr-form-label">Link Text:</label>
|
|
<input type="text" class="insertr-form-input" name="text"
|
|
value="${this.escapeHtml(linkText)}"
|
|
placeholder="${config.placeholder}"
|
|
maxlength="${config.maxLength || 200}">
|
|
</div>
|
|
<div class="insertr-form-group">
|
|
<label class="insertr-form-label">Link URL:</label>
|
|
<input type="url" class="insertr-form-input" name="url"
|
|
value="${this.escapeHtml(linkUrl)}"
|
|
placeholder="https://example.com">
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Create textarea field
|
|
*/
|
|
createTextareaField(config, currentContent) {
|
|
const content = typeof currentContent === 'object' ? currentContent.text || '' : currentContent;
|
|
return `
|
|
<div class="insertr-form-group">
|
|
<textarea class="insertr-form-textarea" name="content"
|
|
rows="${config.rows || 3}"
|
|
placeholder="${config.placeholder}"
|
|
maxlength="${config.maxLength || 1000}">${this.escapeHtml(content)}</textarea>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Create text input field
|
|
*/
|
|
createTextField(config, currentContent) {
|
|
const content = typeof currentContent === 'object' ? currentContent.text || '' : currentContent;
|
|
return `
|
|
<div class="insertr-form-group">
|
|
<input type="text" class="insertr-form-input" name="content"
|
|
value="${this.escapeHtml(content)}"
|
|
placeholder="${config.placeholder}"
|
|
maxlength="${config.maxLength || 200}">
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Create overlay with backdrop
|
|
*/
|
|
createOverlay(form) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'insertr-form-overlay';
|
|
overlay.appendChild(form);
|
|
return overlay;
|
|
}
|
|
|
|
/**
|
|
* Position form relative to element
|
|
*/
|
|
positionForm(element, overlay) {
|
|
const rect = element.getBoundingClientRect();
|
|
const form = overlay.querySelector('.insertr-edit-form');
|
|
|
|
// Calculate optimal width (responsive)
|
|
const viewportWidth = window.innerWidth;
|
|
let formWidth;
|
|
|
|
if (viewportWidth < 768) {
|
|
formWidth = Math.min(viewportWidth - 40, 350);
|
|
} else {
|
|
formWidth = Math.min(Math.max(rect.width, 300), 500);
|
|
}
|
|
|
|
form.style.width = `${formWidth}px`;
|
|
|
|
// Position below element with some spacing
|
|
const top = rect.bottom + window.scrollY + 10;
|
|
const left = Math.max(20, rect.left + window.scrollX);
|
|
|
|
overlay.style.position = 'absolute';
|
|
overlay.style.top = `${top}px`;
|
|
overlay.style.left = `${left}px`;
|
|
overlay.style.zIndex = '10000';
|
|
}
|
|
|
|
/**
|
|
* Setup form event handlers
|
|
*/
|
|
setupFormHandlers(form, overlay, { onSave, onCancel }) {
|
|
const saveBtn = form.querySelector('.insertr-btn-save');
|
|
const cancelBtn = form.querySelector('.insertr-btn-cancel');
|
|
|
|
if (saveBtn) {
|
|
saveBtn.addEventListener('click', () => {
|
|
const formData = this.extractFormData(form);
|
|
onSave(formData);
|
|
});
|
|
}
|
|
|
|
if (cancelBtn) {
|
|
cancelBtn.addEventListener('click', () => {
|
|
onCancel();
|
|
this.closeForm();
|
|
});
|
|
}
|
|
|
|
// ESC key to cancel
|
|
const keyHandler = (e) => {
|
|
if (e.key === 'Escape') {
|
|
onCancel();
|
|
this.closeForm();
|
|
document.removeEventListener('keydown', keyHandler);
|
|
}
|
|
};
|
|
document.addEventListener('keydown', keyHandler);
|
|
|
|
// Click outside to cancel
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) {
|
|
onCancel();
|
|
this.closeForm();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Extract form data
|
|
*/
|
|
extractFormData(form) {
|
|
const data = {};
|
|
|
|
// Handle different field types
|
|
const textInput = form.querySelector('input[name="text"]');
|
|
const urlInput = form.querySelector('input[name="url"]');
|
|
const contentInput = form.querySelector('input[name="content"], textarea[name="content"]');
|
|
|
|
if (textInput && urlInput) {
|
|
// Link field
|
|
data.text = textInput.value;
|
|
data.url = urlInput.value;
|
|
} else if (contentInput) {
|
|
// Text or textarea field
|
|
data.text = contentInput.value;
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* Escape HTML to prevent XSS
|
|
*/
|
|
escapeHtml(text) {
|
|
if (typeof text !== 'string') return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
/**
|
|
* Setup form styles
|
|
*/
|
|
setupStyles() {
|
|
const styles = `
|
|
.insertr-form-overlay {
|
|
position: absolute;
|
|
z-index: 10000;
|
|
}
|
|
|
|
.insertr-edit-form {
|
|
background: white;
|
|
border: 2px solid #007cba;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.insertr-form-header {
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.insertr-form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.insertr-form-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.insertr-form-label {
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.insertr-form-input,
|
|
.insertr-form-textarea {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.insertr-form-input:focus,
|
|
.insertr-form-textarea:focus {
|
|
outline: none;
|
|
border-color: #007cba;
|
|
box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
|
|
}
|
|
|
|
.insertr-form-textarea {
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
}
|
|
|
|
.insertr-markdown-editor {
|
|
min-height: 200px;
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
.insertr-form-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.insertr-btn-save {
|
|
background: #10b981;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.insertr-btn-save:hover {
|
|
background: #059669;
|
|
}
|
|
|
|
.insertr-btn-cancel {
|
|
background: #6b7280;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.insertr-btn-cancel:hover {
|
|
background: #4b5563;
|
|
}
|
|
|
|
.insertr-form-help {
|
|
font-size: 0.75rem;
|
|
color: #6b7280;
|
|
margin-top: 0.25rem;
|
|
}
|
|
`;
|
|
|
|
const styleSheet = document.createElement('style');
|
|
styleSheet.type = 'text/css';
|
|
styleSheet.innerHTML = styles;
|
|
document.head.appendChild(styleSheet);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* InsertrEditor - Visual editing functionality
|
|
*/
|
|
class InsertrEditor {
|
|
constructor(core, options = {}) {
|
|
this.core = core;
|
|
this.options = options;
|
|
this.isActive = false;
|
|
this.formRenderer = new InsertrFormRenderer();
|
|
}
|
|
|
|
start() {
|
|
if (this.isActive) return;
|
|
|
|
console.log('🚀 Starting Insertr Editor');
|
|
this.isActive = true;
|
|
|
|
// Add editor styles
|
|
this.addEditorStyles();
|
|
|
|
// Initialize all enhanced elements
|
|
const elements = this.core.getAllElements();
|
|
console.log(`📝 Found ${elements.length} editable elements`);
|
|
|
|
elements.forEach(meta => this.initializeElement(meta));
|
|
}
|
|
|
|
initializeElement(meta) {
|
|
const { element, contentId, contentType } = meta;
|
|
|
|
// Add visual indicators
|
|
element.style.cursor = 'pointer';
|
|
element.style.position = 'relative';
|
|
|
|
// Add interaction handlers
|
|
this.addHoverEffects(element);
|
|
this.addClickHandler(element, meta);
|
|
}
|
|
|
|
addHoverEffects(element) {
|
|
element.addEventListener('mouseenter', () => {
|
|
element.classList.add('insertr-editing-hover');
|
|
});
|
|
|
|
element.addEventListener('mouseleave', () => {
|
|
element.classList.remove('insertr-editing-hover');
|
|
});
|
|
}
|
|
|
|
addClickHandler(element, meta) {
|
|
element.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
this.openEditor(meta);
|
|
});
|
|
}
|
|
|
|
openEditor(meta) {
|
|
const { element } = meta;
|
|
const currentContent = this.extractCurrentContent(element);
|
|
|
|
// Show professional form instead of prompt
|
|
this.formRenderer.showEditForm(
|
|
meta,
|
|
currentContent,
|
|
(formData) => this.handleSave(meta, formData),
|
|
() => this.handleCancel(meta)
|
|
);
|
|
}
|
|
|
|
extractCurrentContent(element) {
|
|
// For links, extract both text and URL
|
|
if (element.tagName.toLowerCase() === 'a') {
|
|
return {
|
|
text: element.textContent.trim(),
|
|
url: element.getAttribute('href') || ''
|
|
};
|
|
}
|
|
|
|
// For other elements, just return text content
|
|
return element.textContent.trim();
|
|
}
|
|
|
|
handleSave(meta, formData) {
|
|
console.log('💾 Saving content:', meta.contentId, formData);
|
|
|
|
// Update element content based on type
|
|
this.updateElementContent(meta.element, formData);
|
|
|
|
// Close form
|
|
this.formRenderer.closeForm();
|
|
|
|
// TODO: Save to backend API
|
|
console.log(`✅ Content saved:`, meta.contentId, formData);
|
|
}
|
|
|
|
handleCancel(meta) {
|
|
console.log('❌ Edit cancelled:', meta.contentId);
|
|
}
|
|
|
|
updateElementContent(element, formData) {
|
|
if (element.tagName.toLowerCase() === 'a') {
|
|
// Update link element
|
|
if (formData.text !== undefined) {
|
|
element.textContent = formData.text;
|
|
}
|
|
if (formData.url !== undefined) {
|
|
element.setAttribute('href', formData.url);
|
|
}
|
|
} else {
|
|
// Update text content
|
|
element.textContent = formData.text || '';
|
|
}
|
|
}
|
|
|
|
// Legacy method - now handled by handleSave and updateElementContent
|
|
|
|
addEditorStyles() {
|
|
const styles = `
|
|
.insertr-editing-hover {
|
|
outline: 2px dashed #007cba !important;
|
|
outline-offset: 2px !important;
|
|
background-color: rgba(0, 124, 186, 0.05) !important;
|
|
}
|
|
|
|
[data-insertr-enhanced="true"]:hover::after {
|
|
content: "✏️ " attr(data-content-type);
|
|
position: absolute;
|
|
top: -25px;
|
|
left: 0;
|
|
background: #007cba;
|
|
color: white;
|
|
padding: 2px 6px;
|
|
font-size: 11px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
z-index: 1000;
|
|
font-family: monospace;
|
|
}
|
|
`;
|
|
|
|
const styleSheet = document.createElement('style');
|
|
styleSheet.type = 'text/css';
|
|
styleSheet.innerHTML = styles;
|
|
document.head.appendChild(styleSheet);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Insertr - The Tailwind of CMS
|
|
* Main library entry point
|
|
*/
|
|
|
|
|
|
// Create global Insertr instance
|
|
window.Insertr = {
|
|
// Core functionality
|
|
core: null,
|
|
editor: null,
|
|
|
|
// Initialize the library
|
|
init(options = {}) {
|
|
console.log('🔧 Insertr v1.0.0 initializing... (Hot Reload Ready)');
|
|
|
|
this.core = new InsertrCore(options);
|
|
this.editor = new InsertrEditor(this.core, options);
|
|
|
|
// Auto-initialize if DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => this.start());
|
|
} else {
|
|
this.start();
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
// Start the editor
|
|
start() {
|
|
if (this.editor) {
|
|
this.editor.start();
|
|
}
|
|
},
|
|
|
|
// Version info
|
|
version: '1.0.0'
|
|
};
|
|
|
|
// Auto-initialize in development mode
|
|
if (document.querySelector('[data-insertr-enhanced]')) {
|
|
window.Insertr.init();
|
|
}
|
|
|
|
var index = window.Insertr;
|
|
|
|
return index;
|
|
|
|
})();
|