fix(input-richtext): resolve rich text editor initialization and layout issues by bundling Tiptap locally and anchoring editor containers
This commit is contained in:
@@ -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.'
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -214,9 +214,8 @@ export class DeesInputCode extends DeesInputBase<string> {
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
dees-workspace-monaco {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -94,8 +94,8 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
|
||||
}
|
||||
|
||||
.terminal-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
Reference in New Issue
Block a user