tegwick
38cd18c96e
This commit implements 5 major JavaScript features that were lost during refactoring, using systematic Test-Driven Development methodology: **Core Features Implemented:** - Advanced EditState enum with pending changes preservation - Keyboard shortcuts (Ctrl+Enter accept, Escape cancel) - Section splitting with dynamic heading detection - Real-time status tracking with 2-second periodic updates - Intelligent filename generation with 4-method fallback system **Technical Improvements:** - Comprehensive TDD test suites for all functionality - Professional status panel with color-coded indicators - Smart filename generation (options→title→URL→heading→timestamp) - Event-driven architecture with custom event emission - State preservation during editing transitions **Files Added:** - markitect/static/editor.js - Complete JavaScript functionality - test_*.js - Comprehensive TDD test suites - LOST_FUNCTIONALITY_ANALYSIS.md - Detailed feature comparison - TEST_ENVIRONMENT.md - TDD setup documentation **Updated Documentation:** - TODO.md - Status tracking and progress documentation All features are fully tested and integrated into the existing codebase. The TDD approach proved highly effective for systematic functionality recovery. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1769 lines
59 KiB
JavaScript
1769 lines
59 KiB
JavaScript
// Clean Editor Architecture
|
||
/**
|
||
* Test-Driven Section Editor Implementation
|
||
*
|
||
* A clean, object-oriented approach to handling section editing
|
||
* that can be tested independently of the DOM.
|
||
*/
|
||
|
||
// Debug system - choose one of: 'off', 'console', 'alerts'
|
||
const DEBUG_MODE = 'console';
|
||
|
||
// Advanced State Management
|
||
const EditState = Object.freeze({
|
||
ORIGINAL: 'original',
|
||
EDITING: 'editing',
|
||
MODIFIED: 'modified',
|
||
SAVED: 'saved'
|
||
});
|
||
|
||
function debug(message, category = 'INFO') {
|
||
const prefix = `DEBUG ${category}:`;
|
||
|
||
switch (DEBUG_MODE) {
|
||
case 'off':
|
||
// No debugging output
|
||
break;
|
||
case 'console':
|
||
console.log(prefix, message);
|
||
break;
|
||
case 'alerts':
|
||
alert(`${prefix} ${message}`);
|
||
console.log(prefix, message); // Also log to console for reference
|
||
break;
|
||
default:
|
||
console.warn('Invalid DEBUG_MODE. Use: off, console, or alerts');
|
||
}
|
||
}
|
||
|
||
// Enums for clear state management (already defined above)
|
||
|
||
const SectionType = Object.freeze({
|
||
HEADING: 'heading',
|
||
PARAGRAPH: 'paragraph',
|
||
LIST: 'list',
|
||
CODE: 'code',
|
||
QUOTE: 'quote',
|
||
IMAGE: 'image',
|
||
OTHER: 'other'
|
||
});
|
||
|
||
/**
|
||
* Section class - Represents a single editable section
|
||
*/
|
||
class Section {
|
||
constructor(id, markdown, type) {
|
||
this.id = id;
|
||
this.originalMarkdown = markdown;
|
||
this.currentMarkdown = markdown;
|
||
this.editingMarkdown = markdown;
|
||
this.pendingMarkdown = null;
|
||
this.type = type;
|
||
this.state = EditState.ORIGINAL;
|
||
this.domElement = null;
|
||
this.lastSaved = null;
|
||
this.created = new Date();
|
||
}
|
||
|
||
static generateId(markdown, position) {
|
||
const cleanText = markdown.replace(/[^a-zA-Z0-9]/g, '');
|
||
const hash = cleanText.substring(0, 8) + position;
|
||
return `section-${hash}`;
|
||
}
|
||
|
||
static detectType(markdown) {
|
||
const trimmed = markdown.trim();
|
||
if (trimmed.startsWith('#')) return SectionType.HEADING;
|
||
if (trimmed.startsWith('```')) return SectionType.CODE;
|
||
if (trimmed.startsWith('>')) return SectionType.QUOTE;
|
||
if (trimmed.includes('![')) return SectionType.IMAGE;
|
||
if (trimmed.startsWith('-') || trimmed.startsWith('*') || trimmed.startsWith('1.')) return SectionType.LIST;
|
||
return SectionType.PARAGRAPH;
|
||
}
|
||
|
||
startEdit() {
|
||
if (this.state === EditState.EDITING) {
|
||
throw new Error(`Section ${this.id} is already being edited`);
|
||
}
|
||
this.editingMarkdown = this.pendingMarkdown || this.currentMarkdown;
|
||
this.state = EditState.EDITING;
|
||
return this.editingMarkdown;
|
||
}
|
||
|
||
updateContent(markdown) {
|
||
if (this.state !== EditState.EDITING) {
|
||
throw new Error(`Section ${this.id} is not in editing state`);
|
||
}
|
||
this.editingMarkdown = markdown;
|
||
}
|
||
|
||
acceptChanges() {
|
||
if (this.state !== EditState.EDITING) {
|
||
throw new Error(`Section ${this.id} is not in editing state`);
|
||
}
|
||
this.currentMarkdown = this.editingMarkdown;
|
||
this.editingMarkdown = null;
|
||
this.pendingMarkdown = null;
|
||
this.state = EditState.SAVED;
|
||
this.lastSaved = new Date();
|
||
return this.currentMarkdown;
|
||
}
|
||
|
||
cancelChanges() {
|
||
if (this.state !== EditState.EDITING) {
|
||
throw new Error(`Section ${this.id} is not in editing state`);
|
||
}
|
||
this.editingMarkdown = null;
|
||
if (this.pendingMarkdown !== null) {
|
||
this.state = EditState.MODIFIED;
|
||
return this.pendingMarkdown;
|
||
} else if (this.lastSaved !== null) {
|
||
this.state = EditState.SAVED;
|
||
return this.currentMarkdown;
|
||
} else {
|
||
this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
|
||
return this.currentMarkdown;
|
||
}
|
||
}
|
||
|
||
stopEditing() {
|
||
if (this.state !== EditState.EDITING) {
|
||
return this.state;
|
||
}
|
||
|
||
// If we have editing changes that differ from current content, preserve them as pending
|
||
if (this.editingMarkdown && this.editingMarkdown !== this.currentMarkdown) {
|
||
this.pendingMarkdown = this.editingMarkdown;
|
||
this.state = EditState.MODIFIED; // Has pending changes
|
||
} else {
|
||
// No changes made during this edit session
|
||
this.pendingMarkdown = null;
|
||
if (this.lastSaved !== null) {
|
||
this.state = EditState.SAVED;
|
||
} else {
|
||
this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
|
||
}
|
||
}
|
||
|
||
this.editingMarkdown = null;
|
||
return this.state;
|
||
}
|
||
|
||
resetToOriginal() {
|
||
this.currentMarkdown = this.originalMarkdown;
|
||
this.editingMarkdown = this.originalMarkdown;
|
||
this.pendingMarkdown = null;
|
||
this.state = EditState.ORIGINAL;
|
||
return this.originalMarkdown;
|
||
}
|
||
|
||
isEditing() {
|
||
return this.state === EditState.EDITING;
|
||
}
|
||
|
||
hasChanges() {
|
||
return this.currentMarkdown !== this.originalMarkdown;
|
||
}
|
||
|
||
getStatus() {
|
||
return {
|
||
id: this.id,
|
||
state: this.state,
|
||
hasChanges: this.hasChanges(),
|
||
isEditing: this.isEditing(),
|
||
contentLength: this.currentMarkdown.length,
|
||
lastSaved: this.lastSaved,
|
||
sectionType: this.sectionType,
|
||
// Legacy compatibility
|
||
type: this.type,
|
||
originalLength: this.originalMarkdown.length,
|
||
currentLength: this.currentMarkdown.length
|
||
};
|
||
}
|
||
|
||
isImage() {
|
||
return this.type === SectionType.IMAGE;
|
||
}
|
||
|
||
isProtectedHeading() {
|
||
// In insert mode, headings 1-3 are protected
|
||
if (this.type === SectionType.HEADING) {
|
||
const headingMatch = this.originalMarkdown.match(/^(#{1,3})\s/);
|
||
if (headingMatch) {
|
||
this.headingLevel = headingMatch[1].length;
|
||
return this.headingLevel <= 3;
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
|
||
getHeadingContent() {
|
||
if (this.type === SectionType.HEADING) {
|
||
const lines = this.currentMarkdown.split('\n');
|
||
return lines.slice(1).join('\n').trim();
|
||
}
|
||
return this.currentMarkdown;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* SectionManager class - Manages the collection of sections
|
||
*/
|
||
class SectionManager {
|
||
constructor() {
|
||
this.sections = new Map();
|
||
this.listeners = new Map();
|
||
this.statusInterval = null;
|
||
this.lastStatusUpdate = new Date().toISOString();
|
||
}
|
||
|
||
on(event, callback) {
|
||
if (!this.listeners.has(event)) {
|
||
this.listeners.set(event, []);
|
||
}
|
||
this.listeners.get(event).push(callback);
|
||
}
|
||
|
||
emit(event, data) {
|
||
if (this.listeners.has(event)) {
|
||
this.listeners.get(event).forEach(callback => callback(data));
|
||
}
|
||
}
|
||
|
||
createSectionsFromMarkdown(markdownContent) {
|
||
const lines = markdownContent.split('\n');
|
||
const sections = [];
|
||
let currentSection = '';
|
||
let position = 0;
|
||
|
||
for (let i = 0; i < lines.length; i++) {
|
||
const line = lines[i];
|
||
const isHeading = /^#{1,6}\s/.test(line);
|
||
const isNewParagraph = line.trim() && i > 0 && !lines[i-1].trim();
|
||
const isNewSection = isHeading || isNewParagraph;
|
||
|
||
if (isNewSection && currentSection.trim()) {
|
||
const sectionId = Section.generateId(currentSection, position);
|
||
const sectionType = Section.detectType(currentSection);
|
||
const section = new Section(sectionId, currentSection.trim(), sectionType);
|
||
sections.push(section);
|
||
this.sections.set(sectionId, section);
|
||
position++;
|
||
currentSection = line;
|
||
} else {
|
||
if (currentSection) currentSection += '\n';
|
||
currentSection += line;
|
||
}
|
||
}
|
||
|
||
if (currentSection.trim()) {
|
||
const sectionId = Section.generateId(currentSection, position);
|
||
const sectionType = Section.detectType(currentSection);
|
||
const section = new Section(sectionId, currentSection.trim(), sectionType);
|
||
sections.push(section);
|
||
this.sections.set(sectionId, section);
|
||
}
|
||
|
||
this.emit('sections-created', { sections, count: sections.length });
|
||
return sections;
|
||
}
|
||
|
||
startEditing(sectionId) {
|
||
const section = this.sections.get(sectionId);
|
||
if (!section) {
|
||
throw new Error(`Section ${sectionId} not found`);
|
||
}
|
||
|
||
if (section.isEditing()) {
|
||
console.log('Section already in editing state:', sectionId);
|
||
return section.editingMarkdown;
|
||
}
|
||
|
||
const content = section.startEdit();
|
||
this.emit('edit-started', { sectionId, content, section: section.getStatus() });
|
||
return content;
|
||
}
|
||
|
||
updateContent(sectionId, markdown) {
|
||
const section = this.sections.get(sectionId);
|
||
if (!section) {
|
||
throw new Error(`Section ${sectionId} not found`);
|
||
}
|
||
section.updateContent(markdown);
|
||
this.emit('content-updated', { sectionId, markdown, section: section.getStatus() });
|
||
}
|
||
|
||
acceptChanges(sectionId) {
|
||
const section = this.sections.get(sectionId);
|
||
if (!section) {
|
||
throw new Error(`Section ${sectionId} not found`);
|
||
}
|
||
|
||
const content = section.acceptChanges();
|
||
this.emit('changes-accepted', { sectionId, content, section: section.getStatus() });
|
||
return content;
|
||
}
|
||
|
||
cancelChanges(sectionId) {
|
||
const section = this.sections.get(sectionId);
|
||
if (!section) {
|
||
throw new Error(`Section ${sectionId} not found`);
|
||
}
|
||
|
||
const content = section.cancelChanges();
|
||
this.emit('changes-cancelled', { sectionId, content, section: section.getStatus() });
|
||
return content;
|
||
}
|
||
|
||
resetSection(sectionId) {
|
||
const section = this.sections.get(sectionId);
|
||
if (!section) {
|
||
throw new Error(`Section ${sectionId} not found`);
|
||
}
|
||
|
||
const content = section.resetToOriginal();
|
||
this.emit('section-reset', { sectionId, content, section: section.getStatus() });
|
||
return content;
|
||
}
|
||
|
||
getDocumentMarkdown() {
|
||
const sortedSections = Array.from(this.sections.values())
|
||
.sort((a, b) => a.created - b.created);
|
||
|
||
return sortedSections.map(section => section.currentMarkdown).join('\n\n');
|
||
}
|
||
|
||
getAllSections() {
|
||
return Array.from(this.sections.values());
|
||
}
|
||
|
||
getSectionStatus() {
|
||
return Array.from(this.sections.values()).map(section => section.getStatus());
|
||
}
|
||
|
||
escapeRegex(str) {
|
||
return str.replace(/[.*+?^${}()|\[\]\\]/g, '\\\\$&');
|
||
}
|
||
|
||
/**
|
||
* Check if new content contains new headings that would require section splitting
|
||
* @param {string} newContent - The new content to check
|
||
* @param {string} originalContent - The original content to compare against
|
||
* @returns {boolean} True if section splitting is needed
|
||
*/
|
||
checkForSectionSplits(newContent, originalContent) {
|
||
const originalHeadings = this.extractHeadings(originalContent);
|
||
const newHeadings = this.extractHeadings(newContent);
|
||
|
||
// If new content has more headings than original, we need to split
|
||
return newHeadings.length > originalHeadings.length;
|
||
}
|
||
|
||
/**
|
||
* Extract heading lines from markdown content
|
||
* @param {string} content - Markdown content
|
||
* @returns {Array} Array of heading lines
|
||
*/
|
||
extractHeadings(content) {
|
||
if (!content) return [];
|
||
const lines = content.split('\n');
|
||
return lines.filter(line => /^#{1,6}\s/.test(line.trim()));
|
||
}
|
||
|
||
/**
|
||
* Handle splitting a section when new headings are detected
|
||
* @param {string} sectionId - ID of the section to split
|
||
* @param {string} newContent - New content with multiple headings
|
||
*/
|
||
handleSectionSplit(sectionId, newContent) {
|
||
const section = this.sections.get(sectionId);
|
||
if (!section) {
|
||
throw new Error(`Section ${sectionId} not found`);
|
||
}
|
||
|
||
// Remove the original section
|
||
this.sections.delete(sectionId);
|
||
|
||
// Create new sections from the content
|
||
const newSections = this.createSectionsFromContent(newContent);
|
||
|
||
// Emit section-split event
|
||
this.emit('section-split', {
|
||
originalSectionId: sectionId,
|
||
newSections: newSections,
|
||
count: newSections.length
|
||
});
|
||
|
||
return newSections;
|
||
}
|
||
|
||
/**
|
||
* Create sections from content (alias for createSectionsFromMarkdown)
|
||
* @param {string} content - Markdown content
|
||
* @returns {Array} Array of created sections
|
||
*/
|
||
createSectionsFromContent(content) {
|
||
return this.createSectionsFromMarkdown(content);
|
||
}
|
||
|
||
/**
|
||
* Get global status information about all sections
|
||
* @returns {Object} Status object with global information
|
||
*/
|
||
getGlobalStatus() {
|
||
const sections = this.getAllSections();
|
||
const editingSections = sections.filter(s => s.isEditing()).map(s => s.id);
|
||
const modifiedSections = sections.filter(s => s.hasChanges());
|
||
const hasModifications = modifiedSections.length > 0 || editingSections.length > 0;
|
||
|
||
let state = 'ready';
|
||
if (editingSections.length > 0) {
|
||
state = 'editing';
|
||
} else if (hasModifications) {
|
||
state = 'modified';
|
||
}
|
||
|
||
return {
|
||
totalSections: sections.length,
|
||
editingSections: editingSections,
|
||
modifiedSections: modifiedSections.length,
|
||
hasModifications: hasModifications,
|
||
state: state,
|
||
lastUpdate: this.lastStatusUpdate
|
||
};
|
||
}
|
||
|
||
/**
|
||
* Update global status and emit status-updated event
|
||
*/
|
||
updateGlobalStatus() {
|
||
this.lastStatusUpdate = new Date().toISOString();
|
||
const status = this.getGlobalStatus();
|
||
this.emit('status-updated', status);
|
||
return status;
|
||
}
|
||
|
||
/**
|
||
* Start periodic status tracking
|
||
* @param {number} intervalMs - Update interval in milliseconds (default: 2000)
|
||
*/
|
||
startStatusTracking(intervalMs = 2000) {
|
||
if (this.statusInterval) {
|
||
clearInterval(this.statusInterval);
|
||
}
|
||
|
||
this.statusInterval = setInterval(() => {
|
||
this.updateGlobalStatus();
|
||
}, intervalMs);
|
||
|
||
// Emit initial status
|
||
this.updateGlobalStatus();
|
||
}
|
||
|
||
/**
|
||
* Stop periodic status tracking
|
||
*/
|
||
stopStatusTracking() {
|
||
if (this.statusInterval) {
|
||
clearInterval(this.statusInterval);
|
||
this.statusInterval = null;
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* DOM Renderer - Handles DOM interactions
|
||
*/
|
||
class DOMRenderer {
|
||
constructor(sectionManager, container) {
|
||
this.sectionManager = sectionManager;
|
||
this.container = container;
|
||
this.editingSections = new Set();
|
||
|
||
this.handleSectionClick = this.handleSectionClick.bind(this);
|
||
this.handleAccept = this.handleAccept.bind(this);
|
||
this.handleCancel = this.handleCancel.bind(this);
|
||
this.handleReset = this.handleReset.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) => {
|
||
this.showEditor(data.sectionId, data.content);
|
||
});
|
||
this.sectionManager.on('edit-stopped', (data) => {
|
||
this.hideEditor(data.sectionId);
|
||
});
|
||
this.sectionManager.on('changes-accepted', (data) => {
|
||
this.hideEditor(data.sectionId);
|
||
this.updateSectionContent(data.sectionId, data.content);
|
||
});
|
||
this.sectionManager.on('changes-cancelled', (data) => {
|
||
this.hideEditor(data.sectionId);
|
||
this.updateSectionContent(data.sectionId, data.content);
|
||
});
|
||
this.sectionManager.on('section-reset', (data) => {
|
||
this.updateTextareaContent(data.content, data.sectionId);
|
||
});
|
||
}
|
||
|
||
renderAllSections(sections) {
|
||
debug('21: renderAllSections called with ' + sections.length + ' sections', 'RENDER');
|
||
|
||
this.container.innerHTML = '';
|
||
debug('22: Container cleared', 'RENDER');
|
||
|
||
sections.forEach((section, index) => {
|
||
debug('23: Creating element for section ' + (index + 1) + ': ' + section.id, 'RENDER');
|
||
const element = this.createSectionElement(section);
|
||
section.domElement = element;
|
||
this.container.appendChild(element);
|
||
});
|
||
|
||
debug('24: All section elements added to container', 'RENDER');
|
||
this.container.addEventListener('click', this.handleSectionClick);
|
||
debug('25: Click listener attached - container content length: ' + this.container.innerHTML.length, 'RENDER');
|
||
}
|
||
|
||
createSectionElement(section) {
|
||
const element = document.createElement('div');
|
||
element.setAttribute('data-section-id', section.id);
|
||
debug('SECTION: Creating element for section ' + section.id + ' with content: ' + section.currentMarkdown.substring(0, 50) + '...', 'SECTION');
|
||
|
||
if (typeof marked !== 'undefined') {
|
||
const html = marked.parse(section.currentMarkdown);
|
||
const htmlWithTargetBlank = html.replace(/<a href="([^"]*)"([^>]*)>/g, '<a href="$1" target="_blank"$2>');
|
||
element.innerHTML = htmlWithTargetBlank;
|
||
} else {
|
||
element.innerHTML = `<p>${section.currentMarkdown}</p>`;
|
||
}
|
||
|
||
this.setupSectionElement(element);
|
||
debug('SECTION: Section element setup complete for ' + section.id, 'SECTION');
|
||
return element;
|
||
}
|
||
|
||
handleSectionClick(event) {
|
||
debug('CLICK: Click detected on target: ' + event.target.tagName + ' ' + (event.target.className || ''), 'CLICK');
|
||
|
||
// Don't handle clicks on form elements, buttons, or links
|
||
if (event.target.closest('textarea, button, input, a')) {
|
||
debug('CLICK: Ignoring click on form element', 'CLICK');
|
||
return;
|
||
}
|
||
|
||
const sectionElement = event.target.closest('.ui-edit-section');
|
||
debug('CLICK: Found section element: ' + (sectionElement ? sectionElement.getAttribute('data-section-id') : 'null'), 'CLICK');
|
||
if (!sectionElement) return;
|
||
|
||
const sectionId = sectionElement.getAttribute('data-section-id');
|
||
debug('CLICK: Section ID: ' + sectionId, 'CLICK');
|
||
if (!sectionId) return;
|
||
|
||
// Check if this section is already being edited
|
||
const section = this.sectionManager.sections.get(sectionId);
|
||
if (section && section.isEditing()) {
|
||
console.log('Section already being edited:', sectionId);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
console.log('Starting edit for section:', sectionId);
|
||
this.sectionManager.startEditing(sectionId);
|
||
} catch (error) {
|
||
console.error('Failed to start editing:', error);
|
||
}
|
||
}
|
||
|
||
showEditor(sectionId, content) {
|
||
const element = this.findSectionElement(sectionId);
|
||
if (!element) return;
|
||
|
||
this.hideCurrentEditor();
|
||
|
||
const section = this.sectionManager.sections.get(sectionId);
|
||
const isImageSection = section && section.isImage();
|
||
|
||
if (isImageSection) {
|
||
this.showImageEditor(sectionId, section);
|
||
return;
|
||
}
|
||
|
||
const editorContainer = document.createElement('div');
|
||
editorContainer.className = 'ui-edit-editor-container';
|
||
|
||
const textarea = document.createElement('textarea');
|
||
textarea.className = 'ui-edit-textarea ui-edit-textarea-main';
|
||
textarea.value = content;
|
||
textarea.style.cssText = `
|
||
flex: 1;
|
||
min-height: 100px;
|
||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
padding: 12px;
|
||
border: 2px solid #007bff;
|
||
border-radius: 6px;
|
||
resize: vertical;
|
||
outline: none;
|
||
background: white;
|
||
color: #333;
|
||
`;
|
||
|
||
// Setup auto-resize functionality
|
||
this.setupAutoResize(textarea);
|
||
|
||
const controls = document.createElement('div');
|
||
controls.className = 'ui-edit-controls';
|
||
controls.style.cssText = `
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: flex-end;
|
||
margin-top: 8px;
|
||
`;
|
||
|
||
const acceptBtn = this.createButton('Accept', 'ui-edit-button-accept', this.handleAccept);
|
||
const cancelBtn = this.createButton('Cancel', 'ui-edit-button-cancel', this.handleCancel);
|
||
|
||
controls.appendChild(acceptBtn);
|
||
controls.appendChild(cancelBtn);
|
||
|
||
editorContainer.appendChild(textarea);
|
||
editorContainer.appendChild(controls);
|
||
|
||
element.innerHTML = '';
|
||
element.appendChild(editorContainer);
|
||
|
||
textarea.focus();
|
||
this.editingSections.add(sectionId);
|
||
|
||
textarea.addEventListener('input', () => {
|
||
this.sectionManager.updateContent(sectionId, textarea.value);
|
||
});
|
||
|
||
// Add keyboard shortcuts
|
||
textarea.addEventListener('keydown', this.handleKeydown);
|
||
}
|
||
|
||
/**
|
||
* Show image editor with manipulation controls
|
||
* @param {string} sectionId - The section ID
|
||
* @param {Section} section - The section object
|
||
*/
|
||
showImageEditor(sectionId, section) {
|
||
const element = this.findSectionElement(sectionId);
|
||
if (!element) return;
|
||
|
||
this.hideCurrentEditor();
|
||
|
||
const editorContainer = document.createElement('div');
|
||
editorContainer.className = 'ui-edit-image-editor-container';
|
||
editorContainer.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
margin-top: 12px;
|
||
padding: 16px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
border: 2px solid #007bff;
|
||
`;
|
||
|
||
// Image preview
|
||
const imagePreview = document.createElement('div');
|
||
imagePreview.className = 'ui-edit-image-preview';
|
||
imagePreview.style.cssText = `
|
||
max-width: 100%;
|
||
text-align: center;
|
||
background: white;
|
||
padding: 16px;
|
||
border-radius: 6px;
|
||
border: 1px solid #dee2e6;
|
||
`;
|
||
|
||
// Parse markdown to extract image info
|
||
const imageMatch = section.currentMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
|
||
if (imageMatch) {
|
||
const [, altText, imageSrc] = imageMatch;
|
||
const img = document.createElement('img');
|
||
img.src = imageSrc;
|
||
img.alt = altText;
|
||
img.style.cssText = `
|
||
max-width: 100%;
|
||
max-height: 300px;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
`;
|
||
imagePreview.appendChild(img);
|
||
}
|
||
|
||
// Image controls
|
||
const controlPanel = document.createElement('div');
|
||
controlPanel.className = 'ui-edit-image-controls';
|
||
controlPanel.style.cssText = `
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
gap: 8px;
|
||
`;
|
||
|
||
// Alt text editor
|
||
const altTextContainer = document.createElement('div');
|
||
altTextContainer.style.cssText = `grid-column: 1 / -1; margin-bottom: 8px;`;
|
||
const altTextLabel = document.createElement('label');
|
||
altTextLabel.textContent = 'Alt Text:';
|
||
altTextLabel.style.cssText = `display: block; margin-bottom: 4px; font-weight: bold;`;
|
||
|
||
const altTextInput = document.createElement('input');
|
||
altTextInput.type = 'text';
|
||
altTextInput.value = imageMatch ? imageMatch[1] : '';
|
||
altTextInput.style.cssText = `
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
`;
|
||
|
||
// Add keyboard shortcuts to alt text input
|
||
altTextInput.addEventListener('keydown', this.handleKeydown);
|
||
|
||
altTextContainer.appendChild(altTextLabel);
|
||
altTextContainer.appendChild(altTextInput);
|
||
|
||
// Image manipulation buttons
|
||
const buttons = [
|
||
{ text: 'Replace Image', action: () => this.replaceImage(sectionId) },
|
||
{ text: 'Resize', action: () => this.resizeImage(sectionId) },
|
||
{ text: 'Add Caption', action: () => this.addImageCaption(sectionId) },
|
||
{ text: 'Remove Image', action: () => this.removeImage(sectionId) }
|
||
];
|
||
|
||
buttons.forEach(({ text, action }) => {
|
||
const btn = this.createButton(text, 'ui-edit-image-btn', action);
|
||
btn.style.fontSize = '12px';
|
||
btn.style.padding = '6px 12px';
|
||
controlPanel.appendChild(btn);
|
||
});
|
||
|
||
// Standard editor controls
|
||
const editorControls = document.createElement('div');
|
||
editorControls.className = 'ui-edit-controls';
|
||
editorControls.style.cssText = `
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: flex-end;
|
||
margin-top: 12px;
|
||
`;
|
||
|
||
const acceptBtn = this.createButton('✓ Accept', 'ui-edit-accept', (e) => {
|
||
// Update alt text if changed
|
||
if (imageMatch && altTextInput.value !== imageMatch[1]) {
|
||
const newMarkdown = section.currentMarkdown.replace(
|
||
/!\[(.*?)\]/,
|
||
`![${altTextInput.value}]`
|
||
);
|
||
this.sectionManager.updateContent(sectionId, newMarkdown);
|
||
}
|
||
this.handleAccept(e);
|
||
});
|
||
const cancelBtn = this.createButton('✗ Cancel', 'ui-edit-cancel', this.handleCancel);
|
||
const resetBtn = this.createButton('↺ Reset', 'ui-edit-reset', this.handleReset);
|
||
|
||
acceptBtn.style.background = '#28a745';
|
||
cancelBtn.style.background = '#dc3545';
|
||
resetBtn.style.background = '#fd7e14';
|
||
|
||
editorControls.appendChild(acceptBtn);
|
||
editorControls.appendChild(cancelBtn);
|
||
editorControls.appendChild(resetBtn);
|
||
|
||
// Assemble the editor
|
||
editorContainer.appendChild(imagePreview);
|
||
editorContainer.appendChild(altTextContainer);
|
||
editorContainer.appendChild(controlPanel);
|
||
editorContainer.appendChild(editorControls);
|
||
|
||
element.appendChild(editorContainer);
|
||
altTextInput.focus();
|
||
this.editingSections.add(sectionId);
|
||
}
|
||
|
||
/**
|
||
* Image manipulation methods
|
||
*/
|
||
replaceImage(sectionId) {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'image/*';
|
||
input.addEventListener('change', (e) => {
|
||
const file = e.target.files[0];
|
||
if (file) {
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
const section = this.sectionManager.sections.get(sectionId);
|
||
const imageMatch = section.currentMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
|
||
if (imageMatch) {
|
||
const newMarkdown = section.currentMarkdown.replace(
|
||
/!\[(.*?)\]\((.*?)\)/,
|
||
`![${imageMatch[1]}](${event.target.result})`
|
||
);
|
||
this.sectionManager.updateContent(sectionId, newMarkdown);
|
||
this.hideEditor(sectionId);
|
||
setTimeout(() => this.showImageEditor(sectionId, this.sectionManager.sections.get(sectionId)), 100);
|
||
}
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
});
|
||
input.click();
|
||
}
|
||
|
||
resizeImage(sectionId) {
|
||
const section = this.sectionManager.sections.get(sectionId);
|
||
const size = prompt('Enter image width (e.g., 300px, 50%, or leave empty for auto):', '');
|
||
if (size !== null) {
|
||
const imageMatch = section.currentMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
|
||
if (imageMatch) {
|
||
const style = size ? ` style="width: ${size};"` : '';
|
||
const newMarkdown = section.currentMarkdown.replace(
|
||
/!\[(.*?)\]\((.*?)\)/,
|
||
`<img src="${imageMatch[2]}" alt="${imageMatch[1]}"${style}>`
|
||
);
|
||
this.sectionManager.updateContent(sectionId, newMarkdown);
|
||
}
|
||
}
|
||
}
|
||
|
||
addImageCaption(sectionId) {
|
||
const section = this.sectionManager.sections.get(sectionId);
|
||
const caption = prompt('Enter image caption:', '');
|
||
if (caption) {
|
||
const newMarkdown = section.currentMarkdown + `\n\n*${caption}*`;
|
||
this.sectionManager.updateContent(sectionId, newMarkdown);
|
||
}
|
||
}
|
||
|
||
removeImage(sectionId) {
|
||
if (confirm('Are you sure you want to remove this image?')) {
|
||
this.sectionManager.updateContent(sectionId, '');
|
||
this.hideEditor(sectionId);
|
||
}
|
||
}
|
||
|
||
createButton(text, className, handler) {
|
||
const btn = document.createElement('button');
|
||
btn.textContent = text;
|
||
btn.className = className;
|
||
btn.style.cssText = `
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
`;
|
||
btn.addEventListener('click', handler);
|
||
return btn;
|
||
}
|
||
|
||
handleAccept(event) {
|
||
const sectionId = this.getCurrentEditingSectionId(event.target);
|
||
if (sectionId) {
|
||
this.sectionManager.acceptChanges(sectionId);
|
||
}
|
||
}
|
||
|
||
handleCancel(event) {
|
||
const sectionId = this.getCurrentEditingSectionId(event.target);
|
||
if (sectionId) {
|
||
this.sectionManager.cancelChanges(sectionId);
|
||
}
|
||
}
|
||
|
||
handleReset(event) {
|
||
const sectionId = this.getCurrentEditingSectionId(event.target);
|
||
if (sectionId) {
|
||
this.sectionManager.resetSection(sectionId);
|
||
}
|
||
}
|
||
|
||
handleKeydown(event) {
|
||
// Enhanced keyboard shortcuts for section editing
|
||
const textarea = event.target.closest('textarea');
|
||
if (!textarea) return;
|
||
|
||
// Find the section being edited
|
||
const editorContainer = textarea.closest('.ui-edit-editor-container, .ui-edit-image-editor-container');
|
||
if (!editorContainer) return;
|
||
|
||
const sectionElement = editorContainer.parentElement;
|
||
const sectionId = sectionElement ? sectionElement.getAttribute('data-section-id') : null;
|
||
if (!sectionId) return;
|
||
|
||
// Handle keyboard shortcuts
|
||
if (event.ctrlKey || event.metaKey) {
|
||
switch (event.key) {
|
||
case 'Enter':
|
||
event.preventDefault();
|
||
this.sectionManager.acceptChanges(sectionId);
|
||
debug('Keyboard shortcut: Ctrl+Enter - accepted changes for section ' + sectionId, 'KEYBOARD');
|
||
break;
|
||
case 'Escape':
|
||
event.preventDefault();
|
||
this.sectionManager.cancelChanges(sectionId);
|
||
debug('Keyboard shortcut: Ctrl+Escape - cancelled changes for section ' + sectionId, 'KEYBOARD');
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Handle plain Escape (without Ctrl)
|
||
if (event.key === 'Escape' && !event.ctrlKey && !event.metaKey) {
|
||
event.preventDefault();
|
||
this.sectionManager.cancelChanges(sectionId);
|
||
debug('Keyboard shortcut: Escape - cancelled changes for section ' + sectionId, 'KEYBOARD');
|
||
}
|
||
}
|
||
|
||
getCurrentEditingSectionId(button) {
|
||
const editorContainer = button.closest('.ui-edit-editor-container');
|
||
if (!editorContainer) return null;
|
||
|
||
const sectionElement = editorContainer.parentElement;
|
||
return sectionElement ? sectionElement.getAttribute('data-section-id') : null;
|
||
}
|
||
|
||
hideEditor(sectionId) {
|
||
const element = this.findSectionElement(sectionId);
|
||
if (!element) return;
|
||
|
||
const section = this.sectionManager.sections.get(sectionId);
|
||
if (section) {
|
||
this.updateSectionContent(sectionId, section.currentMarkdown);
|
||
}
|
||
|
||
this.editingSections.delete(sectionId);
|
||
}
|
||
|
||
hideCurrentEditor() {
|
||
this.editingSections.forEach(sectionId => {
|
||
const element = this.findSectionElement(sectionId);
|
||
if (element && element.querySelector('.ui-edit-editor-container')) {
|
||
this.hideEditor(sectionId);
|
||
}
|
||
});
|
||
}
|
||
|
||
updateSectionContent(sectionId, content) {
|
||
const element = this.findSectionElement(sectionId);
|
||
if (!element) return;
|
||
|
||
if (typeof marked !== 'undefined') {
|
||
const html = marked.parse(content);
|
||
const htmlWithTargetBlank = html.replace(/<a href="([^"]*)"([^>]*)>/g, '<a href="$1" target="_blank"$2>');
|
||
element.innerHTML = htmlWithTargetBlank;
|
||
} else {
|
||
element.innerHTML = `<p>${content}</p>`;
|
||
}
|
||
|
||
this.setupSectionElement(element);
|
||
}
|
||
|
||
findSectionElement(sectionId) {
|
||
return this.container.querySelector(`[data-section-id="${sectionId}"]`);
|
||
}
|
||
|
||
setupSectionElement(element) {
|
||
element.className = 'ui-edit-section';
|
||
element.style.cssText = `
|
||
margin: 16px 0;
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
border: 2px solid transparent;
|
||
`;
|
||
|
||
element.removeEventListener('mouseenter', element._mouseenterHandler);
|
||
element.removeEventListener('mouseleave', element._mouseleaveHandler);
|
||
|
||
element._mouseenterHandler = () => {
|
||
element.style.backgroundColor = 'rgba(0, 0, 0, 0.02)';
|
||
element.style.borderColor = 'rgba(0, 0, 0, 0.1)';
|
||
};
|
||
|
||
element._mouseleaveHandler = () => {
|
||
element.style.backgroundColor = '';
|
||
element.style.borderColor = 'transparent';
|
||
};
|
||
|
||
element.addEventListener('mouseenter', element._mouseenterHandler);
|
||
element.addEventListener('mouseleave', element._mouseleaveHandler);
|
||
}
|
||
|
||
/**
|
||
* Setup auto-resize for textarea
|
||
* @param {HTMLTextAreaElement} textarea - The textarea element
|
||
*/
|
||
setupAutoResize(textarea) {
|
||
const autoResize = () => {
|
||
const transition = textarea.style.transition;
|
||
textarea.style.transition = 'none';
|
||
|
||
textarea.style.height = 'auto';
|
||
const contentHeight = textarea.scrollHeight;
|
||
const padding = 24;
|
||
|
||
const lineCount = textarea.value.split('\n').length;
|
||
const minHeight = Math.max(60, lineCount * 24 + padding);
|
||
const maxHeight = 360;
|
||
|
||
const newHeight = Math.max(60, Math.min(maxHeight, Math.max(minHeight, contentHeight + 4)));
|
||
textarea.style.height = newHeight + 'px';
|
||
|
||
textarea.style.transition = transition;
|
||
};
|
||
|
||
textarea.addEventListener('input', autoResize);
|
||
textarea.addEventListener('paste', () => setTimeout(autoResize, 10));
|
||
|
||
// Initial sizing
|
||
setTimeout(autoResize, 20);
|
||
}
|
||
|
||
/**
|
||
* Create status panel for real-time status display
|
||
* @returns {HTMLElement} Status panel element
|
||
*/
|
||
createStatusPanel() {
|
||
const panel = document.createElement('div');
|
||
panel.className = 'ui-edit-status-panel';
|
||
panel.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
padding: 12px 16px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
min-width: 180px;
|
||
`;
|
||
|
||
const statusText = document.createElement('div');
|
||
statusText.className = 'ui-edit-status-text';
|
||
statusText.textContent = 'Ready';
|
||
|
||
const detailsText = document.createElement('div');
|
||
detailsText.className = 'ui-edit-status-details';
|
||
detailsText.style.cssText = `
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-top: 4px;
|
||
`;
|
||
|
||
panel.appendChild(statusText);
|
||
panel.appendChild(detailsText);
|
||
|
||
return panel;
|
||
}
|
||
|
||
/**
|
||
* Update status display with current status information
|
||
* @param {Object} status - Status object from SectionManager
|
||
*/
|
||
updateStatusDisplay(status) {
|
||
let statusPanel = document.querySelector('.ui-edit-status-panel');
|
||
|
||
if (!statusPanel) {
|
||
statusPanel = this.createStatusPanel();
|
||
document.body.appendChild(statusPanel);
|
||
}
|
||
|
||
const statusText = statusPanel.querySelector('.ui-edit-status-text');
|
||
const detailsText = statusPanel.querySelector('.ui-edit-status-details');
|
||
|
||
// Update status text and color based on state
|
||
switch (status.state) {
|
||
case 'ready':
|
||
statusText.textContent = '✓ Ready';
|
||
statusText.style.color = '#28a745';
|
||
break;
|
||
case 'editing':
|
||
statusText.textContent = '✏️ Editing';
|
||
statusText.style.color = '#007bff';
|
||
break;
|
||
case 'modified':
|
||
statusText.textContent = '⚠️ Modified';
|
||
statusText.style.color = '#ffc107';
|
||
break;
|
||
default:
|
||
statusText.textContent = 'Unknown';
|
||
statusText.style.color = '#6c757d';
|
||
}
|
||
|
||
// Update details
|
||
const details = [];
|
||
details.push(`${status.totalSections} sections`);
|
||
|
||
if (status.editingSections.length > 0) {
|
||
details.push(`${status.editingSections.length} editing`);
|
||
}
|
||
|
||
if (status.modifiedSections > 0) {
|
||
details.push(`${status.modifiedSections} modified`);
|
||
}
|
||
|
||
detailsText.textContent = details.join(' • ');
|
||
|
||
// Update timestamp
|
||
const now = new Date().toLocaleTimeString();
|
||
statusPanel.setAttribute('title', `Last update: ${now}`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Main Editor Integration
|
||
*/
|
||
class MarkitectCleanEditor {
|
||
constructor(markdownContent, containerElement, options = {}) {
|
||
debug('10: MarkitectCleanEditor constructor called', 'EDITOR');
|
||
|
||
this.options = {
|
||
theme: 'github',
|
||
keyboardShortcuts: true,
|
||
autosave: false,
|
||
originalFilename: null,
|
||
...options
|
||
};
|
||
|
||
debug('11: Creating SectionManager', 'EDITOR');
|
||
this.sectionManager = new SectionManager();
|
||
|
||
debug('12: Creating DOMRenderer', 'EDITOR');
|
||
this.domRenderer = new DOMRenderer(this.sectionManager, containerElement);
|
||
this.originalMarkdown = markdownContent;
|
||
|
||
this.cleanMarkdownContent = options.cleanMarkdownContent || markdownContent;
|
||
this.dogtagContent = options.dogtagContent || '';
|
||
|
||
debug('13: About to call initialize()', 'EDITOR');
|
||
this.initialize();
|
||
debug('14: initialize() completed', 'EDITOR');
|
||
}
|
||
|
||
initialize() {
|
||
try {
|
||
debug('15: Starting initialize() - markdown length: ' + this.originalMarkdown.length, 'INIT');
|
||
|
||
const sections = this.sectionManager.createSectionsFromMarkdown(this.originalMarkdown);
|
||
debug('16: Created ' + sections.length + ' sections', 'INIT');
|
||
|
||
// Mark the dogtag section as protected if we have a dogtag
|
||
if (this.dogtagContent) {
|
||
debug('17: Marking dogtag section', 'INIT');
|
||
this.markDogtagSection(sections);
|
||
}
|
||
|
||
// Mark base64 reference sections as protected
|
||
debug('18: Marking base64 reference sections', 'INIT');
|
||
this.markBase64ReferenceSections(sections);
|
||
|
||
console.log(`✓ Initialized clean editor with ${sections.length} sections`);
|
||
|
||
// Add global control panel
|
||
debug('19: Adding global controls', 'INIT');
|
||
this.addGlobalControls();
|
||
|
||
// Setup status tracking
|
||
debug('19.5: Setting up status tracking', 'INIT');
|
||
this.setupStatusTracking();
|
||
|
||
debug('20: Initialize completed successfully', 'INIT');
|
||
return true;
|
||
} catch (error) {
|
||
debug('ERROR in initialize: ' + error.message, 'ERROR');
|
||
console.error('Failed to initialize clean editor:', error);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
markDogtagSection(sections) {
|
||
// Find the section that contains the dogtag content
|
||
const dogtagText = this.dogtagContent.trim();
|
||
if (!dogtagText) return;
|
||
|
||
for (const section of sections) {
|
||
if (section.currentMarkdown.includes(dogtagText)) {
|
||
section.isDogtagSection = true;
|
||
console.log('Marked dogtag section as protected:', section.id);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
markBase64ReferenceSections(sections) {
|
||
// Find sections that contain base64 image references
|
||
if (!window.markitectBase64References) return;
|
||
|
||
const refIds = Object.keys(window.markitectBase64References);
|
||
if (refIds.length === 0) return;
|
||
|
||
for (const section of sections) {
|
||
const markdown = section.currentMarkdown;
|
||
|
||
// Check if this section contains base64 reference syntax
|
||
for (const refId of refIds) {
|
||
if (markdown.includes(`[${refId}]:`)) {
|
||
section.isBase64RefSection = true;
|
||
console.log('Marked base64 reference section as protected:', section.id);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
addGlobalControls() {
|
||
// Create a floating control panel
|
||
const controlPanel = document.createElement('div');
|
||
controlPanel.id = 'markitect-global-controls';
|
||
controlPanel.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: rgba(248, 249, 250, 0.95);
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
z-index: 1000;
|
||
backdrop-filter: blur(8px);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
font-size: 14px;
|
||
min-width: 200px;
|
||
`;
|
||
|
||
const title = document.createElement('div');
|
||
title.style.cssText = `
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: #495057;
|
||
border-bottom: 1px solid #dee2e6;
|
||
padding-bottom: 4px;
|
||
`;
|
||
title.textContent = 'Document Controls';
|
||
|
||
const buttonContainer = document.createElement('div');
|
||
buttonContainer.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
`;
|
||
|
||
// Save Document button
|
||
const saveButton = document.createElement('button');
|
||
saveButton.id = 'save-document';
|
||
saveButton.textContent = '💾 Save Document';
|
||
saveButton.style.cssText = `
|
||
background: #28a745;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
transition: background-color 0.2s;
|
||
`;
|
||
|
||
// Reset All button
|
||
const resetButton = document.createElement('button');
|
||
resetButton.id = 'reset-all';
|
||
resetButton.textContent = '🔄 Reset All';
|
||
resetButton.style.cssText = `
|
||
background: #ffc107;
|
||
color: #212529;
|
||
border: none;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
transition: background-color 0.2s;
|
||
`;
|
||
|
||
// Show Status button
|
||
const statusButton = document.createElement('button');
|
||
statusButton.id = 'show-status';
|
||
statusButton.textContent = '📊 Show Status';
|
||
statusButton.style.cssText = `
|
||
background: #17a2b8;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
transition: background-color 0.2s;
|
||
`;
|
||
|
||
buttonContainer.appendChild(saveButton);
|
||
buttonContainer.appendChild(resetButton);
|
||
buttonContainer.appendChild(statusButton);
|
||
|
||
controlPanel.appendChild(title);
|
||
controlPanel.appendChild(buttonContainer);
|
||
|
||
document.body.appendChild(controlPanel);
|
||
|
||
// Add event listeners
|
||
document.getElementById('save-document').addEventListener('click', () => this.saveDocument());
|
||
document.getElementById('reset-all').addEventListener('click', () => this.resetAllSections());
|
||
document.getElementById('show-status').addEventListener('click', () => this.showStatus());
|
||
}
|
||
|
||
saveDocument() {
|
||
try {
|
||
const markdown = this.sectionManager.getDocumentMarkdown();
|
||
|
||
// Generate intelligent filename
|
||
const filename = this.generateSaveFilename();
|
||
|
||
// Create a download link
|
||
const blob = new Blob([markdown], { type: 'text/markdown' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = filename;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
|
||
this.showMessage(`Document saved as ${filename}!`, 'success');
|
||
console.log('Document saved:', filename, markdown.length, 'characters');
|
||
} catch (error) {
|
||
this.showMessage('Failed to save document: ' + error.message, 'error');
|
||
console.error('Save failed:', error);
|
||
}
|
||
}
|
||
|
||
resetAllSections() {
|
||
if (!confirm('Reset all sections to their original content? This will lose all changes and cannot be undone.')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const sections = this.sectionManager.getAllSections();
|
||
sections.forEach(section => {
|
||
this.sectionManager.resetSection(section.id);
|
||
});
|
||
|
||
this.showMessage('All sections reset to original content', 'info');
|
||
console.log('All sections reset');
|
||
} catch (error) {
|
||
this.showMessage('Failed to reset sections: ' + error.message, 'error');
|
||
console.error('Reset failed:', error);
|
||
}
|
||
}
|
||
|
||
showStatus() {
|
||
const sections = this.sectionManager.getSectionStatus();
|
||
const totalSections = sections.length;
|
||
const editedSections = sections.filter(s => s.hasChanges).length;
|
||
const currentlyEditing = sections.filter(s => s.isEditing).length;
|
||
|
||
const statusHtml = `
|
||
<h3>Document Status</h3>
|
||
<p><strong>Total Sections:</strong> ${totalSections}</p>
|
||
<p><strong>Modified Sections:</strong> ${editedSections}</p>
|
||
<p><strong>Currently Editing:</strong> ${currentlyEditing}</p>
|
||
<hr>
|
||
<h4>Section Details:</h4>
|
||
<ul>
|
||
${sections.map(s => `
|
||
<li>
|
||
<strong>${s.id}</strong> (${s.type})
|
||
- ${s.state}
|
||
${s.hasChanges ? ' ✏️' : ''}
|
||
${s.isEditing ? ' 🖊️' : ''}
|
||
</li>
|
||
`).join('')}
|
||
</ul>
|
||
`;
|
||
|
||
this.showModal('Document Status', statusHtml);
|
||
}
|
||
|
||
showMessage(message, type = 'info') {
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: ${type === 'success' ? '#d4edda' : type === 'error' ? '#f8d7da' : '#d1ecf1'};
|
||
color: ${type === 'success' ? '#155724' : type === 'error' ? '#721c24' : '#0c5460'};
|
||
border: 1px solid ${type === 'success' ? '#c3e6cb' : type === 'error' ? '#f5c6cb' : '#bee5eb'};
|
||
border-radius: 6px;
|
||
padding: 12px 20px;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
font-size: 14px;
|
||
z-index: 10001;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
`;
|
||
messageDiv.textContent = message;
|
||
|
||
document.body.appendChild(messageDiv);
|
||
|
||
setTimeout(() => {
|
||
if (messageDiv.parentNode) {
|
||
messageDiv.parentNode.removeChild(messageDiv);
|
||
}
|
||
}, 3000);
|
||
}
|
||
|
||
showModal(title, content) {
|
||
// Remove existing modal if present
|
||
const existingModal = document.getElementById('markitect-modal');
|
||
if (existingModal) {
|
||
existingModal.remove();
|
||
}
|
||
|
||
const modalOverlay = document.createElement('div');
|
||
modalOverlay.id = 'markitect-modal';
|
||
modalOverlay.style.cssText = `
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10000;
|
||
`;
|
||
|
||
const modal = document.createElement('div');
|
||
modal.style.cssText = `
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 24px;
|
||
max-width: 600px;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
`;
|
||
|
||
const closeBtn = document.createElement('button');
|
||
closeBtn.textContent = '×';
|
||
closeBtn.style.cssText = `
|
||
float: right;
|
||
background: none;
|
||
border: none;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
color: #6c757d;
|
||
margin: -8px -8px 0 0;
|
||
`;
|
||
|
||
const modalContent = document.createElement('div');
|
||
modalContent.innerHTML = `<h2>${title}</h2>${content}`;
|
||
|
||
function closeModal() {
|
||
modalOverlay.remove();
|
||
}
|
||
|
||
closeBtn.addEventListener('click', closeModal);
|
||
modalOverlay.addEventListener('click', (e) => {
|
||
if (e.target === modalOverlay) closeModal();
|
||
});
|
||
|
||
modal.appendChild(closeBtn);
|
||
modal.appendChild(modalContent);
|
||
modalOverlay.appendChild(modal);
|
||
document.body.appendChild(modalOverlay);
|
||
}
|
||
|
||
getDocumentMarkdown() {
|
||
return this.sectionManager.getDocumentMarkdown();
|
||
}
|
||
|
||
escapeRegex(str) {
|
||
return str.replace(/[.*+?^${}()|[]\]/g, '\\\\$&');
|
||
}
|
||
|
||
convertDataUrlToReference(markdown) {
|
||
if (!window.markitectBase64References) {
|
||
return markdown;
|
||
}
|
||
|
||
let convertedMarkdown = markdown;
|
||
|
||
Object.entries(window.markitectBase64References).forEach(([refId, refData]) => {
|
||
const dataUrl = refData.full_data_url;
|
||
const escapedDataUrl = this.escapeRegex(dataUrl);
|
||
const dataUrlPattern = new RegExp(`!\\[([^\\]]*)\\]\\(${escapedDataUrl}\\)`, 'g');
|
||
convertedMarkdown = convertedMarkdown.replace(dataUrlPattern, `![$1][${refId}]`);
|
||
});
|
||
|
||
return convertedMarkdown;
|
||
}
|
||
|
||
/**
|
||
* Setup real-time status tracking
|
||
*/
|
||
setupStatusTracking() {
|
||
// Listen for status updates from SectionManager
|
||
this.sectionManager.on('status-updated', (status) => {
|
||
this.domRenderer.updateStatusDisplay(status);
|
||
});
|
||
|
||
// Start periodic status tracking
|
||
this.sectionManager.startStatusTracking(2000); // Update every 2 seconds
|
||
|
||
// Initial status display
|
||
this.sectionManager.updateGlobalStatus();
|
||
|
||
console.log('✓ Real-time status tracking initialized');
|
||
}
|
||
|
||
/**
|
||
* Generate intelligent save filename using 4-method fallback system
|
||
* @returns {string} Generated filename with .md extension
|
||
*/
|
||
generateSaveFilename() {
|
||
// Method 1: Original filename from options
|
||
if (this.options.originalFilename) {
|
||
return this.sanitizeFilename(this.options.originalFilename);
|
||
}
|
||
|
||
// Method 2: Page title extraction
|
||
const titleFilename = this.extractFilenameFromTitle();
|
||
if (titleFilename) {
|
||
return this.sanitizeFilename(titleFilename + '.md');
|
||
}
|
||
|
||
// Method 3: URL pathname analysis
|
||
const urlFilename = this.extractFilenameFromUrl();
|
||
if (urlFilename) {
|
||
return this.sanitizeFilename(urlFilename + '.md');
|
||
}
|
||
|
||
// Method 4: First heading extraction
|
||
const headingFilename = this.extractFilenameFromHeading();
|
||
if (headingFilename) {
|
||
return this.sanitizeFilename(headingFilename + '.md');
|
||
}
|
||
|
||
// Method 5: Timestamp generation (fallback)
|
||
return this.generateTimestampFilename();
|
||
}
|
||
|
||
/**
|
||
* Sanitize filename to be filesystem-safe
|
||
* @param {string} filename - Raw filename
|
||
* @returns {string} Sanitized filename
|
||
*/
|
||
sanitizeFilename(filename) {
|
||
if (!filename) return 'document.md';
|
||
|
||
// Remove or replace filesystem-unsafe characters
|
||
let sanitized = filename
|
||
.replace(/[\/\\:*?"<>|]/g, '-') // Replace unsafe chars with dashes
|
||
.replace(/\s+/g, '-') // Replace spaces with dashes
|
||
.replace(/-+/g, '-') // Replace multiple dashes with single dash
|
||
.replace(/^-|-$/g, '') // Remove leading/trailing dashes
|
||
.trim();
|
||
|
||
// Ensure it ends with .md
|
||
if (!sanitized.endsWith('.md')) {
|
||
sanitized += '.md';
|
||
}
|
||
|
||
// Ensure it's not empty
|
||
if (sanitized === '.md') {
|
||
sanitized = 'document.md';
|
||
}
|
||
|
||
return sanitized;
|
||
}
|
||
|
||
/**
|
||
* Extract filename from page title
|
||
* @returns {string|null} Filename or null if not suitable
|
||
*/
|
||
extractFilenameFromTitle() {
|
||
if (typeof document === 'undefined' || !document.title) {
|
||
return null;
|
||
}
|
||
|
||
let title = document.title.trim();
|
||
|
||
// Remove common website suffixes
|
||
title = title
|
||
.split('|')[0] // Remove " | Website"
|
||
.split('-')[0] // Remove " - Website"
|
||
.split('•')[0] // Remove " • Website"
|
||
.trim();
|
||
|
||
if (title.length < 3 || title.length > 100) {
|
||
return null;
|
||
}
|
||
|
||
return title;
|
||
}
|
||
|
||
/**
|
||
* Extract filename from URL pathname
|
||
* @returns {string|null} Filename or null if not suitable
|
||
*/
|
||
extractFilenameFromUrl() {
|
||
if (typeof window === 'undefined' || !window.location) {
|
||
return null;
|
||
}
|
||
|
||
const pathname = window.location.pathname;
|
||
if (!pathname || pathname === '/') {
|
||
return null;
|
||
}
|
||
|
||
// Get the last segment of the path
|
||
const segments = pathname.split('/').filter(s => s.length > 0);
|
||
if (segments.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
const lastSegment = segments[segments.length - 1];
|
||
|
||
// Remove file extensions
|
||
const filenameBase = lastSegment.replace(/\.[^.]*$/, '');
|
||
|
||
if (filenameBase.length < 3 || filenameBase.length > 100) {
|
||
return null;
|
||
}
|
||
|
||
return filenameBase;
|
||
}
|
||
|
||
/**
|
||
* Extract filename from first heading in markdown
|
||
* @returns {string|null} Filename or null if no heading found
|
||
*/
|
||
extractFilenameFromHeading() {
|
||
if (!this.originalMarkdown) {
|
||
return null;
|
||
}
|
||
|
||
const lines = this.originalMarkdown.split('\n');
|
||
|
||
// Find first heading line
|
||
for (const line of lines) {
|
||
const trimmed = line.trim();
|
||
if (/^#{1,6}\s/.test(trimmed)) {
|
||
// Extract heading text (remove # symbols and trim)
|
||
const headingText = trimmed.replace(/^#{1,6}\s*/, '').trim();
|
||
|
||
if (headingText.length >= 3 && headingText.length <= 100) {
|
||
return headingText;
|
||
}
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* Generate timestamp-based filename as final fallback
|
||
* @returns {string} Timestamp-based filename
|
||
*/
|
||
generateTimestampFilename() {
|
||
const now = new Date();
|
||
const timestamp = now.getFullYear().toString() +
|
||
(now.getMonth() + 1).toString().padStart(2, '0') +
|
||
now.getDate().toString().padStart(2, '0') + '-' +
|
||
now.getHours().toString().padStart(2, '0') +
|
||
now.getMinutes().toString().padStart(2, '0');
|
||
|
||
return `document-${timestamp}.md`;
|
||
}
|
||
|
||
/**
|
||
* Cleanup method to stop status tracking
|
||
*/
|
||
destroy() {
|
||
if (this.sectionManager) {
|
||
this.sectionManager.stopStatusTracking();
|
||
}
|
||
}
|
||
}
|
||
|
||
// Initialize the clean editor system
|
||
let markitectCleanEditor;
|
||
|
||
function initializeCleanEditor() {
|
||
debug('1: initializeCleanEditor called', 'INIT');
|
||
|
||
const container = document.getElementById('markdown-content');
|
||
if (!container) {
|
||
debug('2: FAILED - Markdown content container not found', 'ERROR');
|
||
return;
|
||
}
|
||
debug('3: Container found', 'INIT');
|
||
|
||
if (typeof window.MarkitectEditor === 'undefined') {
|
||
debug('4: FAILED - MarkitectEditor not found', 'ERROR');
|
||
return;
|
||
}
|
||
debug('5: MarkitectEditor found', 'INIT');
|
||
|
||
debug('6: Creating editor with content length: ' + markdownContentWithDogtag.length, 'INIT');
|
||
|
||
try {
|
||
markitectCleanEditor = new window.MarkitectEditor.MarkitectCleanEditor(markdownContentWithDogtag, container, {
|
||
cleanMarkdownContent: markdownContent,
|
||
dogtagContent: dogtagContent
|
||
});
|
||
debug('7: Editor instance created', 'INIT');
|
||
|
||
window.markitectCleanEditor = markitectCleanEditor; // Make globally available
|
||
debug('8: Editor made globally available', 'INIT');
|
||
|
||
const contentAfterInit = container.innerHTML;
|
||
debug('9: Container has content: ' + (contentAfterInit.length > 0 ? 'YES (' + contentAfterInit.length + ' chars)' : 'NO'), 'INIT');
|
||
|
||
console.log('✅ Clean section editor initialized successfully');
|
||
} catch (error) {
|
||
debug('ERROR in editor creation: ' + error.message, 'ERROR');
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// Document scroll indicators
|
||
function initializeScrollIndicators() {
|
||
console.log('✅ Document scroll indicators initialized');
|
||
}
|
||
|
||
// Export for module systems
|
||
if (typeof module !== 'undefined' && module.exports) {
|
||
module.exports = { EditState, SectionType, Section, SectionManager, DOMRenderer, MarkitectCleanEditor };
|
||
global.EditState = EditState;
|
||
global.SectionType = SectionType;
|
||
global.Section = Section;
|
||
} else {
|
||
window.MarkitectEditor = { EditState, SectionType, Section, SectionManager, DOMRenderer, MarkitectCleanEditor };
|
||
window.EditState = EditState;
|
||
window.SectionType = SectionType;
|
||
window.Section = Section;
|
||
} |