tegwick
eced5cbae4
Fixed critical positioning issue where split sections would jump to end of document instead of staying at their original location. Problem: - appendChild() was adding new sections at end of parent container - Split sections appeared at bottom of document, not at edit location - Disrupted document flow and user experience Solution: - Remember original position with nextSibling before removal - Use insertBefore(wrapper, nextSibling) for correct positioning - New sections now appear exactly where original section was located - Maintains proper document order and reading flow This ensures that when you split a paragraph by adding empty lines, the resulting sections stay in their logical position within the document structure. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1487 lines
56 KiB
Python
1487 lines
56 KiB
Python
"""
|
||
Document manager for high-performance markdown file ingestion and AST caching.
|
||
|
||
This module implements the core functionality for Issue #2: Fast Document Loading & CLI Manipulation.
|
||
It provides performance-optimized document processing through AST caching and database integration.
|
||
|
||
Key Features:
|
||
- Parse once, access many times architecture
|
||
- AST cache loading < 50% of markdown parsing time
|
||
- Seamless integration with Issue #1 database foundation
|
||
- Comprehensive error handling and validation
|
||
"""
|
||
|
||
import json
|
||
import time
|
||
from pathlib import Path
|
||
from typing import Dict, Any, Optional
|
||
|
||
from .parser import parse_markdown_to_ast
|
||
from .frontmatter import FrontMatterParser
|
||
|
||
|
||
class DocumentManager:
|
||
"""
|
||
High-performance document manager for markdown file processing.
|
||
|
||
Implements the "parse once, manipulate many times" architecture by creating
|
||
fast-loading AST cache files alongside database metadata storage.
|
||
|
||
Architecture:
|
||
markdown file → AST parsing → cache file + database metadata
|
||
|
||
Performance Goal:
|
||
Cache loading must be < 50% of original parsing time
|
||
|
||
Attributes:
|
||
db_manager: Database manager for metadata storage
|
||
cache_dir: Directory for AST cache files
|
||
frontmatter_parser: YAML front matter processor
|
||
"""
|
||
|
||
def __init__(self, database_manager, cache_dir: Optional[Path] = None):
|
||
"""
|
||
Initialize document manager with database and cache configuration.
|
||
|
||
Args:
|
||
database_manager: DatabaseManager instance for metadata storage
|
||
cache_dir: Directory for AST cache files (default: .ast_cache)
|
||
"""
|
||
self.db_manager = database_manager
|
||
self.cache_dir = Path(cache_dir) if cache_dir else Path(".ast_cache")
|
||
self.cache_dir.mkdir(exist_ok=True)
|
||
self.frontmatter_parser = FrontMatterParser()
|
||
|
||
def ingest_file(self, file_path: Path) -> Dict[str, Any]:
|
||
"""
|
||
Ingest a markdown file with performance-optimized AST caching.
|
||
|
||
Implements the core "parse once, manipulate many times" workflow:
|
||
1. Validates file existence
|
||
2. Parses markdown content to AST
|
||
3. Creates fast-loading AST cache file
|
||
4. Stores metadata in database
|
||
5. Returns processing results with performance metrics
|
||
|
||
Args:
|
||
file_path: Path to markdown file to ingest
|
||
|
||
Returns:
|
||
Dictionary containing:
|
||
- ast: Parsed AST representation
|
||
- metadata: File metadata (filename, title, etc.)
|
||
- ast_cache_path: Path to created cache file
|
||
- parse_time: Time spent parsing markdown (seconds)
|
||
- cache_time: Time spent creating cache (seconds)
|
||
|
||
Raises:
|
||
FileNotFoundError: If the specified file doesn't exist
|
||
|
||
Performance:
|
||
Initial parse creates overhead, but subsequent cache loads
|
||
will be < 50% of this parse time.
|
||
"""
|
||
# Validate file exists
|
||
if not file_path.exists():
|
||
raise FileNotFoundError(f"File not found: {file_path}")
|
||
|
||
# Read file content
|
||
content = self._read_file_content(file_path)
|
||
|
||
# Parse front matter for metadata extraction
|
||
front_matter, markdown_content = self.frontmatter_parser.parse(content)
|
||
|
||
# Parse to AST with performance timing
|
||
ast, parse_time = self._parse_content_to_ast(content)
|
||
|
||
# Create cache file with performance timing
|
||
cache_file, cache_time = self._create_performance_cache(file_path.name, ast)
|
||
|
||
# Store in database (handles front matter parsing internally)
|
||
self._store_in_database(file_path.name, content)
|
||
|
||
# Return comprehensive result
|
||
return self._build_ingestion_result(
|
||
ast=ast,
|
||
filename=file_path.name,
|
||
front_matter=front_matter,
|
||
cache_file=cache_file,
|
||
parse_time=parse_time,
|
||
cache_time=cache_time
|
||
)
|
||
|
||
def _read_file_content(self, file_path: Path) -> str:
|
||
"""
|
||
Read file content with proper encoding.
|
||
|
||
Args:
|
||
file_path: Path to file to read
|
||
|
||
Returns:
|
||
File content as string
|
||
"""
|
||
return file_path.read_text(encoding='utf-8')
|
||
|
||
def _parse_content_to_ast(self, content: str) -> tuple[list, float]:
|
||
"""
|
||
Parse markdown content to AST with performance timing.
|
||
|
||
Args:
|
||
content: Raw markdown content
|
||
|
||
Returns:
|
||
Tuple of (AST tokens, parse_time_seconds)
|
||
"""
|
||
start_time = time.time()
|
||
ast = parse_markdown_to_ast(content)
|
||
parse_time = time.time() - start_time
|
||
return ast, parse_time
|
||
|
||
def _create_performance_cache(self, filename: str, ast: list) -> tuple[Path, float]:
|
||
"""
|
||
Create AST cache file with performance timing.
|
||
|
||
Args:
|
||
filename: Source filename for cache naming
|
||
ast: AST tokens to cache
|
||
|
||
Returns:
|
||
Tuple of (cache_file_path, cache_time_seconds)
|
||
"""
|
||
start_time = time.time()
|
||
cache_file = self._create_ast_cache(filename, ast)
|
||
cache_time = time.time() - start_time
|
||
return cache_file, cache_time
|
||
|
||
def _store_in_database(self, filename: str, content: str) -> None:
|
||
"""
|
||
Store document in database using existing API.
|
||
|
||
Args:
|
||
filename: Name of the file
|
||
content: Full markdown content (including front matter)
|
||
|
||
Note:
|
||
The database manager handles front matter parsing internally.
|
||
"""
|
||
self.db_manager.store_markdown_file(filename, content)
|
||
|
||
def _build_ingestion_result(self, ast: list, filename: str, front_matter: dict,
|
||
cache_file: Path, parse_time: float, cache_time: float) -> Dict[str, Any]:
|
||
"""
|
||
Build comprehensive ingestion result dictionary.
|
||
|
||
Args:
|
||
ast: Parsed AST tokens
|
||
filename: Source filename
|
||
front_matter: Parsed front matter metadata
|
||
cache_file: Path to created cache file
|
||
parse_time: Time spent parsing (seconds)
|
||
cache_time: Time spent caching (seconds)
|
||
|
||
Returns:
|
||
Structured result dictionary with all ingestion data
|
||
"""
|
||
return {
|
||
'ast': ast,
|
||
'metadata': {
|
||
'filename': filename,
|
||
'title': front_matter.get('title', ''),
|
||
},
|
||
'ast_cache_path': cache_file,
|
||
'parse_time': parse_time,
|
||
'cache_time': cache_time
|
||
}
|
||
|
||
def _create_ast_cache(self, filename: str, ast: list) -> Path:
|
||
"""
|
||
Create AST cache file in JSON format.
|
||
|
||
Args:
|
||
filename: Source filename for cache naming
|
||
ast: AST tokens to serialize
|
||
|
||
Returns:
|
||
Path to created cache file
|
||
"""
|
||
cache_filename = f"{filename}.ast.json"
|
||
cache_path = self.cache_dir / cache_filename
|
||
|
||
with open(cache_path, 'w', encoding='utf-8') as f:
|
||
json.dump(ast, f, indent=2, ensure_ascii=False)
|
||
|
||
return cache_path
|
||
|
||
def list_files(self) -> list:
|
||
"""
|
||
List all markdown files in the system.
|
||
|
||
Returns:
|
||
List of dictionaries containing file metadata including filename,
|
||
size, and modification date information.
|
||
"""
|
||
# Get files from database
|
||
db_files = self.db_manager.list_markdown_files()
|
||
|
||
# Enhance with file system information
|
||
enhanced_files = []
|
||
for file_info in db_files:
|
||
enhanced_info = {
|
||
'filename': file_info['filename'],
|
||
'id': file_info['id'],
|
||
'created_at': file_info['created_at'],
|
||
'front_matter': file_info['front_matter']
|
||
}
|
||
|
||
# Try to get file system stats if file exists
|
||
try:
|
||
file_path = Path(file_info['filename'])
|
||
if file_path.exists():
|
||
stat = file_path.stat()
|
||
enhanced_info['size'] = f"{stat.st_size} bytes"
|
||
enhanced_info['modified'] = stat.st_mtime
|
||
else:
|
||
enhanced_info['size'] = 'unknown'
|
||
enhanced_info['modified'] = 'file not found'
|
||
except Exception:
|
||
enhanced_info['size'] = 'unknown'
|
||
enhanced_info['modified'] = 'unknown'
|
||
|
||
enhanced_files.append(enhanced_info)
|
||
|
||
return enhanced_files
|
||
|
||
def get_file(self, file_path: str) -> Dict[str, Any]:
|
||
"""
|
||
Retrieve a markdown file from the database.
|
||
|
||
Args:
|
||
file_path: Path to the markdown file to retrieve
|
||
|
||
Returns:
|
||
Dictionary containing file content and metadata
|
||
|
||
Raises:
|
||
FileNotFoundError: If file is not found in database
|
||
"""
|
||
if not self.db_manager:
|
||
raise ValueError("Database manager not initialized")
|
||
|
||
# Get file from database
|
||
file_data = self.db_manager.get_markdown_file(file_path)
|
||
|
||
if file_data is None:
|
||
raise FileNotFoundError(f"File '{file_path}' not found in database")
|
||
|
||
return {
|
||
'content': file_data.get('content', ''),
|
||
'metadata': {
|
||
'filename': file_data.get('filename', file_path),
|
||
'front_matter': file_data.get('front_matter'),
|
||
'size': len(file_data.get('content', '')),
|
||
'modified': file_data.get('modified')
|
||
}
|
||
}
|
||
|
||
def render_file(self, input_file: str, output_file: str, template: str = None, css: str = None,
|
||
edit_mode: bool = False, editor_theme: str = 'github', keyboard_shortcuts: bool = True) -> Dict[str, Any]:
|
||
"""
|
||
Render a markdown file to HTML with client-side rendering capabilities.
|
||
|
||
Creates an HTML file with embedded markdown content that is rendered
|
||
client-side using JavaScript markdown parser.
|
||
|
||
Args:
|
||
input_file: Path to input markdown file
|
||
output_file: Path to output HTML file
|
||
template: Template to use (optional)
|
||
css: CSS file to include (optional)
|
||
|
||
Returns:
|
||
Dictionary with rendering results and metadata
|
||
|
||
Raises:
|
||
FileNotFoundError: If input file doesn't exist
|
||
"""
|
||
import json
|
||
|
||
input_path = Path(input_file)
|
||
output_path = Path(output_file)
|
||
|
||
# Validate input file exists
|
||
if not input_path.exists():
|
||
raise FileNotFoundError(f"Input file not found: {input_path}")
|
||
|
||
# Read markdown content
|
||
markdown_content = input_path.read_text(encoding='utf-8')
|
||
|
||
# Extract title from markdown (first h1 heading)
|
||
title = self._extract_title_from_markdown(markdown_content)
|
||
|
||
# Generate HTML content
|
||
html_content = self._generate_html_template(
|
||
markdown_content=markdown_content,
|
||
title=title,
|
||
css=css,
|
||
template=template,
|
||
edit_mode=edit_mode,
|
||
editor_theme=editor_theme,
|
||
keyboard_shortcuts=keyboard_shortcuts
|
||
)
|
||
|
||
# Write HTML file
|
||
output_path.parent.mkdir(parents=True, exist_ok=True)
|
||
output_path.write_text(html_content, encoding='utf-8')
|
||
|
||
return {
|
||
'input_file': str(input_path),
|
||
'output_file': str(output_path),
|
||
'title': title,
|
||
'template': template,
|
||
'css': css
|
||
}
|
||
|
||
def _extract_title_from_markdown(self, content: str) -> str:
|
||
"""Extract title from markdown content (first h1 heading)."""
|
||
import re
|
||
|
||
# Look for first h1 heading
|
||
match = re.search(r'^#\s+(.+)$', content, re.MULTILINE)
|
||
if match:
|
||
return match.group(1).strip()
|
||
return "Markdown Document"
|
||
|
||
def _generate_html_template(self, markdown_content: str, title: str, css: str = None, template: str = None,
|
||
edit_mode: bool = False, editor_theme: str = 'github', keyboard_shortcuts: bool = True) -> str:
|
||
"""Generate HTML template with embedded markdown and client-side rendering."""
|
||
import json
|
||
from pathlib import Path
|
||
|
||
# Escape the markdown content for JavaScript
|
||
js_markdown_content = json.dumps(markdown_content)
|
||
|
||
# Handle CSS styles
|
||
css_content = ""
|
||
if css:
|
||
# Try to read CSS file content and embed it
|
||
try:
|
||
css_path = Path(css)
|
||
if css_path.exists():
|
||
css_file_content = css_path.read_text(encoding='utf-8')
|
||
css_content = f"<style>\n{css_file_content}\n</style>"
|
||
else:
|
||
# Fallback to link if file doesn't exist
|
||
css_content = f'<link rel="stylesheet" href="{css}">'
|
||
except Exception:
|
||
# Fallback to link on any error
|
||
css_content = f'<link rel="stylesheet" href="{css}">'
|
||
|
||
# Get template-specific CSS
|
||
template_css = self._get_template_css(template)
|
||
|
||
# Default CSS for basic styling
|
||
default_css = f"""
|
||
<style>
|
||
{template_css}
|
||
</style>
|
||
"""
|
||
|
||
# Add editor-specific content if in edit mode
|
||
editor_scripts = ""
|
||
editor_config = ""
|
||
editor_css = ""
|
||
body_classes = ""
|
||
|
||
if edit_mode:
|
||
body_classes = ' class="markitect-edit-mode"'
|
||
editor_css = """
|
||
<style>
|
||
/* Floating Control Panel - Slide-in from right */
|
||
.markitect-control-panel {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: -320px;
|
||
width: 320px;
|
||
background: rgba(255, 255, 255, 0.98);
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 12px 0 0 12px;
|
||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
|
||
z-index: 1000;
|
||
backdrop-filter: blur(10px);
|
||
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
}
|
||
|
||
.markitect-control-panel.expanded {
|
||
right: 0;
|
||
}
|
||
|
||
.markitect-control-panel.expanded .markitect-control-ribbon {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Control ribbon - always visible */
|
||
.markitect-control-ribbon {
|
||
position: absolute;
|
||
left: -40px;
|
||
top: 0;
|
||
width: 40px;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #2196f3, #1976d2);
|
||
border-radius: 8px 0 0 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 18px;
|
||
transition: all 0.3s ease, opacity 0.3s ease;
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.markitect-control-ribbon:hover {
|
||
background: linear-gradient(135deg, #1976d2, #1565c0);
|
||
transform: translateX(-2px);
|
||
}
|
||
|
||
/* Panel content */
|
||
.markitect-panel-header {
|
||
background: linear-gradient(135deg, #2196f3, #1976d2);
|
||
color: white;
|
||
padding: 16px 20px;
|
||
border-radius: 12px 0 0 0;
|
||
position: relative;
|
||
}
|
||
|
||
.markitect-panel-title {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
margin: 0 0 4px 0;
|
||
}
|
||
|
||
.markitect-panel-version {
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
margin: 0;
|
||
}
|
||
|
||
.markitect-panel-close {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 16px;
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
cursor: pointer;
|
||
font-size: 20px;
|
||
padding: 4px;
|
||
border-radius: 4px;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.markitect-panel-close:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.markitect-panel-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.markitect-status-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.markitect-status-indicator {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
margin-bottom: 12px;
|
||
border-left: 4px solid #4caf50;
|
||
}
|
||
|
||
.markitect-status-indicator.loading {
|
||
border-left-color: #ff9800;
|
||
}
|
||
|
||
.markitect-status-indicator.error {
|
||
border-left-color: #f44336;
|
||
background: #ffebee;
|
||
}
|
||
|
||
.markitect-status-icon {
|
||
margin-right: 8px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.markitect-status-text {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
margin: 0;
|
||
}
|
||
|
||
.markitect-controls-section {
|
||
border-top: 1px solid #e0e0e0;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.markitect-controls-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.markitect-control-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12px 16px;
|
||
background: #2196f3;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.2s;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.markitect-control-btn:hover {
|
||
background: #1976d2;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.markitect-control-btn.secondary {
|
||
background: #757575;
|
||
}
|
||
|
||
.markitect-control-btn.secondary:hover {
|
||
background: #616161;
|
||
}
|
||
|
||
.markitect-control-btn .icon {
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.markitect-save-info {
|
||
font-size: 12px;
|
||
color: #666;
|
||
background: #f5f5f5;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.markitect-error-details {
|
||
display: none;
|
||
background: #ffebee;
|
||
border: 1px solid #f44336;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.markitect-error-title {
|
||
font-weight: bold;
|
||
color: #c62828;
|
||
margin: 0 0 8px 0;
|
||
}
|
||
|
||
.markitect-error-text {
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin: 0 0 8px 0;
|
||
}
|
||
|
||
.markitect-error-help {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
/* Content editing styles */
|
||
.markitect-section-editable {
|
||
border: 1px dashed transparent;
|
||
padding: 8px;
|
||
margin: 4px 0;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.markitect-section-editable:hover {
|
||
border-color: #007acc;
|
||
background: rgba(0, 122, 204, 0.05);
|
||
}
|
||
|
||
.markitect-section-editable[data-edited] {
|
||
border-color: rgba(76, 175, 80, 0.3);
|
||
background: rgba(76, 175, 80, 0.02);
|
||
}
|
||
|
||
.markitect-section-editable[data-edited]:hover {
|
||
border-color: #4caf50;
|
||
background: rgba(76, 175, 80, 0.08);
|
||
}
|
||
|
||
.edit-mode textarea {
|
||
width: 100%;
|
||
min-height: 100px;
|
||
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
|
||
border: 2px solid #007acc;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
resize: vertical;
|
||
}
|
||
|
||
.edit-mode textarea:focus {
|
||
outline: none;
|
||
border-color: #1976d2;
|
||
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
|
||
}
|
||
|
||
/* Responsive adjustments */
|
||
@media (max-width: 768px) {
|
||
.markitect-control-panel {
|
||
width: 280px;
|
||
right: -280px;
|
||
}
|
||
}
|
||
</style>"""
|
||
|
||
editor_config = f"""
|
||
const MARKITECT_EDIT_MODE = true;
|
||
const MARKITECT_EDITOR_CONFIG = {{
|
||
theme: '{editor_theme}',
|
||
keyboardShortcuts: {str(keyboard_shortcuts).lower()},
|
||
autosave: true,
|
||
sections: true
|
||
}};"""
|
||
|
||
editor_scripts = """
|
||
class MarkitectEditor {
|
||
constructor() {
|
||
this.hasEdits = false; // Track if any edits have been made
|
||
this.initializeEditor();
|
||
this.setupKeyboardShortcuts();
|
||
}
|
||
|
||
initializeEditor() {
|
||
// Control panel is already in HTML, just make content editable
|
||
this.makeContentEditable();
|
||
|
||
// Auto-expand control panel briefly to show it's available
|
||
setTimeout(() => {
|
||
const panel = document.getElementById('markitect-control-panel');
|
||
if (panel) {
|
||
panel.classList.add('expanded');
|
||
setTimeout(() => {
|
||
panel.classList.remove('expanded');
|
||
}, 2000); // Show for 2 seconds then minimize
|
||
}
|
||
}, 1000);
|
||
}
|
||
|
||
makeContentEditable() {
|
||
const content = document.getElementById('markdown-content');
|
||
if (content) {
|
||
content.addEventListener('click', this.handleSectionClick.bind(this));
|
||
this.markSections(content);
|
||
}
|
||
}
|
||
|
||
markSections(element) {
|
||
// Clear existing section markers (except edited ones)
|
||
const existingSections = element.querySelectorAll('.markitect-section-editable:not([data-edited])');
|
||
existingSections.forEach(section => {
|
||
section.classList.remove('markitect-section-editable');
|
||
section.removeAttribute('data-section');
|
||
});
|
||
|
||
// Mark new sections (skip elements inside edited wrappers)
|
||
const sections = element.querySelectorAll('h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol');
|
||
let sectionIndex = 0;
|
||
|
||
sections.forEach((section) => {
|
||
// Skip if this element is inside an edited wrapper
|
||
if (section.closest('[data-edited]')) {
|
||
return;
|
||
}
|
||
|
||
// Skip if already marked as edited wrapper
|
||
if (section.hasAttribute('data-edited')) {
|
||
return;
|
||
}
|
||
|
||
section.classList.add('markitect-section-editable');
|
||
section.setAttribute('data-section', sectionIndex++);
|
||
});
|
||
}
|
||
|
||
handleSectionClick(event) {
|
||
const section = event.target.closest('.markitect-section-editable');
|
||
if (section && !section.querySelector('textarea')) {
|
||
this.editSection(section);
|
||
}
|
||
}
|
||
|
||
editSection(section) {
|
||
const originalContent = section.innerHTML;
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = this.htmlToMarkdown(originalContent);
|
||
textarea.className = 'edit-mode';
|
||
|
||
textarea.addEventListener('blur', () => {
|
||
this.hasEdits = true; // Mark that edits have been made
|
||
|
||
// Check if the content contains paragraph breaks that should create separate sections
|
||
const content = textarea.value.trim();
|
||
const paragraphs = content.split(/\\n\\s*\\n/).filter(p => p.trim());
|
||
|
||
if (paragraphs.length > 1) {
|
||
// Multiple paragraphs - create separate sections
|
||
const parentNode = section.parentNode;
|
||
const sectionIndex = section.getAttribute('data-section');
|
||
const nextSibling = section.nextSibling; // Remember position
|
||
|
||
// Remove the original section
|
||
parentNode.removeChild(section);
|
||
|
||
// Create separate sections for each paragraph and insert at correct position
|
||
paragraphs.forEach((paragraph, index) => {
|
||
const wrapper = document.createElement('div');
|
||
wrapper.innerHTML = marked.parse(paragraph.trim());
|
||
wrapper.classList.add('markitect-section-editable');
|
||
wrapper.setAttribute('data-section', sectionIndex + '_' + index);
|
||
wrapper.setAttribute('data-edited', 'true');
|
||
|
||
// Insert at the correct position (before nextSibling)
|
||
parentNode.insertBefore(wrapper, nextSibling);
|
||
});
|
||
} else {
|
||
// Single content block - create one wrapper
|
||
const wrapper = document.createElement('div');
|
||
wrapper.innerHTML = marked.parse(content);
|
||
wrapper.classList.add('markitect-section-editable');
|
||
wrapper.setAttribute('data-section', section.getAttribute('data-section'));
|
||
wrapper.setAttribute('data-edited', 'true');
|
||
|
||
// Replace the section with the wrapper
|
||
section.parentNode.replaceChild(wrapper, section);
|
||
}
|
||
|
||
// Re-mark sections in the entire document, but skip edited wrappers
|
||
this.markSections(document.getElementById('markdown-content'));
|
||
});
|
||
|
||
section.innerHTML = '';
|
||
section.appendChild(textarea);
|
||
textarea.focus();
|
||
}
|
||
|
||
htmlToMarkdown(html) {
|
||
// Create a temporary element to parse the HTML
|
||
const temp = document.createElement('div');
|
||
temp.innerHTML = html;
|
||
|
||
// Better HTML to Markdown conversion that preserves structure
|
||
let markdown = '';
|
||
|
||
const processNode = (node) => {
|
||
if (node.nodeType === Node.TEXT_NODE) {
|
||
return node.textContent;
|
||
}
|
||
|
||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||
const tagName = node.tagName.toLowerCase();
|
||
const childText = Array.from(node.childNodes).map(processNode).join('');
|
||
|
||
switch (tagName) {
|
||
case 'h1': return '# ' + childText;
|
||
case 'h2': return '## ' + childText;
|
||
case 'h3': return '### ' + childText;
|
||
case 'h4': return '#### ' + childText;
|
||
case 'h5': return '##### ' + childText;
|
||
case 'h6': return '###### ' + childText;
|
||
case 'p': return childText;
|
||
case 'strong': case 'b': return '**' + childText + '**';
|
||
case 'em': case 'i': return '*' + childText + '*';
|
||
case 'code': return '`' + childText + '`';
|
||
case 'blockquote': return '> ' + childText;
|
||
case 'br': return '\\n';
|
||
default: return childText;
|
||
}
|
||
}
|
||
|
||
return '';
|
||
};
|
||
|
||
// Process each child node and add appropriate spacing
|
||
Array.from(temp.childNodes).forEach((node, index) => {
|
||
const result = processNode(node);
|
||
if (result.trim()) {
|
||
if (index > 0) markdown += '\\n\\n';
|
||
markdown += result;
|
||
}
|
||
});
|
||
|
||
return markdown.trim();
|
||
}
|
||
|
||
setupKeyboardShortcuts() {
|
||
if (MARKITECT_EDITOR_CONFIG.keyboardShortcuts) {
|
||
document.addEventListener('keydown', (event) => {
|
||
if (event.ctrlKey || event.metaKey) {
|
||
switch(event.key) {
|
||
case 's':
|
||
event.preventDefault();
|
||
this.save();
|
||
break;
|
||
case 'e':
|
||
event.preventDefault();
|
||
this.togglePreview();
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
save() {
|
||
try {
|
||
// Get the current markdown content from the editor
|
||
const markdownContent = this.getMarkdownContent();
|
||
|
||
// Create filename with timestamp suffix for backup convention
|
||
const now = new Date();
|
||
const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-').replace('T', '-');
|
||
const originalFilename = window.location.pathname.split('/').pop().replace('.html', '.md');
|
||
const backupFilename = `${originalFilename.replace('.md', '')}-edited-${timestamp}.md`;
|
||
|
||
// Create and download the file
|
||
const blob = new Blob([markdownContent], { type: 'text/markdown' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = backupFilename;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
|
||
// Update status with filename convention info
|
||
const statusEl = document.getElementById('save-status');
|
||
statusEl.textContent = `Downloaded: ${backupFilename}`;
|
||
statusEl.title = 'File saved with timestamp to avoid overwriting original';
|
||
setTimeout(() => {
|
||
statusEl.textContent = 'Ready';
|
||
statusEl.title = '';
|
||
}, 5000);
|
||
|
||
} catch (error) {
|
||
document.getElementById('save-status').textContent = 'Save failed!';
|
||
console.error('Save error:', error);
|
||
setTimeout(() => {
|
||
document.getElementById('save-status').textContent = 'Ready';
|
||
}, 3000);
|
||
}
|
||
}
|
||
|
||
getMarkdownContent() {
|
||
// If no edits have been made, return the original markdown content
|
||
if (!this.hasEdits) {
|
||
return markdownContent;
|
||
}
|
||
|
||
// Reconstruct markdown content from the current state of sections
|
||
const content = document.getElementById('markdown-content');
|
||
if (!content) {
|
||
return markdownContent; // fallback to original
|
||
}
|
||
|
||
// Simple approach: get the text content and convert back to markdown
|
||
// This is a basic implementation - could be enhanced for better preservation
|
||
const sections = content.querySelectorAll('.markitect-section-editable');
|
||
let reconstructed = '';
|
||
|
||
sections.forEach(section => {{
|
||
// Handle edited wrappers differently
|
||
if (section.hasAttribute('data-edited')) {{
|
||
// For edited sections, convert the child elements back to markdown
|
||
const childElements = section.children;
|
||
for (let i = 0; i < childElements.length; i++) {{
|
||
const child = childElements[i];
|
||
const tagName = child.tagName.toLowerCase();
|
||
const text = child.textContent.trim();
|
||
|
||
if (tagName.startsWith('h')) {{
|
||
const level = parseInt(tagName.charAt(1));
|
||
reconstructed += '#'.repeat(level) + ' ' + text + '\\n\\n';
|
||
}} else if (tagName === 'p') {{
|
||
reconstructed += text + '\\n\\n';
|
||
}} else if (tagName === 'blockquote') {{
|
||
reconstructed += '> ' + text + '\\n\\n';
|
||
}} else if (tagName === 'pre') {{
|
||
reconstructed += '```\\n' + text + '\\n```\\n\\n';
|
||
}} else if (tagName === 'ul') {{
|
||
const items = child.querySelectorAll('li');
|
||
items.forEach(item => {{
|
||
reconstructed += '- ' + item.textContent.trim() + '\\n';
|
||
}});
|
||
reconstructed += '\\n';
|
||
}} else if (tagName === 'ol') {{
|
||
const items = child.querySelectorAll('li');
|
||
items.forEach((item, index) => {{
|
||
reconstructed += (index + 1) + '. ' + item.textContent.trim() + '\\n';
|
||
}});
|
||
reconstructed += '\\n';
|
||
}} else {{
|
||
reconstructed += text + '\\n\\n';
|
||
}}
|
||
}}
|
||
}} else {{
|
||
// Handle regular sections
|
||
const tagName = section.tagName.toLowerCase();
|
||
const text = section.textContent.trim();
|
||
|
||
if (tagName.startsWith('h')) {{
|
||
const level = parseInt(tagName.charAt(1));
|
||
reconstructed += '#'.repeat(level) + ' ' + text + '\\n\\n';
|
||
}} else if (tagName === 'p') {{
|
||
reconstructed += text + '\\n\\n';
|
||
}} else if (tagName === 'blockquote') {{
|
||
reconstructed += '> ' + text + '\\n\\n';
|
||
}} else if (tagName === 'pre') {{
|
||
reconstructed += '```\\n' + text + '\\n```\\n\\n';
|
||
}} else if (tagName === 'ul') {{
|
||
const items = section.querySelectorAll('li');
|
||
items.forEach(item => {{
|
||
reconstructed += '- ' + item.textContent.trim() + '\\n';
|
||
}});
|
||
reconstructed += '\\n';
|
||
}} else if (tagName === 'ol') {{
|
||
const items = section.querySelectorAll('li');
|
||
items.forEach((item, index) => {{
|
||
reconstructed += (index + 1) + '. ' + item.textContent.trim() + '\\n';
|
||
}});
|
||
reconstructed += '\\n';
|
||
}} else {{
|
||
reconstructed += text + '\\n\\n';
|
||
}}
|
||
}}
|
||
}});
|
||
|
||
return reconstructed.trim();
|
||
}
|
||
|
||
togglePreview() {
|
||
console.log('Toggle preview mode');
|
||
}
|
||
}
|
||
|
||
let markitectEditor;
|
||
|
||
// Control panel toggle functionality
|
||
function toggleControlPanel() {
|
||
const panel = document.getElementById('markitect-control-panel');
|
||
if (panel) {
|
||
panel.classList.toggle('expanded');
|
||
}
|
||
}
|
||
|
||
// Auto-close panel when clicking outside
|
||
document.addEventListener('click', function(event) {
|
||
const panel = document.getElementById('markitect-control-panel');
|
||
if (panel && panel.classList.contains('expanded')) {
|
||
if (!panel.contains(event.target)) {
|
||
panel.classList.remove('expanded');
|
||
}
|
||
}
|
||
});"""
|
||
|
||
# Edit mode status and error reporting section
|
||
edit_mode_html = ""
|
||
if edit_mode:
|
||
# Get version info for header
|
||
try:
|
||
import markitect
|
||
from pathlib import Path
|
||
import subprocess
|
||
|
||
# Get base version
|
||
version = "0.3.0" # fallback
|
||
try:
|
||
from importlib.metadata import version as get_version
|
||
version = get_version('markitect')
|
||
except:
|
||
pass
|
||
|
||
# Get git commit with timestamp and local changes info
|
||
git_info = ""
|
||
try:
|
||
repo_path = Path(__file__).parent.parent
|
||
|
||
# Get commit hash and timestamp
|
||
result = subprocess.run(['git', 'rev-parse', '--short', 'HEAD'],
|
||
capture_output=True, text=True, cwd=repo_path)
|
||
if result.returncode == 0:
|
||
commit_hash = result.stdout.strip()
|
||
|
||
# Get commit timestamp
|
||
timestamp_result = subprocess.run(['git', 'show', '-s', '--format=%ci', 'HEAD'],
|
||
capture_output=True, text=True, cwd=repo_path)
|
||
commit_time = ""
|
||
if timestamp_result.returncode == 0:
|
||
from datetime import datetime
|
||
# Parse git timestamp and format it nicely
|
||
git_time = timestamp_result.stdout.strip()
|
||
try:
|
||
dt = datetime.fromisoformat(git_time.replace(' +', '+'))
|
||
commit_time = f" ({dt.strftime('%Y-%m-%d %H:%M')})"
|
||
except:
|
||
pass
|
||
|
||
git_info = f"+{commit_hash}{commit_time}"
|
||
|
||
# Check for uncommitted changes
|
||
status_result = subprocess.run(['git', 'status', '--porcelain'],
|
||
capture_output=True, text=True, cwd=repo_path)
|
||
if status_result.returncode == 0 and status_result.stdout.strip():
|
||
# Get timestamp of most recent uncommitted change
|
||
import os
|
||
import glob
|
||
|
||
latest_change = 0
|
||
for line in status_result.stdout.strip().split('\n'):
|
||
if line.strip():
|
||
# Extract filename (skip first 3 chars which are status indicators)
|
||
filename = line[3:].strip()
|
||
try:
|
||
file_path = repo_path / filename
|
||
if file_path.exists():
|
||
mtime = os.path.getmtime(file_path)
|
||
latest_change = max(latest_change, mtime)
|
||
except:
|
||
pass
|
||
|
||
if latest_change > 0:
|
||
change_dt = datetime.fromtimestamp(latest_change)
|
||
git_info += f" including local changes until {change_dt.strftime('%Y-%m-%d %H:%M')}"
|
||
|
||
except:
|
||
pass
|
||
|
||
version_info = f"{version}{git_info}"
|
||
except:
|
||
version_info = "0.3.0"
|
||
|
||
edit_mode_html = f"""
|
||
<!-- Floating Control Panel -->
|
||
<div id="markitect-control-panel" class="markitect-control-panel">
|
||
<!-- Control Ribbon - Always Visible -->
|
||
<div class="markitect-control-ribbon" onclick="toggleControlPanel()" title="MarkiTect Editor Controls">
|
||
📝
|
||
</div>
|
||
|
||
<!-- Panel Header -->
|
||
<div class="markitect-panel-header">
|
||
<h3 class="markitect-panel-title">📝 MarkiTect Editor</h3>
|
||
<p class="markitect-panel-version">v{version_info}</p>
|
||
<button class="markitect-panel-close" onclick="toggleControlPanel()" title="Close panel">×</button>
|
||
</div>
|
||
|
||
<!-- Panel Body -->
|
||
<div class="markitect-panel-body">
|
||
<!-- Status Section -->
|
||
<div class="markitect-status-section">
|
||
<div id="status-indicator" class="markitect-status-indicator loading">
|
||
<span class="markitect-status-icon">⏳</span>
|
||
<div class="markitect-status-text" id="status-message">Loading edit capabilities...</div>
|
||
</div>
|
||
|
||
<!-- Error Details (hidden by default) -->
|
||
<div id="error-details" class="markitect-error-details">
|
||
<div class="markitect-error-title">❌ Edit Mode Failed</div>
|
||
<div class="markitect-error-text" id="error-text"></div>
|
||
<div class="markitect-error-help">
|
||
📋 Browser: <span id="browser-info"></span><br>
|
||
🔗 <a href="https://github.com/anthropics/markitect/issues/new" target="_blank" style="color: #1976d2;">Report Issue</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Controls Section -->
|
||
<div class="markitect-controls-section">
|
||
<div class="markitect-controls-grid">
|
||
<button class="markitect-control-btn" onclick="markitectEditor.save()" title="Download edited content">
|
||
<span class="icon">💾</span>
|
||
Save & Download
|
||
</button>
|
||
<button class="markitect-control-btn secondary" onclick="markitectEditor.togglePreview()" title="Toggle preview mode">
|
||
<span class="icon">👁️</span>
|
||
Preview
|
||
</button>
|
||
</div>
|
||
|
||
<div class="markitect-save-info">
|
||
<div id="save-status">Ready to save</div>
|
||
<div style="margin-top: 4px; opacity: 0.8;">Saves as: filename-edited-YYYY-MM-DD-HH-MM-SS.md</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>"""
|
||
|
||
html_template = f"""<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{title}</title>
|
||
{css_content}
|
||
{default_css}
|
||
{editor_css}
|
||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
|
||
onload="window.markitectMarkedLoaded = true"
|
||
onerror="window.markitectMarkedError = true"></script>
|
||
</head>
|
||
<body{body_classes}>
|
||
{edit_mode_html}
|
||
<div id="markdown-content"></div>
|
||
|
||
<script>
|
||
const markdownContent = {js_markdown_content};
|
||
{editor_config}
|
||
|
||
// Define editor class first (if in edit mode)
|
||
{editor_scripts if edit_mode else ''}
|
||
|
||
// Enhanced error reporting utility
|
||
function reportEditModeError(errorMsg, technicalDetails, errorType = 'error') {{
|
||
const statusDiv = document.getElementById('markitect-status');
|
||
const errorDiv = document.getElementById('error-details');
|
||
const errorText = document.getElementById('error-text');
|
||
const statusMsg = document.getElementById('status-message');
|
||
const browserInfo = document.getElementById('browser-info');
|
||
|
||
// Log to console for debugging
|
||
console.error('[MarkiTect Edit Mode Error]', errorMsg, technicalDetails);
|
||
|
||
// Create error report object
|
||
const errorReport = {{
|
||
timestamp: new Date().toISOString(),
|
||
error: errorMsg,
|
||
details: technicalDetails,
|
||
type: errorType,
|
||
userAgent: navigator.userAgent,
|
||
url: window.location.href,
|
||
markdownContent: typeof markdownContent !== 'undefined' ? markdownContent.length + ' chars' : 'unavailable'
|
||
}};
|
||
|
||
// Store error for potential reporting
|
||
if (!window.markitectErrors) window.markitectErrors = [];
|
||
window.markitectErrors.push(errorReport);
|
||
|
||
// Update UI
|
||
if (statusMsg) {{
|
||
const statusText = errorType === 'warning'
|
||
? 'Edit mode partially available - some features may not work'
|
||
: 'Edit mode unavailable - content displayed in read-only mode';
|
||
statusMsg.textContent = statusText;
|
||
}}
|
||
|
||
if (errorDiv) errorDiv.style.display = 'block';
|
||
if (errorText) {{
|
||
const fullError = errorMsg + (technicalDetails ? ' (' + technicalDetails + ')' : '');
|
||
errorText.textContent = fullError;
|
||
}}
|
||
if (browserInfo) browserInfo.textContent = navigator.userAgent.split(' ').slice(-2).join(' ');
|
||
|
||
// Auto-hide warnings after 10 seconds
|
||
if (errorType === 'warning' && errorDiv) {{
|
||
setTimeout(() => {{
|
||
errorDiv.style.display = 'none';
|
||
}}, 10000);
|
||
}}
|
||
}}
|
||
|
||
|
||
// Status update utility
|
||
function updateStatus(message, isError = false) {{
|
||
const statusMsg = document.getElementById('status-message');
|
||
const statusIndicator = document.getElementById('status-indicator');
|
||
const statusIcon = document.querySelector('.markitect-status-icon');
|
||
|
||
if (statusMsg) {{
|
||
statusMsg.textContent = message;
|
||
}}
|
||
|
||
if (statusIndicator) {{
|
||
// Remove all status classes
|
||
statusIndicator.classList.remove('loading', 'error');
|
||
|
||
if (isError) {{
|
||
statusIndicator.classList.add('error');
|
||
if (statusIcon) statusIcon.textContent = '❌';
|
||
}} else if (message.includes('Loading') || message.includes('Initializing')) {{
|
||
statusIndicator.classList.add('loading');
|
||
if (statusIcon) statusIcon.textContent = '⏳';
|
||
}} else {{
|
||
// Success state
|
||
if (statusIcon) statusIcon.textContent = '✅';
|
||
}}
|
||
}}
|
||
}}
|
||
|
||
// Always render content first (graceful degradation)
|
||
document.addEventListener('DOMContentLoaded', function() {{
|
||
updateStatus('Rendering content...');
|
||
|
||
const contentDiv = document.getElementById('markdown-content');
|
||
|
||
// Step 1: Ensure content is always displayed
|
||
if (contentDiv) {{
|
||
if (typeof marked !== 'undefined') {{
|
||
try {{
|
||
contentDiv.innerHTML = marked.parse(markdownContent);
|
||
updateStatus('Content rendered successfully ✓');
|
||
console.log('✓ Markdown rendered successfully');
|
||
}} catch (error) {{
|
||
contentDiv.innerHTML = '<p>Error rendering markdown: ' + error.message + '</p>';
|
||
updateStatus('Content rendered with errors', true);
|
||
{'reportEditModeError("Markdown parsing failed", error.message);' if edit_mode else ''}
|
||
}}
|
||
}} else {{
|
||
// Fallback: display raw markdown with basic formatting
|
||
const fallbackHtml = markdownContent
|
||
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
|
||
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
|
||
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
|
||
.replace(/\\*\\*(.*?)\\*\\*/g, '<strong>$1</strong>')
|
||
.replace(/\\*(.*?)\\*/g, '<em>$1</em>')
|
||
.replace(/^- (.*$)/gim, '<li>$1</li>')
|
||
.replace(/\\n\\n/g, '<br><br>')
|
||
.replace(/\\n/g, '<br>');
|
||
contentDiv.innerHTML = '<div style="white-space: pre-wrap;">' + fallbackHtml + '</div>';
|
||
updateStatus('Content rendered with fallback parser', true);
|
||
{'reportEditModeError("CDN library failed to load", "Using basic fallback rendering");' if edit_mode else ''}
|
||
}}
|
||
}}
|
||
|
||
// Step 2: Try to enhance with edit capabilities (if in edit mode)
|
||
{'''if (typeof MARKITECT_EDIT_MODE !== 'undefined' && MARKITECT_EDIT_MODE) {
|
||
updateStatus("Initializing edit capabilities...");
|
||
try {
|
||
updateStatus("Creating editor instance...");
|
||
markitectEditor = new MarkitectEditor();
|
||
updateStatus("✓ Edit mode active - click any section to edit");
|
||
console.log("✓ Edit mode initialized successfully");
|
||
} catch (error) {
|
||
updateStatus("Edit mode failed to initialize", true);
|
||
reportEditModeError("Edit mode initialization failed", error.message);
|
||
console.error("Edit mode error:", error);
|
||
}
|
||
}''' if edit_mode else ''}
|
||
}});
|
||
|
||
// Handle CDN loading errors
|
||
window.addEventListener('load', function() {{
|
||
if (window.markitectMarkedError) {{
|
||
{'reportEditModeError("CDN library failed to load", "Network or firewall blocking marked.js");' if edit_mode else ''}
|
||
}}
|
||
}});
|
||
|
||
// Safety timeout for edit mode initialization
|
||
{'''setTimeout(function() {
|
||
const statusMsg = document.getElementById("status-message");
|
||
if (statusMsg && (statusMsg.textContent.includes("Loading") || statusMsg.textContent.includes("Initializing"))) {
|
||
updateStatus("Edit mode initialization timeout", true);
|
||
reportEditModeError("Edit mode took too long to initialize", "Possible JavaScript performance issue");
|
||
}
|
||
}, 5000);''' if edit_mode else ''} // 5 second timeout
|
||
</script>
|
||
</body>
|
||
</html>"""
|
||
|
||
return html_template
|
||
|
||
def _get_template_css(self, template: str = None) -> str:
|
||
"""Get CSS styles for the specified template theme."""
|
||
if template == 'github':
|
||
return """
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
line-height: 1.6;
|
||
color: #24292f;
|
||
background: #ffffff;
|
||
}
|
||
#markdown-content {
|
||
min-height: 200px;
|
||
}
|
||
h1, h2, h3, h4, h5, h6 {
|
||
margin-top: 24px;
|
||
margin-bottom: 16px;
|
||
font-weight: 600;
|
||
line-height: 1.25;
|
||
}
|
||
h1 { border-bottom: 1px solid #d0d7de; padding-bottom: .3em; }
|
||
h2 { border-bottom: 1px solid #d0d7de; padding-bottom: .3em; }
|
||
pre {
|
||
background: #f6f8fa;
|
||
padding: 16px;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
border: 1px solid #d0d7de;
|
||
}
|
||
code {
|
||
background: rgba(175,184,193,0.2);
|
||
padding: 0.2em 0.4em;
|
||
border-radius: 6px;
|
||
font-size: 0.85em;
|
||
}
|
||
pre code {
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
blockquote {
|
||
border-left: 4px solid #d0d7de;
|
||
margin: 0 0 16px 0;
|
||
padding: 0 1em;
|
||
color: #656d76;
|
||
}
|
||
"""
|
||
elif template == 'dark':
|
||
return """
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
line-height: 1.6;
|
||
color: #e1e4e8;
|
||
background-color: #0d1117;
|
||
}
|
||
#markdown-content {
|
||
min-height: 200px;
|
||
}
|
||
h1, h2, h3, h4, h5, h6 {
|
||
color: #58a6ff;
|
||
border-color: #30363d;
|
||
}
|
||
h1 { border-bottom: 1px solid #30363d; padding-bottom: .3em; }
|
||
h2 { border-bottom: 1px solid #30363d; padding-bottom: .3em; }
|
||
pre {
|
||
background-color: #161b22;
|
||
padding: 1rem;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
border: 1px solid #30363d;
|
||
}
|
||
code {
|
||
background: #6e768166;
|
||
padding: 0.2em 0.4em;
|
||
border-radius: 3px;
|
||
font-size: 0.9em;
|
||
color: #e1e4e8;
|
||
}
|
||
pre code {
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
blockquote {
|
||
border-left: 4px solid #58a6ff;
|
||
margin: 0;
|
||
padding-left: 1rem;
|
||
color: #8b949e;
|
||
}
|
||
a { color: #58a6ff; }
|
||
a:hover { color: #79c0ff; }
|
||
"""
|
||
elif template == 'academic':
|
||
return """
|
||
body {
|
||
font-family: Georgia, 'Times New Roman', serif;
|
||
max-width: 650px;
|
||
margin: 0 auto;
|
||
padding: 1rem;
|
||
line-height: 1.8;
|
||
color: #333;
|
||
background: #fff;
|
||
}
|
||
#markdown-content {
|
||
min-height: 200px;
|
||
}
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||
margin-top: 2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
pre {
|
||
background: #f8f8f8;
|
||
padding: 1rem;
|
||
border-left: 4px solid #ccc;
|
||
overflow-x: auto;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
code {
|
||
background: #f0f0f0;
|
||
padding: 0.1em 0.3em;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.9em;
|
||
}
|
||
pre code {
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
blockquote {
|
||
border-left: 4px solid #ddd;
|
||
margin: 0;
|
||
padding-left: 1rem;
|
||
color: #666;
|
||
font-style: italic;
|
||
}
|
||
"""
|
||
else: # basic or default
|
||
return """
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
}
|
||
#markdown-content {
|
||
min-height: 200px;
|
||
}
|
||
pre {
|
||
background: #f6f8fa;
|
||
padding: 1rem;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
}
|
||
code {
|
||
background: #f6f8fa;
|
||
padding: 0.2em 0.4em;
|
||
border-radius: 3px;
|
||
font-size: 0.9em;
|
||
}
|
||
pre code {
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
blockquote {
|
||
border-left: 4px solid #dfe2e5;
|
||
margin: 0;
|
||
padding-left: 1rem;
|
||
color: #6a737d;
|
||
}
|
||
""" |