From 02f25aa02ed6d9a4a66cd5dadee1da52898eae23 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Thu, 26 Jun 2025 14:27:39 +0000 Subject: [PATCH] fix(editor-demos): update --- ts_web/elements/dees-input-richtext.demo.ts | 75 +++++---------------- ts_web/elements/dees-input-wysiwyg.demo.ts | 19 +++--- 2 files changed, 27 insertions(+), 67 deletions(-) diff --git a/ts_web/elements/dees-input-richtext.demo.ts b/ts_web/elements/dees-input-richtext.demo.ts index 518a7da..970caff 100644 --- a/ts_web/elements/dees-input-richtext.demo.ts +++ b/ts_web/elements/dees-input-richtext.demo.ts @@ -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` @@ -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`
-
-

Basic Rich Text Editor

-

A full-featured rich text editor with formatting toolbar

- + Welcome to the Rich Text Editor!

This is a feature-rich editor built with TipTap. You can:

  • Format text with various styles
  • Create different heading levels
  • Add links to external resources
  • Write inline code or code blocks

Use the toolbar above to explore all the formatting options available!

Start typing to see the magic happen...

'} .description=${'Use the toolbar to format your content with headings, lists, links, and more'} .showWordCount=${true} > -
+ -
-

With Placeholder

-

Empty editor with placeholder text

- + -
+ -
-

Different Heights

-

Editors with different minimum heights for various use cases

- +
html` .showWordCount=${true} >
-
+ -
-

Code Examples

-

Editor pre-filled with code examples

- + Installation Guide

To install the package, run the following command:

npm install @design.estate/dees-catalog

Then import the component in your TypeScript file:

import { DeesInputRichtext } from "@design.estate/dees-catalog";

You can now use the <dees-input-richtext> element in your templates.

'} .minHeight=${250} .showWordCount=${true} > -
+ -
-

Disabled State

-

Read-only rich text content

- + The Future of Web Components

Web Components have revolutionized how we build modern web applications...

"The future of web development lies in reusable, encapsulated components."

'} .disabled=${true} .showWordCount=${true} > -
+ -
-

Interactive Demo

-

Type in the editor below and see the HTML output

- + html`
HTML output will appear here...
-
+
`; \ No newline at end of file diff --git a/ts_web/elements/dees-input-wysiwyg.demo.ts b/ts_web/elements/dees-input-wysiwyg.demo.ts index b6833bc..678cc8b 100644 --- a/ts_web/elements/dees-input-wysiwyg.demo.ts +++ b/ts_web/elements/dees-input-wysiwyg.demo.ts @@ -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`
- +

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`

- +

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` > - +

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` - +

Create comprehensive tutorials and documentation with code examples, lists, and structured content.

@@ -850,7 +851,7 @@ git merge feature-branch > - +

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 - +

Create complex documents with mixed content types. The editor handles all formatting seamlessly.

@@ -949,7 +950,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab > - +

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 - +

Create content programmatically using the block API for dynamic document generation.

@@ -1003,7 +1004,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab - +

The WYSIWYG editor provides multiple export formats and lossless save/restore capabilities for maximum flexibility.