From f3afbb2e486bd9a87de13a3a8fb383bf38a6e831 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Mon, 23 Jun 2025 17:14:47 +0000
Subject: [PATCH] feat(editor): Add wysiwyg editor

---
 ts_web/elements/dees-input-wysiwyg.demo.ts |  2 +-
 ts_web/elements/dees-input-wysiwyg.ts      | 41 ++++++++++++++++------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/ts_web/elements/dees-input-wysiwyg.demo.ts b/ts_web/elements/dees-input-wysiwyg.demo.ts
index 8218339..ef8a15c 100644
--- a/ts_web/elements/dees-input-wysiwyg.demo.ts
+++ b/ts_web/elements/dees-input-wysiwyg.demo.ts
@@ -220,7 +220,7 @@ export const demoFunc = () => html`
               <code>\`\`\`</code> Code block
             </div>
             <div class="shortcut">
-              <code>-</code> Bullet list
+              <code>* </code> or <code>- </code> Bullet list
             </div>
             <div class="shortcut">
               <code>1.</code> Numbered list
diff --git a/ts_web/elements/dees-input-wysiwyg.ts b/ts_web/elements/dees-input-wysiwyg.ts
index 2e55399..87ad86b 100644
--- a/ts_web/elements/dees-input-wysiwyg.ts
+++ b/ts_web/elements/dees-input-wysiwyg.ts
@@ -503,27 +503,38 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
           block.content = '';
           
           // Force update the block
+          this.requestUpdate();
           setTimeout(() => {
             const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${block.id}"]`) as HTMLDivElement;
             if (blockElement) {
-              blockElement.textContent = '';
               blockElement.focus();
+              // Place cursor at the beginning for headings
+              const range = document.createRange();
+              const sel = window.getSelection();
+              range.selectNodeContents(blockElement);
+              range.collapse(true);
+              sel!.removeAllRanges();
+              sel!.addRange(range);
             }
-          });
+          }, 0);
           
           this.updateValue();
-          this.requestUpdate();
           return;
         }
       }
       
       // Check for list shortcuts
       const listPatterns = [
-        { pattern: /^(\*|-) $/, type: 'bullet' },
+        { pattern: /^[*-] $/, type: 'bullet' },
         { pattern: /^(\d+)\. $/, type: 'ordered' },
         { pattern: /^(\d+)\) $/, type: 'ordered' }
       ];
       
+      // Debug: Log content when it starts with * or -
+      if (block.content.startsWith('*') || block.content.startsWith('-')) {
+        console.log('List shortcut check - content:', JSON.stringify(block.content), 'length:', block.content.length);
+      }
+      
       for (const { pattern, type } of listPatterns) {
         if (pattern.test(block.content)) {
           e.preventDefault();
@@ -562,16 +573,21 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
         block.type = 'quote';
         block.content = '';
         
+        this.requestUpdate();
         setTimeout(() => {
           const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${block.id}"]`) as HTMLDivElement;
           if (blockElement) {
-            blockElement.textContent = '';
             blockElement.focus();
+            const range = document.createRange();
+            const sel = window.getSelection();
+            range.selectNodeContents(blockElement);
+            range.collapse(true);
+            sel!.removeAllRanges();
+            sel!.addRange(range);
           }
-        });
+        }, 0);
         
         this.updateValue();
-        this.requestUpdate();
         return;
       }
       
@@ -581,16 +597,21 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
         block.type = 'code';
         block.content = '';
         
+        this.requestUpdate();
         setTimeout(() => {
           const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${block.id}"]`) as HTMLDivElement;
           if (blockElement) {
-            blockElement.textContent = '';
             blockElement.focus();
+            const range = document.createRange();
+            const sel = window.getSelection();
+            range.selectNodeContents(blockElement);
+            range.collapse(true);
+            sel!.removeAllRanges();
+            sel!.addRange(range);
           }
-        });
+        }, 0);
         
         this.updateValue();
-        this.requestUpdate();
         return;
       }