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 { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools'; import '@design.estate/dees-wcctools/demotools';
import './dees-panel.js';
export const demoFunc = () => html` export const demoFunc = () => html`
<dees-demowrapper> <dees-demowrapper>
@ -14,36 +15,12 @@ export const demoFunc = () => html`
margin: 0 auto; margin: 0 auto;
} }
.demo-section { dees-panel {
background: #f8f9fa; margin-bottom: 24px;
border-radius: 8px;
padding: 24px;
} }
@media (prefers-color-scheme: dark) { dees-panel:last-child {
.demo-section { margin-bottom: 0;
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 { .grid-layout {
@ -80,33 +57,24 @@ export const demoFunc = () => html`
</style> </style>
<div class="demo-container"> <div class="demo-container">
<div class="demo-section"> <dees-panel .title=${'1. Basic Rich Text Editor'} .subtitle=${'A full-featured rich text editor with formatting toolbar'}>
<h3>Basic Rich Text Editor</h3>
<p>A full-featured rich text editor with formatting toolbar</p>
<dees-input-richtext <dees-input-richtext
.label=${'Article Content'} .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>'} .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'} .description=${'Use the toolbar to format your content with headings, lists, links, and more'}
.showWordCount=${true} .showWordCount=${true}
></dees-input-richtext> ></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 <dees-input-richtext
.label=${'Blog Post'} .label=${'Blog Post'}
.placeholder=${'Start writing your blog post here...'} .placeholder=${'Start writing your blog post here...'}
.showWordCount=${true} .showWordCount=${true}
></dees-input-richtext> ></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"> <div class="grid-layout">
<dees-input-richtext <dees-input-richtext
.label=${'Short Note'} .label=${'Short Note'}
@ -122,36 +90,27 @@ export const demoFunc = () => html`
.showWordCount=${true} .showWordCount=${true}
></dees-input-richtext> ></dees-input-richtext>
</div> </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 <dees-input-richtext
.label=${'Technical Documentation'} .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>'} .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} .minHeight=${250}
.showWordCount=${true} .showWordCount=${true}
></dees-input-richtext> ></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 <dees-input-richtext
.label=${'Published Article (Read Only)'} .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>'} .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} .disabled=${true}
.showWordCount=${true} .showWordCount=${true}
></dees-input-richtext> ></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 <dees-input-richtext
id="interactive-editor" id="interactive-editor"
.label=${'Try it yourself'} .label=${'Try it yourself'}
@ -168,7 +127,7 @@ export const demoFunc = () => html`
<div class="output-preview" id="output-preview"> <div class="output-preview" id="output-preview">
<em>HTML output will appear here...</em> <em>HTML output will appear here...</em>
</div> </div>
</div> </dees-panel>
</div> </div>
</dees-demowrapper> </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 { html, css, type TemplateResult } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools'; import '@design.estate/dees-wcctools/demotools';
import './dees-panel.js';
import type { DeesInputWysiwyg } from './dees-input-wysiwyg.js'; import type { DeesInputWysiwyg } from './dees-input-wysiwyg.js';
import type { IBlock } from './wysiwyg/wysiwyg.types.js'; import type { IBlock } from './wysiwyg/wysiwyg.types.js';
@ -630,7 +631,7 @@ export const demoFunc = (): TemplateResult => html`
</style> </style>
<div class="demo-container"> <div class="demo-container">
<dees-panel heading="🚀 Modern WYSIWYG Editor"> <dees-panel .title=${'1. 🚀 Modern WYSIWYG Editor'}>
<p class="panel-description"> <p class="panel-description">
A powerful block-based editor with slash commands, keyboard shortcuts, and multiple output formats. A powerful block-based editor with slash commands, keyboard shortcuts, and multiple output formats.
Perfect for content creation, blog posts, documentation, and more. Perfect for content creation, blog posts, documentation, and more.
@ -708,7 +709,7 @@ export const demoFunc = (): TemplateResult => html`
</div> </div>
</dees-panel> </dees-panel>
<dees-panel heading="📝 Blog Post Example"> <dees-panel .title=${'2. 📝 Blog Post Example'}>
<p class="panel-description"> <p class="panel-description">
Perfect for creating rich content with multiple block types. Perfect for creating rich content with multiple block types.
The editor preserves formatting and provides a clean editing experience. The editor preserves formatting and provides a clean editing experience.
@ -722,7 +723,7 @@ export const demoFunc = (): TemplateResult => html`
></dees-input-wysiwyg> ></dees-input-wysiwyg>
</dees-panel> </dees-panel>
<dees-panel heading="🔀 Drag & Drop Reordering"> <dees-panel .title=${'3. 🔀 Drag & Drop Reordering'}>
<p class="panel-description"> <p class="panel-description">
Easily rearrange your content blocks by dragging them. Easily rearrange your content blocks by dragging them.
Hover over any block to reveal the drag handle on the left side. Hover over any block to reveal the drag handle on the left side.
@ -746,7 +747,7 @@ export const demoFunc = (): TemplateResult => html`
</div> </div>
</dees-panel> </dees-panel>
<dees-panel heading="📚 Tutorial & Documentation"> <dees-panel .title=${'4. 📚 Tutorial & Documentation'}>
<p class="panel-description"> <p class="panel-description">
Create comprehensive tutorials and documentation with code examples, lists, and structured content. Create comprehensive tutorials and documentation with code examples, lists, and structured content.
</p> </p>
@ -850,7 +851,7 @@ git merge feature-branch
></dees-input-wysiwyg> ></dees-input-wysiwyg>
</dees-panel> </dees-panel>
<dees-panel heading="🔄 Output Formats"> <dees-panel .title=${'5. 🔄 Output Formats'}>
<p class="panel-description"> <p class="panel-description">
Choose between HTML and Markdown output formats depending on your needs. Choose between HTML and Markdown output formats depending on your needs.
Perfect for static site generators, documentation systems, or any content management workflow. 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> </div>
</dees-panel> </dees-panel>
<dees-panel heading="🎨 Advanced Editing"> <dees-panel .title=${'6. 🎨 Advanced Editing'}>
<p class="panel-description"> <p class="panel-description">
Create complex documents with mixed content types. The editor handles all formatting seamlessly. Create complex documents with mixed content types. The editor handles all formatting seamlessly.
</p> </p>
@ -949,7 +950,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
></dees-input-wysiwyg> ></dees-input-wysiwyg>
</dees-panel> </dees-panel>
<dees-panel heading="⚙️ Form Integration"> <dees-panel .title=${'7. ⚙️ Form Integration'}>
<p class="panel-description"> <p class="panel-description">
Seamlessly integrates with dees-form for complete form solutions. 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. 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-form>
</dees-panel> </dees-panel>
<dees-panel heading="🧩 Programmatic Block Creation"> <dees-panel .title=${'8. 🧩 Programmatic Block Creation'}>
<p class="panel-description"> <p class="panel-description">
Create content programmatically using the block API for dynamic document generation. Create content programmatically using the block API for dynamic document generation.
</p> </p>
@ -1003,7 +1004,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
</div> </div>
</dees-panel> </dees-panel>
<dees-panel heading="📤 Export/Import Features"> <dees-panel .title=${'9. 📤 Export/Import Features'}>
<p class="panel-description"> <p class="panel-description">
The WYSIWYG editor provides multiple export formats and lossless save/restore capabilities for maximum flexibility. The WYSIWYG editor provides multiple export formats and lossless save/restore capabilities for maximum flexibility.
</p> </p>