tegwick
57c80e6ac3
* Add --edit flag to md-render command enabling client-side editing * Add --editor-theme and --keyboard-shortcuts options * Implement comprehensive MarkitectEditor JavaScript class * Add floating header with change tracking and save functionality * Support section-based editing with live preview comparison * Include CSS styling for editing interface components * Maintain full backward compatibility without --edit flag * Add extensive test coverage (45 tests across 3 test files) * Support all template types: basic, github, academic, dark * Enable responsive design and mobile compatibility TDD8 Workflow: ISSUE→TEST→RED→GREEN→REFACTOR→DOCUMENT→REFINE→PUBLISH 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
841 lines
31 KiB
Python
841 lines
31 KiB
Python
"""
|
|
Markdown commands plugin for MarkiTect.
|
|
|
|
This plugin provides the core markdown file operations with md- prefixes,
|
|
replacing the legacy unprefixed commands for better namespace consistency.
|
|
"""
|
|
|
|
import click
|
|
import json
|
|
import tempfile
|
|
from pathlib import Path
|
|
from typing import Dict, Any
|
|
|
|
from markitect.plugins.base import CommandPlugin, PluginMetadata, PluginType
|
|
from markitect.plugins.decorators import register_plugin
|
|
from markitect.document_manager import DocumentManager
|
|
from markitect.serializer import ASTSerializer
|
|
# Simple helper function - avoiding circular imports
|
|
def get_default_format(available_formats=['table', 'json', 'yaml', 'simple'], fallback='simple'):
|
|
"""Get the default output format - simplified version for plugin."""
|
|
return fallback
|
|
|
|
|
|
@register_plugin("markdown_commands")
|
|
class MarkdownCommandsPlugin(CommandPlugin):
|
|
"""Plugin providing core markdown file operations."""
|
|
|
|
@property
|
|
def metadata(self) -> PluginMetadata:
|
|
return PluginMetadata(
|
|
name="markdown_commands",
|
|
version="1.0.0",
|
|
description="Core markdown file operations (ingest, get, list) with md- prefixes",
|
|
author="MarkiTect Core Team",
|
|
plugin_type=PluginType.COMMAND,
|
|
markitect_version=">=0.1.0"
|
|
)
|
|
|
|
def get_commands(self) -> Dict[str, Any]:
|
|
"""Return the markdown commands with md- prefixes."""
|
|
return {
|
|
'md-ingest': md_ingest_command,
|
|
'md-get': md_get_command,
|
|
'md-list': md_list_command,
|
|
'md-render': md_render_command
|
|
}
|
|
|
|
|
|
# Define commands as standalone functions
|
|
|
|
@click.command()
|
|
@click.argument('file_path', type=click.Path(exists=True))
|
|
@click.pass_context
|
|
def md_ingest_command(ctx, file_path):
|
|
"""
|
|
Process and store a markdown file.
|
|
|
|
Ingests a markdown file into the MarkiTect system, parsing its content,
|
|
extracting front matter, generating AST cache, and storing metadata
|
|
in the database.
|
|
|
|
FILE_PATH: Path to the markdown file to process
|
|
|
|
Examples:
|
|
markitect md-ingest README.md
|
|
markitect md-ingest docs/guide.md
|
|
"""
|
|
config = ctx.obj or {}
|
|
try:
|
|
if config.get('verbose', False):
|
|
click.echo(f"Processing file: {file_path}")
|
|
|
|
# Initialize document manager with database manager
|
|
doc_manager = DocumentManager(config.get('db_manager'))
|
|
|
|
# Process the file
|
|
result = doc_manager.ingest_file(file_path)
|
|
|
|
if config.get('verbose', False):
|
|
click.echo(f"Processing results:")
|
|
click.echo(f" File: {result['metadata']['filename']}")
|
|
click.echo(f" AST nodes: {len(result['ast'])} nodes")
|
|
click.echo(f" Cache file: {result['ast_cache_path']}")
|
|
click.echo(f" Parse time: {result['parse_time']:.2f}s")
|
|
click.echo(f" Cache time: {result['cache_time']:.2f}s")
|
|
|
|
click.echo(f"✓ Successfully ingested: {Path(file_path).name}")
|
|
|
|
except Exception as e:
|
|
click.echo(f"Error processing file: {e}", err=True)
|
|
raise click.Abort()
|
|
|
|
|
|
@click.command()
|
|
@click.argument('file_path', type=str)
|
|
@click.option('--output', '-o', type=click.Path(), help='Output file path (default: stdout)')
|
|
@click.pass_context
|
|
def md_get_command(ctx, file_path, output):
|
|
"""
|
|
Retrieve and output a processed markdown file.
|
|
|
|
Loads the file from the database and AST cache, then serializes it back
|
|
to markdown format. Supports outputting to file or stdout.
|
|
|
|
FILE_PATH: Name of the file to retrieve
|
|
|
|
Examples:
|
|
markitect md-get README.md
|
|
markitect md-get docs/guide.md --output modified_guide.md
|
|
"""
|
|
config = ctx.obj or {}
|
|
try:
|
|
if config.get('verbose', False):
|
|
click.echo(f"Retrieving file: {file_path}")
|
|
|
|
db_manager = config.get('db_manager')
|
|
|
|
# Get file information from database
|
|
file_info = db_manager.get_markdown_file(file_path)
|
|
if not file_info:
|
|
click.echo(f"File not found in database: {file_path}", err=True)
|
|
click.echo("Use 'markitect md-ingest' to process the file first.", err=True)
|
|
raise click.Abort()
|
|
|
|
# Load AST from cache
|
|
cache_filename = f"{file_path}.ast.json"
|
|
cache_path = Path('.ast_cache') / cache_filename
|
|
|
|
if not cache_path.exists():
|
|
click.echo(f"AST cache not found: {cache_path}", err=True)
|
|
click.echo("Try re-ingesting the file to regenerate cache.", err=True)
|
|
raise click.Abort()
|
|
|
|
# Read AST from cache
|
|
import json
|
|
with open(cache_path, 'r', encoding='utf-8') as f:
|
|
ast = json.load(f)
|
|
|
|
# Parse front matter from database
|
|
front_matter = None
|
|
if file_info.get('front_matter'):
|
|
try:
|
|
front_matter = eval(file_info['front_matter'])
|
|
except (ValueError, TypeError, SyntaxError):
|
|
if config.get('verbose', False):
|
|
click.echo("Warning: Could not parse front matter", err=True)
|
|
|
|
# Serialize AST back to markdown
|
|
serializer = ASTSerializer()
|
|
markdown_content = serializer.serialize_to_markdown(ast, front_matter)
|
|
|
|
# Output to file or stdout
|
|
if output:
|
|
output_path = Path(output)
|
|
output_path.parent.mkdir(parents=True, exist_ok=True)
|
|
with open(output_path, 'w', encoding='utf-8') as f:
|
|
f.write(markdown_content)
|
|
click.echo(f"✓ File written to: {output_path}")
|
|
else:
|
|
click.echo(markdown_content)
|
|
|
|
if config.get('verbose', False):
|
|
click.echo(f"Retrieved {len(ast)} AST tokens", err=True)
|
|
|
|
except Exception as e:
|
|
click.echo(f"Error retrieving file: {e}", err=True)
|
|
raise click.Abort()
|
|
|
|
|
|
@click.command()
|
|
@click.option('--format', 'output_format', type=click.Choice(['table', 'json', 'yaml', 'simple']),
|
|
default=lambda: get_default_format(['table', 'json', 'yaml', 'simple']), help='Output format')
|
|
@click.option('--names-only', is_flag=True, help='Show only filenames (no metadata)')
|
|
@click.pass_context
|
|
def md_list_command(ctx, output_format, names_only):
|
|
"""
|
|
List all stored markdown files and their status.
|
|
|
|
Shows all markdown files that have been processed and stored
|
|
in the MarkiTect database with their basic metadata.
|
|
|
|
Examples:
|
|
markitect md-list
|
|
markitect md-list --format table
|
|
markitect md-list --format json
|
|
markitect md-list --names-only
|
|
"""
|
|
config = ctx.obj or {}
|
|
try:
|
|
if config.get('verbose', False):
|
|
click.echo("Retrieving all stored files...")
|
|
|
|
db_manager = config.get('db_manager')
|
|
files = db_manager.list_markdown_files()
|
|
|
|
if not files:
|
|
click.echo("No files found in database.")
|
|
click.echo("Use 'markitect md-ingest <file>' to add files.")
|
|
return
|
|
|
|
# Handle names-only option
|
|
if names_only:
|
|
for file_info in files:
|
|
click.echo(file_info['filename'])
|
|
return
|
|
|
|
# Handle different output formats
|
|
if output_format == 'simple':
|
|
# Original emoji format
|
|
click.echo(f"Found {len(files)} file(s):")
|
|
click.echo()
|
|
|
|
for file_info in files:
|
|
click.echo(f"📄 {file_info['filename']}")
|
|
if config.get('verbose', False):
|
|
click.echo(f" Created: {file_info['created_at']}")
|
|
if file_info.get('front_matter'):
|
|
try:
|
|
front_matter = eval(file_info['front_matter'])
|
|
if front_matter:
|
|
click.echo(f" Front matter: {list(front_matter.keys())}")
|
|
except (ValueError, TypeError, SyntaxError):
|
|
click.echo(f" Front matter: (parsing error)")
|
|
click.echo()
|
|
else:
|
|
# Use structured format (table, json, yaml)
|
|
if output_format == 'json':
|
|
import json
|
|
click.echo(json.dumps(files, indent=2, default=str))
|
|
elif output_format == 'yaml':
|
|
import yaml
|
|
click.echo(yaml.dump(files, default_flow_style=False))
|
|
else: # table format (default)
|
|
# Simple table output
|
|
click.echo(f"Found {len(files)} file(s):")
|
|
click.echo(f"{'Filename':<30} {'Created':<20}")
|
|
click.echo("-" * 50)
|
|
for file_info in files:
|
|
click.echo(f"{file_info['filename']:<30} {file_info['created_at']:<20}")
|
|
|
|
except Exception as e:
|
|
click.echo(f"Error listing files: {e}", err=True)
|
|
raise click.Abort()
|
|
|
|
|
|
@click.command()
|
|
@click.argument('input_file', type=click.Path(exists=True))
|
|
@click.option('--output', '-o', type=click.Path(), help='Output HTML file path (defaults to input filename with .html extension)')
|
|
@click.option('--template', type=click.Choice(['basic', 'github', 'academic', 'dark']),
|
|
default='basic', help='HTML template: basic (default), github, academic, or dark theme')
|
|
@click.option('--css', type=click.Path(exists=True), help='Custom CSS file to inject into the template')
|
|
@click.option('--edit', is_flag=True, help='Enable instant markdown editing capabilities in the generated HTML')
|
|
@click.option('--editor-theme', type=click.Choice(['light', 'dark']), default='light',
|
|
help='Editor interface theme (light or dark)')
|
|
@click.option('--keyboard-shortcuts', is_flag=True, help='Enable keyboard shortcuts for editing actions')
|
|
@click.pass_context
|
|
def md_render_command(ctx, input_file, output, template, css, edit, editor_theme, keyboard_shortcuts):
|
|
"""
|
|
Generate HTML with client-side JavaScript markdown rendering.
|
|
|
|
Creates a self-contained HTML file that includes the markdown content
|
|
as JavaScript data and renders it in the browser using client-side
|
|
markdown parsing with marked.js.
|
|
|
|
The generated HTML includes:
|
|
• Embedded markdown content as JavaScript payload
|
|
• Client-side rendering with marked.js from CDN
|
|
• YAML front matter support and metadata extraction
|
|
• Multiple responsive template options
|
|
• Custom CSS injection capability
|
|
• Optional instant editing capabilities with --edit flag
|
|
• Graceful fallback if JavaScript fails
|
|
|
|
INPUT_FILE: Path to the markdown file to render
|
|
|
|
Available Templates:
|
|
• basic (default) - Clean, minimal design with system fonts
|
|
• github - GitHub-style appearance with heading underlines
|
|
• academic - Academic paper style with serif fonts and justified text
|
|
• dark - GitHub dark mode inspired theme with dark background
|
|
|
|
Examples:
|
|
# Basic usage with default template
|
|
markitect md-render README.md
|
|
|
|
# Specify output file and template
|
|
markitect md-render README.md --output index.html --template github
|
|
|
|
# Dark theme for night reading
|
|
markitect md-render docs/guide.md --template dark
|
|
|
|
# Academic paper with custom styling
|
|
markitect md-render paper.md --template academic --css custom.css
|
|
|
|
# Enable instant editing capabilities
|
|
markitect md-render README.md --edit
|
|
|
|
# Editing with dark editor theme and keyboard shortcuts
|
|
markitect md-render docs/guide.md --edit --editor-theme dark --keyboard-shortcuts
|
|
|
|
# Front matter will be parsed and available to JavaScript
|
|
# Files with YAML front matter are fully supported
|
|
"""
|
|
config = ctx.obj or {}
|
|
try:
|
|
if config.get('verbose', False):
|
|
click.echo(f"Rendering file: {input_file}")
|
|
|
|
# Read markdown file
|
|
input_path = Path(input_file)
|
|
markdown_content = input_path.read_text(encoding='utf-8')
|
|
|
|
# Extract front matter if present
|
|
front_matter = {}
|
|
if markdown_content.startswith('---\n'):
|
|
parts = markdown_content.split('---\n', 2)
|
|
if len(parts) >= 3:
|
|
try:
|
|
import yaml
|
|
front_matter = yaml.safe_load(parts[1]) or {}
|
|
markdown_content = parts[2]
|
|
except ImportError:
|
|
# Fallback without yaml parsing
|
|
pass
|
|
|
|
# Generate title from first heading or filename
|
|
title = front_matter.get('title', input_path.stem)
|
|
lines = markdown_content.strip().split('\n')
|
|
for line in lines:
|
|
if line.startswith('# '):
|
|
title = line[2:].strip()
|
|
break
|
|
|
|
# Load custom CSS if provided
|
|
css_content = ""
|
|
if css:
|
|
css_path = Path(css)
|
|
css_content = css_path.read_text(encoding='utf-8')
|
|
|
|
# Generate HTML with embedded markdown
|
|
html_content = generate_html_with_embedded_markdown(
|
|
markdown_content, title, template, css_content, front_matter, edit, editor_theme, keyboard_shortcuts
|
|
)
|
|
|
|
# Determine output path
|
|
if not output:
|
|
output = input_path.with_suffix('.html')
|
|
else:
|
|
output = Path(output)
|
|
|
|
# Ensure output directory exists
|
|
output.parent.mkdir(parents=True, exist_ok=True)
|
|
|
|
# Write HTML file
|
|
output.write_text(html_content, encoding='utf-8')
|
|
|
|
click.echo(f"✓ HTML generated: {output}")
|
|
if config.get('verbose', False):
|
|
click.echo(f" Template: {template}")
|
|
click.echo(f" Title: {title}")
|
|
if css:
|
|
click.echo(f" Custom CSS: {css}")
|
|
|
|
except Exception as e:
|
|
click.echo(f"Error rendering file: {e}", err=True)
|
|
raise click.Abort()
|
|
|
|
|
|
# Template definitions for cleaner code organization
|
|
TEMPLATE_STYLES = {
|
|
'basic': {
|
|
'body_color': '#333',
|
|
'body_bg': '',
|
|
'heading_color': '#2c3e50',
|
|
'heading_border': '',
|
|
'code_bg': '#f4f4f4',
|
|
'code_border': '',
|
|
'blockquote_border': '#ddd',
|
|
'blockquote_color': '#666',
|
|
'font_family': '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Helvetica\', \'Arial\', sans-serif',
|
|
'max_width': '800px',
|
|
'text_align': ''
|
|
},
|
|
'github': {
|
|
'body_color': '#24292e',
|
|
'body_bg': 'background-color: #ffffff;',
|
|
'heading_color': '#1f2328',
|
|
'heading_border': 'border-bottom: 1px solid #d0d7de; padding-bottom: 0.3em;',
|
|
'code_bg': '#f4f4f4',
|
|
'code_border': '',
|
|
'blockquote_border': '#ddd',
|
|
'blockquote_color': '#666',
|
|
'font_family': '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Helvetica\', \'Arial\', sans-serif',
|
|
'max_width': '800px',
|
|
'text_align': ''
|
|
},
|
|
'academic': {
|
|
'body_color': '#333',
|
|
'body_bg': '',
|
|
'heading_color': '#2c3e50',
|
|
'heading_border': '',
|
|
'code_bg': '#f4f4f4',
|
|
'code_border': '',
|
|
'blockquote_border': '#ddd',
|
|
'blockquote_color': '#666',
|
|
'font_family': '"Times New Roman", Times, serif',
|
|
'max_width': '900px',
|
|
'text_align': 'text-align: justify;'
|
|
},
|
|
'dark': {
|
|
'body_color': '#e1e4e8',
|
|
'body_bg': 'background-color: #0d1117;',
|
|
'heading_color': '#58a6ff',
|
|
'heading_border': 'border-bottom: 1px solid #21262d; padding-bottom: 0.3em;',
|
|
'code_bg': '#161b22',
|
|
'code_border': 'border: 1px solid #21262d;',
|
|
'blockquote_border': '#58a6ff',
|
|
'blockquote_color': '#8b949e',
|
|
'font_family': '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Helvetica\', \'Arial\', sans-serif',
|
|
'max_width': '800px',
|
|
'text_align': ''
|
|
}
|
|
}
|
|
|
|
def generate_html_with_embedded_markdown(markdown_content, title, template, css_content, front_matter, edit=False, editor_theme='light', keyboard_shortcuts=False):
|
|
"""Generate HTML with embedded markdown content for client-side rendering.
|
|
|
|
Args:
|
|
markdown_content: The markdown content to embed
|
|
title: Page title
|
|
template: Template name (basic, github, academic, dark)
|
|
css_content: Custom CSS content to inject
|
|
front_matter: YAML front matter dictionary
|
|
edit: Enable editing capabilities
|
|
editor_theme: Editor theme (light or dark)
|
|
keyboard_shortcuts: Enable keyboard shortcuts
|
|
"""
|
|
|
|
# Get template styles or default to basic
|
|
styles = TEMPLATE_STYLES.get(template, TEMPLATE_STYLES['basic'])
|
|
|
|
# Build editor styles if editing is enabled
|
|
editor_styles = ""
|
|
if edit:
|
|
editor_styles = '''
|
|
/* Markitect Editor Styles */
|
|
.markitect-floating-header {{
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(0, 123, 255, 0.9);
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
|
z-index: 1000;
|
|
display: none;
|
|
}}
|
|
.markitect-floating-header.show {{
|
|
display: block;
|
|
}}
|
|
.markitect-section-editable {{
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}}
|
|
.markitect-section-editable:hover {{
|
|
background-color: rgba(0, 123, 255, 0.1);
|
|
}}
|
|
.markitect-section-modified {{
|
|
border-left: 4px solid #007bff;
|
|
padding-left: 16px;
|
|
}}
|
|
.markitect-edit-interface {{
|
|
margin: 15px 0;
|
|
padding: 20px;
|
|
border: 2px dashed #007bff;
|
|
border-radius: 8px;
|
|
background: #f8f9fa;
|
|
}}
|
|
.markitect-edit-textarea {{
|
|
width: 100%;
|
|
min-height: 150px;
|
|
font-family: 'Courier New', Consolas, monospace;
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
resize: vertical;
|
|
}}
|
|
.markitect-edit-actions {{
|
|
margin-top: 10px;
|
|
text-align: right;
|
|
}}
|
|
.markitect-edit-btn {{
|
|
margin-left: 10px;
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}}
|
|
.markitect-btn-apply {{
|
|
background-color: #28a745;
|
|
color: white;
|
|
}}
|
|
.markitect-btn-reset {{
|
|
background-color: #ffc107;
|
|
color: #212529;
|
|
}}
|
|
.markitect-btn-cancel {{
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}}
|
|
.markitect-btn-save {{
|
|
background-color: #007bff;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
margin-left: 15px;
|
|
}}
|
|
'''
|
|
|
|
if editor_theme == 'dark':
|
|
editor_styles += '''
|
|
/* Dark theme overrides */
|
|
.markitect-edit-interface {{
|
|
background: #2d2d2d;
|
|
border-color: #666;
|
|
}}
|
|
.markitect-edit-textarea {{
|
|
background: #1a1a1a;
|
|
color: #f0f0f0;
|
|
border-color: #666;
|
|
}}
|
|
'''
|
|
|
|
# HTML template with style variables
|
|
html_template = '''<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{title}</title>
|
|
<style>
|
|
body {{
|
|
font-family: {font_family};
|
|
line-height: 1.6;
|
|
max-width: {max_width};
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
color: {body_color};
|
|
{body_bg}
|
|
{text_align}
|
|
}}
|
|
#markdown-content {{
|
|
margin: 0;
|
|
}}
|
|
h1, h2, h3, h4, h5, h6 {{
|
|
color: {heading_color};
|
|
{heading_border}
|
|
}}
|
|
pre {{
|
|
background-color: {code_bg};
|
|
{code_border}
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
}}
|
|
code {{
|
|
background-color: {code_bg};
|
|
{code_border}
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
}}
|
|
blockquote {{
|
|
border-left: 4px solid {blockquote_border};
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
color: {blockquote_color};
|
|
}}
|
|
{css_content}
|
|
{editor_styles}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="markdown-content"></div>
|
|
{editor_html}
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script>
|
|
// Embedded markdown payload
|
|
const markdownContent = {markdown_json};
|
|
const frontMatter = {front_matter_json};
|
|
{editor_config}
|
|
|
|
// Render markdown on page load
|
|
document.addEventListener('DOMContentLoaded', function() {{
|
|
if (typeof marked !== 'undefined') {{
|
|
document.getElementById('markdown-content').innerHTML = marked.parse(markdownContent);
|
|
}} else {{
|
|
// Fallback if marked.js fails to load
|
|
document.getElementById('markdown-content').innerHTML =
|
|
'<pre>' + markdownContent.replace(/</g, '<').replace(/>/g, '>') + '</pre>';
|
|
}}
|
|
}});
|
|
</script>
|
|
{editor_scripts}
|
|
</body>
|
|
</html>'''
|
|
|
|
# Build editor HTML components if editing is enabled
|
|
editor_html = ""
|
|
editor_scripts = ""
|
|
editor_config = ""
|
|
|
|
if edit:
|
|
editor_config = '''
|
|
// Editor configuration
|
|
window.MARKITECT_EDIT_MODE = true;
|
|
window.MARKITECT_EDITOR_CONFIG = {
|
|
theme: \'''' + editor_theme + '''\',
|
|
keyboardShortcuts: ''' + ('true' if keyboard_shortcuts else 'false') + '''
|
|
};'''
|
|
editor_html = '''
|
|
<!-- Floating header for change tracking -->
|
|
<div id="markitect-floating-header" class="markitect-floating-header">
|
|
<span id="markitect-change-count">0 sections changed</span>
|
|
<button class="markitect-edit-btn markitect-btn-save" onclick="MarkitectEditor.saveDocument()">Save Document</button>
|
|
</div>
|
|
'''
|
|
|
|
# Basic JavaScript editor implementation
|
|
editor_scripts = '''
|
|
<script>
|
|
// Basic Markitect Editor Implementation
|
|
class MarkitectEditor {
|
|
constructor(markdownContent, containerId) {
|
|
this.originalContent = markdownContent;
|
|
this.modifiedSections = new Map();
|
|
this.container = document.getElementById(containerId);
|
|
this.changeCount = 0;
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.setupSectionHandlers();
|
|
this.createFloatingHeader();
|
|
}
|
|
|
|
setupSectionHandlers() {
|
|
// Add click handlers to rendered sections
|
|
const sections = this.container.querySelectorAll('h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre');
|
|
sections.forEach((section, index) => {
|
|
section.classList.add('markitect-section-editable');
|
|
section.setAttribute('data-section-id', `section-${index}`);
|
|
section.addEventListener('click', (e) => this.enableSectionEditing(e.target));
|
|
});
|
|
}
|
|
|
|
createFloatingHeader() {
|
|
this.floatingHeader = document.getElementById('markitect-floating-header');
|
|
this.changeCountElement = document.getElementById('markitect-change-count');
|
|
}
|
|
|
|
enableSectionEditing(section) {
|
|
// Prevent multiple edit interfaces
|
|
if (document.querySelector('.markitect-edit-interface')) {
|
|
return;
|
|
}
|
|
|
|
const sectionId = section.getAttribute('data-section-id');
|
|
const originalHtml = section.outerHTML;
|
|
|
|
// Extract approximate markdown for this section
|
|
let sectionMarkdown = this.extractSectionMarkdown(section);
|
|
|
|
// Create edit interface
|
|
const editInterface = document.createElement('div');
|
|
editInterface.className = 'markitect-edit-interface';
|
|
editInterface.innerHTML = `
|
|
<div style="margin-bottom: 10px; font-weight: bold;">Editing ${section.tagName.toLowerCase()}:</div>
|
|
<div style="margin-bottom: 10px; padding: 10px; background: #e9ecef; border-radius: 4px;">
|
|
${originalHtml}
|
|
</div>
|
|
<textarea class="markitect-edit-textarea" placeholder="Enter markdown for this section...">${sectionMarkdown}</textarea>
|
|
<div class="markitect-edit-actions">
|
|
<button class="markitect-edit-btn markitect-btn-cancel" onclick="MarkitectEditor.cancelEdit('${sectionId}')">Cancel</button>
|
|
<button class="markitect-edit-btn markitect-btn-reset" onclick="MarkitectEditor.resetSection('${sectionId}')">Reset</button>
|
|
<button class="markitect-edit-btn markitect-btn-apply" onclick="MarkitectEditor.applyChanges('${sectionId}')">Apply</button>
|
|
</div>
|
|
`;
|
|
|
|
// Insert edit interface after the section
|
|
section.parentNode.insertBefore(editInterface, section.nextSibling);
|
|
editInterface.querySelector('textarea').focus();
|
|
}
|
|
|
|
extractSectionMarkdown(section) {
|
|
// Basic extraction - convert HTML back to approximate markdown
|
|
const tagName = section.tagName.toLowerCase();
|
|
let text = section.textContent || section.innerText || '';
|
|
|
|
switch(tagName) {
|
|
case 'h1': return `# ${text}`;
|
|
case 'h2': return `## ${text}`;
|
|
case 'h3': return `### ${text}`;
|
|
case 'h4': return `#### ${text}`;
|
|
case 'h5': return `##### ${text}`;
|
|
case 'h6': return `###### ${text}`;
|
|
case 'p': return text;
|
|
case 'blockquote': return `> ${text}`;
|
|
case 'pre': return `\\`\\`\\`\\n${text}\\n\\`\\`\\``;
|
|
default: return text;
|
|
}
|
|
}
|
|
|
|
static applyChanges(sectionId) {
|
|
const editInterface = document.querySelector('.markitect-edit-interface');
|
|
const textarea = editInterface.querySelector('textarea');
|
|
const newMarkdown = textarea.value;
|
|
|
|
// Find the original section
|
|
const section = document.querySelector(`[data-section-id="${sectionId}"]`);
|
|
|
|
// Parse new markdown and update section
|
|
if (typeof marked !== 'undefined') {
|
|
const newHtml = marked.parse(newMarkdown);
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = newHtml;
|
|
|
|
// Replace section content
|
|
if (tempDiv.firstElementChild) {
|
|
const newSection = tempDiv.firstElementChild;
|
|
newSection.classList.add('markitect-section-editable', 'markitect-section-modified');
|
|
newSection.setAttribute('data-section-id', sectionId);
|
|
newSection.addEventListener('click', (e) => window.markitectEditor.enableSectionEditing(e.target));
|
|
section.parentNode.replaceChild(newSection, section);
|
|
}
|
|
}
|
|
|
|
// Track change
|
|
window.markitectEditor.modifiedSections.set(sectionId, newMarkdown);
|
|
window.markitectEditor.updateChangeCount();
|
|
|
|
// Remove edit interface
|
|
editInterface.remove();
|
|
}
|
|
|
|
static cancelEdit(sectionId) {
|
|
const editInterface = document.querySelector('.markitect-edit-interface');
|
|
editInterface.remove();
|
|
}
|
|
|
|
static resetSection(sectionId) {
|
|
const textarea = document.querySelector('.markitect-edit-interface textarea');
|
|
const section = document.querySelector(`[data-section-id="${sectionId}"]`);
|
|
textarea.value = window.markitectEditor.extractSectionMarkdown(section);
|
|
}
|
|
|
|
updateChangeCount() {
|
|
this.changeCount = this.modifiedSections.size;
|
|
this.changeCountElement.textContent = `${this.changeCount} section${this.changeCount !== 1 ? 's' : ''} changed`;
|
|
|
|
if (this.changeCount > 0) {
|
|
this.floatingHeader.classList.add('show');
|
|
} else {
|
|
this.floatingHeader.classList.remove('show');
|
|
}
|
|
}
|
|
|
|
static saveDocument() {
|
|
// Generate modified markdown document
|
|
let modifiedDocument = window.markdownContent;
|
|
|
|
// This is a simplified implementation
|
|
// In a full implementation, we would properly reconstruct the document
|
|
|
|
// Create download
|
|
const blob = new Blob([modifiedDocument], { type: 'text/markdown' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'modified-document.md';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
|
|
alert('Document download initiated! Note: This is a basic implementation.');
|
|
}
|
|
}
|
|
|
|
// Initialize editor when page loads if edit mode is enabled
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (window.MARKITECT_EDIT_MODE) {
|
|
// Wait for markdown to render first
|
|
setTimeout(() => {
|
|
window.markitectEditor = new MarkitectEditor(markdownContent, 'markdown-content');
|
|
}, 100);
|
|
}
|
|
});
|
|
|
|
// Keyboard shortcuts
|
|
if (window.MARKITECT_EDITOR_CONFIG && window.MARKITECT_EDITOR_CONFIG.keyboardShortcuts) {
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.ctrlKey || e.metaKey) {
|
|
switch(e.key) {
|
|
case 's':
|
|
e.preventDefault();
|
|
MarkitectEditor.saveDocument();
|
|
break;
|
|
case 'z':
|
|
// Undo functionality could be implemented here
|
|
break;
|
|
}
|
|
}
|
|
if (e.key === 'Escape') {
|
|
const editInterface = document.querySelector('.markitect-edit-interface');
|
|
if (editInterface) {
|
|
editInterface.remove();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
'''
|
|
|
|
# Format template with styles and content
|
|
return html_template.format(
|
|
title=title,
|
|
css_content=css_content,
|
|
editor_styles=editor_styles,
|
|
editor_html=editor_html,
|
|
editor_scripts=editor_scripts,
|
|
editor_config=editor_config,
|
|
markdown_json=json.dumps(markdown_content),
|
|
front_matter_json=json.dumps(front_matter),
|
|
**styles
|
|
) |