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

feat(editor): Add wysiwyg editor

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-23 17:14:47 +00:00
parent fbd52ee9a5
commit f3afbb2e48
2 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/elements/dees-input-wysiwyg.demo.ts
View File

@ -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

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

@ -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;
}