133 lines
5.1 KiB
TypeScript
133 lines
5.1 KiB
TypeScript
import { html, css } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import './dees-panel.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<dees-demowrapper>
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
dees-panel {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
dees-panel:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.grid-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.grid-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.output-preview {
|
|
margin-top: 16px;
|
|
padding: 16px;
|
|
background: #f3f4f6;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #374151;
|
|
word-break: break-all;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.output-preview {
|
|
background: #2c2c2c;
|
|
color: #e4e4e7;
|
|
}
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<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>
|
|
</dees-panel>
|
|
|
|
<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>
|
|
</dees-panel>
|
|
|
|
<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'}
|
|
.minHeight=${150}
|
|
.placeholder=${'Quick note...'}
|
|
.showWordCount=${false}
|
|
></dees-input-richtext>
|
|
|
|
<dees-input-richtext
|
|
.label=${'Extended Content'}
|
|
.minHeight=${300}
|
|
.placeholder=${'Write your extended content here...'}
|
|
.showWordCount=${true}
|
|
></dees-input-richtext>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<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>
|
|
</dees-panel>
|
|
|
|
<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>
|
|
</dees-panel>
|
|
|
|
<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'}
|
|
.placeholder=${'Type something here...'}
|
|
.showWordCount=${true}
|
|
@change=${(e: CustomEvent) => {
|
|
const output = document.querySelector('#output-preview');
|
|
if (output) {
|
|
output.textContent = e.detail.value;
|
|
}
|
|
}}
|
|
></dees-input-richtext>
|
|
|
|
<div class="output-preview" id="output-preview">
|
|
<em>HTML output will appear here...</em>
|
|
</div>
|
|
</dees-panel>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`; |