feat: complete clean editor implementation with comprehensive UI framework

Major architectural improvements and feature enhancements:

## Core Features Added
-  Custom status modal system replacing browser alerts with theme-consistent branding
-  HTML generation dogtag with timestamp and username linking
-  All document links now open in new tabs without triggering edit mode
-  Comprehensive UI framework documentation (UserInterfaceFramework.md)

## Architecture Improvements
- 🔧 Complete cleanup of document_manager.py - removed 2000+ lines of legacy code
- 🔧 Clean wrapper implementation maintaining backward compatibility
- 🔧 Enhanced database integration with proper front matter parsing
- 🔧 Improved AST processing and cache file generation

## UI/UX Enhancements
- 🎨 Theme-aware modal dialogs with proper CSS styling and accessibility
- 🎨 Consistent CSS class naming conventions across all UI components
- 🎨 Enhanced link behavior for better document navigation
- 🎨 Professional status information display

## Developer Experience
- 📝 Comprehensive UI component documentation for future development
- 🧪 Updated test suite to work with clean implementation
- 🧪 Fixed multiple test compatibility issues
- 🧪 Enhanced error handling and validation

## Technical Details
- Added store_document method to CleanDocumentManager
- Enhanced ingest_file method with proper title extraction
- Implemented theme-consistent modal overlay patterns
- Added --nodogtag CLI option for clean output when needed
- Fixed CSS escape sequences and JavaScript syntax issues

This release establishes a solid foundation for the clean editor architecture
while maintaining full backward compatibility with existing functionality.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-28 03:50:21 +01:00
parent 3e16793615
commit 86689c451c
9 changed files with 879 additions and 2300 deletions

View File

@@ -17,14 +17,10 @@ class TestEditModeRegression:
def test_edit_mode_generates_valid_javascript(self):
"""Test that edit mode generates syntactically valid JavaScript."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
# Test markdown content
test_content = "# Test Header\n\nThis is a test paragraph.\n\n## Section 2\n\nAnother paragraph."
@@ -64,14 +60,10 @@ class TestEditModeRegression:
def test_edit_mode_contains_required_functions(self):
"""Test that edit mode HTML contains all required JavaScript functions."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
html_content = doc_manager._generate_html_template(
title="Test",
@@ -81,12 +73,11 @@ class TestEditModeRegression:
# Check for critical functions that must be present
required_functions = [
'MarkitectEditor',
'updateStatus',
'reportEditModeError',
'makeContentEditable',
'handleSectionClick',
'editSection'
'MarkitectCleanEditor',
'SectionManager',
'Section',
'DOMRenderer',
'initializeCleanEditor'
]
for func_name in required_functions:
@@ -94,14 +85,10 @@ class TestEditModeRegression:
def test_edit_mode_no_broken_string_literals(self):
"""Test that there are no broken string literals in the generated JavaScript."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
html_content = doc_manager._generate_html_template(
title="Test",
@@ -126,14 +113,10 @@ class TestEditModeRegression:
def test_edit_mode_proper_brace_escaping(self):
"""Test that braces are properly escaped in f-string templates."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
html_content = doc_manager._generate_html_template(
title="Test",
@@ -157,14 +140,10 @@ class TestEditModeRegression:
def test_edit_mode_template_literal_syntax(self):
"""Test that template literals are properly escaped."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
html_content = doc_manager._generate_html_template(
title="Test",
@@ -188,14 +167,10 @@ class TestEditModeRegression:
def test_edit_mode_contains_content_div(self):
"""Test that edit mode HTML contains the markdown-content div."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
html_content = doc_manager._generate_html_template(
title="Test",
@@ -210,14 +185,10 @@ class TestEditModeRegression:
def test_edit_mode_error_handling_elements(self):
"""Test that edit mode includes proper error handling UI elements."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
html_content = doc_manager._generate_html_template(
title="Test",
@@ -225,22 +196,18 @@ class TestEditModeRegression:
edit_mode=True
)
# Should contain error handling elements
assert 'id="markitect-control-panel"' in html_content
assert 'id="status-message"' in html_content
assert 'id="error-details"' in html_content
assert 'reportEditModeError' in html_content
# Should contain clean editor elements
assert 'MARKITECT_EDIT_MODE' in html_content
assert 'class="markitect-edit-mode"' in html_content
assert 'initializeCleanEditor' in html_content
assert 'console.error' in html_content # Error handling
def test_edit_mode_vs_normal_mode_differences(self):
"""Test that edit mode and normal mode generate different output appropriately."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
test_content = "# Test Header\n\nTest content."
# Generate both modes
@@ -265,14 +232,10 @@ class TestEditModeRegression:
def test_edit_mode_javascript_execution_flow(self):
"""Test the logical flow of JavaScript execution in edit mode."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
html_content = doc_manager._generate_html_template(
title="Test",
@@ -288,9 +251,9 @@ class TestEditModeRegression:
flow_elements = [
'DOMContentLoaded', # Event listener setup
'MARKITECT_EDIT_MODE', # Mode check
'new MarkitectEditor', # Editor instantiation
'makeContentEditable', # Content enhancement
'handleSectionClick' # Interaction handler
'initializeCleanEditor', # Editor initialization
'marked.parse', # Content rendering
'MarkitectCleanEditor' # Clean editor class
]
for element in flow_elements:
@@ -298,14 +261,10 @@ class TestEditModeRegression:
def test_newline_escaping_in_javascript_strings(self):
"""Test that newlines in JavaScript strings are properly escaped."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
html_content = doc_manager._generate_html_template(
title="Test",
@@ -333,14 +292,10 @@ class TestEditModeIntegration:
def test_save_functionality_javascript_presence(self):
"""Test that the save functionality JavaScript is properly included."""
from markitect.document_manager import DocumentManager
from markitect.clean_document_manager import CleanDocumentManager
# Create a mock DocumentManager to avoid database dependency
class MockDatabaseManager:
pass
doc_manager = DocumentManager.__new__(DocumentManager)
doc_manager.database_manager = MockDatabaseManager()
# Create a CleanDocumentManager
doc_manager = CleanDocumentManager()
html_content = doc_manager._generate_html_template(
title="Test",
@@ -350,9 +305,9 @@ class TestEditModeIntegration:
# Check for save-related functionality
save_elements = [
'Save & Download', # Button text
'markitectEditor.save()', # Save function call
'getMarkdownContent', # Content extraction
'💾 Save Document', # Button text from clean implementation
'generateSaveFilename', # Save filename generation
'getDocumentMarkdown', # Content extraction
'Blob', # File creation
'download' # Download attribute
]