No headings found
'; + }} else {{ + let navHtml = ''; + headings.forEach((heading, index) => {{ + if (!heading.id) {{ + heading.id = `heading-${{index + 1}}`; + }} + const level = parseInt(heading.tagName.substring(1)); + const indent = (level - 1) * 1; + navHtml += ` + + ${{heading.textContent.trim()}} + + `; + }}); + content.innerHTML = navHtml; + }} + + // Show panel + this.expand(); + }}, + + expand: function() {{ + this.isExpanded = true; + const panel = this.navElement.querySelector('.navigator-panel'); + this.navElement.style.width = '280px'; + panel.style.display = 'block'; + }}, + + collapse: function() {{ + this.isExpanded = false; + const panel = this.navElement.querySelector('.navigator-panel'); + panel.style.display = 'none'; + this.navElement.style.width = '40px'; + }} + }}; + + // Initialize the DocumentNavigator control + documentNavigator.createControl(); + + // Make globally available for mobile collapse + window.documentNavigator = documentNavigator; + }} catch (error) {{ + console.error("DocumentNavigator failed to initialize:", error); + }} }}); // Handle CDN loading errors @@ -1237,6 +1380,127 @@ document.addEventListener('DOMContentLoaded', function() { // Create document controls documentControls.create(); + // Create DocumentNavigator for edit mode (lazy loading) + const documentNavigator = { + navElement: null, + isExpanded: false, + + createControl: function() { + console.log("📋 Creating DocumentNavigator control for edit mode..."); + + this.navElement = document.createElement('nav'); + this.navElement.className = 'document-navigator edit-mode'; + this.navElement.innerHTML = ` + + + `; + + // Position on left side following UI convention + this.navElement.style.cssText = ` + position: fixed; + top: 80px; + left: 20px; + z-index: 1001; + background: rgba(255, 255, 255, 0.95); + border: 1px solid #e1e5e9; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + backdrop-filter: blur(8px); + width: 40px; + transition: width 0.3s ease; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + `; + + // Style toggle button + const toggleBtn = this.navElement.querySelector('.navigator-toggle'); + toggleBtn.style.cssText = ` + width: 100%; + height: 40px; + border: none; + background: transparent; + cursor: pointer; + font-size: 16px; + color: #666; + transition: color 0.2s ease; + `; + + // Handle click to build navigation on-demand + toggleBtn.addEventListener('click', () => { + console.log("📋 Navigator toggle clicked - building navigation..."); + this.buildNavigation(); + }); + + // Close button handler + const closeBtn = this.navElement.querySelector('.navigator-close'); + closeBtn.addEventListener('click', () => { + this.collapse(); + }); + + document.body.appendChild(this.navElement); + console.log("📋 DocumentNavigator control created"); + }, + + buildNavigation: function() { + const panel = this.navElement.querySelector('.navigator-panel'); + const content = this.navElement.querySelector('.navigator-content'); + + // Build navigation content from current DOM + const headings = document.querySelectorAll('h1, h2, h3'); + console.log("📋 Found headings for navigation:", headings.length); + + if (headings.length === 0) { + content.innerHTML = 'No headings found
'; + } else { + let navHtml = ''; + headings.forEach((heading, index) => { + if (!heading.id) { + heading.id = `heading-${index + 1}`; + } + const level = parseInt(heading.tagName.substring(1)); + const indent = (level - 1) * 1; + navHtml += ` + + ${heading.textContent.trim()} + + `; + }); + content.innerHTML = navHtml; + } + + // Show panel + this.expand(); + }, + + expand: function() { + this.isExpanded = true; + const panel = this.navElement.querySelector('.navigator-panel'); + this.navElement.style.width = '300px'; + panel.style.display = 'block'; + }, + + collapse: function() { + this.isExpanded = false; + const panel = this.navElement.querySelector('.navigator-panel'); + panel.style.display = 'none'; + this.navElement.style.width = '40px'; + } + }; + + // Initialize the DocumentNavigator control + documentNavigator.createControl(); + // Wire up event handlers documentControls.setEventHandlers({ 'save-document': () => { diff --git a/tools/validate_js.py b/tools/validate_js.py new file mode 100755 index 00000000..72229dc2 --- /dev/null +++ b/tools/validate_js.py @@ -0,0 +1,161 @@ +#!/usr/bin/env python3 +""" +JavaScript Validation Tool + +Extracts JavaScript from HTML files and validates syntax. +Detects common issues like "Uncaught SyntaxError: unexpected token" +""" + +import re +import subprocess +import sys +import tempfile +from pathlib import Path + + +def extract_javascript_from_html(html_file): + """Extract all JavaScript code from an HTML file.""" + try: + content = Path(html_file).read_text(encoding='utf-8') + except Exception as e: + print(f"❌ Failed to read {html_file}: {e}") + return [] + + # Find all ' + scripts = re.findall(script_pattern, content, re.DOTALL | re.IGNORECASE) + + # Filter out empty scripts and external script tags + js_blocks = [] + for script in scripts: + script = script.strip() + if script and not script.startswith('http'): # Skip external scripts + js_blocks.append(script) + + return js_blocks + + +def validate_javascript_syntax(js_code): + """Validate JavaScript syntax using Node.js.""" + try: + # Create temporary JS file + with tempfile.NamedTemporaryFile(mode='w', suffix='.js', delete=False) as f: + f.write(js_code) + temp_file = f.name + + # Try to parse with node --check + result = subprocess.run( + ['node', '--check', temp_file], + capture_output=True, + text=True + ) + + # Clean up + Path(temp_file).unlink() + + if result.returncode == 0: + return True, "✓ Syntax OK" + else: + return False, f"❌ Syntax Error: {result.stderr.strip()}" + + except FileNotFoundError: + # Fallback: Try to detect obvious syntax errors + return validate_javascript_basic(js_code) + except Exception as e: + return False, f"❌ Validation failed: {e}" + + +def validate_javascript_basic(js_code): + """Basic JavaScript syntax validation without Node.js.""" + errors = [] + + # Check for common syntax issues + if js_code.count('{') != js_code.count('}'): + errors.append("Mismatched curly braces") + + if js_code.count('(') != js_code.count(')'): + errors.append("Mismatched parentheses") + + if js_code.count('[') != js_code.count(']'): + errors.append("Mismatched square brackets") + + # Check for unescaped quotes in strings + if re.search(r'["\']\s*["\']\s*["\']\s*["\']', js_code): + errors.append("Possible quote escaping issue") + + # Check for Python-style string formatting leftover + if '${' in js_code and '"}' in js_code: + errors.append("Possible Python string template leftover") + + if errors: + return False, f"❌ Potential issues: {', '.join(errors)}" + else: + return True, "✓ Basic validation passed (Node.js not available)" + + +def validate_html_js(html_file): + """Validate all JavaScript in an HTML file.""" + print(f"🔍 Validating JavaScript in: {html_file}") + + js_blocks = extract_javascript_from_html(html_file) + + if not js_blocks: + print("⚠️ No JavaScript found in HTML file") + return True + + print(f"📝 Found {len(js_blocks)} JavaScript blocks") + + all_valid = True + for i, js_block in enumerate(js_blocks, 1): + print(f"\n--- Script Block {i} ({len(js_block)} chars) ---") + + # Show first few lines for context + lines = js_block.split('\n')[:3] + preview = '\n'.join(lines) + if len(lines) < len(js_block.split('\n')): + preview += "\n..." + print(f"Preview:\n{preview}") + + is_valid, message = validate_javascript_syntax(js_block) + print(message) + + if not is_valid: + all_valid = False + # Show more context around potential error + if 'line' in message.lower(): + try: + line_num = re.search(r'line (\d+)', message, re.IGNORECASE) + if line_num: + line_no = int(line_num.group(1)) + lines = js_block.split('\n') + start = max(0, line_no - 3) + end = min(len(lines), line_no + 2) + print("\nContext around error:") + for j in range(start, end): + marker = ">>> " if j == line_no - 1 else " " + print(f"{marker}{j+1:3}: {lines[j]}") + except: + pass + + print(f"\n{'✅' if all_valid else '❌'} Overall result: {'All JavaScript is valid' if all_valid else 'JavaScript validation failed'}") + return all_valid + + +def main(): + if len(sys.argv) != 2: + print("Usage: python validate_js.py