fix(input-richtext): resolve rich text editor initialization and layout issues by bundling Tiptap locally and anchoring editor containers

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
 

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.'
 }

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 {

ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -214,9 +214,8 @@ export class DeesInputCode extends DeesInputBase<string> {
       }
 
       .editor-wrapper {
-        position: relative;
+        position: absolute;
-        flex: 1;
+        inset: 0;
-        min-height: 0;
       }
 
       dees-workspace-monaco {

ts_web/elements/00group-input/dees-input-richtext/component.ts

@@ -239,6 +239,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
     this.editorElement = this.shadowRoot!.querySelector('.editor-content')!;
     this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!;
     this.initializeEditor();
+    this.requestUpdate();
   }
 
   private initializeEditor(): void {

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

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: absolute;
-        position: relative;
+        inset: 0;
         padding: 8px;
       }
 

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;
+      // Import directly from npm packages — bundled by esbuild into a single
-
+      // module graph. CDN loading caused duplicate ProseMirror instances because
-      // Load all Tiptap modules in parallel
+      // jsdelivr resolves each package's dependencies independently.
-      const [
+      const [coreModule, starterKitModule, underlineModule, textAlignModule, linkModule, typographyModule] = await Promise.all([
-        coreModule,
+        import('@tiptap/core'),
-        starterKitModule,
+        import('@tiptap/starter-kit'),
-        underlineModule,
+        import('@tiptap/extension-underline'),
-        textAlignModule,
+        import('@tiptap/extension-text-align'),
-        linkModule,
+        import('@tiptap/extension-link'),
-        typographyModule,
+        import('@tiptap/extension-typography'),
-      ] = 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`),
       ]);
 
       this.tiptapLib = {