design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update selection reversal

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-24 17:09:19 +00:00
parent bd223f77d0
commit 90fc8bed35
2 changed files with 218 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
View File

@@ -817,14 +817,17 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
targetBlockComponent.focus();
return;
}
// Apply link format with Shadow DOM aware formatting
this.applyFormatInShadowDOM(range, command, targetBlockComponent, url);
// Apply link format
WysiwygFormatting.applyFormat(command, url, range, shadowRoots);
} else {
// Apply the format with Shadow DOM aware formatting
this.applyFormatInShadowDOM(range, command, targetBlockComponent);
// Apply the format
WysiwygFormatting.applyFormat(command, undefined, range, shadowRoots);
}
// Update content immediately
// Update content after a microtask to ensure DOM is updated
await new Promise(resolve => setTimeout(resolve, 10));
// Force content update
targetBlock.content = targetBlockComponent.getContent();
// Update value to persist changes
@@ -970,96 +973,6 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
/**
* Save current state to history with cursor position
*/
/**
* Apply formatting within Shadow DOM context
*/
private applyFormatInShadowDOM(range: Range, command: string, blockComponent: any, value?: string): void {
const editableElement = blockComponent.shadowRoot?.querySelector('.block') as HTMLElement;
if (!editableElement) return;
// Apply format based on command
switch (command) {
case 'bold':
this.wrapSelectionInShadowDOM(range, 'strong', editableElement);
break;
case 'italic':
this.wrapSelectionInShadowDOM(range, 'em', editableElement);
break;
case 'underline':
this.wrapSelectionInShadowDOM(range, 'u', editableElement);
break;
case 'strikeThrough':
this.wrapSelectionInShadowDOM(range, 's', editableElement);
break;
case 'code':
this.wrapSelectionInShadowDOM(range, 'code', editableElement);
break;
case 'link':
if (value) {
this.wrapSelectionWithLinkInShadowDOM(range, value, editableElement);
}
break;
}
}
/**
* Wrap selection with a tag within Shadow DOM
*/
private wrapSelectionInShadowDOM(range: Range, tagName: string, editableElement: HTMLElement): void {
try {
// Check if we're already wrapped in this tag
const parentElement = range.commonAncestorContainer.parentElement;
if (parentElement && parentElement.tagName.toLowerCase() === tagName) {
// Unwrap
const parent = parentElement.parentNode;
while (parentElement.firstChild) {
parent?.insertBefore(parentElement.firstChild, parentElement);
}
parent?.removeChild(parentElement);
} else {
// Wrap selection
const wrapper = editableElement.ownerDocument.createElement(tagName);
const contents = range.extractContents();
wrapper.appendChild(contents);
range.insertNode(wrapper);
// Select the wrapped content
range.selectNodeContents(wrapper);
// Update selection using our Shadow DOM utilities
WysiwygSelection.setSelectionFromRange(range);
}
} catch (e) {
console.error('Failed to apply format:', e);
}
}
/**
* Wrap selection with a link within Shadow DOM
*/
private wrapSelectionWithLinkInShadowDOM(range: Range, url: string, editableElement: HTMLElement): void {
try {
const link = editableElement.ownerDocument.createElement('a');
link.href = url;
link.target = '_blank';
link.rel = 'noopener noreferrer';
const contents = range.extractContents();
link.appendChild(contents);
range.insertNode(link);
// Select the link
range.selectNodeContents(link);
WysiwygSelection.setSelectionFromRange(range);
} catch (e) {
console.error('Failed to create link:', e);
}
}
public saveToHistory(debounce: boolean = true): void {
// Get current cursor position if a block is focused