update wysiwyg

2025-06-27 19:25:34 +00:00
parent fe3cd0591f
commit 24957f02d4
11 changed files with 934 additions and 178 deletions
--- a/ts_web/elements/wysiwyg/dees-wysiwyg-block.ts
+++ b/ts_web/elements/wysiwyg/dees-wysiwyg-block.ts
@ -13,6 +13,8 @@ import { WysiwygBlocks } from './wysiwyg.blocks.js';
 import { WysiwygSelection } from './wysiwyg.selection.js';
 import { BlockRegistry, type IBlockEventHandlers } from './blocks/index.js';
 import './wysiwyg.blockregistration.js';
+import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
+import '../dees-contextmenu.js';

 declare global {
  interface HTMLElementTagNameMap {
@ -685,6 +687,136 @@ export class DeesWysiwygBlock extends DeesElement {
  

  
+  /**
+   * Get context menu items for this block
+   */
+  public getContextMenuItems(): any[] {
+    if (!this.block || this.block.type === 'divider') {
+      return [];
+    }
+    
+    const blockTypes = WysiwygShortcuts.getSlashMenuItems();
+    const currentType = this.block.type;
+    
+    // Capture the wysiwyg component reference now, not in the action
+    const wysiwygComponent = this.closest('dees-input-wysiwyg') as any;
+    const blockId = this.block.id;
+    
+    console.log('getContextMenuItems - captured wysiwygComponent:', !!wysiwygComponent, 'blockId:', blockId);
+    
+    // Create submenu items for block type change
+    const blockTypeItems = blockTypes
+      .filter(item => item.type !== currentType && item.type !== 'divider')
+      .map(item => ({
+        name: item.label,
+        iconName: item.icon.replace('lucide:', ''),
+        action: async () => {
+          console.log('Block type change action called:', {
+            targetType: item.type,
+            currentBlockId: blockId
+          });
+          
+          console.log('Using captured wysiwyg component:', !!wysiwygComponent);
+          
+          if (wysiwygComponent && wysiwygComponent.blockOperations) {
+            // Transform the block type
+            const blockToTransform = wysiwygComponent.blocks.find((b: IBlock) => b.id === blockId);
+            console.log('Found block to transform:', !!blockToTransform, blockToTransform?.id);
+            
+            if (blockToTransform) {
+              console.log('Changing type from', blockToTransform.type, 'to', item.type);
+              blockToTransform.type = item.type;
+              blockToTransform.content = blockToTransform.content || '';
+              
+              // Handle special metadata for different block types
+              if (item.type === 'code') {
+                blockToTransform.metadata = { language: 'typescript' };
+              } else if (item.type === 'list') {
+                blockToTransform.metadata = { listType: 'bullet' };
+              } else if (item.type === 'image') {
+                blockToTransform.content = '';
+                blockToTransform.metadata = { url: '', loading: false };
+              } else if (item.type === 'youtube') {
+                blockToTransform.content = '';
+                blockToTransform.metadata = { videoId: '', url: '' };
+              } else if (item.type === 'markdown') {
+                blockToTransform.metadata = { showPreview: false };
+              } else if (item.type === 'html') {
+                blockToTransform.metadata = { showPreview: false };
+              } else if (item.type === 'attachment') {
+                blockToTransform.content = '';
+                blockToTransform.metadata = { files: [] };
+              }
+              
+              // Update the block element
+              wysiwygComponent.updateBlockElement(blockId);
+              wysiwygComponent.updateValue();
+              
+              // Focus the block after transformation
+              requestAnimationFrame(() => {
+                wysiwygComponent.blockOperations.focusBlock(blockId);
+              });
+            }
+          }
+        }
+      }));
+    
+    const menuItems: any[] = [
+      {
+        name: 'Change Type',
+        iconName: 'type',
+        submenu: blockTypeItems
+      }
+    ];
+    
+    // Add copy/cut/paste for editable blocks
+    if (!['image', 'divider', 'youtube', 'attachment'].includes(this.block.type)) {
+      menuItems.push(
+        { divider: true },
+        {
+          name: 'Cut',
+          iconName: 'scissors',
+          shortcut: 'Cmd+X',
+          action: async () => {
+            document.execCommand('cut');
+          }
+        },
+        {
+          name: 'Copy',
+          iconName: 'copy',
+          shortcut: 'Cmd+C',
+          action: async () => {
+            document.execCommand('copy');
+          }
+        },
+        {
+          name: 'Paste',
+          iconName: 'clipboard',
+          shortcut: 'Cmd+V',
+          action: async () => {
+            document.execCommand('paste');
+          }
+        }
+      );
+    }
+    
+    // Add delete option
+    menuItems.push(
+      { divider: true },
+      {
+        name: 'Delete Block',
+        iconName: 'trash2',
+        action: async () => {
+          if (wysiwygComponent && wysiwygComponent.blockOperations) {
+            wysiwygComponent.blockOperations.deleteBlock(blockId);
+          }
+        }
+      }
+    );
+    
+    return menuItems;
+  }
+
  /**
   * Gets content split at cursor position
   */