feat(editor): Add wysiwyg editor
This commit is contained in:
Juergen Kunz
311
ts_web/elements/dees-input-wysiwyg.demo.ts
Normal file
311
ts_web/elements/dees-input-wysiwyg.demo.ts
Normal file
@ -0,0 +1,311 @@
|
||||
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> 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>
|
||||
`;
|
||||
Reference in New Issue
Block a user