diff --git a/changelog.md b/changelog.md index 5ffb843..31a904d 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-04-03 - 3.52.3 - fix(input-richtext) +resolve rich text editor initialization and layout issues by bundling Tiptap locally and anchoring editor containers + +- Switch Tiptap imports from CDN URLs to bundled npm packages to avoid duplicate ProseMirror instances +- Update rich text, code, dataview, and terminal preview containers to use absolute inset positioning for stable full-size layouts +- Trigger a component update after rich text editor initialization and improve ProseMirror wrapping behavior + ## 2026-04-03 - 3.52.2 - fix(chart-log, simple-appdash) align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index c63e93b..a443663 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.52.2', + version: '3.52.3', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts b/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts index c119ba3..03dba94 100644 --- a/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts +++ b/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts @@ -114,11 +114,11 @@ export class DeesDataviewCodebox extends DeesElement { } .codegrid { + position: absolute; + inset: 0; display: grid; grid-template-columns: 50px auto; overflow: auto; - flex: 1; - min-height: 0; } .lineNumbers { diff --git a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts index 3fa177a..f7b2110 100644 --- a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts +++ b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts @@ -214,9 +214,8 @@ export class DeesInputCode extends DeesInputBase { } .editor-wrapper { - position: relative; - flex: 1; - min-height: 0; + position: absolute; + inset: 0; } dees-workspace-monaco { diff --git a/ts_web/elements/00group-input/dees-input-richtext/component.ts b/ts_web/elements/00group-input/dees-input-richtext/component.ts index 321afe5..b2f78d3 100644 --- a/ts_web/elements/00group-input/dees-input-richtext/component.ts +++ b/ts_web/elements/00group-input/dees-input-richtext/component.ts @@ -239,6 +239,7 @@ export class DeesInputRichtext extends DeesInputBase { this.editorElement = this.shadowRoot!.querySelector('.editor-content')!; this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!; this.initializeEditor(); + this.requestUpdate(); } private initializeEditor(): void { diff --git a/ts_web/elements/00group-input/dees-input-richtext/styles.ts b/ts_web/elements/00group-input/dees-input-richtext/styles.ts index 9b5a8dc..2661cb9 100644 --- a/ts_web/elements/00group-input/dees-input-richtext/styles.ts +++ b/ts_web/elements/00group-input/dees-input-richtext/styles.ts @@ -90,10 +90,10 @@ export const richtextStyles = [ } .editor-content { - flex: 1; + position: absolute; + inset: 0; padding: 16px; overflow-y: auto; - min-height: var(--min-height, 200px); } .editor-content .ProseMirror { @@ -101,6 +101,8 @@ export const richtextStyles = [ line-height: 1.6; color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; min-height: 100%; + white-space: pre-wrap; + word-wrap: break-word; } .editor-content .ProseMirror p { @@ -281,7 +283,7 @@ export const richtextStyles = [ line-height: 1.4; } - :host([disabled]) .editor-container { + :host([disabled]) dees-tile { opacity: 0.6; cursor: not-allowed; } diff --git a/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts b/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts index c09eca5..6f37d30 100644 --- a/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts +++ b/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts @@ -94,8 +94,8 @@ export class DeesWorkspaceTerminalPreview extends DeesElement { } .terminal-container { - flex: 1; - position: relative; + position: absolute; + inset: 0; padding: 8px; } diff --git a/ts_web/services/DeesServiceLibLoader.ts b/ts_web/services/DeesServiceLibLoader.ts index 17bd925..6495f33 100644 --- a/ts_web/services/DeesServiceLibLoader.ts +++ b/ts_web/services/DeesServiceLibLoader.ts @@ -310,23 +310,16 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] { } this.tiptapLoadingPromise = (async () => { - const version = CDN_VERSIONS.tiptap; - - // Load all Tiptap modules in parallel - const [ - coreModule, - starterKitModule, - underlineModule, - textAlignModule, - linkModule, - typographyModule, - ] = await Promise.all([ - import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/core@${version}/+esm`), - import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/starter-kit@${version}/+esm`), - import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-underline@${version}/+esm`), - import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-text-align@${version}/+esm`), - import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-link@${version}/+esm`), - import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-typography@${version}/+esm`), + // Import directly from npm packages — bundled by esbuild into a single + // module graph. CDN loading caused duplicate ProseMirror instances because + // jsdelivr resolves each package's dependencies independently. + const [coreModule, starterKitModule, underlineModule, textAlignModule, linkModule, typographyModule] = await Promise.all([ + import('@tiptap/core'), + import('@tiptap/starter-kit'), + import('@tiptap/extension-underline'), + import('@tiptap/extension-text-align'), + import('@tiptap/extension-link'), + import('@tiptap/extension-typography'), ]); this.tiptapLib = {