feat: implement clean JavaScript-Python separation for edit mode
- Created JSON configuration interface eliminating JavaScript-Python code mixing - Added external script references following non-edit mode patterns - Implemented edit-mode-fixed.html template with proper fallback content - Added config-loader.js for clean data transfer via JSON - Updated main-updated.js with simplified initialization (no infinite retry loops) - Added comprehensive test suite for JavaScript syntax validation - Achieved full GUARDRAILS.md compliance with clean separation of concerns Fixes infinite retry loops and JavaScript syntax errors caused by template literal escaping issues in Python f-strings. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
168
markitect/static/js/config-loader.js
Normal file
168
markitect/static/js/config-loader.js
Normal file
@@ -0,0 +1,168 @@
|
||||
/**
|
||||
* Configuration Loader - Clean interface between Python and JavaScript
|
||||
*
|
||||
* This module provides the ONLY interface for Python-generated data.
|
||||
* All dynamic data from Python must be passed through this JSON configuration.
|
||||
*/
|
||||
|
||||
class MarkitectConfig {
|
||||
constructor() {
|
||||
this.config = null;
|
||||
this.loaded = false;
|
||||
|
||||
// Simple immediate loading - if script is loaded, DOM is ready
|
||||
this.loadConfig();
|
||||
}
|
||||
|
||||
loadConfig() {
|
||||
try {
|
||||
const configElement = document.getElementById('markitect-config');
|
||||
if (!configElement) {
|
||||
throw new Error('Markitect configuration not found - missing markitect-config script element');
|
||||
}
|
||||
|
||||
this.config = JSON.parse(configElement.textContent);
|
||||
this.loaded = true;
|
||||
console.log('✅ Markitect configuration loaded successfully');
|
||||
|
||||
// Validate required fields
|
||||
this.validateConfig();
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to load Markitect configuration:', error);
|
||||
this.config = this.getDefaultConfig();
|
||||
}
|
||||
}
|
||||
|
||||
validateConfig() {
|
||||
const required = ['markdownContent', 'mode'];
|
||||
const missing = required.filter(key => !(key in this.config));
|
||||
|
||||
if (missing.length > 0) {
|
||||
console.warn('⚠️ Missing required config fields:', missing);
|
||||
}
|
||||
}
|
||||
|
||||
getDefaultConfig() {
|
||||
return {
|
||||
markdownContent: '# Default Content\n\nConfiguration failed to load.',
|
||||
markdownContentWithDogtag: '# Default Content\n\nConfiguration failed to load.',
|
||||
dogtagContent: '',
|
||||
mode: 'edit',
|
||||
theme: 'github',
|
||||
keyboardShortcuts: true,
|
||||
autosave: false,
|
||||
sections: true,
|
||||
originalFilename: 'document',
|
||||
version: 'Markitect v0.8.1',
|
||||
repoName: 'Markitect',
|
||||
base64References: {}
|
||||
};
|
||||
}
|
||||
|
||||
// Getter methods for clean access
|
||||
get markdownContent() {
|
||||
return this.config.markdownContent || '';
|
||||
}
|
||||
|
||||
get markdownContentWithDogtag() {
|
||||
return this.config.markdownContentWithDogtag || this.markdownContent;
|
||||
}
|
||||
|
||||
get dogtagContent() {
|
||||
return this.config.dogtagContent || '';
|
||||
}
|
||||
|
||||
get mode() {
|
||||
return this.config.mode || 'edit';
|
||||
}
|
||||
|
||||
get isEditMode() {
|
||||
return this.mode === 'edit';
|
||||
}
|
||||
|
||||
get isInsertMode() {
|
||||
return this.mode === 'insert';
|
||||
}
|
||||
|
||||
get theme() {
|
||||
return this.config.theme || 'github';
|
||||
}
|
||||
|
||||
get originalFilename() {
|
||||
return this.config.originalFilename || 'document';
|
||||
}
|
||||
|
||||
get version() {
|
||||
return this.config.version || 'Markitect v0.8.1';
|
||||
}
|
||||
|
||||
get repoName() {
|
||||
return this.config.repoName || 'Markitect';
|
||||
}
|
||||
|
||||
get keyboardShortcuts() {
|
||||
return this.config.keyboardShortcuts !== false;
|
||||
}
|
||||
|
||||
get base64References() {
|
||||
return this.config.base64References || {};
|
||||
}
|
||||
|
||||
get restrictedHeadingLevels() {
|
||||
return this.config.restrictedHeadingLevels || [1, 2, 3];
|
||||
}
|
||||
|
||||
// Check if config is ready for access
|
||||
isReady() {
|
||||
return this.loaded && this.config !== null;
|
||||
}
|
||||
|
||||
// Wait for config to be ready
|
||||
waitForReady(callback, maxWait = 5000) {
|
||||
const startTime = Date.now();
|
||||
const checkReady = () => {
|
||||
if (this.isReady()) {
|
||||
callback();
|
||||
} else if (Date.now() - startTime < maxWait) {
|
||||
setTimeout(checkReady, 50);
|
||||
} else {
|
||||
console.error('❌ Configuration loading timeout after', maxWait, 'ms');
|
||||
callback(); // Call anyway with default config
|
||||
}
|
||||
};
|
||||
checkReady();
|
||||
}
|
||||
|
||||
// Get full editor configuration object
|
||||
getEditorConfig() {
|
||||
if (!this.isReady()) {
|
||||
console.warn('⚠️ Configuration not ready, using defaults');
|
||||
return this.getDefaultConfig();
|
||||
}
|
||||
|
||||
return {
|
||||
mode: this.mode,
|
||||
theme: this.theme,
|
||||
keyboardShortcuts: this.keyboardShortcuts,
|
||||
autosave: this.config.autosave || false,
|
||||
sections: this.config.sections !== false,
|
||||
originalFilename: this.originalFilename,
|
||||
version: this.version,
|
||||
repoName: this.repoName,
|
||||
restrictedHeadingLevels: this.restrictedHeadingLevels
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Global configuration instance
|
||||
window.markitectConfig = new MarkitectConfig();
|
||||
|
||||
// Legacy compatibility - expose common config values globally
|
||||
window.editorConfig = window.markitectConfig.getEditorConfig();
|
||||
window.markitectBase64References = window.markitectConfig.base64References;
|
||||
|
||||
// Export for module use
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = MarkitectConfig;
|
||||
}
|
||||
287
markitect/static/js/main-updated.js
Normal file
287
markitect/static/js/main-updated.js
Normal file
@@ -0,0 +1,287 @@
|
||||
/**
|
||||
* Main Markitect JavaScript Entry Point - Clean Architecture Version
|
||||
*
|
||||
* Uses ONLY the JSON configuration interface - NO Python-generated JavaScript!
|
||||
* Initializes all controls and systems when document is ready
|
||||
* Implements graceful degradation for missing dependencies
|
||||
*/
|
||||
|
||||
// Main application module
|
||||
const MarkitectMain = {
|
||||
initialized: false,
|
||||
config: null,
|
||||
|
||||
// Initialize the complete application
|
||||
initialize: function() {
|
||||
if (this.initialized) {
|
||||
console.log('⚠️ MarkitectMain already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('🚀 MarkitectMain initializing...');
|
||||
|
||||
try {
|
||||
// Get configuration - if not loaded, use defaults
|
||||
this.config = window.markitectConfig;
|
||||
if (!this.config || !this.config.loaded) {
|
||||
console.warn('⚠️ Configuration not loaded, proceeding with defaults');
|
||||
this.config = {
|
||||
markdownContent: document.querySelector('#markdown-content')?.textContent || '',
|
||||
mode: 'edit',
|
||||
theme: 'github'
|
||||
};
|
||||
}
|
||||
|
||||
// Initialize core systems
|
||||
this.initializeCoreComponents();
|
||||
this.initializeControlPanels();
|
||||
this.setupEventHandlers();
|
||||
this.renderContent();
|
||||
|
||||
this.initialized = true;
|
||||
console.log('✅ MarkitectMain initialization complete');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ MarkitectMain initialization failed:', error);
|
||||
this.fallbackMode();
|
||||
}
|
||||
},
|
||||
|
||||
// Initialize core modular components
|
||||
initializeCoreComponents: function() {
|
||||
console.log('🔧 Initializing core components...');
|
||||
|
||||
const container = document.getElementById('markdown-content') || document.body;
|
||||
|
||||
// Initialize section manager
|
||||
if (typeof SectionManager !== 'undefined') {
|
||||
this.sectionManager = new SectionManager();
|
||||
console.log('✅ SectionManager initialized');
|
||||
} else {
|
||||
throw new Error('SectionManager not available');
|
||||
}
|
||||
|
||||
// Initialize DOM renderer
|
||||
if (typeof DOMRenderer !== 'undefined') {
|
||||
this.domRenderer = new DOMRenderer(this.sectionManager, container);
|
||||
console.log('✅ DOMRenderer initialized');
|
||||
} else {
|
||||
throw new Error('DOMRenderer not available');
|
||||
}
|
||||
|
||||
// Initialize debug panel
|
||||
if (typeof DebugPanel !== 'undefined') {
|
||||
this.debugPanel = new DebugPanel();
|
||||
console.log('✅ DebugPanel initialized');
|
||||
}
|
||||
|
||||
// Initialize document controls
|
||||
if (typeof DocumentControls !== 'undefined') {
|
||||
this.documentControls = new DocumentControls();
|
||||
this.documentControls.create();
|
||||
console.log('✅ DocumentControls initialized');
|
||||
}
|
||||
},
|
||||
|
||||
// Initialize control panels with compass positioning
|
||||
initializeControlPanels: function() {
|
||||
console.log('🎛️ Initializing control panels with compass positioning...');
|
||||
|
||||
// ContentsControl (Northwest)
|
||||
if (typeof ContentsControl !== 'undefined') {
|
||||
this.contentsControl = new ContentsControl();
|
||||
this.contentsControl.control.config.position = 'nw';
|
||||
this.contentsControl.createControl();
|
||||
window.contentsControl = this.contentsControl;
|
||||
console.log('✅ ContentsControl initialized (Northwest)');
|
||||
}
|
||||
|
||||
// StatusControl (East)
|
||||
if (typeof StatusControl !== 'undefined') {
|
||||
this.statusControl = new StatusControl();
|
||||
this.statusControl.control.config.position = 'e';
|
||||
this.statusControl.createControl();
|
||||
window.statusControl = this.statusControl;
|
||||
console.log('✅ StatusControl initialized (East)');
|
||||
}
|
||||
|
||||
// DebugControl (Southeast)
|
||||
if (typeof DebugControl !== 'undefined') {
|
||||
this.debugControl = new DebugControl();
|
||||
this.debugControl.control.config.position = 'se';
|
||||
this.debugControl.createControl();
|
||||
window.debugControl = this.debugControl;
|
||||
console.log('✅ DebugControl initialized (Southeast)');
|
||||
}
|
||||
|
||||
// EditControl (Northeast)
|
||||
if (typeof EditControl !== 'undefined') {
|
||||
this.editControl = new EditControl();
|
||||
this.editControl.control.config.position = 'ne';
|
||||
this.editControl.createControl();
|
||||
window.editControl = this.editControl;
|
||||
console.log('✅ EditControl initialized (Northeast)');
|
||||
}
|
||||
},
|
||||
|
||||
// Setup event handlers
|
||||
setupEventHandlers: function() {
|
||||
console.log('🔌 Setting up event handlers...');
|
||||
|
||||
if (!this.documentControls) return;
|
||||
|
||||
this.documentControls.setEventHandlers({
|
||||
'save-document': () => {
|
||||
console.log('💾 Save document clicked');
|
||||
try {
|
||||
const currentMarkdown = this.sectionManager.getDocumentMarkdown();
|
||||
const now = new Date();
|
||||
const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-').replace('T', '-');
|
||||
const filename = `${this.config.originalFilename}-edited-${timestamp}.md`;
|
||||
|
||||
const blob = new Blob([currentMarkdown], { 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);
|
||||
|
||||
if (this.debugPanel) {
|
||||
this.debugPanel.addMessage(`Document saved as: ${filename}`, 'SUCCESS');
|
||||
}
|
||||
console.log(`✅ Document saved as: ${filename}`);
|
||||
|
||||
} catch (error) {
|
||||
if (this.debugPanel) {
|
||||
this.debugPanel.addMessage(`Save failed: ${error.message}`, 'ERROR');
|
||||
}
|
||||
console.error('❌ Save error:', error);
|
||||
}
|
||||
},
|
||||
|
||||
'reset-all': () => {
|
||||
console.log('🔄 Reset all clicked');
|
||||
try {
|
||||
this.domRenderer.hideCurrentEditor();
|
||||
const allSections = Array.from(this.sectionManager.sections.values());
|
||||
allSections.forEach(section => section.resetToOriginal());
|
||||
this.domRenderer.renderAllSections(allSections);
|
||||
|
||||
if (this.debugPanel) {
|
||||
this.debugPanel.addMessage('Reset all sections to original state', 'INFO');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Reset all failed:', error);
|
||||
}
|
||||
},
|
||||
|
||||
'show-status': () => {
|
||||
const status = this.sectionManager.getDocumentStatus();
|
||||
alert(`Document Status:\nTotal Sections: ${status.totalSections}\nEditing Sections: ${status.editingSections}`);
|
||||
},
|
||||
|
||||
'toggle-debug': () => {
|
||||
if (this.debugPanel) {
|
||||
this.debugPanel.toggle();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Setup section manager event handlers
|
||||
if (this.sectionManager && this.debugPanel) {
|
||||
this.sectionManager.on('sections-created', (data) => {
|
||||
this.debugPanel.addMessage(`Created ${data.count} sections`, 'INFO');
|
||||
});
|
||||
|
||||
this.sectionManager.on('edit-started', (data) => {
|
||||
this.debugPanel.addMessage(`Edit started for section: ${data.sectionId}`, 'DEBUG');
|
||||
});
|
||||
|
||||
this.sectionManager.on('changes-accepted', (data) => {
|
||||
this.debugPanel.addMessage(`Changes accepted for section: ${data.sectionId}`, 'SUCCESS');
|
||||
this.updateSectionDOM(data.sectionId);
|
||||
});
|
||||
|
||||
this.sectionManager.on('changes-cancelled', (data) => {
|
||||
this.debugPanel.addMessage(`Changes cancelled for section: ${data.sectionId}`, 'WARNING');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// Render content using the configuration
|
||||
renderContent: function() {
|
||||
console.log('📄 Rendering markdown content...');
|
||||
|
||||
const markdownToRender = this.config.markdownContent || '';
|
||||
if (markdownToRender.trim()) {
|
||||
const sections = this.sectionManager.createSectionsFromMarkdown(markdownToRender);
|
||||
this.domRenderer.renderAllSections(sections);
|
||||
|
||||
if (this.debugPanel) {
|
||||
this.debugPanel.addMessage(`Initialized with ${sections.length} sections`, 'INFO');
|
||||
}
|
||||
console.log(`✅ Rendered ${sections.length} sections`);
|
||||
} else {
|
||||
if (this.debugPanel) {
|
||||
this.debugPanel.addMessage('No markdown content to initialize', 'WARNING');
|
||||
}
|
||||
console.warn('⚠️ No markdown content to render');
|
||||
}
|
||||
},
|
||||
|
||||
// Update section DOM after changes
|
||||
updateSectionDOM: function(sectionId) {
|
||||
try {
|
||||
const section = this.sectionManager.sections.get(sectionId);
|
||||
if (section) {
|
||||
const sectionElement = this.domRenderer.findSectionElement(sectionId);
|
||||
if (sectionElement) {
|
||||
const newElement = this.domRenderer.renderSection(section);
|
||||
sectionElement.parentNode.replaceChild(newElement, sectionElement);
|
||||
|
||||
if (this.debugPanel) {
|
||||
this.debugPanel.addMessage(`DOM updated for section: ${sectionId}`, 'INFO');
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to update section DOM:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// Fallback mode if initialization fails
|
||||
fallbackMode: function() {
|
||||
console.warn('⚠️ Running in fallback mode');
|
||||
|
||||
// Basic content rendering fallback
|
||||
const contentDiv = document.getElementById('markdown-content');
|
||||
if (contentDiv && this.config && this.config.markdownContent) {
|
||||
const basicHtml = this.config.markdownContent
|
||||
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
|
||||
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
|
||||
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
|
||||
.replace(/\n\n/g, '</p><p>')
|
||||
.replace(/\n/g, '<br>');
|
||||
|
||||
contentDiv.innerHTML = `<p>${basicHtml}</p>`;
|
||||
console.log('✅ Fallback content rendered');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Make components globally available for debugging
|
||||
window.MarkitectMain = MarkitectMain;
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Small delay to ensure config is loaded
|
||||
setTimeout(() => MarkitectMain.initialize(), 100);
|
||||
});
|
||||
} else {
|
||||
// DOM already ready
|
||||
setTimeout(() => MarkitectMain.initialize(), 100);
|
||||
}
|
||||
Reference in New Issue
Block a user