dees-catalog/ts_web/elements/dees-input-richtext.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: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .demo-section {
          background: #f8f9fa;
          border-radius: 8px;
          padding: 24px;
        }
        
        @media (prefers-color-scheme: dark) {
          .demo-section {
            background: #1a1a1a;
          }
        }
        
        .demo-section h3 {
          margin-top: 0;
          margin-bottom: 16px;
          color: #0069f2;
          font-size: 18px;
        }
        
        .demo-section p {
          margin-top: 0;
          margin-bottom: 16px;
          color: #666;
          font-size: 14px;
        }
        
        @media (prefers-color-scheme: dark) {
          .demo-section p {
            color: #999;
          }
        }
        
        .grid-layout {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        
        @media (max-width: 768px) {
          .grid-layout {
            grid-template-columns: 1fr;
          }
        }
        
        .output-preview {
          margin-top: 16px;
          padding: 16px;
          background: #f3f4f6;
          border-radius: 4px;
          font-size: 12px;
          color: #374151;
          word-break: break-all;
          max-height: 200px;
          overflow-y: auto;
        }
        
        @media (prefers-color-scheme: dark) {
          .output-preview {
            background: #2c2c2c;
            color: #e4e4e7;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <div class="demo-section">
        <h3>Basic Rich Text Editor</h3>
        <p>A full-featured rich text editor with formatting toolbar</p>
        
        <dees-input-richtext 
          .label=${'Article Content'} 
          .value=${'<h1>Welcome to the Rich Text Editor!</h1><p>This is a feature-rich editor built with TipTap. You can:</p><ul><li><strong>Format text</strong> with <em>various</em> <u>styles</u></li><li>Create different heading levels</li><li>Add <a href="https://example.com">links</a> to external resources</li><li>Write <code>inline code</code> or code blocks</li></ul><blockquote><p>Use the toolbar above to explore all the formatting options available!</p></blockquote><p>Start typing to see the magic happen...</p>'}
          .description=${'Use the toolbar to format your content with headings, lists, links, and more'}
          .showWordCount=${true}
        ></dees-input-richtext>
      </div>
      
      <div class="demo-section">
        <h3>With Placeholder</h3>
        <p>Empty editor with placeholder text</p>
        
        <dees-input-richtext 
          .label=${'Blog Post'} 
          .placeholder=${'Start writing your blog post here...'}
          .showWordCount=${true}
        ></dees-input-richtext>
      </div>
      
      <div class="demo-section">
        <h3>Different Heights</h3>
        <p>Editors with different minimum heights for various use cases</p>
        
        <div class="grid-layout">
          <dees-input-richtext 
            .label=${'Short Note'} 
            .minHeight=${150}
            .placeholder=${'Quick note...'}
            .showWordCount=${false}
          ></dees-input-richtext>
          
          <dees-input-richtext 
            .label=${'Extended Content'} 
            .minHeight=${300}
            .placeholder=${'Write your extended content here...'}
            .showWordCount=${true}
          ></dees-input-richtext>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>Code Examples</h3>
        <p>Editor pre-filled with code examples</p>
        
        <dees-input-richtext 
          .label=${'Technical Documentation'} 
          .value=${'<h2>Installation Guide</h2><p>To install the package, run the following command:</p><pre><code>npm install @design.estate/dees-catalog</code></pre><p>Then import the component in your TypeScript file:</p><pre><code>import { DeesInputRichtext } from "@design.estate/dees-catalog";</code></pre><p>You can now use the <code>&lt;dees-input-richtext&gt;</code> element in your templates.</p>'}
          .minHeight=${250}
          .showWordCount=${true}
        ></dees-input-richtext>
      </div>
      
      <div class="demo-section">
        <h3>Disabled State</h3>
        <p>Read-only rich text content</p>
        
        <dees-input-richtext 
          .label=${'Published Article (Read Only)'} 
          .value=${'<h2>The Future of Web Components</h2><p>Web Components have revolutionized how we build modern web applications...</p><blockquote><p>"The future of web development lies in reusable, encapsulated components."</p></blockquote>'}
          .disabled=${true}
          .showWordCount=${true}
        ></dees-input-richtext>
      </div>
      
      <div class="demo-section">
        <h3>Interactive Demo</h3>
        <p>Type in the editor below and see the HTML output</p>
        
        <dees-input-richtext 
          id="interactive-editor"
          .label=${'Try it yourself'} 
          .placeholder=${'Type something here...'}
          .showWordCount=${true}
          @change=${(e: CustomEvent) => {
            const output = document.querySelector('#output-preview');
            if (output) {
              output.textContent = e.detail.value;
            }
          }}
        ></dees-input-richtext>
        
        <div class="output-preview" id="output-preview">
          <em>HTML output will appear here...</em>
        </div>
      </div>
    </div>
  </dees-demowrapper>
`;