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

import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';

export const demoFunc = () => html`
  <dees-demowrapper>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 32px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .demo-section {
          background: #f8f9fa;
          border-radius: 12px;
          padding: 32px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        @media (prefers-color-scheme: dark) {
          .demo-section {
            background: #1a1a1a;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
          }
        }
        
        .demo-section h3 {
          margin-top: 0;
          margin-bottom: 20px;
          color: #0066cc;
          font-size: 20px;
          font-weight: 600;
        }
        
        @media (prefers-color-scheme: dark) {
          .demo-section h3 {
            color: #4d94ff;
          }
        }
        
        .demo-section p {
          margin-top: 0;
          margin-bottom: 24px;
          color: #666;
          font-size: 15px;
          line-height: 1.6;
        }
        
        @media (prefers-color-scheme: dark) {
          .demo-section p {
            color: #999;
          }
        }

        .feature-list {
          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;
          }
        }

        .keyboard-shortcuts {
          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) {
          .keyboard-shortcuts {
            background: rgba(77, 148, 255, 0.1);
            border-color: rgba(77, 148, 255, 0.3);
          }
        }

        .keyboard-shortcuts h4 {
          margin: 0 0 12px 0;
          font-size: 14px;
          color: #0066cc;
        }

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

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

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

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

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

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

        @media (max-width: 768px) {
          .output-section {
            grid-template-columns: 1fr;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <div class="demo-section">
        <h3>🚀 Modern WYSIWYG Editor</h3>
        <p>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-list">
          <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>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 
          .label=${'Rich Text Editor'} 
          .description=${'Start typing or use "/" to insert different block types'}
          .outputFormat=${'html'}
        ></dees-input-wysiwyg>

        <div class="keyboard-shortcuts">
          <h4>⌨️ Keyboard Shortcuts</h4>
          <div class="shortcut-grid">
            <div class="shortcut">
              <code>/</code> Slash commands
            </div>
            <div class="shortcut">
              <code>#</code> Heading 1
            </div>
            <div class="shortcut">
              <code>##</code> Heading 2
            </div>
            <div class="shortcut">
              <code>###</code> Heading 3
            </div>
            <div class="shortcut">
              <code>></code> Quote
            </div>
            <div class="shortcut">
              <code>\`\`\`</code> Code block
            </div>
            <div class="shortcut">
              <code>* </code> or <code>- </code> Bullet list
            </div>
            <div class="shortcut">
              <code>1.</code> Numbered list
            </div>
            <div class="shortcut">
              <code>---</code> Divider
            </div>
          </div>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>📝 Blog Post Example</h3>
        <p>Perfect for creating rich content with multiple block types. The editor preserves formatting and provides a clean editing experience.</p>
        
        <dees-input-wysiwyg 
          .label=${'Blog Post Content'} 
          .description=${'Write your article using various formatting options'}
          .value=${'<h1>Welcome to Our Blog</h1><p>This is an example blog post that demonstrates the capabilities of our WYSIWYG editor.</p><h2>Features Overview</h2><p>Our editor supports multiple block types including headings, paragraphs, quotes, and more.</p><blockquote>The best way to predict the future is to invent it.</blockquote><p>You can also create lists and code blocks for technical content.</p>'}
          .outputFormat=${'html'}
        ></dees-input-wysiwyg>
      </div>

      <div class="demo-section">
        <h3>🔄 Output Formats</h3>
        <p>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-section">
          <div>
            <dees-input-wysiwyg 
              .label=${'HTML Output'} 
              .description=${'Generates clean, semantic HTML'}
              .outputFormat=${'html'}
              .value=${'<h2>HTML Example</h2><p>This editor outputs <strong>clean HTML</strong> that can be used directly in web applications.</p><ul><li>Semantic markup</li><li>Clean structure</li><li>Ready to style</li></ul>'}
            ></dees-input-wysiwyg>
          </div>
          
          <div>
            <dees-input-wysiwyg 
              .label=${'Markdown Output'} 
              .description=${'Perfect for documentation and static sites'}
              .outputFormat=${'markdown'}
              .value=${'## Markdown Example\n\nThis editor can also output **Markdown** format for use with:\n\n- Static site generators\n- Documentation tools\n- GitHub READMEs\n- And more!'}
            ></dees-input-wysiwyg>
          </div>
        </div>
      </div>

      <div class="demo-section">
        <h3>🎨 Advanced Editing</h3>
        <p>Create complex documents with mixed content types. The editor handles all formatting seamlessly.</p>
        
        <dees-input-wysiwyg 
          .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 \\\n  -H "Authorization: Bearer YOUR_API_KEY"</code></pre><hr><p>For more information, please refer to our complete documentation.</p>'}
          .outputFormat=${'html'}
        ></dees-input-wysiwyg>
      </div>

      <div class="demo-section">
        <h3>⚙️ Form Integration</h3>
        <p>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 
            .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'}
            .tags=${['web-development', 'javascript', 'tutorial']}
          ></dees-input-tags>
        </dees-form>
      </div>
    </div>
  </dees-demowrapper>
`;