tegwick
8ef356af57
Added comprehensive plugin system for independent JavaScript UI development: **Plugin Infrastructure:** - Extended existing MarkiTect plugin system with RenderingEnginePlugin base class - Added RENDERING plugin type to PluginType enum - Created RenderingConfig for asset management and deployment - Implemented RenderingEngineManager for plugin discovery and lifecycle **TestDrive JSUI Plugin:** - Extracted JavaScript UI components to independent testdrive-jsui plugin - Created standalone development environment (no Python required) - Implemented compass-positioned control panels (NW, NE, E, SE) - Added clean JSON configuration interface for Python↔JavaScript data transfer **Asset Management:** - Development mode: serve assets directly from plugin source directory - Production mode: deploy to _markitect/plugins/[plugin-name]/ structure - Configurable asset URLs and deployment strategies - Support for external dependencies (CDN resources) **Standalone Development:** - testdrive-jsui/test.html for browser-based development - Package.json with npm scripts for development server - Complete separation of JavaScript development from Python environment - Hot reload and standard web development workflow **Integration Demo:** - demo_plugin_integration.py showcasing all plugin capabilities - Standalone, plugin discovery, production deployment examples - Asset URL generation for different deployment modes This enables JavaScript-first development while maintaining clean integration with the MarkiTect Python ecosystem. Developers can now work on UI components independently using standard web development tools and workflows. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1128 lines
40 KiB
JavaScript
1128 lines
40 KiB
JavaScript
/**
|
||
* DOMRenderer Component
|
||
*
|
||
* Extracted from monolithic editor.js as part of architecture refactoring.
|
||
* Handles all DOM interactions and UI rendering for section editing.
|
||
*
|
||
* Dependencies:
|
||
* - FloatingMenu component (to be extracted)
|
||
* - debug function (imported from utils)
|
||
*/
|
||
|
||
// Import dependencies (placeholders for now)
|
||
function debug(message, category = 'INFO') {
|
||
console.log(`DEBUG ${category}: ${message}`);
|
||
}
|
||
|
||
/**
|
||
* Simple FloatingMenu implementation (will be extracted to separate component later)
|
||
*/
|
||
class FloatingMenu {
|
||
constructor(sectionId, type, renderer) {
|
||
this.sectionId = sectionId;
|
||
this.type = type;
|
||
this.renderer = renderer;
|
||
this.element = null;
|
||
this.isVisible = false;
|
||
}
|
||
|
||
show(contentElement, controlsElement) {
|
||
if (this.isVisible) this.hide();
|
||
|
||
const targetElement = this.renderer.findSectionElement(this.sectionId);
|
||
if (!targetElement) return null;
|
||
|
||
// Get content dimensions and position
|
||
const rect = targetElement.getBoundingClientRect();
|
||
const viewport = {
|
||
width: window.innerWidth,
|
||
height: window.innerHeight
|
||
};
|
||
|
||
// Calculate content width and responsive extension
|
||
const contentWidth = rect.width;
|
||
const buttonAreaWidth = 120; // Space needed for buttons
|
||
const minMenuWidth = Math.max(300, contentWidth); // At least content width or 300px
|
||
const preferredMenuWidth = contentWidth + buttonAreaWidth;
|
||
|
||
// Check if we have space to extend to the right
|
||
const spaceOnRight = viewport.width - rect.right;
|
||
const canExtendRight = spaceOnRight >= buttonAreaWidth + 20; // 20px margin
|
||
|
||
// Determine final menu width
|
||
let menuWidth;
|
||
if (canExtendRight && viewport.width >= 800) { // Only on wide screens
|
||
menuWidth = Math.min(preferredMenuWidth, viewport.width - rect.left - 20);
|
||
} else {
|
||
menuWidth = Math.min(minMenuWidth, viewport.width - 40); // 20px margins
|
||
}
|
||
|
||
// Create floating menu element
|
||
this.element = document.createElement('div');
|
||
this.element.className = 'ui-edit-floating-menu';
|
||
this.element.style.cssText = `
|
||
position: fixed;
|
||
z-index: 10000;
|
||
background: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
padding: 0;
|
||
width: ${menuWidth}px;
|
||
box-sizing: border-box;
|
||
`;
|
||
|
||
// Add headline
|
||
const headline = document.createElement('div');
|
||
headline.className = 'ui-edit-headline';
|
||
headline.textContent = `Editing ${this.type === 'image' ? 'Image' : 'Section'}`;
|
||
headline.style.cssText = `
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #ddd;
|
||
padding: 8px 16px;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
color: #495057;
|
||
border-radius: 8px 8px 0 0;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
`;
|
||
|
||
// Create content wrapper with padding
|
||
const contentWrapper = document.createElement('div');
|
||
contentWrapper.style.cssText = `
|
||
padding: 16px;
|
||
`;
|
||
|
||
this.element.appendChild(headline);
|
||
|
||
// Position directly over content (overlay positioning)
|
||
let left = rect.left;
|
||
let top = rect.top;
|
||
|
||
// Ensure menu doesn't go off-screen horizontally
|
||
if (left + menuWidth > viewport.width) {
|
||
left = viewport.width - menuWidth - 20;
|
||
}
|
||
if (left < 10) {
|
||
left = 10;
|
||
}
|
||
|
||
// For vertical positioning, prefer staying on top of content
|
||
// Only move if absolutely necessary
|
||
const menuHeight = this.type === 'image' ? 350 : 200; // Better height estimates
|
||
const wouldGoOffBottom = top + menuHeight > viewport.height;
|
||
const wouldGoOffTop = top < 10;
|
||
|
||
if (wouldGoOffBottom && !wouldGoOffTop) {
|
||
// Try to fit by moving up, but keep some overlay if possible
|
||
const maxTop = viewport.height - menuHeight - 10;
|
||
top = Math.max(rect.top - 50, maxTop); // Prefer staying near original position
|
||
} else if (wouldGoOffTop) {
|
||
top = 10; // Minimum distance from top
|
||
}
|
||
// Otherwise, keep the original overlay position
|
||
|
||
this.element.style.left = `${left}px`;
|
||
this.element.style.top = `${top}px`;
|
||
|
||
// Add content to wrapper
|
||
if (contentElement) {
|
||
contentWrapper.appendChild(contentElement);
|
||
}
|
||
if (controlsElement) {
|
||
contentWrapper.appendChild(controlsElement);
|
||
}
|
||
|
||
this.element.appendChild(contentWrapper);
|
||
|
||
// Add close button to headline
|
||
const closeButton = document.createElement('button');
|
||
closeButton.textContent = '×';
|
||
closeButton.style.cssText = `
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 8px;
|
||
background: none;
|
||
border: none;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
color: #666;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s ease;
|
||
`;
|
||
closeButton.addEventListener('mouseover', () => {
|
||
closeButton.style.backgroundColor = '#e9ecef';
|
||
});
|
||
closeButton.addEventListener('mouseout', () => {
|
||
closeButton.style.backgroundColor = 'transparent';
|
||
});
|
||
closeButton.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
this.hide();
|
||
});
|
||
this.element.appendChild(closeButton);
|
||
|
||
document.body.appendChild(this.element);
|
||
this.isVisible = true;
|
||
|
||
return this.element;
|
||
}
|
||
|
||
hide() {
|
||
if (this.element && this.element.parentNode) {
|
||
this.element.parentNode.removeChild(this.element);
|
||
}
|
||
this.element = null;
|
||
this.isVisible = false;
|
||
|
||
// Stop editing state in the section manager
|
||
const section = this.renderer.sectionManager.sections.get(this.sectionId);
|
||
if (section && section.isEditing()) {
|
||
section.stopEditing();
|
||
}
|
||
|
||
// Remove from editing sections
|
||
this.renderer.editingSections.delete(this.sectionId);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* DOMRenderer - Handles DOM interactions and section rendering
|
||
*/
|
||
class DOMRenderer {
|
||
constructor(sectionManager, container) {
|
||
this.sectionManager = sectionManager;
|
||
this.container = container;
|
||
this.editingSections = new Set();
|
||
this.currentFloatingMenu = null;
|
||
this.eventListenersAttached = false;
|
||
this.lastClickTime = 0;
|
||
this.clickDebounceMs = 300; // Prevent rapid clicks
|
||
|
||
// Enhanced Event System - Track event types
|
||
this.eventHistory = [];
|
||
this.eventStats = {
|
||
'section-click': 0,
|
||
'section-hover-enter': 0,
|
||
'section-hover-leave': 0,
|
||
'keyboard-shortcut': 0,
|
||
'section-drag-start': 0,
|
||
'section-drag-over': 0,
|
||
'section-drop': 0,
|
||
'section-focus-in': 0,
|
||
'section-focus-out': 0,
|
||
'section-context-menu': 0
|
||
};
|
||
|
||
// Bind event handlers
|
||
this.handleSectionClick = this.handleSectionClick.bind(this);
|
||
this.handleKeydown = this.handleKeydown.bind(this);
|
||
|
||
this.setupEventListeners();
|
||
}
|
||
|
||
setupEventListeners() {
|
||
this.sectionManager.on('sections-created', (data) => {
|
||
this.renderAllSections(data.sections);
|
||
});
|
||
this.sectionManager.on('edit-started', (data) => {
|
||
debug('EVENT: edit-started event received for: ' + data.sectionId, 'EVENT');
|
||
this.showEditor(data.sectionId, data.content);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Render all sections to the DOM
|
||
*/
|
||
renderAllSections(sections) {
|
||
debug('21: renderAllSections called with ' + sections.length + ' sections', 'RENDER');
|
||
|
||
// Clear container
|
||
this.container.innerHTML = '';
|
||
debug('22: Container cleared', 'RENDER');
|
||
|
||
const contentArea = this.container.querySelector('#markdown-content') || this.container;
|
||
|
||
// Render each section
|
||
sections.forEach((section, index) => {
|
||
debug('23: Creating element for section ' + (index + 1) + ': ' + section.id, 'RENDER');
|
||
const element = this.renderSection(section);
|
||
if (element) {
|
||
contentArea.appendChild(element);
|
||
}
|
||
});
|
||
|
||
debug('24: All section elements added to container', 'RENDER');
|
||
|
||
// Attach event listeners only once
|
||
if (!this.eventListenersAttached) {
|
||
this.container.addEventListener('click', this.handleSectionClick);
|
||
this.eventListenersAttached = true;
|
||
debug('25: Enhanced event listeners attached for the first time', 'RENDER');
|
||
} else {
|
||
debug('25: Event listeners already attached, skipping', 'RENDER');
|
||
}
|
||
|
||
debug('25: Container content length: ' + this.container.innerHTML.length, 'RENDER');
|
||
}
|
||
|
||
/**
|
||
* Render a single section to DOM element
|
||
*/
|
||
renderSection(section) {
|
||
const element = document.createElement('div');
|
||
element.className = 'ui-edit-section';
|
||
element.setAttribute('data-section-id', section.id);
|
||
|
||
// Add section content
|
||
// Render all sections using markdown rendering (images need HTML conversion too)
|
||
const content = this.simpleMarkdownRender(section.currentMarkdown);
|
||
element.innerHTML = content;
|
||
|
||
// Add styling
|
||
element.style.cssText = `
|
||
margin: 16px 0;
|
||
padding: 12px;
|
||
border: 1px solid transparent;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
`;
|
||
|
||
element.addEventListener('mouseenter', () => {
|
||
element.style.backgroundColor = 'rgba(0, 122, 204, 0.05)';
|
||
element.style.borderColor = 'rgba(0, 122, 204, 0.2)';
|
||
});
|
||
|
||
element.addEventListener('mouseleave', () => {
|
||
if (!section.isEditing()) {
|
||
element.style.backgroundColor = 'transparent';
|
||
element.style.borderColor = 'transparent';
|
||
}
|
||
});
|
||
|
||
debug('SECTION: Section element setup complete for ' + section.id, 'SECTION');
|
||
return element;
|
||
}
|
||
|
||
/**
|
||
* Simple markdown rendering (placeholder)
|
||
*/
|
||
simpleMarkdownRender(markdown) {
|
||
return markdown
|
||
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
|
||
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
|
||
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
|
||
.replace(/!\[(.*?)\]\((.*?)\)/gim, '<img src="$2" alt="$1" style="max-width: 100%; height: auto; display: block; margin: 1rem auto;" />')
|
||
.replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a href="$2" target="_blank">$1</a>')
|
||
.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
|
||
.replace(/\*(.*?)\*/gim, '<em>$1</em>')
|
||
.replace(/\n/gim, '<br>');
|
||
}
|
||
|
||
/**
|
||
* Find DOM element for a section
|
||
*/
|
||
findSectionElement(sectionId) {
|
||
return this.container.querySelector(`[data-section-id="${sectionId}"]`);
|
||
}
|
||
|
||
/**
|
||
* Handle section click events
|
||
*/
|
||
handleSectionClick(event) {
|
||
debug('handleSectionClick: Click detected on target: ' + event.target.tagName + ' ' + (event.target.className || ''), 'CLICK');
|
||
|
||
// Debounce rapid clicks
|
||
const now = Date.now();
|
||
if (now - this.lastClickTime < this.clickDebounceMs) {
|
||
debug('handleSectionClick: Click debounced (too rapid)', 'CLICK');
|
||
return;
|
||
}
|
||
this.lastClickTime = now;
|
||
|
||
// Don't handle clicks on form elements, buttons, or links
|
||
if (event.target.closest('textarea, button, input, a')) {
|
||
debug('handleSectionClick: Ignoring click on form element', 'CLICK');
|
||
return;
|
||
}
|
||
|
||
const sectionElement = event.target.closest('.ui-edit-section');
|
||
debug('handleSectionClick: Found section element: ' + (sectionElement ? sectionElement.getAttribute('data-section-id') : 'null'), 'CLICK');
|
||
if (!sectionElement) return;
|
||
|
||
const sectionId = sectionElement.getAttribute('data-section-id');
|
||
debug('handleSectionClick: Section ID: ' + sectionId, 'CLICK');
|
||
if (!sectionId) return;
|
||
|
||
// Track the click event
|
||
this.trackEvent('section-click', {
|
||
sectionId,
|
||
event,
|
||
timestamp: Date.now()
|
||
});
|
||
|
||
// Check if this section is already being edited
|
||
const section = this.sectionManager.sections.get(sectionId);
|
||
debug('handleSectionClick: Found section object: ' + (section ? 'YES' : 'NO'), 'CLICK');
|
||
|
||
if (section && section.isEditing()) {
|
||
debug('handleSectionClick: Section already being edited, checking if dialog is visible: ' + sectionId, 'CLICK');
|
||
// If section is editing but no dialog is visible, allow re-opening
|
||
const existingDialog = document.querySelector('.ui-edit-floating-menu');
|
||
if (existingDialog) {
|
||
debug('handleSectionClick: Dialog already visible, ignoring click', 'CLICK');
|
||
return;
|
||
} else {
|
||
debug('handleSectionClick: Section editing but no dialog visible, proceeding to show editor', 'CLICK');
|
||
}
|
||
}
|
||
|
||
debug('handleSectionClick: About to start editing for section: ' + sectionId, 'CLICK');
|
||
|
||
try {
|
||
debug('handleSectionClick: Calling sectionManager.startEditing', 'CLICK');
|
||
this.sectionManager.startEditing(sectionId);
|
||
debug('handleSectionClick: Successfully called startEditing', 'CLICK');
|
||
} catch (error) {
|
||
debug('handleSectionClick: ERROR in startEditing: ' + error.message, 'ERROR');
|
||
console.error('Failed to start editing:', error);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Show editor for a section
|
||
*/
|
||
showEditor(sectionId, content) {
|
||
debug('showEditor: called for section: ' + sectionId, 'EDITOR');
|
||
|
||
const element = this.findSectionElement(sectionId);
|
||
debug('showEditor: Found element: ' + (element ? 'YES' : 'NO'), 'EDITOR');
|
||
if (!element) return;
|
||
|
||
debug('showEditor: About to hide current editor', 'EDITOR');
|
||
this.hideCurrentEditor();
|
||
debug('showEditor: Hidden current editor', 'EDITOR');
|
||
|
||
const section = this.sectionManager.sections.get(sectionId);
|
||
const isImageSection = section && section.isImage();
|
||
|
||
if (isImageSection) {
|
||
this.showImageEditor(sectionId, section);
|
||
return;
|
||
}
|
||
|
||
// Create content area for text editing
|
||
const editorContent = document.createElement('div');
|
||
editorContent.className = 'ui-edit-editor-content';
|
||
|
||
// Check if we have space for side-by-side layout
|
||
const targetElement = this.findSectionElement(sectionId);
|
||
const rect = targetElement ? targetElement.getBoundingClientRect() : null;
|
||
const viewport = { width: window.innerWidth, height: window.innerHeight };
|
||
const hasWideLayout = rect && viewport.width >= 800 && (viewport.width - rect.right) >= 120;
|
||
|
||
if (hasWideLayout) {
|
||
// Side-by-side layout: textarea on left, controls on right
|
||
editorContent.style.cssText = `
|
||
display: flex;
|
||
gap: 16px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
align-items: flex-start;
|
||
`;
|
||
} else {
|
||
// Stacked layout: textarea above, controls below
|
||
editorContent.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
`;
|
||
}
|
||
|
||
// Create textarea container
|
||
const textareaContainer = document.createElement('div');
|
||
textareaContainer.style.cssText = hasWideLayout ? 'flex: 1; min-width: 0;' : 'width: 100%;';
|
||
|
||
// Create textarea
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = content || section.currentMarkdown;
|
||
textarea.style.cssText = `
|
||
width: 100%;
|
||
min-height: 120px;
|
||
padding: 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
`;
|
||
|
||
// Create controls
|
||
const controls = document.createElement('div');
|
||
if (hasWideLayout) {
|
||
controls.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
min-width: 100px;
|
||
flex-shrink: 0;
|
||
`;
|
||
} else {
|
||
controls.style.cssText = `
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: flex-end;
|
||
flex-wrap: wrap;
|
||
`;
|
||
}
|
||
|
||
const acceptButton = document.createElement('button');
|
||
acceptButton.textContent = hasWideLayout ? '✓' : 'Accept';
|
||
acceptButton.style.cssText = `
|
||
background: #28a745;
|
||
color: white;
|
||
border: none;
|
||
padding: ${hasWideLayout ? '8px 12px' : '8px 16px'};
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
${hasWideLayout ? 'width: 100%;' : ''}
|
||
font-size: ${hasWideLayout ? '14px' : '13px'};
|
||
`;
|
||
|
||
const cancelButton = document.createElement('button');
|
||
cancelButton.textContent = hasWideLayout ? '✗' : 'Cancel';
|
||
cancelButton.style.cssText = `
|
||
background: #dc3545;
|
||
color: white;
|
||
border: none;
|
||
padding: ${hasWideLayout ? '8px 12px' : '8px 16px'};
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
${hasWideLayout ? 'width: 100%;' : ''}
|
||
font-size: ${hasWideLayout ? '14px' : '13px'};
|
||
`;
|
||
|
||
const resetButton = document.createElement('button');
|
||
resetButton.textContent = hasWideLayout ? '↺' : '↺ Reset';
|
||
resetButton.style.cssText = `
|
||
background: #fd7e14;
|
||
color: white;
|
||
border: none;
|
||
padding: ${hasWideLayout ? '8px 12px' : '8px 16px'};
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
${hasWideLayout ? 'width: 100%;' : ''}
|
||
font-size: ${hasWideLayout ? '14px' : '13px'};
|
||
`;
|
||
|
||
controls.appendChild(acceptButton);
|
||
controls.appendChild(cancelButton);
|
||
controls.appendChild(resetButton);
|
||
|
||
// Assemble the layout
|
||
textareaContainer.appendChild(textarea);
|
||
|
||
if (hasWideLayout) {
|
||
editorContent.appendChild(textareaContainer);
|
||
editorContent.appendChild(controls);
|
||
} else {
|
||
editorContent.appendChild(textareaContainer);
|
||
editorContent.appendChild(controls);
|
||
}
|
||
|
||
// Create floating menu
|
||
const floatingMenu = new FloatingMenu(sectionId, 'text', this);
|
||
this.currentFloatingMenu = floatingMenu;
|
||
this.editingSections.add(sectionId);
|
||
|
||
floatingMenu.show(editorContent);
|
||
|
||
// Add event listeners
|
||
acceptButton.addEventListener('click', () => {
|
||
this.sectionManager.updateContent(sectionId, textarea.value);
|
||
this.sectionManager.acceptChanges(sectionId);
|
||
floatingMenu.hide();
|
||
this.currentFloatingMenu = null; // Clear reference
|
||
});
|
||
|
||
cancelButton.addEventListener('click', () => {
|
||
this.sectionManager.cancelChanges(sectionId);
|
||
floatingMenu.hide();
|
||
this.currentFloatingMenu = null; // Clear reference
|
||
});
|
||
|
||
resetButton.addEventListener('click', () => {
|
||
// Reset textarea to original content and apply the change
|
||
const section = this.sectionManager.sections.get(sectionId);
|
||
if (section) {
|
||
textarea.value = section.originalMarkdown;
|
||
// Actually update the section content to original and accept the changes
|
||
this.sectionManager.updateContent(sectionId, section.originalMarkdown);
|
||
this.sectionManager.acceptChanges(sectionId);
|
||
// Close the editor
|
||
floatingMenu.hide();
|
||
this.currentFloatingMenu = null;
|
||
}
|
||
});
|
||
|
||
// Auto-focus textarea
|
||
setTimeout(() => textarea.focus(), 100);
|
||
}
|
||
|
||
/**
|
||
* Show advanced image editor with drag & drop, file upload, and preview
|
||
*/
|
||
showImageEditor(sectionId, section) {
|
||
debug('showImageEditor: called for image section: ' + sectionId, 'EDITOR');
|
||
|
||
// Track staging state for this editor
|
||
const stagingState = {
|
||
originalMarkdown: section.originalMarkdown,
|
||
currentAltText: '',
|
||
currentImageSrc: '',
|
||
stagedImageSrc: null,
|
||
stagedAltText: null,
|
||
hasChanges: false
|
||
};
|
||
|
||
// Parse markdown to extract image info
|
||
const imageMatch = section.currentMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
|
||
if (imageMatch) {
|
||
const [, altText, imageSrc] = imageMatch;
|
||
stagingState.currentAltText = altText;
|
||
stagingState.currentImageSrc = imageSrc;
|
||
}
|
||
|
||
// Check if we have space for side-by-side layout
|
||
const targetElement = this.findSectionElement(sectionId);
|
||
const rect = targetElement ? targetElement.getBoundingClientRect() : null;
|
||
const viewport = { width: window.innerWidth, height: window.innerHeight };
|
||
const hasWideLayout = rect && viewport.width >= 800 && (viewport.width - rect.right) >= 120;
|
||
|
||
// Create image editor content area
|
||
const editorContent = document.createElement('div');
|
||
editorContent.className = 'ui-edit-image-content';
|
||
|
||
if (hasWideLayout) {
|
||
// Side-by-side layout: content on left, controls on right
|
||
editorContent.style.cssText = `
|
||
display: flex;
|
||
gap: 16px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
align-items: flex-start;
|
||
`;
|
||
} else {
|
||
// Stacked layout: content above, controls below
|
||
editorContent.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
`;
|
||
}
|
||
|
||
// Create content container for image and alt text
|
||
const contentContainer = document.createElement('div');
|
||
contentContainer.style.cssText = hasWideLayout ? 'flex: 1; min-width: 0;' : 'width: 100%;';
|
||
if (!hasWideLayout) {
|
||
contentContainer.style.cssText += `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
`;
|
||
} else {
|
||
contentContainer.style.cssText += `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
`;
|
||
}
|
||
|
||
// Image preview with drop zone
|
||
const imagePreview = document.createElement('div');
|
||
imagePreview.className = 'ui-edit-image-preview';
|
||
imagePreview.style.cssText = `
|
||
width: 100%;
|
||
height: 180px;
|
||
text-align: center;
|
||
background: white;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
border: 2px dashed #007bff;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
`;
|
||
|
||
// Function to update image preview
|
||
const updateImagePreview = (imageSrc, altText) => {
|
||
imagePreview.innerHTML = '';
|
||
|
||
if (imageSrc) {
|
||
const img = document.createElement('img');
|
||
img.src = imageSrc;
|
||
img.alt = altText || '';
|
||
img.style.cssText = `
|
||
max-width: 100%;
|
||
max-height: 150px;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
`;
|
||
imagePreview.appendChild(img);
|
||
|
||
// Add overlay for drop zone
|
||
const overlay = document.createElement('div');
|
||
overlay.className = 'drop-overlay';
|
||
overlay.style.cssText = `
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 123, 255, 0.1);
|
||
border-radius: 6px;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #007bff;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
`;
|
||
overlay.textContent = '📁 Drop new image here';
|
||
imagePreview.appendChild(overlay);
|
||
} else {
|
||
// Show drop zone placeholder
|
||
const placeholder = document.createElement('div');
|
||
placeholder.style.cssText = `
|
||
text-align: center;
|
||
color: #6c757d;
|
||
font-size: 14px;
|
||
`;
|
||
placeholder.innerHTML = `
|
||
<div style="font-size: 48px; margin-bottom: 12px;">📁</div>
|
||
<div style="margin-bottom: 8px;"><strong>Drop image here or click to select</strong></div>
|
||
<div style="font-size: 12px;">Supports JPG, PNG, GIF, WebP</div>
|
||
`;
|
||
imagePreview.appendChild(placeholder);
|
||
}
|
||
};
|
||
|
||
// Initialize preview
|
||
updateImagePreview(stagingState.currentImageSrc, stagingState.currentAltText);
|
||
|
||
// File input for image selection
|
||
const fileInput = document.createElement('input');
|
||
fileInput.type = 'file';
|
||
fileInput.accept = 'image/*';
|
||
fileInput.style.display = 'none';
|
||
|
||
// Function to handle image file selection
|
||
const handleImageFile = (file) => {
|
||
if (file && file.type.startsWith('image/')) {
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
stagingState.stagedImageSrc = event.target.result;
|
||
stagingState.hasChanges = true;
|
||
updateImagePreview(stagingState.stagedImageSrc, altTextInput.value);
|
||
updateChangeIndicator();
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
|
||
// Drag and drop functionality
|
||
imagePreview.addEventListener('dragover', (e) => {
|
||
e.preventDefault();
|
||
imagePreview.style.borderColor = '#28a745';
|
||
imagePreview.style.backgroundColor = '#f8fff8';
|
||
const overlay = imagePreview.querySelector('.drop-overlay');
|
||
if (overlay) overlay.style.display = 'flex';
|
||
});
|
||
|
||
imagePreview.addEventListener('dragleave', (e) => {
|
||
e.preventDefault();
|
||
imagePreview.style.borderColor = '#007bff';
|
||
imagePreview.style.backgroundColor = 'white';
|
||
const overlay = imagePreview.querySelector('.drop-overlay');
|
||
if (overlay) overlay.style.display = 'none';
|
||
});
|
||
|
||
imagePreview.addEventListener('drop', (e) => {
|
||
e.preventDefault();
|
||
imagePreview.style.borderColor = '#007bff';
|
||
imagePreview.style.backgroundColor = 'white';
|
||
const overlay = imagePreview.querySelector('.drop-overlay');
|
||
if (overlay) overlay.style.display = 'none';
|
||
|
||
const files = e.dataTransfer.files;
|
||
if (files.length > 0) {
|
||
handleImageFile(files[0]);
|
||
}
|
||
});
|
||
|
||
// Click to select file
|
||
imagePreview.addEventListener('click', () => {
|
||
fileInput.click();
|
||
});
|
||
|
||
fileInput.addEventListener('change', (e) => {
|
||
if (e.target.files.length > 0) {
|
||
handleImageFile(e.target.files[0]);
|
||
}
|
||
});
|
||
|
||
// Alt text editor
|
||
const altTextContainer = document.createElement('div');
|
||
altTextContainer.className = 'ui-edit-alt-text-container';
|
||
altTextContainer.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
`;
|
||
|
||
const altTextLabel = document.createElement('label');
|
||
altTextLabel.textContent = 'Alt Text Description:';
|
||
altTextLabel.style.cssText = `
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin: 0;
|
||
`;
|
||
|
||
const altTextInput = document.createElement('input');
|
||
altTextInput.type = 'text';
|
||
altTextInput.value = stagingState.currentAltText;
|
||
altTextInput.style.cssText = `
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
transition: border-color 0.2s ease;
|
||
`;
|
||
|
||
altTextInput.addEventListener('focus', () => {
|
||
altTextInput.style.borderColor = '#007bff';
|
||
});
|
||
|
||
altTextInput.addEventListener('blur', () => {
|
||
altTextInput.style.borderColor = '#ddd';
|
||
});
|
||
|
||
// Track alt text changes
|
||
altTextInput.addEventListener('input', () => {
|
||
stagingState.stagedAltText = altTextInput.value;
|
||
stagingState.hasChanges = altTextInput.value !== stagingState.currentAltText || stagingState.stagedImageSrc !== null;
|
||
updateChangeIndicator();
|
||
});
|
||
|
||
altTextContainer.appendChild(altTextLabel);
|
||
altTextContainer.appendChild(altTextInput);
|
||
|
||
// Change indicator
|
||
const changeIndicator = document.createElement('div');
|
||
changeIndicator.className = 'change-indicator';
|
||
changeIndicator.style.cssText = `
|
||
padding: 8px 12px;
|
||
background: #fff3cd;
|
||
border: 1px solid #ffeaa7;
|
||
border-radius: 6px;
|
||
color: #856404;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
display: none;
|
||
font-weight: 500;
|
||
`;
|
||
changeIndicator.textContent = '⚠️ You have unsaved changes';
|
||
|
||
const updateChangeIndicator = () => {
|
||
if (stagingState.hasChanges) {
|
||
changeIndicator.style.display = 'block';
|
||
} else {
|
||
changeIndicator.style.display = 'none';
|
||
}
|
||
};
|
||
|
||
// Assemble content container
|
||
contentContainer.appendChild(imagePreview);
|
||
contentContainer.appendChild(altTextContainer);
|
||
contentContainer.appendChild(changeIndicator);
|
||
contentContainer.appendChild(fileInput);
|
||
|
||
// Create controls
|
||
const controls = document.createElement('div');
|
||
controls.className = 'ui-edit-controls';
|
||
if (hasWideLayout) {
|
||
controls.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
min-width: 100px;
|
||
flex-shrink: 0;
|
||
`;
|
||
} else {
|
||
controls.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
width: 100%;
|
||
`;
|
||
}
|
||
|
||
const acceptBtn = document.createElement('button');
|
||
acceptBtn.textContent = hasWideLayout ? '✓' : '✓ Accept';
|
||
acceptBtn.style.cssText = `
|
||
padding: ${hasWideLayout ? '8px 12px' : '8px 12px'};
|
||
font-size: ${hasWideLayout ? '14px' : '12px'};
|
||
border-radius: 6px;
|
||
border: none;
|
||
color: white;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: all 0.2s ease;
|
||
width: 100%;
|
||
text-align: center;
|
||
background: #28a745;
|
||
`;
|
||
|
||
const cancelBtn = document.createElement('button');
|
||
cancelBtn.textContent = hasWideLayout ? '✗' : '✗ Cancel';
|
||
cancelBtn.style.cssText = `
|
||
padding: ${hasWideLayout ? '8px 12px' : '8px 12px'};
|
||
font-size: ${hasWideLayout ? '14px' : '12px'};
|
||
border-radius: 6px;
|
||
border: none;
|
||
color: white;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: all 0.2s ease;
|
||
width: 100%;
|
||
text-align: center;
|
||
background: #dc3545;
|
||
`;
|
||
|
||
const resetBtn = document.createElement('button');
|
||
resetBtn.textContent = hasWideLayout ? '↺' : '↺ Reset';
|
||
resetBtn.style.cssText = `
|
||
padding: ${hasWideLayout ? '8px 12px' : '8px 12px'};
|
||
font-size: ${hasWideLayout ? '14px' : '12px'};
|
||
border-radius: 6px;
|
||
border: none;
|
||
color: white;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: all 0.2s ease;
|
||
width: 100%;
|
||
text-align: center;
|
||
background: #fd7e14;
|
||
`;
|
||
|
||
controls.appendChild(acceptBtn);
|
||
controls.appendChild(cancelBtn);
|
||
controls.appendChild(resetBtn);
|
||
|
||
|
||
// Event handlers
|
||
acceptBtn.addEventListener('click', () => {
|
||
// Apply staged changes only when accept is clicked
|
||
if (stagingState.hasChanges) {
|
||
let newMarkdown = stagingState.originalMarkdown;
|
||
|
||
// Apply image source change if staged
|
||
if (stagingState.stagedImageSrc !== null) {
|
||
const currentImageMatch = newMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
|
||
if (currentImageMatch) {
|
||
newMarkdown = newMarkdown.replace(
|
||
/!\[(.*?)\]\((.*?)\)/,
|
||
`![${currentImageMatch[1]}](${stagingState.stagedImageSrc})`
|
||
);
|
||
}
|
||
}
|
||
|
||
// Apply alt text change if staged
|
||
if (stagingState.stagedAltText !== null) {
|
||
newMarkdown = newMarkdown.replace(
|
||
/!\[(.*?)\]/,
|
||
`![${stagingState.stagedAltText}]`
|
||
);
|
||
}
|
||
|
||
// Update section with final changes
|
||
this.sectionManager.updateContent(sectionId, newMarkdown);
|
||
}
|
||
|
||
// Accept changes and hide editor
|
||
this.sectionManager.acceptChanges(sectionId);
|
||
this.currentFloatingMenu.hide();
|
||
this.currentFloatingMenu = null;
|
||
});
|
||
|
||
cancelBtn.addEventListener('click', () => {
|
||
// Discard all staged changes and hide editor
|
||
this.sectionManager.cancelChanges(sectionId);
|
||
this.currentFloatingMenu.hide();
|
||
this.currentFloatingMenu = null;
|
||
});
|
||
|
||
resetBtn.addEventListener('click', (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
// Reset to original content
|
||
const originalImageMatch = stagingState.originalMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
|
||
|
||
if (originalImageMatch) {
|
||
const [, originalAltText, originalImageSrc] = originalImageMatch;
|
||
|
||
// Update staging state to original values
|
||
stagingState.currentAltText = originalAltText;
|
||
stagingState.currentImageSrc = originalImageSrc;
|
||
|
||
// Clear any staged changes
|
||
stagingState.stagedImageSrc = null;
|
||
stagingState.stagedAltText = null;
|
||
stagingState.hasChanges = false;
|
||
|
||
// Reset alt text input to original
|
||
altTextInput.value = originalAltText;
|
||
|
||
// Trigger input event to ensure UI consistency
|
||
const inputEvent = new Event('input', { bubbles: true, cancelable: true });
|
||
altTextInput.dispatchEvent(inputEvent);
|
||
|
||
// Reset preview to original image
|
||
updateImagePreview(originalImageSrc, originalAltText);
|
||
|
||
// Update change indicator
|
||
updateChangeIndicator();
|
||
|
||
// Actually update the section content to original and accept the changes
|
||
this.sectionManager.updateContent(sectionId, stagingState.originalMarkdown);
|
||
this.sectionManager.acceptChanges(sectionId);
|
||
|
||
// Close the editor
|
||
this.currentFloatingMenu.hide();
|
||
this.currentFloatingMenu = null;
|
||
}
|
||
});
|
||
|
||
// Assemble the final layout
|
||
if (hasWideLayout) {
|
||
editorContent.appendChild(contentContainer);
|
||
editorContent.appendChild(controls);
|
||
} else {
|
||
editorContent.appendChild(contentContainer);
|
||
editorContent.appendChild(controls);
|
||
}
|
||
|
||
// Create floating menu
|
||
const floatingMenu = new FloatingMenu(sectionId, 'image', this);
|
||
this.currentFloatingMenu = floatingMenu;
|
||
this.editingSections.add(sectionId);
|
||
|
||
floatingMenu.show(editorContent);
|
||
}
|
||
|
||
/**
|
||
* Hide current editor
|
||
*/
|
||
hideCurrentEditor() {
|
||
debug('EDITOR: hideCurrentEditor called', 'EDITOR');
|
||
|
||
if (this.currentFloatingMenu) {
|
||
this.currentFloatingMenu.hide();
|
||
this.currentFloatingMenu = null;
|
||
}
|
||
|
||
debug('EDITOR: hideCurrentEditor completed', 'EDITOR');
|
||
}
|
||
|
||
/**
|
||
* Track event for analytics
|
||
*/
|
||
trackEvent(eventType, data) {
|
||
const eventRecord = {
|
||
type: eventType,
|
||
data: data,
|
||
timestamp: new Date().toISOString()
|
||
};
|
||
|
||
this.eventHistory.push(eventRecord);
|
||
if (this.eventStats.hasOwnProperty(eventType)) {
|
||
this.eventStats[eventType]++;
|
||
}
|
||
|
||
// Keep only last 100 events
|
||
if (this.eventHistory.length > 100) {
|
||
this.eventHistory = this.eventHistory.slice(-100);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Get event statistics
|
||
*/
|
||
getEventStats() {
|
||
const totalEvents = Object.values(this.eventStats).reduce((sum, count) => sum + count, 0);
|
||
|
||
return {
|
||
stats: { ...this.eventStats },
|
||
totalEvents,
|
||
recentEvents: this.eventHistory.slice(-10)
|
||
};
|
||
}
|
||
|
||
/**
|
||
* Handle keyboard shortcuts
|
||
*/
|
||
handleKeydown(event) {
|
||
// Basic keyboard shortcut handling
|
||
if (event.ctrlKey || event.metaKey) {
|
||
if (event.key === 'Enter') {
|
||
// Accept changes
|
||
const activeSection = Array.from(this.editingSections)[0];
|
||
if (activeSection) {
|
||
this.trackEvent('keyboard-shortcut', { shortcut: 'ctrl+enter', action: 'accept' });
|
||
}
|
||
} else if (event.key === 'Escape') {
|
||
// Cancel changes
|
||
const activeSection = Array.from(this.editingSections)[0];
|
||
if (activeSection) {
|
||
this.trackEvent('keyboard-shortcut', { shortcut: 'escape', action: 'cancel' });
|
||
this.hideCurrentEditor();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Export for use in tests and other modules
|
||
if (typeof module !== 'undefined' && module.exports) {
|
||
module.exports = { DOMRenderer, FloatingMenu };
|
||
}
|
||
|
||
// Export for browser use
|
||
if (typeof window !== 'undefined') {
|
||
window.DOMRenderer = DOMRenderer;
|
||
window.FloatingMenu = FloatingMenu;
|
||
} |