feat: Add WYSIWYG editor components and utilities

- Implemented WysiwygModalManager for managing modals related to code blocks and block settings.
- Created WysiwygSelection for handling text selection across Shadow DOM boundaries.
- Introduced WysiwygShortcuts for managing keyboard shortcuts and slash menu items.
- Developed wysiwygStyles for consistent styling of the WYSIWYG editor.
- Defined types for blocks, slash menu items, and shortcut patterns in wysiwyg.types.ts.

ts_web/elements/dees-input-wysiwyg/wysiwyg.shortcuts.ts

@@ -0,0 +1,74 @@
+import { type IBlock, type IShortcutPattern, type ISlashMenuItem } from './wysiwyg.types.js';
+
+export class WysiwygShortcuts {
+  static readonly HEADING_PATTERNS: IShortcutPattern[] = [
+    { pattern: /^#[\s\u00A0]$/, type: 'heading-1' },
+    { pattern: /^##[\s\u00A0]$/, type: 'heading-2' },
+    { pattern: /^###[\s\u00A0]$/, type: 'heading-3' }
+  ];
+
+  static readonly LIST_PATTERNS: IShortcutPattern[] = [
+    { pattern: /^[*-][\s\u00A0]$/, type: 'bullet' },
+    { pattern: /^(\d+)\.[\s\u00A0]$/, type: 'ordered' },
+    { pattern: /^(\d+)\)[\s\u00A0]$/, type: 'ordered' }
+  ];
+
+  static readonly QUOTE_PATTERN = /^>[\s\u00A0]$/;
+  static readonly CODE_PATTERN = /^```$/;
+  static readonly DIVIDER_PATTERNS = ['---', '***', '___'];
+
+  static checkHeadingShortcut(content: string): { type: IBlock['type'] } | null {
+    for (const { pattern, type } of this.HEADING_PATTERNS) {
+      if (pattern.test(content)) {
+        return { type: type as IBlock['type'] };
+      }
+    }
+    return null;
+  }
+
+  static checkListShortcut(content: string): { type: 'list', listType: 'bullet' | 'ordered' } | null {
+    for (const { pattern, type } of this.LIST_PATTERNS) {
+      if (pattern.test(content)) {
+        return { type: 'list', listType: type as 'bullet' | 'ordered' };
+      }
+    }
+    return null;
+  }
+
+  static checkQuoteShortcut(content: string): boolean {
+    return this.QUOTE_PATTERN.test(content);
+  }
+
+  static checkCodeShortcut(content: string): boolean {
+    return this.CODE_PATTERN.test(content);
+  }
+
+  static checkDividerShortcut(content: string): boolean {
+    return this.DIVIDER_PATTERNS.includes(content);
+  }
+
+  static getSlashMenuItems(): ISlashMenuItem[] {
+    return [
+      { type: 'paragraph', label: 'Paragraph', icon: 'lucide:pilcrow' },
+      { type: 'heading-1', label: 'Heading 1', icon: 'lucide:heading1' },
+      { type: 'heading-2', label: 'Heading 2', icon: 'lucide:heading2' },
+      { type: 'heading-3', label: 'Heading 3', icon: 'lucide:heading3' },
+      { type: 'quote', label: 'Quote', icon: 'lucide:quote' },
+      { type: 'code', label: 'Code Block', icon: 'lucide:fileCode' },
+      { type: 'list', label: 'Bullet List', icon: 'lucide:list' },
+      { type: 'image', label: 'Image', icon: 'lucide:image' },
+      { type: 'divider', label: 'Divider', icon: 'lucide:minus' },
+      { type: 'youtube', label: 'YouTube', icon: 'lucide:youtube' },
+      { type: 'markdown', label: 'Markdown', icon: 'lucide:fileText' },
+      { type: 'html', label: 'HTML', icon: 'lucide:code' },
+      { type: 'attachment', label: 'File Attachment', icon: 'lucide:paperclip' },
+    ];
+  }
+
+  static generateBlockId(): string {
+    return `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+  }
+}
+
+// Re-export the type that is used in this module
+export type { ISlashMenuItem } from './wysiwyg.types.js';