design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(editor-demos): update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-26 14:27:39 +00:00
parent 312fc4ba90
commit 02f25aa02e
2 changed files with 27 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
ts_web/elements/dees-input-richtext.demo.ts
View File

@ -1,5 +1,6 @@
import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import './dees-panel.js';
export const demoFunc = () => html`
<dees-demowrapper>
@ -14,36 +15,12 @@ export const demoFunc = () => html`
margin: 0 auto;
}
.demo-section {
background: #f8f9fa;
border-radius: 8px;
padding: 24px;
dees-panel {
margin-bottom: 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;
}
dees-panel:last-child {
margin-bottom: 0;
}
.grid-layout {
@ -80,33 +57,24 @@ export const demoFunc = () => html`
</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-panel .title=${'1. Basic Rich Text Editor'} .subtitle=${'A full-featured rich text editor with formatting toolbar'}>
<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>
</dees-panel>
<div class="demo-section">
<h3>With Placeholder</h3>
<p>Empty editor with placeholder text</p>
<dees-panel .title=${'2. With Placeholder'} .subtitle=${'Empty editor with placeholder text'}>
<dees-input-richtext
.label=${'Blog Post'}
.placeholder=${'Start writing your blog post here...'}
.showWordCount=${true}
></dees-input-richtext>
</div>
</dees-panel>
<div class="demo-section">
<h3>Different Heights</h3>
<p>Editors with different minimum heights for various use cases</p>
<dees-panel .title=${'3. Different Heights'} .subtitle=${'Editors with different minimum heights for various use cases'}>
<div class="grid-layout">
<dees-input-richtext
.label=${'Short Note'}
@ -122,36 +90,27 @@ export const demoFunc = () => html`
.showWordCount=${true}
></dees-input-richtext>
</div>
</div>
</dees-panel>
<div class="demo-section">
<h3>Code Examples</h3>
<p>Editor pre-filled with code examples</p>
<dees-panel .title=${'4. Code Examples'} .subtitle=${'Editor pre-filled with code examples'}>
<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>
</dees-panel>
<div class="demo-section">
<h3>Disabled State</h3>
<p>Read-only rich text content</p>
<dees-panel .title=${'5. Disabled State'} .subtitle=${'Read-only rich text content'}>
<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>
</dees-panel>
<div class="demo-section">
<h3>Interactive Demo</h3>
<p>Type in the editor below and see the HTML output</p>
<dees-panel .title=${'6. Interactive Demo'} .subtitle=${'Type in the editor below and see the HTML output'}>
<dees-input-richtext
id="interactive-editor"
.label=${'Try it yourself'}
@ -168,7 +127,7 @@ export const demoFunc = () => html`
<div class="output-preview" id="output-preview">
<em>HTML output will appear here...</em>
</div>
</div>
</dees-panel>
</div>
</dees-demowrapper>
`;

19
ts_web/elements/dees-input-wysiwyg.demo.ts
View File

@ -1,5 +1,6 @@
import { html, css, type TemplateResult } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import './dees-panel.js';
import type { DeesInputWysiwyg } from './dees-input-wysiwyg.js';
import type { IBlock } from './wysiwyg/wysiwyg.types.js';
@ -630,7 +631,7 @@ export const demoFunc = (): TemplateResult => html`
</style>
<div class="demo-container">
<dees-panel heading="🚀 Modern WYSIWYG Editor">
<dees-panel .title=${'1. 🚀 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.
@ -708,7 +709,7 @@ export const demoFunc = (): TemplateResult => html`
</div>
</dees-panel>
<dees-panel heading="📝 Blog Post Example">
<dees-panel .title=${'2. 📝 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.
@ -722,7 +723,7 @@ export const demoFunc = (): TemplateResult => html`
></dees-input-wysiwyg>
</dees-panel>
<dees-panel heading="🔀 Drag & Drop Reordering">
<dees-panel .title=${'3. 🔀 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.
@ -746,7 +747,7 @@ export const demoFunc = (): TemplateResult => html`
</div>
</dees-panel>
<dees-panel heading="📚 Tutorial & Documentation">
<dees-panel .title=${'4. 📚 Tutorial & Documentation'}>
<p class="panel-description">
Create comprehensive tutorials and documentation with code examples, lists, and structured content.
</p>
@ -850,7 +851,7 @@ git merge feature-branch
></dees-input-wysiwyg>
</dees-panel>
<dees-panel heading="🔄 Output Formats">
<dees-panel .title=${'5. 🔄 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.
@ -930,7 +931,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
</div>
</dees-panel>
<dees-panel heading="🎨 Advanced Editing">
<dees-panel .title=${'6. 🎨 Advanced Editing'}>
<p class="panel-description">
Create complex documents with mixed content types. The editor handles all formatting seamlessly.
</p>
@ -949,7 +950,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
></dees-input-wysiwyg>
</dees-panel>
<dees-panel heading="⚙️ Form Integration">
<dees-panel .title=${'7. ⚙️ 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.
@ -977,7 +978,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
</dees-form>
</dees-panel>
<dees-panel heading="🧩 Programmatic Block Creation">
<dees-panel .title=${'8. 🧩 Programmatic Block Creation'}>
<p class="panel-description">
Create content programmatically using the block API for dynamic document generation.
</p>
@ -1003,7 +1004,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
</div>
</dees-panel>
<dees-panel heading="📤 Export/Import Features">
<dees-panel .title=${'9. 📤 Export/Import Features'}>
<p class="panel-description">
The WYSIWYG editor provides multiple export formats and lossless save/restore capabilities for maximum flexibility.
</p>