fix(editor-demos): update
This commit is contained in:
Juergen Kunz
@ -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><dees-input-richtext></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>
|
||||
`;
|
||||
Reference in New Issue
Block a user