dees-catalog/ts_web/elements/dees-input-wysiwyg.demo.ts

import { html, css, type TemplateResult } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import type { DeesInputWysiwyg } from './dees-input-wysiwyg.js';
import type { IBlock } from './wysiwyg/wysiwyg.types.js';

interface IDemoEditor {
  basic: DeesInputWysiwyg;
  article: DeesInputWysiwyg;
  dragDrop: DeesInputWysiwyg;
  tutorial: DeesInputWysiwyg;
  meeting: DeesInputWysiwyg;
  recipe: DeesInputWysiwyg;
  technical: DeesInputWysiwyg;
  formIntegration: DeesInputWysiwyg;
  programmatic: DeesInputWysiwyg;
  exportDemo: DeesInputWysiwyg;
}

// Sample content generators
const generateReportBlocks = (): IBlock[] => {
  const timestamp = Date.now();
  return [
    {
      id: `title-${timestamp}`,
      type: 'heading-1',
      content: 'System Performance Report'
    },
    {
      id: `date-${timestamp + 1}`,
      type: 'paragraph',
      content: `Generated on: ${new Date().toLocaleString()}`
    },
    {
      id: `summary-heading-${timestamp + 2}`,
      type: 'heading-2',
      content: 'Executive Summary'
    },
    {
      id: `summary-${timestamp + 3}`,
      type: 'paragraph',
      content: 'This report provides an analysis of system performance metrics over the last 30 days.'
    },
    {
      id: `metrics-heading-${timestamp + 4}`,
      type: 'heading-2',
      content: 'Key Metrics'
    },
    {
      id: `metrics-list-${timestamp + 5}`,
      type: 'list',
      content: 'Average response time: 124ms\nUptime: 99.97%\nCPU utilization: 45%\nMemory usage: 2.3GB / 8GB',
      metadata: { listType: 'bullet' }
    },
    {
      id: `analysis-heading-${timestamp + 6}`,
      type: 'heading-2',
      content: 'Performance Analysis'
    },
    {
      id: `analysis-quote-${timestamp + 7}`,
      type: 'quote',
      content: 'System performance remains within acceptable parameters with room for optimization in memory management.'
    },
    {
      id: `code-heading-${timestamp + 8}`,
      type: 'heading-3',
      content: 'Sample Query Performance'
    },
    {
      id: `code-block-${timestamp + 9}`,
      type: 'code',
      content: 'SELECT AVG(response_time) as avg_time,\n       COUNT(*) as total_requests,\n       DATE(created_at) as date\nFROM performance_logs\nWHERE created_at >= NOW() - INTERVAL 30 DAY\nGROUP BY DATE(created_at)\nORDER BY date DESC;',
      metadata: { language: 'sql' }
    },
    {
      id: `divider-${timestamp + 10}`,
      type: 'divider',
      content: ''
    },
    {
      id: `footer-${timestamp + 11}`,
      type: 'paragraph',
      content: 'Report generated automatically by System Monitor v2.5.0'
    }
  ];
};

const generateRecipeBlocks = (): IBlock[] => {
  const timestamp = Date.now();
  return [
    {
      id: `recipe-title-${timestamp}`,
      type: 'heading-1',
      content: 'Classic Margherita Pizza'
    },
    {
      id: `recipe-intro-${timestamp + 1}`,
      type: 'paragraph',
      content: 'A traditional Italian pizza with fresh basil, mozzarella, and tomato sauce.'
    },
    {
      id: `ingredients-heading-${timestamp + 2}`,
      type: 'heading-2',
      content: '🍕 Ingredients'
    },
    {
      id: `dough-heading-${timestamp + 3}`,
      type: 'heading-3',
      content: 'For the Dough:'
    },
    {
      id: `dough-list-${timestamp + 4}`,
      type: 'list',
      content: '500g tipo "00" flour\n325ml warm water\n10g salt\n7g active dry yeast\n2 tbsp olive oil',
      metadata: { listType: 'bullet' }
    },
    {
      id: `toppings-heading-${timestamp + 5}`,
      type: 'heading-3',
      content: 'For the Toppings:'
    },
    {
      id: `toppings-list-${timestamp + 6}`,
      type: 'list',
      content: '400g canned San Marzano tomatoes\n250g fresh mozzarella\nFresh basil leaves\nExtra virgin olive oil\nSalt and pepper to taste',
      metadata: { listType: 'bullet' }
    },
    {
      id: `instructions-heading-${timestamp + 7}`,
      type: 'heading-2',
      content: '👨‍🍳 Instructions'
    },
    {
      id: `steps-list-${timestamp + 8}`,
      type: 'list',
      content: 'Dissolve yeast in warm water and let stand for 5 minutes\nMix flour and salt, create a well in center\nAdd yeast mixture and olive oil\nKnead for 10 minutes until smooth\nLet rise for 1-2 hours until doubled\nPunch down and divide into portions\nRoll out each portion to 12-inch circles\nTop with crushed tomatoes, mozzarella, and basil\nBake at 475°F (245°C) for 10-12 minutes',
      metadata: { listType: 'ordered' }
    },
    {
      id: `tip-${timestamp + 9}`,
      type: 'quote',
      content: 'Pro tip: For an authentic taste, use a pizza stone and preheat it in the oven for at least 30 minutes before baking.'
    },
    {
      id: `divider-${timestamp + 10}`,
      type: 'divider',
      content: ''
    },
    {
      id: `servings-${timestamp + 11}`,
      type: 'paragraph',
      content: 'Servings: 4 pizzas | Prep time: 2 hours | Cook time: 12 minutes'
    }
  ];
};

const initializeEditors = (container: HTMLElement): IDemoEditor => {
  const editors: Partial<IDemoEditor> = {};
  
  // Get all editor references
  editors.basic = container.querySelector('#editor-basic') as DeesInputWysiwyg;
  editors.article = container.querySelector('#editor-article') as DeesInputWysiwyg;
  editors.dragDrop = container.querySelector('#editor-dragdrop') as DeesInputWysiwyg;
  editors.tutorial = container.querySelector('#editor-tutorial') as DeesInputWysiwyg;
  editors.meeting = container.querySelector('#editor-meeting') as DeesInputWysiwyg;
  editors.recipe = container.querySelector('#editor-recipe') as DeesInputWysiwyg;
  editors.technical = container.querySelector('#editor-technical') as DeesInputWysiwyg;
  editors.formIntegration = container.querySelector('#editor-form-integration') as DeesInputWysiwyg;
  editors.programmatic = container.querySelector('#editor-programmatic') as DeesInputWysiwyg;
  editors.exportDemo = container.querySelector('#editor-export') as DeesInputWysiwyg;
  
  return editors as IDemoEditor;
};

const setupProgrammaticDemo = (container: HTMLElement, editor: DeesInputWysiwyg) => {
  const reportBtn = container.querySelector('#btn-generate-report') as HTMLButtonElement;
  const recipeBtn = container.querySelector('#btn-generate-recipe') as HTMLButtonElement;
  const clearBtn = container.querySelector('#btn-clear-editor') as HTMLButtonElement;
  
  if (reportBtn) {
    reportBtn.addEventListener('click', () => {
      editor.importBlocks(generateReportBlocks());
    });
  }
  
  if (recipeBtn) {
    recipeBtn.addEventListener('click', () => {
      editor.importBlocks(generateRecipeBlocks());
    });
  }
  
  if (clearBtn) {
    clearBtn.addEventListener('click', () => {
      editor.importBlocks([]);
    });
  }
};

const setupExportDemo = (container: HTMLElement, editor: DeesInputWysiwyg) => {
  const exportBlocksBtn = container.querySelector('#btn-export-blocks') as HTMLButtonElement;
  const exportHtmlBtn = container.querySelector('#btn-export-html') as HTMLButtonElement;
  const exportMarkdownBtn = container.querySelector('#btn-export-markdown') as HTMLButtonElement;
  const saveStateBtn = container.querySelector('#btn-save-state') as HTMLButtonElement;
  const restoreStateBtn = container.querySelector('#btn-restore-state') as HTMLButtonElement;
  
  let savedState: any = null;
  
  if (exportBlocksBtn) {
    exportBlocksBtn.addEventListener('click', () => {
      const blocks = editor.exportBlocks();
      console.log('Exported blocks:', blocks);
      alert(`Exported ${blocks.length} blocks to console. Check developer tools.`);
    });
  }
  
  if (exportHtmlBtn) {
    exportHtmlBtn.addEventListener('click', () => {
      const html = editor.exportAsHtml();
      console.log('HTML Export:', html);
      alert('HTML exported to console. Check developer tools.');
    });
  }
  
  if (exportMarkdownBtn) {
    exportMarkdownBtn.addEventListener('click', () => {
      const markdown = editor.exportAsMarkdown();
      console.log('Markdown Export:', markdown);
      alert('Markdown exported to console. Check developer tools.');
    });
  }
  
  if (saveStateBtn) {
    saveStateBtn.addEventListener('click', () => {
      savedState = editor.exportState();
      console.log('Saved state:', savedState);
      alert('Editor state saved!');
    });
  }
  
  if (restoreStateBtn) {
    restoreStateBtn.addEventListener('click', () => {
      if (savedState) {
        editor.importState(savedState);
        alert('Editor state restored!');
      } else {
        alert('No saved state found. Save state first!');
      }
    });
  }
};

const populateInitialContent = (editors: IDemoEditor) => {
  // Article editor content
  if (editors.article) {
    setTimeout(() => {
      const articleBlocks: IBlock[] = [
        {
          id: 'intro-heading-' + Date.now(),
          type: 'heading-2',
          content: 'Introduction to Modern Web Development'
        },
        {
          id: 'intro-para-' + Date.now(),
          type: 'paragraph',
          content: 'Modern web development has evolved significantly over the past decade. In this article, we\'ll explore the key technologies and best practices that define web development in 2024.'
        },
        {
          id: 'tech-heading-' + Date.now(),
          type: 'heading-3',
          content: 'Key Technologies'
        },
        {
          id: 'tech-list-' + Date.now(),
          type: 'list',
          content: 'TypeScript - Type-safe JavaScript development\nWeb Components - Native component model\nES Modules - Modern module system\nWebAssembly - High-performance computing',
          metadata: { listType: 'ordered' }
        },
        {
          id: 'quote-' + Date.now(),
          type: 'quote',
          content: 'The best way to predict the future is to invent it. - Alan Kay'
        },
        {
          id: 'example-heading-' + Date.now(),
          type: 'heading-3',
          content: 'Code Example'
        },
        {
          id: 'code-example-' + Date.now(),
          type: 'code',
          content: 'class ModernWebApp extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: \'open\' });\n  }\n  \n  connectedCallback() {\n    this.render();\n  }\n}',
          metadata: { language: 'javascript' }
        }
      ];
      editors.article.importBlocks(articleBlocks);
    }, 500);
  }
  
  // Drag & Drop demo content
  if (editors.dragDrop) {
    setTimeout(() => {
      const dragBlocks: IBlock[] = [
        {
          id: 'drag-title-' + Date.now(),
          type: 'heading-1',
          content: 'Drag & Drop Demo'
        },
        {
          id: 'drag-intro-' + Date.now(),
          type: 'paragraph',
          content: 'This editor demonstrates drag and drop functionality. Try dragging these blocks around!'
        },
        {
          id: 'drag-heading-' + Date.now(),
          type: 'heading-2',
          content: 'How It Works'
        },
        {
          id: 'drag-list-' + Date.now(),
          type: 'list',
          content: 'Hover over any block to see the drag handle\nClick and hold the handle to start dragging\nDrag to reorder blocks\nRelease to drop in the new position',
          metadata: { listType: 'ordered' }
        },
        {
          id: 'drag-quote-' + Date.now(),
          type: 'quote',
          content: 'The drag and drop feature makes it easy to reorganize your content without cutting and pasting.'
        },
        {
          id: 'drag-divider-' + Date.now(),
          type: 'divider',
          content: ''
        },
        {
          id: 'drag-footer-' + Date.now(),
          type: 'paragraph',
          content: 'Note: Divider blocks cannot be dragged, but other blocks can be moved around them.'
        }
      ];
      editors.dragDrop.importBlocks(dragBlocks);
    }, 600);
  }
};

export const demoFunc = (): TemplateResult => html`
  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
    // Wait for elements to be ready
    await new Promise(resolve => setTimeout(resolve, 500));
    
    const editors = initializeEditors(elementArg);
    
    // Setup programmatic demo
    if (editors.programmatic) {
      setupProgrammaticDemo(elementArg, editors.programmatic);
    }
    
    // Setup export demo
    if (editors.exportDemo) {
      setupExportDemo(elementArg, editors.exportDemo);
    }
    
    // Populate initial content
    populateInitialContent(editors);
    
    // Log initialization
    console.log('WYSIWYG Demo initialized with editors:', Object.keys(editors));
  }}>
  <style>
    ${css`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 32px;
      }
      
      .panel-description {
        margin-top: 0;
        margin-bottom: 24px;
        color: #666;
        font-size: 15px;
        line-height: 1.6;
      }
      
      @media (prefers-color-scheme: dark) {
        .panel-description {
          color: #999;
        }
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
      }

      .feature-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #555;
        font-size: 14px;
      }

      .feature-icon {
        color: #0066cc;
        font-weight: 600;
      }

      @media (prefers-color-scheme: dark) {
        .feature-item {
          color: #aaa;
        }
        .feature-icon {
          color: #4d94ff;
        }
      }

      .shortcuts-box {
        background: rgba(0, 102, 204, 0.05);
        border: 1px solid rgba(0, 102, 204, 0.2);
        border-radius: 8px;
        padding: 16px;
        margin-top: 16px;
      }

      @media (prefers-color-scheme: dark) {
        .shortcuts-box {
          background: rgba(77, 148, 255, 0.1);
          border-color: rgba(77, 148, 255, 0.3);
        }
      }

      .shortcuts-title {
        margin: 0 0 12px 0;
        font-size: 14px;
        font-weight: 600;
        color: #0066cc;
      }

      @media (prefers-color-scheme: dark) {
        .shortcuts-title {
          color: #4d94ff;
        }
      }

      .shortcuts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 8px;
      }

      .shortcut-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #555;
      }

      .shortcut-key {
        background: #f0f0f0;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: monospace;
        font-size: 12px;
        color: #333;
        white-space: nowrap;
      }

      @media (prefers-color-scheme: dark) {
        .shortcut-item {
          color: #bbb;
        }
        .shortcut-key {
          background: #333;
          color: #ddd;
        }
      }

      .output-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 24px;
      }

      @media (max-width: 768px) {
        .output-grid {
          grid-template-columns: 1fr;
        }
      }
      
      .tips-box {
        margin-top: 16px;
        padding: 12px;
        background: #f0f8ff;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.6;
      }
      
      @media (prefers-color-scheme: dark) {
        .tips-box {
          background: rgba(77, 148, 255, 0.1);
        }
      }
      
      .tips-box strong {
        color: #0066cc;
      }
      
      @media (prefers-color-scheme: dark) {
        .tips-box strong {
          color: #4d94ff;
        }
      }
      
      .tips-list {
        margin: 8px 0 0 0;
        padding-left: 24px;
      }
      
      .tips-list li {
        margin: 4px 0;
      }
      
      .button-group {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 16px;
      }
      
      .demo-button {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #f8f8f8;
        cursor: pointer;
        font-size: 14px;
        font-family: inherit;
        transition: all 0.2s ease;
      }
      
      .demo-button:hover {
        background: #e8e8e8;
        border-color: #ccc;
      }
      
      .demo-button:active {
        transform: translateY(1px);
      }
      
      @media (prefers-color-scheme: dark) {
        .demo-button {
          background: #333;
          border-color: #555;
          color: #ddd;
        }
        
        .demo-button:hover {
          background: #444;
          border-color: #666;
        }
      }
      
      .export-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
      }
      
      .export-info-card {
        padding: 16px;
        border-radius: 8px;
      }
      
      .export-info-card.blocks {
        background: rgba(0, 102, 204, 0.1);
      }
      
      .export-info-card.html {
        background: rgba(76, 175, 80, 0.1);
      }
      
      .export-info-card.markdown {
        background: rgba(255, 152, 0, 0.1);
      }
      
      .export-info-card.state {
        background: rgba(156, 39, 176, 0.1);
      }
      
      .export-info-card strong {
        display: block;
        margin-bottom: 8px;
      }
      
      .export-info-card.blocks strong {
        color: #0066cc;
      }
      
      .export-info-card.html strong {
        color: #4CAF50;
      }
      
      .export-info-card.markdown strong {
        color: #FF9800;
      }
      
      .export-info-card.state strong {
        color: #9C27B0;
      }
      
      .export-info-card p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
      }
    `}
  </style>
  
    <div class="demo-container">
      <dees-panel heading="🚀 Modern WYSIWYG Editor">
        <p class="panel-description">
          A powerful block-based editor with slash commands, keyboard shortcuts, and multiple output formats. 
          Perfect for content creation, blog posts, documentation, and more.
        </p>
        
        <div class="feature-grid">
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Slash commands (/)</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Keyboard shortcuts</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Block-based editing</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Drag & drop reordering</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>HTML & Markdown output</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Dark mode support</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Mobile responsive</span>
          </div>
        </div>
        
        <dees-input-wysiwyg 
          id="editor-basic"
          label="Rich Text Editor" 
          description="Start typing or use '/' to insert different block types"
          outputFormat="html"
        ></dees-input-wysiwyg>

        <div class="shortcuts-box">
          <h4 class="shortcuts-title">⌨️ Keyboard Shortcuts</h4>
          <div class="shortcuts-grid">
            <div class="shortcut-item">
              <span class="shortcut-key">/</span> Slash commands
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">#</span> Heading 1
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">##</span> Heading 2
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">###</span> Heading 3
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">></span> Quote
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">\`\`\`</span> Code block
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">*</span> or <span class="shortcut-key">-</span> Bullet list
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">1.</span> Numbered list
            </div>
            <div class="shortcut-item">
              <span class="shortcut-key">---</span> Divider
            </div>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel heading="📝 Blog Post Example">
        <p class="panel-description">
          Perfect for creating rich content with multiple block types. 
          The editor preserves formatting and provides a clean editing experience.
        </p>
        
        <dees-input-wysiwyg 
          id="editor-article"
          label="Blog Post Content" 
          description="Write your article using various formatting options"
          outputFormat="html"
        ></dees-input-wysiwyg>
      </dees-panel>

      <dees-panel heading="🔀 Drag & Drop Reordering">
        <p class="panel-description">
          Easily rearrange your content blocks by dragging them. 
          Hover over any block to reveal the drag handle on the left side.
        </p>
        
        <dees-input-wysiwyg 
          id="editor-dragdrop"
          label="Drag & Drop Demo" 
          description="Try dragging blocks to reorder them - hover to see drag handles"
        ></dees-input-wysiwyg>
        
        <div class="tips-box">
          <strong>💡 Tips:</strong>
          <ul class="tips-list">
            <li>Hover over any block to see the drag handle (⋮⋮) on the left</li>
            <li>Click and hold the drag handle to start dragging</li>
            <li>Blue indicators show where the block will be dropped</li>
            <li>Divider blocks cannot be dragged</li>
            <li>The editor maintains focus on the moved block after dropping</li>
          </ul>
        </div>
      </dees-panel>

      <dees-panel heading="📚 Tutorial & Documentation">
        <p class="panel-description">
          Create comprehensive tutorials and documentation with code examples, lists, and structured content.
        </p>
        
        <dees-input-wysiwyg 
          id="editor-tutorial"
          label="Git Tutorial" 
          description="Step-by-step guide with commands and explanations"
          outputFormat="markdown"
          value="# Git Tutorial for Beginners

Git is a distributed version control system that helps you track changes in your code over time. This tutorial will guide you through the basics.

## Prerequisites

Before starting, ensure you have:

- Git installed on your system
- A text editor or IDE
- Basic command line knowledge

## Getting Started

### 1. Configure Git

First, set up your identity:

\`\`\`bash
git config --global user.name &quot;Your Name&quot;
git config --global user.email &quot;your.email@example.com&quot;
\`\`\`

### 2. Initialize a Repository

Create a new Git repository:

\`\`\`bash
mkdir my-project
cd my-project
git init
\`\`\`

### 3. Basic Git Workflow

#### Adding Files

Create a file and add it to staging:

\`\`\`bash
echo &quot;# My Project&quot; > README.md
git add README.md
\`\`\`

#### Committing Changes

\`\`\`bash
git commit -m &quot;Initial commit&quot;
\`\`\`

> **Best Practice:** Write clear, descriptive commit messages that explain what changes were made and why.

### 4. Working with Branches

Branches allow you to work on features independently:

\`\`\`bash
# Create and switch to a new branch
git checkout -b feature-branch

# Make changes and commit
git add .
git commit -m &quot;Add new feature&quot;

# Switch back to main
git checkout main

# Merge the feature
git merge feature-branch
\`\`\`

---

## Common Commands Reference

| Command | Description |
|---------|-------------|
| \`git status\` | Check repository status |
| \`git log\` | View commit history |
| \`git diff\` | Show changes |
| \`git pull\` | Fetch and merge changes |
| \`git push\` | Upload changes to remote |

## Next Steps

1. Learn about remote repositories
2. Explore advanced Git features
3. Practice with real projects
4. Contribute to open source

**Happy coding!** 🚀"
        ></dees-input-wysiwyg>
      </dees-panel>

      <dees-panel heading="🔄 Output Formats">
        <p class="panel-description">
          Choose between HTML and Markdown output formats depending on your needs. 
          Perfect for static site generators, documentation systems, or any content management workflow.
        </p>
        
        <div class="output-grid">
          <div>
            <dees-input-wysiwyg 
              id="editor-meeting"
              label="Meeting Notes" 
              description="Structured meeting documentation"
              outputFormat="html"
              value="<h2>Q4 Planning Meeting</h2><p><strong>Date:</strong> December 15, 2024<br><strong>Attendees:</strong> Product Team, Engineering, Design</p><h3>Agenda Items</h3><ol><li>Review Q3 achievements</li><li>Set Q4 objectives</li><li>Resource allocation</li><li>Timeline discussion</li></ol><h3>Key Decisions</h3><ul><li>Launch new dashboard feature by end of January</li><li>Increase engineering team by 2 developers</li><li>Implement weekly design reviews</li></ul><blockquote>&quot;Focus on user experience improvements based on Q3 feedback&quot; - Product Manager</blockquote><h3>Action Items</h3><ul><li>Sarah: Create detailed project timeline</li><li>Mike: Draft technical requirements</li><li>Lisa: Schedule user research sessions</li></ul><hr><p>Next meeting: January 5, 2025</p>"
            ></dees-input-wysiwyg>
          </div>
          
          <div>
            <dees-input-wysiwyg 
              id="editor-recipe"
              label="Recipe Blog Post" 
              description="Food blog with mixed content"
              outputFormat="markdown"
              value="# Ultimate Chocolate Chip Cookies

There's nothing quite like the smell of freshly baked chocolate chip cookies. This recipe has been perfected over years of testing!

## Ingredients

- 2¼ cups all-purpose flour
- 1 tsp baking soda
- 1 tsp salt
- 1 cup butter, softened
- ¾ cup granulated sugar
- ¾ cup packed brown sugar
- 2 large eggs
- 2 tsp vanilla extract
- 2 cups chocolate chips

## Instructions

### Step 1: Preparation

Preheat your oven to **375°F (190°C)**. This temperature is crucial for achieving the perfect texture.

### Step 2: Mix Dry Ingredients

In a medium bowl, whisk together:

1. Flour
2. Baking soda
3. Salt

### Step 3: Cream Butter and Sugars

\`\`\`
Cream butter and sugars for 3-4 minutes
until light and fluffy
\`\`\`

> **Pro tip:** Room temperature ingredients mix better and create a more uniform dough.

### Step 4: Add Wet Ingredients

Beat in eggs one at a time, then add vanilla extract.

### Step 5: Combine and Bake

Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tablespoons onto ungreased cookie sheets.

---

**Baking time:** 9-11 minutes or until golden brown

**Yield:** About 5 dozen cookies"
            ></dees-input-wysiwyg>
          </div>
        </div>
      </dees-panel>

      <dees-panel heading="🎨 Advanced Editing">
        <p class="panel-description">
          Create complex documents with mixed content types. The editor handles all formatting seamlessly.
        </p>
        
        <dees-input-wysiwyg 
          id="editor-technical"
          label="Technical Documentation" 
          description="Create technical docs with code examples and structured content"
          value="<h1>API Documentation</h1><p>Welcome to our API documentation. Below you'll find examples of how to use our endpoints.</p><h2>Authentication</h2><p>All API requests require authentication using an API key:</p><pre><code>Authorization: Bearer YOUR_API_KEY</code></pre><h2>Endpoints</h2><h3>GET /users</h3><p>Retrieve a list of users from the system.</p><pre><code>curl -X GET https://api.example.com/users \\
  -H &quot;Authorization: Bearer YOUR_API_KEY&quot;</code></pre><blockquote>Note: Rate limiting applies to all endpoints. You can make up to 100 requests per minute.</blockquote><h3>POST /users</h3><p>Create a new user in the system.</p><pre><code>{
  &quot;name&quot;: &quot;John Doe&quot;,
  &quot;email&quot;: &quot;john@example.com&quot;,
  &quot;role&quot;: &quot;user&quot;
}</code></pre><hr><p>For more information, please refer to our complete documentation.</p>"
          outputFormat="html"
        ></dees-input-wysiwyg>
      </dees-panel>

      <dees-panel heading="⚙️ Form Integration">
        <p class="panel-description">
          Seamlessly integrates with dees-form for complete form solutions. 
          All standard form features like validation, required fields, and data binding work out of the box.
        </p>
        
        <dees-form>
          <dees-input-text 
            label="Article Title" 
            required="true"
            value="How to Build Modern Web Applications"
          ></dees-input-text>
          
          <dees-input-wysiwyg 
            id="editor-form-integration"
            label="Article Content" 
            description="Write your article content here"
            required="true"
            outputFormat="markdown"
          ></dees-input-wysiwyg>
          
          <dees-input-tags
            label="Tags"
            description="Add relevant tags for your article"
          ></dees-input-tags>
        </dees-form>
      </dees-panel>

      <dees-panel heading="🧩 Programmatic Block Creation">
        <p class="panel-description">
          Create content programmatically using the block API for dynamic document generation.
        </p>
        
        <dees-input-wysiwyg
          id="editor-programmatic"
          label="Programmatically Generated Content"
          description="This content was created using the importBlocks API"
        ></dees-input-wysiwyg>
        
        <div class="button-group">
          <button id="btn-generate-report" class="demo-button">
            Generate Report
          </button>
          
          <button id="btn-generate-recipe" class="demo-button">
            Generate Recipe
          </button>
          
          <button id="btn-clear-editor" class="demo-button">
            Clear Editor
          </button>
        </div>
      </dees-panel>

      <dees-panel heading="📤 Export/Import Features">
        <p class="panel-description">
          The WYSIWYG editor provides multiple export formats and lossless save/restore capabilities for maximum flexibility.
        </p>
        
        <div class="export-info-grid">
          <div class="export-info-card blocks">
            <strong>Lossless Blocks</strong>
            <p>Export and import raw block structure for perfect round-trip editing</p>
          </div>
          <div class="export-info-card html">
            <strong>HTML Export</strong>
            <p>Get clean, semantic HTML regardless of output format setting</p>
          </div>
          <div class="export-info-card markdown">
            <strong>Markdown Export</strong>
            <p>Export as Markdown for docs, READMEs, and static sites</p>
          </div>
          <div class="export-info-card state">
            <strong>State Management</strong>
            <p>Save and restore complete editor state including settings</p>
          </div>
        </div>
        
        <dees-input-wysiwyg
          id="editor-export"
          label="Export Demo Editor"
          description="Try the export buttons below to see different output formats"
          value="<h1>Software Release Notes</h1><p><strong>Version 2.5.0</strong> - Released December 15, 2024</p><h2>🎉 New Features</h2><ul><li>Added dark mode support across all components</li><li>Implemented real-time collaboration features</li><li>New dashboard analytics widgets</li><li>Export functionality for all report types</li></ul><h2>🐛 Bug Fixes</h2><ul><li>Fixed memory leak in data processing module</li><li>Resolved authentication timeout issues</li><li>Corrected timezone handling in scheduled tasks</li></ul><h2>⚡ Performance Improvements</h2><blockquote>Page load times reduced by 40% through lazy loading and code splitting</blockquote><h2>🔧 Technical Details</h2><pre><code>// New API endpoint for batch operations
POST /api/v2/batch
{
  &quot;operations&quot;: [
    { &quot;method&quot;: &quot;GET&quot;, &quot;path&quot;: &quot;/users/123&quot; },
    { &quot;method&quot;: &quot;PUT&quot;, &quot;path&quot;: &quot;/settings&quot;, &quot;body&quot;: {...} }
  ]
}</code></pre><h2>💡 Migration Guide</h2><ol><li>Update your dependencies to the latest versions</li><li>Run database migrations: <code>npm run migrate</code></li><li>Clear cache: <code>npm run cache:clear</code></li><li>Restart all services</li></ol><hr><p>For questions or issues, please contact the development team or file a ticket in our issue tracker.</p>"
        ></dees-input-wysiwyg>
        
        <div class="button-group">
          <button id="btn-export-blocks" class="demo-button">
            Export Blocks
          </button>
          
          <button id="btn-export-html" class="demo-button">
            Export as HTML
          </button>
          
          <button id="btn-export-markdown" class="demo-button">
            Export as Markdown
          </button>
          
          <button id="btn-save-state" class="demo-button">
            Save State
          </button>
          
          <button id="btn-restore-state" class="demo-button">
            Restore State
          </button>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;