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

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>