feat(editor): Add wysiwyg editor

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

@@ -6,6 +6,7 @@ export const demoFunc = () => html`
     // Get editor instances
     const programmaticEditor = elementArg.querySelector('#programmatic-demo') as any;
     const articleEditor = elementArg.querySelector('#article-editor') as any;
+    const dragDemoEditor = elementArg.querySelector('#drag-demo') as any;
     
     // Programmatically set content for the article editor after render
     if (articleEditor) {
@@ -85,6 +86,57 @@ export const demoFunc = () => html`
       }, 500);
     }
     
+    // Initialize drag demo editor with sample content
+    if (dragDemoEditor) {
+      const dragDemoBlocks = [
+        {
+          id: 'drag-title-' + Date.now(),
+          type: 'heading-1' as const,
+          content: 'Drag & Drop Demo'
+        },
+        {
+          id: 'drag-intro-' + Date.now(),
+          type: 'paragraph' as const,
+          content: 'This editor demonstrates drag and drop functionality. Try dragging these blocks around!'
+        },
+        {
+          id: 'drag-heading-' + Date.now(),
+          type: 'heading-2' as const,
+          content: 'How It Works'
+        },
+        {
+          id: 'drag-list-' + Date.now(),
+          type: 'list' as const,
+          content: 'Hover over any block to see the drag handle\nClick and hold the handle to start dragging\nDrag to reorder blocks\nRelease to drop in the new position',
+          metadata: { listType: 'ordered' }
+        },
+        {
+          id: 'drag-quote-' + Date.now(),
+          type: 'quote' as const,
+          content: 'The drag and drop feature makes it easy to reorganize your content without cutting and pasting.'
+        },
+        {
+          id: 'drag-code-' + Date.now(),
+          type: 'code' as const,
+          content: '// Example: The blocks can be reordered\nconst blocks = editor.exportBlocks();\n// Rearrange blocks array\neditor.importBlocks(blocks);'
+        },
+        {
+          id: 'drag-divider-' + Date.now(),
+          type: 'divider' as const,
+          content: ' '
+        },
+        {
+          id: 'drag-footer-' + Date.now(),
+          type: 'paragraph' as const,
+          content: 'Note: Divider blocks cannot be dragged, but other blocks can be moved around them.'
+        }
+      ];
+      
+      setTimeout(() => {
+        dragDemoEditor.importBlocks(dragDemoBlocks);
+      }, 600);
+    }
+    
     // Setup button handlers for programmatic demo
     const generateReportBtn = elementArg.querySelector('#generate-report-btn');
     const generateRecipeBtn = elementArg.querySelector('#generate-recipe-btn');
@@ -413,6 +465,10 @@ export const demoFunc = () => html`
             <span class="feature-icon">✓</span>
             <span>Block-based editing</span>
           </div>
+          <div class="feature-item">
+            <span class="feature-icon">✓</span>
+            <span>Drag & drop reordering</span>
+          </div>
           <div class="feature-item">
             <span class="feature-icon">✓</span>
             <span>HTML & Markdown output</span>
@@ -479,6 +535,28 @@ export const demoFunc = () => html`
         ></dees-input-wysiwyg>
       </div>
 
+      <div class="demo-section">
+        <h3>🔀 Drag & Drop Reordering</h3>
+        <p>Easily rearrange your content blocks by dragging them. Hover over any block to reveal the drag handle on the left side.</p>
+        
+        <dees-input-wysiwyg 
+          id="drag-demo"
+          .label=${'Drag & Drop Demo'} 
+          .description=${'Try dragging blocks to reorder them - hover to see drag handles'}
+        ></dees-input-wysiwyg>
+        
+        <div style="margin-top: 16px; padding: 12px; background: #f0f8ff; border-radius: 8px; font-size: 14px; line-height: 1.6;">
+          <strong>💡 Tips:</strong>
+          <ul style="margin: 8px 0 0 0; padding-left: 24px;">
+            <li>Hover over any block to see the drag handle (⋮⋮) on the left</li>
+            <li>Click and hold the drag handle to start dragging</li>
+            <li>Blue indicators show where the block will be dropped</li>
+            <li>Divider blocks cannot be dragged</li>
+            <li>The editor maintains focus on the moved block after dropping</li>
+          </ul>
+        </div>
+      </div>
+
       <div class="demo-section">
         <h3>📚 Tutorial & Documentation</h3>
         <p>Create comprehensive tutorials and documentation with code examples, lists, and structured content.</p>