a3editor.js

// Ensure editor container has proper height for scrolling and content is properly displayed
function updateEditorHeight(editorContainer, editor, preview) {
    const windowHeight = window.innerHeight;
    const headerHeight = document.querySelector('header').offsetHeight;
    const mainHeight = windowHeight - headerHeight;

    // Set main container height
    document.querySelector('main').style.height = `${mainHeight}px`;

    // Update editor container height
    editorContainer.style.height = `${mainHeight}px`;

    // Calculate content height to ensure proper column display
    const editorContent = editor.textContent || '';
    const contentLength = editorContent.length;

    // Estimate height based on content length and column width
    // This is a simple heuristic - adjust as needed for your specific content
    const estimatedLineCount = Math.ceil(contentLength / 80); // Assuming ~80 chars per line
    const lineHeight = 1.6; // From CSS line-height
    const fontSize = parseFloat(window.getComputedStyle(editor).fontSize);
    const estimatedHeight = estimatedLineCount * lineHeight * fontSize;

    // Set minimum height to ensure content fits in two columns
    const minColumnHeight = Math.max(mainHeight, estimatedHeight / 2);
    editor.style.minHeight = `${minColumnHeight}px`;
}

// Function to render markdown
function renderMarkdown(editor, preview) {
    const markdownText = editor.textContent;

    // First pass: process markdown with marked
    let htmlContent = marked.parse(markdownText);

    // Sanitize HTML to prevent XSS
    htmlContent = DOMPurify.sanitize(htmlContent);

    // Apply to preview
    preview.innerHTML = htmlContent;


    // Second pass: render mermaid diagrams
    const mermaidDiagrams = document.querySelectorAll('.language-mermaid');
    mermaidDiagrams.forEach((diagram, index) => {
        const mermaidCode = diagram.textContent;
        const graphDiv = document.createElement('div');
        graphDiv.classList.add('mermaid');
        graphDiv.id = `mermaid-diagram-${index}`;
        graphDiv.textContent = mermaidCode;
        diagram.parentNode.replaceWith(graphDiv);
    });


    try {
        // Process mermaid diagrams
        mermaid.init(undefined, document.querySelectorAll('.mermaid'));
    } catch (error) {
        console.error('Mermaid rendering error:', error);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Initialize elements
    const editor = document.getElementById('markdown-editor');
    const preview = document.getElementById('markdown-preview');
    const toggleViewBtn = document.getElementById('toggleView');
    const previewContainer = document.getElementById('preview-container');
    const editorContainer = document.getElementById('editor-container');

    // Initialize Mermaid
    mermaid.initialize({
        startOnLoad: false,
        theme: 'neutral',
        securityLevel: 'loose', // Required for xychart-beta,
        fontSize: 10
    });



    // Call initially, on window resize, and when content changes
    updateEditorHeight(editorContainer, editor, preview);
    window.addEventListener('resize', updateEditorHeight);

    // Default A3 template (content from a3template.md)
    const defaultTemplate = `# A3 [Problem/Project Name] - Date: [MM/DD/YYYY] - Team: [List of contributors]


## 1. **Background**
Provide context for the problem or opportunity. Why is this important? What is the business impact?

- [Explain the relevance and background of the issue]
- [Describe how it connects to organizational goals]
- [Include any historical context, previous efforts, or key events]

\`\`\`mermaid
---
config:
    xyChart:
        width: 500
        height: 300
        titleFontSize: 12
        xAxis:
            labelFontSize: 8
            titleFontSize: 8
        yAxis:
            labelFontSize: 8
            titleFontSize: 8
    themeVariables:
        xyChart:
            plotColorPalette: "#c3d5ec,#ff0000"

---
xychart-beta
    title "Revenue evolution for the last 12 months"
    x-axis [mar, apr, may, jun, jul, aug, sep, oct, nov, dec, jan, feb]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [8000, 7800, 8500, 9200, 9500, 10500, 10000, 10200, 9200, 8500, 7000, 6000]
    line [9000, 9000, 9000, 9000, 9000, 9000, 9000, 9000, 9000, 9000, 9000, 9000]
\`\`\`

## 2. **Current Condition**
Describe the present situation using data, visuals, or diagrams (e.g., process maps, graphs, charts).

- [Outline the current state of the process, problem, or challenge]
- [Include quantitative and qualitative data]
- [Use visuals to illustrate the problem, if applicable]


## 3. **Target Condition**
Define the desired future state and goals.

- [What does success look like?]
- [Describe measurable objectives]
- [Provide a timeline for achieving improvements]


## 4. **Problem Analysis**
Identify the root causes of the issue using techniques such as the *5 Whys* or Fishbone Diagram.

- [Break down the problem into key factors]
- [Analyze root causes systematically]
- [Ensure the problem statement is clear and specific]
\`\`\`mermaid
graph RL;
    A[Effect / Problem] -->|Cause Category 1| B
    A -->|Cause Category 2| C

    B -->|Sub Cause 1| B1
    B -->|Sub Cause 2| B2

    C -->|Sub Cause 1| C1
    C -->|Sub Cause 2| C2

\`\`\`

## 5. **Countermeasures**
List proposed solutions to address root causes and move toward the target condition.

| Countermeasure | Expected Impact | Owner | Due Date |
|---------------|----------------|-------|---------|
| [Solution 1]  | [Impact]        | [Owner] | [Date] |
| [Solution 2]  | [Impact]        | [Owner] | [Date] |
| [Solution 3]  | [Impact]        | [Owner] | [Date] |


## 6. **Implementation Plan**
Define actionable steps to execute the countermeasures.

- [List tasks, responsibilities, and deadlines]
- [Identify resources needed]
- [Specify how progress will be tracked and measured]


## 7. **Follow-Up & Adjustments**
Monitor results, assess effectiveness, and determine next steps.

- [Describe how results will be measured]
- [Identify risks or obstacles]
- [Plan for necessary adaptations or next iterations]`;

    // Set default content
    editor.textContent = defaultTemplate;

    // Initial render
    renderMarkdown(editor, preview);

    // Toggle between editor and preview
    let isPreviewMode = true;
    toggleViewBtn.addEventListener('click', function() {
        isPreviewMode = !isPreviewMode;
        if (isPreviewMode) {
            editorContainer.style.display = 'none';
            previewContainer.style.display = 'block';
            toggleViewBtn.textContent = 'Edit Mode';
            renderMarkdown(editor, preview);
        } else {
            editorContainer.style.display = 'block';
            previewContainer.style.display = 'none';
            toggleViewBtn.textContent = 'Preview Mode';
        }
    });

    // Live update on typing with debounce for better performance
    let debounceTimer;
    editor.addEventListener('input', function() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            //renderMarkdown();
            updateEditorHeight(editorContainer, editor, preview); // Update height when content changes
        }, 300);
    });



    // Handle tab key in editor to insert spaces instead of changing focus
    editor.addEventListener('keydown', function(e) {
        if (e.key === 'Tab') {
            e.preventDefault();

            // Insert two spaces at cursor position
            const selection = window.getSelection();
            const range = selection.getRangeAt(0);
            const tabNode = document.createTextNode('  ');
            range.insertNode(tabNode);

            // Move cursor after inserted spaces
            range.setStartAfter(tabNode);
            range.setEndAfter(tabNode);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    });
});