diff --git a/markitect/document_manager.py b/markitect/document_manager.py
index 9a4cb352..36be6e2c 100644
--- a/markitect/document_manager.py
+++ b/markitect/document_manager.py
@@ -210,4 +210,508 @@ class DocumentManager:
with open(cache_path, 'w', encoding='utf-8') as f:
json.dump(ast, f, indent=2, ensure_ascii=False)
- return cache_path
\ No newline at end of file
+ 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 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
+
+ # 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""
+ else:
+ # Fallback to link if file doesn't exist
+ css_content = f''
+ except Exception:
+ # Fallback to link on any error
+ css_content = f''
+
+ # Get template-specific CSS
+ template_css = self._get_template_css(template)
+
+ # Default CSS for basic styling
+ default_css = f"""
+
+ """
+
+ # 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 = """
+ """
+
+ 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.initializeEditor();
+ this.setupKeyboardShortcuts();
+ }
+
+ initializeEditor() {
+ const header = document.createElement('div');
+ header.className = 'markitect-floating-header';
+ header.innerHTML = `
+
+
+ Ready
+ `;
+ document.body.insertBefore(header, document.body.firstChild);
+
+ this.makeContentEditable();
+ }
+
+ makeContentEditable() {
+ const content = document.getElementById('markdown-content');
+ if (content) {
+ content.addEventListener('click', this.handleSectionClick.bind(this));
+ this.markSections(content);
+ }
+ }
+
+ markSections(element) {
+ const sections = element.querySelectorAll('h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol');
+ sections.forEach((section, index) => {
+ section.classList.add('markitect-section-editable');
+ section.setAttribute('data-section', index);
+ });
+ }
+
+ 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', () => {
+ section.innerHTML = marked.parse(textarea.value);
+ this.markSections(section.parentElement);
+ });
+
+ section.innerHTML = '';
+ section.appendChild(textarea);
+ textarea.focus();
+ }
+
+ htmlToMarkdown(html) {
+ // Simple HTML to Markdown conversion
+ return html.replace(/<[^>]*>/g, '').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() {
+ document.getElementById('save-status').textContent = 'Saved!';
+ setTimeout(() => {
+ document.getElementById('save-status').textContent = 'Ready';
+ }, 2000);
+ }
+
+ togglePreview() {
+ console.log('Toggle preview mode');
+ }
+ }
+
+ let markitectEditor;"""
+
+ html_template = f"""
+
+
+
+
+ {title}
+ {css_content}
+ {default_css}
+ {editor_css}
+
+
+
+
+
+
+
+