joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement unified editor with content persistence and server-side upsert

Browse Source 
- Replace dual update systems with single markdown-first editor architecture
- Add server-side upsert to eliminate 404 errors on PUT operations
- Fix content persistence race condition between preview and save operations
- Remove legacy updateElementContent system entirely
- Add comprehensive authentication with JWT scaffolding and dev mode
- Implement EditContext.updateOriginalContent() for proper baseline management
- Enable markdown formatting in all text elements (h1-h6, p, div, etc)
- Clean terminology: remove 'unified' references from codebase

Technical changes:
* core/editor.js: Remove legacy update system, unify content types as markdown
* ui/Editor.js: Add updateOriginalContent() method to fix save persistence
* ui/Previewer.js: Clean live preview system for all content types
* api/handlers.go: Implement UpsertContent for idempotent PUT operations
* auth/*: Complete authentication service with OAuth scaffolding
* db/queries/content.sql: Add upsert query with ON CONFLICT handling
* Schema: Remove type constraints, rely on server-side validation

Result: Clean content editing with persistent saves, no 404 errors, markdown support in all text elements
This commit is contained in:
Joakim
2025-09-10 20:19:54 +02:00
parent c572428e45
commit b0c4a33a7c
23 changed files with 1658 additions and 3585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2375
lib/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

174
lib/src/core/api-client.js
View File

@@ -34,7 +34,7 @@ export class ApiClient {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'X-User-ID': this.getCurrentUser()
'Authorization': `Bearer ${this.getAuthToken()}`
},
body: JSON.stringify({ value: content })
});
@@ -64,7 +64,7 @@ export class ApiClient {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-User-ID': this.getCurrentUser()
'Authorization': `Bearer ${this.getAuthToken()}`
},
body: JSON.stringify({
id: contentId,
@@ -113,7 +113,7 @@ export class ApiClient {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-User-ID': this.getCurrentUser()
'Authorization': `Bearer ${this.getAuthToken()}`
},
body: JSON.stringify({
version_id: versionId
@@ -133,9 +133,171 @@ export class ApiClient {
}
}
// Helper to get current user (for user attribution)
/**
* Get authentication token for API requests
* @returns {string} JWT token or mock token for development
*/
getAuthToken() {
// Check if we have a real JWT token from OAuth
const realToken = this.getStoredToken();
if (realToken && !this.isTokenExpired(realToken)) {
return realToken;
}
// Development/mock token for when no real auth is present
return this.getMockToken();
}
/**
* Get current user information from token
* @returns {string} User identifier
*/
getCurrentUser() {
// This could be enhanced to get from authentication system
return 'anonymous';
const token = this.getAuthToken();
// If it's a mock token, return mock user
if (token.startsWith('mock-')) {
return 'anonymous';
}
// Parse real JWT token for user info
try {
const payload = this.parseJWT(token);
return payload.sub || payload.user_id || payload.email || 'anonymous';
} catch (error) {
console.warn('Failed to parse JWT token:', error);
return 'anonymous';
}
}
/**
* Get stored JWT token from localStorage/sessionStorage
* @returns {string|null} Stored JWT token
*/
getStoredToken() {
// Try localStorage first (persistent), then sessionStorage (session-only)
return localStorage.getItem('insertr_auth_token') ||
sessionStorage.getItem('insertr_auth_token') ||
null;
}
/**
* Store JWT token for future requests
* @param {string} token - JWT token from OAuth provider
* @param {boolean} persistent - Whether to use localStorage (true) or sessionStorage (false)
*/
setStoredToken(token, persistent = true) {
const storage = persistent ? localStorage : sessionStorage;
storage.setItem('insertr_auth_token', token);
// Clear the other storage to avoid conflicts
const otherStorage = persistent ? sessionStorage : localStorage;
otherStorage.removeItem('insertr_auth_token');
}
/**
* Clear stored authentication token
*/
clearStoredToken() {
localStorage.removeItem('insertr_auth_token');
sessionStorage.removeItem('insertr_auth_token');
}
/**
* Generate mock JWT token for development/testing
* @returns {string} Mock JWT token
*/
getMockToken() {
// Create a mock JWT-like token for development
// Format: mock-{user}-{timestamp}-{random}
const user = 'anonymous';
const timestamp = Date.now();
const random = Math.random().toString(36).substr(2, 9);
return `mock-${user}-${timestamp}-${random}`;
}
/**
* Parse JWT token payload
* @param {string} token - JWT token
* @returns {object} Parsed payload
*/
parseJWT(token) {
if (token.startsWith('mock-')) {
// Return mock payload for development tokens
return {
sub: 'anonymous',
user_id: 'anonymous',
email: 'anonymous@localhost',
iss: 'insertr-dev',
exp: Date.now() + 24 * 60 * 60 * 1000 // 24 hours from now
};
}
try {
// Parse real JWT token
const parts = token.split('.');
if (parts.length !== 3) {
throw new Error('Invalid JWT format');
}
const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
return payload;
} catch (error) {
throw new Error(`Failed to parse JWT token: ${error.message}`);
}
}
/**
* Check if JWT token is expired
* @param {string} token - JWT token
* @returns {boolean} True if token is expired
*/
isTokenExpired(token) {
try {
const payload = this.parseJWT(token);
const now = Math.floor(Date.now() / 1000);
return payload.exp && payload.exp < now;
} catch (error) {
// If we can't parse the token, consider it expired
return true;
}
}
/**
* Initialize OAuth flow with provider (Google, GitHub, etc.)
* @param {string} provider - OAuth provider ('google', 'github', etc.)
* @returns {Promise<boolean>} Success status
*/
async initiateOAuth(provider = 'google') {
// This will be implemented when we add real OAuth integration
console.log(`🔐 OAuth flow with ${provider} not yet implemented`);
console.log('💡 For now, using mock authentication in development');
// Store a mock token for development
const mockToken = this.getMockToken();
this.setStoredToken(mockToken, true);
return true;
}
/**
* Handle OAuth callback after user returns from provider
* @param {URLSearchParams} urlParams - URL parameters from OAuth callback
* @returns {Promise<boolean>} Success status
*/
async handleOAuthCallback(urlParams) {
// This will be implemented when we add real OAuth integration
const code = urlParams.get('code');
const state = urlParams.get('state');
if (code) {
console.log('🔐 OAuth callback received, exchanging code for token...');
// TODO: Exchange authorization code for JWT token
// const token = await this.exchangeCodeForToken(code, state);
// this.setStoredToken(token, true);
return true;
}
return false;
}
}

39
lib/src/core/editor.js
View File

@@ -116,8 +116,7 @@ export class InsertrEditor {
}
}
// Update element content regardless of API success (optimistic update)
this.updateElementContent(meta.element, formData);
// Close form
this.formRenderer.closeForm();
@@ -127,8 +126,7 @@ export class InsertrEditor {
} catch (error) {
console.error('❌ Error saving content:', error);
// Still update the UI even if API fails
this.updateElementContent(meta.element, formData);
this.formRenderer.closeForm();
}
}
@@ -140,44 +138,15 @@ export class InsertrEditor {
return 'link';
}
if (tagName === 'p' || tagName === 'div') {
return 'markdown';
}
// Default to text for headings and other elements
return 'text';
// ALL text elements use markdown for consistent editing experience
return 'markdown';
}
handleCancel(meta) {
console.log('❌ Edit cancelled:', meta.contentId);
}
updateElementContent(element, formData) {
// Skip updating markdown elements and groups - they're handled by the unified markdown editor
if (element.classList.contains('insertr-group') || this.isMarkdownElement(element)) {
console.log('🔄 Skipping element update - handled by unified markdown editor');
return;
}
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 for non-markdown elements
element.textContent = formData.text || '';
}
}
isMarkdownElement(element) {
// Check if element uses markdown based on form config
const markdownTags = new Set(['p', 'h3', 'h4', 'h5', 'h6', 'span']);
return markdownTags.has(element.tagName.toLowerCase());
}
addEditorStyles() {
const styles = `
.insertr-editing-hover {

492
lib/src/ui/Editor.js Normal file
View File

@@ -0,0 +1,492 @@
/**
* Editor - Handles all content types with markdown-first approach
*/
import { markdownConverter } from '../utils/markdown.js';
import { Previewer } from './Previewer.js';
export class Editor {
constructor() {
this.currentOverlay = null;
this.previewer = new Previewer();
}
/**
* Edit any content element with markdown interface
* @param {Object} meta - Element metadata {element, contentId, contentType}
* @param {string|Object} currentContent - Current content value
* @param {Function} onSave - Save callback
* @param {Function} onCancel - Cancel callback
*/
edit(meta, currentContent, onSave, onCancel) {
const { element } = meta;
// Handle both single elements and groups uniformly
const elements = Array.isArray(element) ? element : [element];
const context = new EditContext(elements, currentContent);
// Close any existing editor
this.close();
// Create editor form
const form = this.createForm(context, meta);
const overlay = this.createOverlay(form);
// Position relative to primary element
this.positionForm(context.primaryElement, overlay);
// Setup event handlers
this.setupEventHandlers(form, overlay, context, { onSave, onCancel });
// Show editor
document.body.appendChild(overlay);
this.currentOverlay = overlay;
// Focus textarea
const textarea = form.querySelector('textarea');
if (textarea) {
setTimeout(() => textarea.focus(), 100);
}
return overlay;
}
/**
* Create editing form for any content type
*/
createForm(context, meta) {
const config = this.getFieldConfig(context);
const currentContent = context.extractContent();
const form = document.createElement('div');
form.className = 'insertr-edit-form';
// Build form HTML
let formHTML = `<div class="insertr-form-header">${config.label}</div>`;
// Markdown textarea (always present)
formHTML += this.createMarkdownField(config, currentContent);
// URL field (for links only)
if (config.includeUrl) {
formHTML += this.createUrlField(currentContent);
}
// Form actions
formHTML += `
<div class="insertr-form-actions">
<button type="button" class="insertr-btn-save">Save</button>
<button type="button" class="insertr-btn-cancel">Cancel</button>
<button type="button" class="insertr-btn-history" data-content-id="${meta.contentId}">View History</button>
</div>
`;
form.innerHTML = formHTML;
return form;
}
/**
* Get field configuration for any element type (markdown-first)
*/
getFieldConfig(context) {
const elementCount = context.elements.length;
const primaryElement = context.primaryElement;
const isLink = primaryElement.tagName.toLowerCase() === 'a';
// Multi-element groups
if (elementCount > 1) {
return {
type: 'markdown',
includeUrl: false,
label: `Group Content (${elementCount} elements)`,
rows: Math.max(8, elementCount * 2),
placeholder: 'Edit all content together using markdown...'
};
}
// Single elements - all get markdown by default
const tag = primaryElement.tagName.toLowerCase();
const baseConfig = {
type: 'markdown',
includeUrl: isLink,
placeholder: 'Enter content using markdown...'
};
// Customize by element type
switch (tag) {
case 'h1':
return { ...baseConfig, label: 'Main Headline', rows: 1, placeholder: 'Enter main headline...' };
case 'h2':
return { ...baseConfig, label: 'Subheading', rows: 1, placeholder: 'Enter subheading...' };
case 'h3': case 'h4': case 'h5': case 'h6':
return { ...baseConfig, label: 'Heading', rows: 2, placeholder: 'Enter heading (markdown supported)...' };
case 'p':
return { ...baseConfig, label: 'Content', rows: 4, placeholder: 'Enter content using markdown...' };
case 'span':
return { ...baseConfig, label: 'Text', rows: 2, placeholder: 'Enter text (markdown supported)...' };
case 'button':
return { ...baseConfig, label: 'Button Text', rows: 1, placeholder: 'Enter button text...' };
case 'a':
return { ...baseConfig, label: 'Link', rows: 2, placeholder: 'Enter link text (markdown supported)...' };
default:
return { ...baseConfig, label: 'Content', rows: 3, placeholder: 'Enter content using markdown...' };
}
}
/**
* Create markdown textarea field
*/
createMarkdownField(config, content) {
const textContent = typeof content === 'object' ? content.text || '' : content;
return `
<div class="insertr-form-group">
<textarea class="insertr-form-textarea insertr-markdown-editor" name="content"
rows="${config.rows}"
placeholder="${config.placeholder}">${this.escapeHtml(textContent)}</textarea>
<div class="insertr-form-help">
Supports Markdown formatting (bold, italic, links, etc.)
</div>
</div>
`;
}
/**
* Create URL field for links
*/
createUrlField(content) {
const url = typeof content === 'object' ? content.url || '' : '';
return `
<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(url)}"
placeholder="https://example.com">
</div>
`;
}
/**
* Setup event handlers
*/
setupEventHandlers(form, overlay, context, { onSave, onCancel }) {
const textarea = form.querySelector('textarea');
const urlInput = form.querySelector('input[name="url"]');
const saveBtn = form.querySelector('.insertr-btn-save');
const cancelBtn = form.querySelector('.insertr-btn-cancel');
const historyBtn = form.querySelector('.insertr-btn-history');
// Initialize previewer
this.previewer.setActiveContext(context);
// Setup live preview for content changes
if (textarea) {
textarea.addEventListener('input', () => {
const content = this.extractFormData(form);
this.previewer.schedulePreview(context, content);
});
}
// Setup live preview for URL changes (links only)
if (urlInput) {
urlInput.addEventListener('input', () => {
const content = this.extractFormData(form);
this.previewer.schedulePreview(context, content);
});
}
// Save handler
if (saveBtn) {
saveBtn.addEventListener('click', () => {
const content = this.extractFormData(form);
// Apply final content to elements
context.applyContent(content);
// Update stored original content to match current state
// This makes the saved content the new baseline for future edits
context.updateOriginalContent();
// Clear preview styling (won't restore content since original matches current)
this.previewer.clearPreview();
// Callback with the content
onSave(content);
this.close();
});
}
// Cancel handler
if (cancelBtn) {
cancelBtn.addEventListener('click', () => {
this.previewer.clearPreview();
onCancel();
this.close();
});
}
// History handler
if (historyBtn) {
historyBtn.addEventListener('click', () => {
const contentId = historyBtn.getAttribute('data-content-id');
console.log('Version history not implemented yet for:', contentId);
// TODO: Implement version history integration
});
}
// ESC key handler
const keyHandler = (e) => {
if (e.key === 'Escape') {
this.previewer.clearPreview();
onCancel();
this.close();
document.removeEventListener('keydown', keyHandler);
}
};
document.addEventListener('keydown', keyHandler);
// Click outside handler
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
this.previewer.clearPreview();
onCancel();
this.close();
}
});
}
/**
* Extract form data consistently
*/
extractFormData(form) {
const textarea = form.querySelector('textarea[name="content"]');
const urlInput = form.querySelector('input[name="url"]');
const content = textarea ? textarea.value : '';
if (urlInput) {
// Link content
return {
text: content,
url: urlInput.value
};
}
// Regular content
return content;
}
/**
* 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 primary element
*/
positionForm(element, overlay) {
const rect = element.getBoundingClientRect();
const form = overlay.querySelector('.insertr-edit-form');
const viewportWidth = window.innerWidth;
// Calculate optimal width
let formWidth;
if (viewportWidth < 768) {
formWidth = Math.min(viewportWidth - 40, 500);
} else {
const minComfortableWidth = 600;
const maxWidth = Math.min(viewportWidth * 0.9, 800);
formWidth = Math.max(minComfortableWidth, Math.min(rect.width * 1.5, maxWidth));
}
form.style.width = `${formWidth}px`;
// Position below element
const top = rect.bottom + window.scrollY + 10;
const centerLeft = rect.left + window.scrollX + (rect.width / 2) - (formWidth / 2);
const minLeft = 20;
const maxLeft = window.innerWidth - formWidth - 20;
const left = Math.max(minLeft, Math.min(centerLeft, maxLeft));
overlay.style.position = 'absolute';
overlay.style.top = `${top}px`;
overlay.style.left = `${left}px`;
overlay.style.zIndex = '10000';
// Ensure visibility
this.ensureModalVisible(overlay);
}
/**
* Ensure modal is visible by scrolling if needed
*/
ensureModalVisible(overlay) {
requestAnimationFrame(() => {
const modal = overlay.querySelector('.insertr-edit-form');
const modalRect = modal.getBoundingClientRect();
const viewportHeight = window.innerHeight;
if (modalRect.bottom > viewportHeight) {
const scrollAmount = modalRect.bottom - viewportHeight + 20;
window.scrollBy({
top: scrollAmount,
behavior: 'smooth'
});
}
});
}
/**
* Close current editor
*/
close() {
if (this.previewer) {
this.previewer.clearPreview();
}
if (this.currentOverlay) {
this.currentOverlay.remove();
this.currentOverlay = null;
}
}
/**
* Escape HTML to prevent XSS
*/
escapeHtml(text) {
if (typeof text !== 'string') return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
/**
* EditContext - Represents content elements for editing
*/
class EditContext {
constructor(elements, currentContent) {
this.elements = elements;
this.primaryElement = elements[0];
this.originalContent = null;
this.currentContent = currentContent;
}
/**
* Extract content from elements in markdown format
*/
extractContent() {
if (this.elements.length === 1) {
const element = this.elements[0];
// Handle links specially
if (element.tagName.toLowerCase() === 'a') {
return {
text: markdownConverter.htmlToMarkdown(element.innerHTML),
url: element.href
};
}
// Single element - convert to markdown
return markdownConverter.htmlToMarkdown(element.innerHTML);
} else {
// Multiple elements - use group extraction
return markdownConverter.extractGroupMarkdown(this.elements);
}
}
/**
* Apply content to elements from markdown/object
*/
applyContent(content) {
if (this.elements.length === 1) {
const element = this.elements[0];
// Handle links specially
if (element.tagName.toLowerCase() === 'a' && typeof content === 'object') {
element.innerHTML = markdownConverter.markdownToHtml(content.text || '');
if (content.url) {
element.href = content.url;
}
return;
}
// Single element - convert markdown to HTML
const html = markdownConverter.markdownToHtml(content);
element.innerHTML = html;
} else {
// Multiple elements - use group update
markdownConverter.updateGroupElements(this.elements, content);
}
}
/**
* Store original content for preview restoration
*/
storeOriginalContent() {
this.originalContent = this.elements.map(el => ({
innerHTML: el.innerHTML,
href: el.href // Store href for links
}));
}
/**
* Restore original content (for preview cancellation)
*/
restoreOriginalContent() {
if (this.originalContent) {
this.elements.forEach((el, index) => {
if (this.originalContent[index] !== undefined) {
el.innerHTML = this.originalContent[index].innerHTML;
if (this.originalContent[index].href) {
el.href = this.originalContent[index].href;
}
}
});
}
}
/**
* Update original content to match current element state (after save)
* This makes the current content the new baseline for future cancellations
*/
updateOriginalContent() {
this.originalContent = this.elements.map(el => ({
innerHTML: el.innerHTML,
href: el.href // Store href for links
}));
}
/**
* Apply preview styling to all elements
*/
applyPreviewStyling() {
this.elements.forEach(el => {
el.classList.add('insertr-preview-active');
});
// Also apply to containers if they're groups
if (this.primaryElement.classList.contains('insertr-group')) {
this.primaryElement.classList.add('insertr-preview-active');
}
}
/**
* Remove preview styling from all elements
*/
removePreviewStyling() {
this.elements.forEach(el => {
el.classList.remove('insertr-preview-active');
});
// Also remove from containers
if (this.primaryElement.classList.contains('insertr-group')) {
this.primaryElement.classList.remove('insertr-preview-active');
}
}
}

157
lib/src/ui/Previewer.js Normal file
View File

@@ -0,0 +1,157 @@
/**
* Previewer - Handles live preview for all content types
*/
import { markdownConverter } from '../utils/markdown.js';
export class Previewer {
constructor() {
this.previewTimeout = null;
this.activeContext = null;
this.resizeObserver = null;
this.onHeightChange = null;
}
/**
* Set the active editing context for preview
*/
setActiveContext(context) {
this.clearPreview();
this.activeContext = context;
this.startResizeObserver();
}
/**
* Schedule a preview update with debouncing
*/
schedulePreview(context, content) {
// Clear existing timeout
if (this.previewTimeout) {
clearTimeout(this.previewTimeout);
}
// Schedule new preview with 500ms debounce
this.previewTimeout = setTimeout(() => {
this.updatePreview(context, content);
}, 500);
}
/**
* Update preview with new content
*/
updatePreview(context, content) {
// Store original content if first preview
if (!context.originalContent) {
context.storeOriginalContent();
}
// Apply preview content to elements
this.applyPreviewContent(context, content);
context.applyPreviewStyling();
}
/**
* Apply preview content to context elements
*/
applyPreviewContent(context, content) {
if (context.elements.length === 1) {
const element = context.elements[0];
// Handle links specially
if (element.tagName.toLowerCase() === 'a') {
if (typeof content === 'object') {
// Update link text (markdown to HTML)
if (content.text !== undefined) {
const html = markdownConverter.markdownToHtml(content.text);
element.innerHTML = html;
}
// Update link URL
if (content.url !== undefined && content.url.trim()) {
element.href = content.url;
}
} else if (content && content.trim()) {
// Just markdown content for link text
const html = markdownConverter.markdownToHtml(content);
element.innerHTML = html;
}
return;
}
// Regular single element
if (content && content.trim()) {
const html = markdownConverter.markdownToHtml(content);
element.innerHTML = html;
}
} else {
// Multiple elements - use group update
if (content && content.trim()) {
markdownConverter.updateGroupElements(context.elements, content);
}
}
}
/**
* Clear all preview state and restore original content
*/
clearPreview() {
if (this.activeContext) {
this.activeContext.restoreOriginalContent();
this.activeContext.removePreviewStyling();
this.activeContext = null;
}
if (this.previewTimeout) {
clearTimeout(this.previewTimeout);
this.previewTimeout = null;
}
this.stopResizeObserver();
}
/**
* Start observing element size changes for modal repositioning
*/
startResizeObserver() {
this.stopResizeObserver();
if (this.activeContext) {
this.resizeObserver = new ResizeObserver(() => {
// Handle height changes for modal repositioning
if (this.onHeightChange) {
this.onHeightChange(this.activeContext.primaryElement);
}
});
// Observe all elements in the context
this.activeContext.elements.forEach(el => {
this.resizeObserver.observe(el);
});
}
}
/**
* Stop observing element size changes
*/
stopResizeObserver() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
}
/**
* Set callback for height changes (for modal repositioning)
*/
setHeightChangeCallback(callback) {
this.onHeightChange = callback;
}
/**
* Get unique element ID for tracking
*/
getElementId(element) {
if (!element._insertrId) {
element._insertrId = 'insertr_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
}
return element._insertrId;
}
}

810
lib/src/ui/form-renderer.js
View File

@@ -1,270 +1,35 @@
import { markdownConverter } from '../utils/markdown.js';
import { MarkdownEditor } from './markdown-editor.js';
/**
* LivePreviewManager - Handles debounced live preview updates for non-markdown elements
* InsertrFormRenderer - Form renderer using markdown-first approach
* Thin wrapper around the Editor system
*/
class LivePreviewManager {
constructor() {
this.previewTimeouts = new Map();
this.activeElement = null;
this.originalContent = null;
this.originalStyles = null;
this.resizeObserver = null;
this.onHeightChangeCallback = null;
}
import { Editor } from './Editor.js';
schedulePreview(element, newValue, elementType) {
const elementId = this.getElementId(element);
// Clear existing timeout
if (this.previewTimeouts.has(elementId)) {
clearTimeout(this.previewTimeouts.get(elementId));
}
// Schedule new preview update with 500ms debounce
const timeoutId = setTimeout(() => {
this.updatePreview(element, newValue, elementType);
}, 500);
this.previewTimeouts.set(elementId, timeoutId);
}
updatePreview(element, newValue, elementType) {
// Store original content if first preview
if (!this.originalContent && this.activeElement === element) {
this.originalContent = this.extractOriginalContent(element, elementType);
}
// Apply preview styling and content
this.applyPreviewContent(element, newValue, elementType);
// ResizeObserver will automatically detect height changes
}
extractOriginalContent(element, elementType) {
switch (elementType) {
case 'link':
return {
text: element.textContent,
url: element.href
};
default:
return element.textContent;
}
}
applyPreviewContent(element, newValue, elementType) {
// Add preview indicator
element.classList.add('insertr-preview-active');
// Update content based on element type
switch (elementType) {
case 'text':
case 'h1': case 'h2': case 'h3': case 'h4': case 'h5': case 'h6':
case 'span': case 'button':
if (newValue && newValue.trim()) {
element.textContent = newValue;
}
break;
case 'textarea':
case 'p':
if (newValue && newValue.trim()) {
element.textContent = newValue;
}
break;
case 'link':
if (typeof newValue === 'object') {
if (newValue.text !== undefined && newValue.text.trim()) {
element.textContent = newValue.text;
}
if (newValue.url !== undefined && newValue.url.trim()) {
element.href = newValue.url;
}
} else if (newValue && newValue.trim()) {
element.textContent = newValue;
}
break;
}
}
clearPreview(element) {
if (!element) return;
const elementId = this.getElementId(element);
// Clear any pending preview
if (this.previewTimeouts.has(elementId)) {
clearTimeout(this.previewTimeouts.get(elementId));
this.previewTimeouts.delete(elementId);
}
// Stop ResizeObserver
this.stopResizeObserver();
// Restore original content
if (this.originalContent && element === this.activeElement) {
this.restoreOriginalContent(element);
}
// Remove preview styling
element.classList.remove('insertr-preview-active');
this.activeElement = null;
this.originalContent = null;
}
restoreOriginalContent(element) {
if (!this.originalContent) return;
if (typeof this.originalContent === 'object') {
// Link element
element.textContent = this.originalContent.text;
if (this.originalContent.url) {
element.href = this.originalContent.url;
}
} else {
// Text element
element.textContent = this.originalContent;
}
}
getElementId(element) {
// Create unique ID for element tracking
if (!element._insertrId) {
element._insertrId = 'insertr_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
}
return element._insertrId;
}
setActiveElement(element) {
this.activeElement = element;
this.originalContent = null;
this.startResizeObserver(element);
}
setHeightChangeCallback(callback) {
this.onHeightChangeCallback = callback;
}
startResizeObserver(element) {
// Clean up existing observer
this.stopResizeObserver();
// Create new ResizeObserver for this element
this.resizeObserver = new ResizeObserver(entries => {
// Use requestAnimationFrame to ensure smooth updates
requestAnimationFrame(() => {
if (this.onHeightChangeCallback && element === this.activeElement) {
this.onHeightChangeCallback(element);
}
});
});
// Start observing the element
this.resizeObserver.observe(element);
}
stopResizeObserver() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
}
}
/**
* InsertrFormRenderer - Professional modal editing forms with live preview
* Enhanced with debounced live preview and comfortable input sizing
*/
export class InsertrFormRenderer {
constructor(apiClient = null) {
this.apiClient = apiClient;
this.currentOverlay = null;
this.previewManager = new LivePreviewManager();
this.markdownEditor = new MarkdownEditor();
this.editor = new Editor();
this.setupStyles();
}
/**
* Create and show edit form for content element
* Show edit form for any content element
* @param {Object} meta - Element metadata {element, contentId, contentType}
* @param {string} currentContent - Current content value
* @param {string|Object} 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 } = meta;
const { element, contentId, contentType } = meta;
const config = this.getFieldConfig(element, contentType);
// Route to unified markdown editor for markdown content
if (config.type === 'markdown') {
return this.markdownEditor.edit(element, onSave, onCancel);
}
// Route to unified markdown editor for group elements
// Handle insertr-group elements by getting their viable children
if (element.classList.contains('insertr-group')) {
const children = this.getGroupChildren(element);
return this.markdownEditor.edit(children, onSave, onCancel);
const groupMeta = { ...meta, element: children };
return this.editor.edit(groupMeta, currentContent, onSave, onCancel);
}
// Handle non-markdown elements (text, links, etc.) with legacy system
return this.showLegacyEditForm(meta, currentContent, onSave, onCancel);
}
/**
* Show legacy edit form for non-markdown elements (text, links, etc.)
*/
showLegacyEditForm(meta, currentContent, onSave, onCancel) {
const { element, contentId, contentType } = meta;
const config = this.getFieldConfig(element, contentType);
// Initialize preview manager for this element
this.previewManager.setActiveElement(element);
// Set up height change callback
this.previewManager.setHeightChangeCallback((changedElement) => {
this.repositionModal(changedElement, overlay);
});
// Create form
const form = this.createEditForm(contentId, config, currentContent);
// Create overlay with backdrop
const overlay = this.createOverlay(form);
// Position form with enhanced sizing
this.positionForm(element, overlay);
// Setup event handlers with live preview
this.setupFormHandlers(form, overlay, element, config, { 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;
// All other elements use the editor directly
return this.editor.edit(meta, currentContent, onSave, onCancel);
}
/**
@@ -273,7 +38,7 @@ export class InsertrFormRenderer {
getGroupChildren(groupElement) {
const children = [];
for (const child of groupElement.children) {
// Skip elements that don't have text content
// Skip elements that don't have meaningful text content
if (child.textContent.trim().length > 0) {
children.push(child);
}
@@ -285,190 +50,28 @@ export class InsertrFormRenderer {
* Close current form
*/
closeForm() {
// Close markdown editor if active
this.markdownEditor.close();
// Clear any active legacy previews
if (this.previewManager.activeElement) {
this.previewManager.clearPreview(this.previewManager.activeElement);
}
if (this.currentOverlay) {
this.currentOverlay.remove();
this.currentOverlay = null;
}
this.editor.close();
}
/**
* 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 - using markdown for rich content
const configs = {
h1: { type: 'text', label: 'Headline', maxLength: 60, placeholder: 'Enter headline...' },
h2: { type: 'text', label: 'Subheading', maxLength: 80, placeholder: 'Enter subheading...' },
h3: { type: 'markdown', label: 'Section Title', rows: 2, placeholder: 'Enter title (markdown supported)...' },
h4: { type: 'markdown', label: 'Title', rows: 2, placeholder: 'Enter title (markdown supported)...' },
h5: { type: 'markdown', label: 'Title', rows: 2, placeholder: 'Enter title (markdown supported)...' },
h6: { type: 'markdown', label: 'Title', rows: 2, placeholder: 'Enter title (markdown supported)...' },
p: { type: 'markdown', label: 'Content', rows: 4, placeholder: 'Enter content using markdown...' },
a: { type: 'link', label: 'Link', placeholder: 'Enter link text...', includeUrl: true },
span: { type: 'markdown', label: 'Text', rows: 2, placeholder: 'Enter text (markdown supported)...' },
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>
<button type="button" class="insertr-btn-history" data-content-id="${contentId}">View History</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;
}
/**
* Get element ID for preview tracking
*/
getElementId(element) {
return element.id || element.getAttribute('data-content-id') ||
`element-${element.tagName}-${Date.now()}`;
}
/**
* Show version history modal
* Show version history modal (placeholder for future implementation)
*/
async showVersionHistory(contentId, element, onRestore) {
try {
// Get version history from API (we'll need to pass this in)
// Get version history from API
const apiClient = this.getApiClient();
const versions = await apiClient.getContentVersions(contentId);
if (!apiClient) {
console.warn('No API client configured for version history');
return;
}
const versions = await apiClient.getContentVersions(contentId);
// Create version history modal
const historyModal = this.createVersionHistoryModal(contentId, versions, onRestore);
document.body.appendChild(historyModal);
// Focus and setup handlers
// Setup handlers
this.setupVersionHistoryHandlers(historyModal, contentId);
} catch (error) {
@@ -478,7 +81,7 @@ export class InsertrFormRenderer {
}
/**
* Create version history modal
* Create version history modal (simplified placeholder)
*/
createVersionHistoryModal(contentId, versions, onRestore) {
const modal = document.createElement('div');
@@ -547,7 +150,6 @@ export class InsertrFormRenderer {
if (await this.confirmRestore()) {
await this.restoreVersion(contentId, versionId);
modal.remove();
// Refresh the current form or close it
this.closeForm();
}
});
@@ -626,177 +228,6 @@ export class InsertrFormRenderer {
return this.apiClient || window.insertrAPIClient || null;
}
/**
* Reposition modal based on current element size and ensure visibility
*/
repositionModal(element, overlay) {
// Wait for next frame to ensure DOM is updated
requestAnimationFrame(() => {
const rect = element.getBoundingClientRect();
const form = overlay.querySelector('.insertr-edit-form');
// Calculate new position below the current element boundaries
const newTop = rect.bottom + window.scrollY + 10;
// Update modal position
overlay.style.top = `${newTop}px`;
// After repositioning, ensure modal is still visible
this.ensureModalVisible(element, overlay);
});
}
/**
* Ensure modal is fully visible by scrolling viewport if necessary
*/
ensureModalVisible(element, overlay) {
// Wait for next frame to ensure DOM is updated
requestAnimationFrame(() => {
const modal = overlay.querySelector('.insertr-edit-form');
const modalRect = modal.getBoundingClientRect();
const viewportHeight = window.innerHeight;
// Calculate if modal extends below viewport
const modalBottom = modalRect.bottom;
const viewportBottom = viewportHeight;
if (modalBottom > viewportBottom) {
// Calculate scroll amount needed with some padding
const scrollAmount = modalBottom - viewportBottom + 20;
window.scrollBy({
top: scrollAmount,
behavior: 'smooth'
});
}
});
}
/**
* Setup form event handlers
*/
setupFormHandlers(form, overlay, element, config, { onSave, onCancel }) {
const saveBtn = form.querySelector('.insertr-btn-save');
const cancelBtn = form.querySelector('.insertr-btn-cancel');
const elementType = this.getElementType(element, config);
// Setup live preview for input changes
this.setupLivePreview(form, element, elementType);
if (saveBtn) {
saveBtn.addEventListener('click', () => {
// Clear preview before saving (makes changes permanent)
this.previewManager.clearPreview(element);
const formData = this.extractFormData(form);
onSave(formData);
this.closeForm();
});
}
if (cancelBtn) {
cancelBtn.addEventListener('click', () => {
// Clear preview to restore original content
this.previewManager.clearPreview(element);
onCancel();
this.closeForm();
});
}
// Version History button
const historyBtn = form.querySelector('.insertr-btn-history');
if (historyBtn) {
historyBtn.addEventListener('click', () => {
const contentId = historyBtn.getAttribute('data-content-id');
this.showVersionHistory(contentId, element, onSave);
});
}
// ESC key to cancel
const keyHandler = (e) => {
if (e.key === 'Escape') {
this.previewManager.clearPreview(element);
onCancel();
this.closeForm();
document.removeEventListener('keydown', keyHandler);
}
};
document.addEventListener('keydown', keyHandler);
// Click outside to cancel
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
this.previewManager.clearPreview(element);
onCancel();
this.closeForm();
}
});
}
setupLivePreview(form, element, elementType) {
// Get all input elements that should trigger preview updates
const inputs = form.querySelectorAll('input, textarea');
inputs.forEach(input => {
input.addEventListener('input', () => {
const newValue = this.extractInputValue(form, elementType);
this.previewManager.schedulePreview(element, newValue, elementType);
});
});
}
extractInputValue(form, elementType) {
// Extract current form values for preview
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
return {
text: textInput.value,
url: urlInput.value
};
} else if (contentInput) {
// Text or textarea field
return contentInput.value;
}
return '';
}
getElementType(element, config) {
// Determine element type for preview handling
if (config.type === 'link') return 'link';
if (config.type === 'markdown') return 'markdown';
if (config.type === 'textarea') return 'textarea';
const tagName = element.tagName.toLowerCase();
return tagName === 'p' ? 'p' : 'text';
}
/**
* 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
*/
@@ -808,10 +239,11 @@ export class InsertrFormRenderer {
}
/**
* Setup form styles
* Setup form styles (consolidated and simplified)
*/
setupStyles() {
const styles = `
/* Overlay and Form Container */
.insertr-form-overlay {
position: absolute;
z-index: 10000;
@@ -826,8 +258,11 @@ export class InsertrFormRenderer {
width: 100%;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-width: 600px;
max-width: 800px;
}
/* Form Header */
.insertr-form-header {
font-weight: 600;
color: #1f2937;
@@ -839,6 +274,7 @@ export class InsertrFormRenderer {
letter-spacing: 0.5px;
}
/* Form Groups and Fields */
.insertr-form-group {
margin-bottom: 1rem;
}
@@ -874,6 +310,7 @@ export class InsertrFormRenderer {
box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}
/* Markdown Editor Styling */
.insertr-form-textarea {
min-height: 120px;
resize: vertical;
@@ -888,6 +325,7 @@ export class InsertrFormRenderer {
background-color: #f8fafc;
}
/* Form Actions */
.insertr-form-actions {
display: flex;
gap: 0.5rem;
@@ -929,6 +367,22 @@ export class InsertrFormRenderer {
background: #4b5563;
}
.insertr-btn-history {
background: #6f42c1;
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-history:hover {
background: #5a359a;
}
.insertr-form-help {
font-size: 0.75rem;
color: #6b7280;
@@ -960,12 +414,7 @@ export class InsertrFormRenderer {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Enhanced modal sizing for comfortable editing */
.insertr-edit-form {
min-width: 600px; /* Ensures ~70 character width */
max-width: 800px;
}
/* Responsive Design */
@media (max-width: 768px) {
.insertr-edit-form {
min-width: 90vw;
@@ -979,10 +428,159 @@ export class InsertrFormRenderer {
}
}
/* Enhanced input styling for comfortable editing */
.insertr-form-input {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
letter-spacing: 0.02em;
/* Version History Modal Styles */
.insertr-version-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10001;
}
.insertr-version-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.insertr-version-content-modal {
background: white;
border-radius: 8px;
max-width: 600px;
width: 100%;
max-height: 80vh;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
}
.insertr-version-header {
padding: 20px 20px 0;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.insertr-version-header h3 {
margin: 0 0 20px;
color: #333;
font-size: 18px;
}
.insertr-btn-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #666;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.insertr-btn-close:hover {
color: #333;
}
.insertr-version-list {
overflow-y: auto;
padding: 20px;
flex: 1;
}
.insertr-version-item {
border: 1px solid #e1e5e9;
border-radius: 6px;
padding: 16px;
margin-bottom: 12px;
background: #f8f9fa;
}
.insertr-version-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
font-size: 13px;
}
.insertr-version-label {
font-weight: 600;
color: #0969da;
}
.insertr-version-date {
color: #656d76;
}
.insertr-version-user {
color: #656d76;
}
.insertr-version-content {
margin-bottom: 12px;
padding: 8px;
background: white;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
color: #24292f;
white-space: pre-wrap;
}
.insertr-version-actions {
display: flex;
gap: 8px;
}
.insertr-btn-restore {
background: #0969da;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
}
.insertr-btn-restore:hover {
background: #0860ca;
}
.insertr-btn-view-diff {
background: #f6f8fa;
color: #24292f;
border: 1px solid #d1d9e0;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
}
.insertr-btn-view-diff:hover {
background: #f3f4f6;
}
.insertr-version-empty {
text-align: center;
color: #656d76;
font-style: italic;
padding: 40px 20px;
}
`;
@@ -991,4 +589,4 @@ export class InsertrFormRenderer {
styleSheet.innerHTML = styles;
document.head.appendChild(styleSheet);
}
}
}

446
lib/src/ui/markdown-editor.js
View File

@@ -1,446 +0,0 @@
/**
* Unified Markdown Editor - Handles both single and multiple element editing
*/
import { markdownConverter } from '../utils/markdown.js';
export class MarkdownEditor {
constructor() {
this.currentOverlay = null;
this.previewManager = new MarkdownPreviewManager();
}
/**
* Edit elements with markdown - unified interface for single or multiple elements
* @param {HTMLElement|HTMLElement[]} elements - Element(s) to edit
* @param {Function} onSave - Save callback
* @param {Function} onCancel - Cancel callback
*/
edit(elements, onSave, onCancel) {
// Normalize to array
const elementArray = Array.isArray(elements) ? elements : [elements];
const context = new MarkdownContext(elementArray);
// Close any existing editor
this.close();
// Create unified editor form
const form = this.createMarkdownForm(context);
const overlay = this.createOverlay(form);
// Position relative to primary element
this.positionForm(context.primaryElement, overlay);
// Setup unified event handlers
this.setupEventHandlers(form, overlay, context, { onSave, onCancel });
// Show editor
document.body.appendChild(overlay);
this.currentOverlay = overlay;
// Focus textarea
const textarea = form.querySelector('textarea');
if (textarea) {
setTimeout(() => textarea.focus(), 100);
}
return overlay;
}
/**
* Create markdown editing form
*/
createMarkdownForm(context) {
const config = this.getMarkdownConfig(context);
const currentContent = context.extractMarkdown();
const form = document.createElement('div');
form.className = 'insertr-edit-form';
form.innerHTML = `
<div class="insertr-form-header">${config.label}</div>
<div class="insertr-form-group">
<textarea class="insertr-form-textarea insertr-markdown-editor" name="content"
rows="${config.rows}"
placeholder="${config.placeholder}">${this.escapeHtml(currentContent)}</textarea>
<div class="insertr-form-help">
Supports Markdown formatting (bold, italic, links, etc.)
</div>
</div>
<div class="insertr-form-actions">
<button type="button" class="insertr-btn-save">Save</button>
<button type="button" class="insertr-btn-cancel">Cancel</button>
</div>
`;
return form;
}
/**
* Get markdown configuration based on context
*/
getMarkdownConfig(context) {
const elementCount = context.elements.length;
if (elementCount === 1) {
const element = context.elements[0];
const tag = element.tagName.toLowerCase();
switch (tag) {
case 'h3': case 'h4': case 'h5': case 'h6':
return {
label: 'Title (Markdown)',
rows: 2,
placeholder: 'Enter title using markdown...'
};
case 'p':
return {
label: 'Content (Markdown)',
rows: 4,
placeholder: 'Enter content using markdown...'
};
case 'span':
return {
label: 'Text (Markdown)',
rows: 2,
placeholder: 'Enter text using markdown...'
};
default:
return {
label: 'Content (Markdown)',
rows: 3,
placeholder: 'Enter content using markdown...'
};
}
} else {
return {
label: `Group Content (${elementCount} elements)`,
rows: Math.max(8, elementCount * 2),
placeholder: 'Edit all content together using markdown...'
};
}
}
/**
* Setup unified event handlers
*/
setupEventHandlers(form, overlay, context, { onSave, onCancel }) {
const textarea = form.querySelector('textarea');
const saveBtn = form.querySelector('.insertr-btn-save');
const cancelBtn = form.querySelector('.insertr-btn-cancel');
// Initialize preview manager
this.previewManager.setActiveContext(context);
// Setup debounced live preview
if (textarea) {
textarea.addEventListener('input', () => {
const markdown = textarea.value;
this.previewManager.schedulePreview(context, markdown);
});
}
// Save handler
if (saveBtn) {
saveBtn.addEventListener('click', () => {
const markdown = textarea.value;
// Update elements with final content
context.applyMarkdown(markdown);
// Clear preview styling
this.previewManager.clearPreview();
// Callback and close
onSave({ text: markdown });
this.close();
});
}
// Cancel handler
if (cancelBtn) {
cancelBtn.addEventListener('click', () => {
this.previewManager.clearPreview();
onCancel();
this.close();
});
}
// ESC key handler
const keyHandler = (e) => {
if (e.key === 'Escape') {
this.previewManager.clearPreview();
onCancel();
this.close();
document.removeEventListener('keydown', keyHandler);
}
};
document.addEventListener('keydown', keyHandler);
// Click outside handler
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
this.previewManager.clearPreview();
onCancel();
this.close();
}
});
}
/**
* 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 primary element
*/
positionForm(element, overlay) {
const rect = element.getBoundingClientRect();
const form = overlay.querySelector('.insertr-edit-form');
const viewportWidth = window.innerWidth;
// Calculate optimal width
let formWidth;
if (viewportWidth < 768) {
formWidth = Math.min(viewportWidth - 40, 500);
} else {
const minComfortableWidth = 600;
const maxWidth = Math.min(viewportWidth * 0.9, 800);
formWidth = Math.max(minComfortableWidth, Math.min(rect.width * 1.5, maxWidth));
}
form.style.width = `${formWidth}px`;
// Position below element
const top = rect.bottom + window.scrollY + 10;
const centerLeft = rect.left + window.scrollX + (rect.width / 2) - (formWidth / 2);
const minLeft = 20;
const maxLeft = window.innerWidth - formWidth - 20;
const left = Math.max(minLeft, Math.min(centerLeft, maxLeft));
overlay.style.position = 'absolute';
overlay.style.top = `${top}px`;
overlay.style.left = `${left}px`;
overlay.style.zIndex = '10000';
// Ensure visibility
this.ensureModalVisible(element, overlay);
}
/**
* Ensure modal is visible by scrolling if needed
*/
ensureModalVisible(element, overlay) {
requestAnimationFrame(() => {
const modal = overlay.querySelector('.insertr-edit-form');
const modalRect = modal.getBoundingClientRect();
const viewportHeight = window.innerHeight;
if (modalRect.bottom > viewportHeight) {
const scrollAmount = modalRect.bottom - viewportHeight + 20;
window.scrollBy({
top: scrollAmount,
behavior: 'smooth'
});
}
});
}
/**
* Close current editor
*/
close() {
if (this.previewManager) {
this.previewManager.clearPreview();
}
if (this.currentOverlay) {
this.currentOverlay.remove();
this.currentOverlay = null;
}
}
/**
* Escape HTML to prevent XSS
*/
escapeHtml(text) {
if (typeof text !== 'string') return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
/**
* Markdown Context - Represents single or multiple elements for editing
*/
class MarkdownContext {
constructor(elements) {
this.elements = elements;
this.primaryElement = elements[0]; // Used for positioning
this.originalContent = null;
}
/**
* Extract markdown content from elements
*/
extractMarkdown() {
if (this.elements.length === 1) {
// Single element - convert its HTML to markdown
return markdownConverter.htmlToMarkdown(this.elements[0].innerHTML);
} else {
// Multiple elements - combine and convert to markdown
return markdownConverter.extractGroupMarkdown(this.elements);
}
}
/**
* Apply markdown content to elements
*/
applyMarkdown(markdown) {
if (this.elements.length === 1) {
// Single element - convert markdown to HTML and apply
const html = markdownConverter.markdownToHtml(markdown);
this.elements[0].innerHTML = html;
} else {
// Multiple elements - use group update logic
markdownConverter.updateGroupElements(this.elements, markdown);
}
}
/**
* Store original content for preview restoration
*/
storeOriginalContent() {
this.originalContent = this.elements.map(el => el.innerHTML);
}
/**
* Restore original content (for preview cancellation)
*/
restoreOriginalContent() {
if (this.originalContent) {
this.elements.forEach((el, index) => {
if (this.originalContent[index] !== undefined) {
el.innerHTML = this.originalContent[index];
}
});
}
}
/**
* Apply preview styling
*/
applyPreviewStyling() {
this.elements.forEach(el => {
el.classList.add('insertr-preview-active');
});
// Also apply to primary element if it's a container
if (this.primaryElement.classList.contains('insertr-group')) {
this.primaryElement.classList.add('insertr-preview-active');
}
}
/**
* Remove preview styling
*/
removePreviewStyling() {
this.elements.forEach(el => {
el.classList.remove('insertr-preview-active');
});
// Also remove from containers
if (this.primaryElement.classList.contains('insertr-group')) {
this.primaryElement.classList.remove('insertr-preview-active');
}
}
}
/**
* Unified Preview Manager for Markdown Content
*/
class MarkdownPreviewManager {
constructor() {
this.previewTimeout = null;
this.activeContext = null;
this.resizeObserver = null;
}
setActiveContext(context) {
this.clearPreview();
this.activeContext = context;
this.startResizeObserver();
}
schedulePreview(context, markdown) {
// Clear existing timeout
if (this.previewTimeout) {
clearTimeout(this.previewTimeout);
}
// Schedule new preview with 500ms debounce
this.previewTimeout = setTimeout(() => {
this.updatePreview(context, markdown);
}, 500);
}
updatePreview(context, markdown) {
// Store original content if first preview
if (!context.originalContent) {
context.storeOriginalContent();
}
// Apply preview content
context.applyMarkdown(markdown);
context.applyPreviewStyling();
}
clearPreview() {
if (this.activeContext) {
this.activeContext.restoreOriginalContent();
this.activeContext.removePreviewStyling();
this.activeContext = null;
}
if (this.previewTimeout) {
clearTimeout(this.previewTimeout);
this.previewTimeout = null;
}
this.stopResizeObserver();
}
startResizeObserver() {
this.stopResizeObserver();
if (this.activeContext) {
this.resizeObserver = new ResizeObserver(() => {
// Handle height changes for modal repositioning
if (this.onHeightChange) {
this.onHeightChange(this.activeContext.primaryElement);
}
});
this.activeContext.elements.forEach(el => {
this.resizeObserver.observe(el);
});
}
}
stopResizeObserver() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
}
setHeightChangeCallback(callback) {
this.onHeightChange = callback;
}
}