From fbd52ee9a5f0e8ca1702fc000a8f5a7b6b69c391 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Mon, 23 Jun 2025 17:09:53 +0000 Subject: [PATCH] feat(editor): Add wysiwyg editor --- ts_web/elements/dees-input-wysiwyg.demo.ts | 311 +++++++++++++++++++++ 1 file changed, 311 insertions(+) create mode 100644 ts_web/elements/dees-input-wysiwyg.demo.ts diff --git a/ts_web/elements/dees-input-wysiwyg.demo.ts b/ts_web/elements/dees-input-wysiwyg.demo.ts new file mode 100644 index 0000000..8218339 --- /dev/null +++ b/ts_web/elements/dees-input-wysiwyg.demo.ts @@ -0,0 +1,311 @@ +import { html, css } from '@design.estate/dees-element'; +import '@design.estate/dees-wcctools/demotools'; + +export const demoFunc = () => html` + + + +
+
+

🚀 Modern WYSIWYG Editor

+

A powerful block-based editor with slash commands, keyboard shortcuts, and multiple output formats. Perfect for content creation, blog posts, documentation, and more.

+ +
+
+ ✓ + Slash commands (/) +
+
+ ✓ + Keyboard shortcuts +
+
+ ✓ + Block-based editing +
+
+ ✓ + HTML & Markdown output +
+
+ ✓ + Dark mode support +
+
+ ✓ + Mobile responsive +
+
+ + + +
+

⌨️ Keyboard Shortcuts

+
+
+ / Slash commands +
+
+ # Heading 1 +
+
+ ## Heading 2 +
+
+ ### Heading 3 +
+
+ > Quote +
+
+ \`\`\` Code block +
+
+ - Bullet list +
+
+ 1. Numbered list +
+
+ --- Divider +
+
+
+
+ +
+

📝 Blog Post Example

+

Perfect for creating rich content with multiple block types. The editor preserves formatting and provides a clean editing experience.

+ + Welcome to Our Blog

This is an example blog post that demonstrates the capabilities of our WYSIWYG editor.

Features Overview

Our editor supports multiple block types including headings, paragraphs, quotes, and more.

The best way to predict the future is to invent it.

You can also create lists and code blocks for technical content.

'} + .outputFormat=${'html'} + > +
+ +
+

🔄 Output Formats

+

Choose between HTML and Markdown output formats depending on your needs. Perfect for static site generators, documentation systems, or any content management workflow.

+ +
+
+ HTML Example

This editor outputs clean HTML that can be used directly in web applications.

  • Semantic markup
  • Clean structure
  • Ready to style
'} + > +
+ +
+ +
+
+
+ +
+

🎨 Advanced Editing

+

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

+ + API Documentation

Welcome to our API documentation. Below you\'ll find examples of how to use our endpoints.

Authentication

All API requests require authentication using an API key:

Authorization: Bearer YOUR_API_KEY

Endpoints

GET /users

Retrieve a list of users from the system.

curl -X GET https://api.example.com/users \\\n  -H "Authorization: Bearer YOUR_API_KEY"

For more information, please refer to our complete documentation.

'} + .outputFormat=${'html'} + > +
+ +
+

⚙️ Form Integration

+

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.

+ + + + + + + + +
+
+ +`; \ No newline at end of file