update wysiwyg
This commit is contained in:
Juergen Kunz
@ -247,28 +247,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
|
||||
};
|
||||
wrapper.appendChild(blockComponent);
|
||||
|
||||
// Add settings button for non-divider blocks
|
||||
if (block.type !== 'divider') {
|
||||
const settings = document.createElement('div');
|
||||
settings.className = 'block-settings';
|
||||
settings.innerHTML = `
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="12" cy="5" r="2"></circle>
|
||||
<circle cx="12" cy="12" r="2"></circle>
|
||||
<circle cx="12" cy="19" r="2"></circle>
|
||||
</svg>
|
||||
`;
|
||||
settings.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
WysiwygModalManager.showBlockSettingsModal(block, () => {
|
||||
this.updateValue();
|
||||
// Re-render only the updated block
|
||||
this.updateBlockElement(block.id);
|
||||
});
|
||||
});
|
||||
wrapper.appendChild(settings);
|
||||
}
|
||||
// Remove settings button - context menu will handle this
|
||||
|
||||
// Add drag event listeners
|
||||
wrapper.addEventListener('dragover', (e) => this.dragDropHandler.handleDragOver(e, block));
|
||||
|
||||
@ -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
|
||||
*/
|
||||
|
||||
@ -429,36 +429,7 @@ export const wysiwygStyles = css`
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Block Settings Button */
|
||||
.block-settings {
|
||||
position: absolute;
|
||||
right: -40px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.block-wrapper:hover .block-settings {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.block-settings:hover {
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
}
|
||||
|
||||
.block-settings:active {
|
||||
background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
|
||||
}
|
||||
/* Block Settings Button - Removed in favor of context menu */
|
||||
|
||||
/* Text Selection Styles */
|
||||
.block ::selection {
|
||||
|
||||
Reference in New Issue
Block a user