Merge remote-tracking branch 'origin/main' into feature/cleanup_ck_modules

packages/ckeditor5-admonition/package.json

@@ -16,12 +16,7 @@
     "node": ">=18.0.0",
     "npm": ">=5.7.1"
   },
-  "files": [
-    "dist",
-    "ckeditor5-metadata.json"
-  ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.3.1",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@typescript-eslint/eslint-plugin": "8.58.0",
     "@typescript-eslint/parser": "8.58.0",
@@ -43,9 +38,6 @@
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "GPL-2.0-or-later",
   "scripts": {
-    "build": "node ./scripts/build-dist.mjs",
-    "ts:build": "tsc -p ./tsconfig.release.json",
-    "ts:clear": "npx rimraf --glob \"src/**/*.@(js|d.ts)\"",
     "lint": "eslint \"**/*.{js,ts}\" --quiet",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
     "test": "vitest",

packages/ckeditor5-admonition/scripts/build-dist.mjs

@@ -1,47 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * @license Copyright (c) 2020-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* eslint-env node */
-
-import { createRequire } from 'module';
-import upath from 'upath';
-import chalk from 'chalk';
-import { build } from '@ckeditor/ckeditor5-dev-build-tools';
-
-function dist( path ) {
-	return upath.join( 'dist', path );
-}
-
-( async () => {
-	const tsconfig = 'tsconfig.dist.ckeditor5.json';
-
-	/**
-	 * Step 1
-	 */
-	console.log( chalk.cyan( '1/2: Generating NPM build...' ) );
-
-	const require = createRequire( import.meta.url );
-	const pkg = require( upath.resolve( process.cwd(), './package.json' ) );
-
-	await build( {
-		input: 'src/index.ts',
-		output: dist( './index.js' ),
-		tsconfig: 'tsconfig.dist.json',
-		external: [
-			'ckeditor5',
-			'ckeditor5-premium-features',
-			...Object.keys( {
-				...pkg.dependencies,
-				...pkg.peerDependencies
-			} )
-		],
-		clean: true,
-		sourceMap: true,
-		declarations: true,
-		translations: '**/*.po'
-	} );
-} )();

packages/ckeditor5-admonition/tsconfig.dist.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "rootDir": "./src",
-	"composite": false,
-    "types": [
-      "../typings/types.d.ts"
-    ]
-  }
-}

packages/ckeditor5-admonition/tsconfig.release.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "sourceMap": false,
-    "declaration": true
-  },
-  "exclude": [
-    "./tests/",
-	"./src",
-    "./sample/"
-  ]
-}

packages/ckeditor5-footnotes/package.json

@@ -17,12 +17,7 @@
     "node": ">=18.0.0",
     "npm": ">=5.7.1"
   },
-  "files": [
-    "dist",
-    "ckeditor5-metadata.json"
-  ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.3.1",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@typescript-eslint/eslint-plugin": "8.58.0",
     "@typescript-eslint/parser": "8.58.0",
@@ -42,9 +37,6 @@
     "ckeditor5": "48.0.0"
   },
   "scripts": {
-    "build": "node ./scripts/build-dist.mjs",
-    "ts:build": "tsc -p ./tsconfig.release.json",
-    "ts:clear": "npx rimraf --glob \"src/**/*.@(js|d.ts)\"",
     "lint": "eslint \"**/*.{js,ts}\" --quiet",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
     "test": "vitest",

packages/ckeditor5-footnotes/scripts/build-dist.mjs

@@ -1,47 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * @license Copyright (c) 2020-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* eslint-env node */
-
-import { createRequire } from 'module';
-import upath from 'upath';
-import chalk from 'chalk';
-import { build } from '@ckeditor/ckeditor5-dev-build-tools';
-
-function dist( path ) {
-	return upath.join( 'dist', path );
-}
-
-( async () => {
-	const tsconfig = 'tsconfig.dist.ckeditor5.json';
-
-	/**
-	 * Step 1
-	 */
-	console.log( chalk.cyan( '1/2: Generating NPM build...' ) );
-
-	const require = createRequire( import.meta.url );
-	const pkg = require( upath.resolve( process.cwd(), './package.json' ) );
-
-	await build( {
-		input: 'src/index.ts',
-		output: dist( './index.js' ),
-		tsconfig: 'tsconfig.dist.json',
-		external: [
-			'ckeditor5',
-			'ckeditor5-premium-features',
-			...Object.keys( {
-				...pkg.dependencies,
-				...pkg.peerDependencies
-			} )
-		],
-		clean: true,
-		sourceMap: true,
-		declarations: true,
-		translations: '**/*.po'
-	} );
-} )();

packages/ckeditor5-footnotes/tsconfig.dist.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "rootDir": "./src",
-	"composite": false,
-    "types": [
-      "../typings/types.d.ts"
-    ]
-  }
-}

packages/ckeditor5-footnotes/tsconfig.release.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "sourceMap": false,
-    "declaration": true
-  },
-  "exclude": [
-    "./tests/",
-	"./src",
-    "./sample/"
-  ]
-}

packages/ckeditor5-keyboard-marker/package.json

@@ -19,12 +19,7 @@
     "node": ">=18.0.0",
     "npm": ">=5.7.1"
   },
-  "files": [
-    "dist",
-    "ckeditor5-metadata.json"
-  ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.3.1",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@typescript-eslint/eslint-plugin": "8.58.0",
     "@typescript-eslint/parser": "8.58.0",
@@ -44,9 +39,6 @@
     "ckeditor5": "48.0.0"
   },
   "scripts": {
-    "build": "node ./scripts/build-dist.mjs",
-    "ts:build": "tsc -p ./tsconfig.release.json",
-    "ts:clear": "npx rimraf --glob \"src/**/*.@(js|d.ts)\"",
     "lint": "eslint \"**/*.{js,ts}\" --quiet",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
     "test": "vitest",

packages/ckeditor5-keyboard-marker/scripts/build-dist.mjs

@@ -1,47 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * @license Copyright (c) 2020-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* eslint-env node */
-
-import { createRequire } from 'module';
-import upath from 'upath';
-import chalk from 'chalk';
-import { build } from '@ckeditor/ckeditor5-dev-build-tools';
-
-function dist( path ) {
-	return upath.join( 'dist', path );
-}
-
-( async () => {
-	const tsconfig = 'tsconfig.dist.ckeditor5.json';
-
-	/**
-	 * Step 1
-	 */
-	console.log( chalk.cyan( '1/2: Generating NPM build...' ) );
-
-	const require = createRequire( import.meta.url );
-	const pkg = require( upath.resolve( process.cwd(), './package.json' ) );
-
-	await build( {
-		input: 'src/index.ts',
-		output: dist( './index.js' ),
-		tsconfig: 'tsconfig.dist.json',
-		external: [
-			'ckeditor5',
-			'ckeditor5-premium-features',
-			...Object.keys( {
-				...pkg.dependencies,
-				...pkg.peerDependencies
-			} )
-		],
-		clean: true,
-		sourceMap: true,
-		declarations: true,
-		translations: '**/*.po'
-	} );
-} )();

packages/ckeditor5-keyboard-marker/tsconfig.dist.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "rootDir": "./src",
-	"composite": false,
-    "types": [
-      "../typings/types.d.ts"
-    ]
-  }
-}

packages/ckeditor5-keyboard-marker/tsconfig.release.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "sourceMap": false,
-    "declaration": true
-  },
-  "exclude": [
-    "./tests/",
-	"./src",
-    "./sample/"
-  ]
-}

packages/ckeditor5-math/package.json

@@ -19,12 +19,7 @@
     "node": ">=18.0.0",
     "npm": ">=5.7.1"
   },
-  "files": [
-    "dist",
-    "ckeditor5-metadata.json"
-  ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.3.1",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@typescript-eslint/eslint-plugin": "8.58.0",
     "@typescript-eslint/parser": "8.58.0",
@@ -44,9 +39,6 @@
     "ckeditor5": "48.0.0"
   },
   "scripts": {
-    "build": "node ./scripts/build-dist.mjs",
-    "ts:build": "tsc -p ./tsconfig.release.json",
-    "ts:clear": "npx rimraf --glob \"src/**/*.@(js|d.ts)\"",
     "lint": "eslint \"**/*.{js,ts}\" --quiet",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
     "test": "vitest",

packages/ckeditor5-math/scripts/build-dist.mjs

@@ -1,47 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * @license Copyright (c) 2020-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* eslint-env node */
-
-import { createRequire } from 'module';
-import upath from 'upath';
-import chalk from 'chalk';
-import { build } from '@ckeditor/ckeditor5-dev-build-tools';
-
-function dist( path ) {
-	return upath.join( 'dist', path );
-}
-
-( async () => {
-	const tsconfig = 'tsconfig.dist.ckeditor5.json';
-
-	/**
-	 * Step 1
-	 */
-	console.log( chalk.cyan( '1/2: Generating NPM build...' ) );
-
-	const require = createRequire( import.meta.url );
-	const pkg = require( upath.resolve( process.cwd(), './package.json' ) );
-
-	await build( {
-		input: 'src/index.ts',
-		output: dist( './index.js' ),
-		tsconfig: 'tsconfig.dist.json',
-		external: [
-			'ckeditor5',
-			'ckeditor5-premium-features',
-			...Object.keys( {
-				...pkg.dependencies,
-				...pkg.peerDependencies
-			} )
-		],
-		clean: true,
-		sourceMap: true,
-		declarations: true,
-		translations: '**/*.po'
-	} );
-} )();

packages/ckeditor5-math/tsconfig.dist.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "rootDir": "./src",
-	"composite": false,
-    "types": [
-      "../typings/types.d.ts"
-    ]
-  }
-}

packages/ckeditor5-math/tsconfig.release.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "sourceMap": false,
-    "declaration": true
-  },
-  "exclude": [
-    "./tests/",
-	"./src",
-    "./sample/"
-  ]
-}

packages/ckeditor5-mermaid/.gitignore

@@ -8,3 +8,6 @@ sample/ckeditor.dist.js
 # Ignore compiled TypeScript files.
 src/**/*.js
 src/**/*.d.ts
+
+.vitest-attachments
+tests/__screenshots__

packages/ckeditor5-mermaid/package.json

@@ -19,12 +19,7 @@
     "node": ">=18.0.0",
     "npm": ">=5.7.1"
   },
-  "files": [
-    "dist",
-    "ckeditor5-metadata.json"
-  ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.3.1",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@typescript-eslint/eslint-plugin": "8.58.0",
     "@typescript-eslint/parser": "8.58.0",
@@ -44,16 +39,9 @@
     "ckeditor5": "48.0.0"
   },
   "scripts": {
-    "build": "node ./scripts/build-dist.mjs",
-    "ts:build": "tsc -p ./tsconfig.release.json",
-    "ts:clear": "npx rimraf --glob \"src/**/*.@(js|d.ts)\"",
     "lint": "eslint \"**/*.{js,ts}\" --quiet",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
     "test": "vitest",
     "test:debug": "vitest --inspect-brk --no-file-parallelism --browser.headless=false"
-  },
-  "dependencies": {
-    "@types/lodash-es": "4.17.12",
-    "lodash-es": "4.18.1"
   }
 }

packages/ckeditor5-mermaid/scripts/build-dist.mjs

@@ -1,47 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * @license Copyright (c) 2020-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* eslint-env node */
-
-import { createRequire } from 'module';
-import upath from 'upath';
-import chalk from 'chalk';
-import { build } from '@ckeditor/ckeditor5-dev-build-tools';
-
-function dist( path ) {
-	return upath.join( 'dist', path );
-}
-
-( async () => {
-	const tsconfig = 'tsconfig.dist.ckeditor5.json';
-
-	/**
-	 * Step 1
-	 */
-	console.log( chalk.cyan( '1/2: Generating NPM build...' ) );
-
-	const require = createRequire( import.meta.url );
-	const pkg = require( upath.resolve( process.cwd(), './package.json' ) );
-
-	await build( {
-		input: 'src/index.ts',
-		output: dist( './index.js' ),
-		tsconfig: 'tsconfig.dist.json',
-		external: [
-			'ckeditor5',
-			'ckeditor5-premium-features',
-			...Object.keys( {
-				...pkg.dependencies,
-				...pkg.peerDependencies
-			} )
-		],
-		clean: true,
-		sourceMap: true,
-		declarations: true,
-		translations: '**/*.po'
-	} );
-} )();

packages/ckeditor5-mermaid/src/augmentation.ts

@@ -5,7 +5,8 @@ import MermaidUI from './mermaidui.js';
 
 declare global {
 	interface MermaidInstance {
-		init(config: MermaidConfig, element: HTMLElement): void;
+		initialize(config: MermaidConfig): void;
+		render(id: string, source: string): Promise<{ svg: string }>;
 	}
 
 	interface MermaidConfig {

packages/ckeditor5-mermaid/src/mermaidediting.ts

@@ -2,13 +2,13 @@
  * @module mermaid/mermaidediting
  */
 
-import { debounce } from 'lodash-es';
-
 import MermaidPreviewCommand from './commands/mermaidPreviewCommand.js';
 import MermaidSourceViewCommand from './commands/mermaidSourceViewCommand.js';
 import MermaidSplitViewCommand from './commands/mermaidSplitViewCommand.js';
 import InsertMermaidCommand from './commands/insertMermaidCommand.js';
-import { DowncastAttributeEvent, DowncastConversionApi, EditorConfig, ModelElement, EventInfo, ModelItem, ModelNode, Plugin, toWidget, UpcastConversionApi, UpcastConversionData, ViewElement, ViewText, ViewUIElement } from 'ckeditor5';
+import { DowncastAttributeEvent, DowncastConversionApi, EditorConfig, ModelElement, EventInfo, ModelItem, ModelNode, Plugin, toWidget, uid, UpcastConversionApi, UpcastConversionData, ViewElement, ViewText, ViewUIElement } from 'ckeditor5';
+
+import { debounce } from './utils.js';
 
 // Time in milliseconds.
 const DEBOUNCE_TIME = 300;
@@ -20,7 +20,8 @@ type DowncastConversionData = DowncastAttributeEvent["args"][0];
 export default class MermaidEditing extends Plugin {
 
 	private _config!: EditorConfig["mermaid"];
-	private mermaid?: MermaidInstance;
+	private _mermaidPromise?: Promise<MermaidInstance>;
+	private _renderGeneration = 0;
 
 	/**
 	 * @inheritDoc
@@ -179,16 +180,10 @@ export default class MermaidEditing extends Plugin {
 		}
 
 		function createMermaidPreview(this: ViewUIElement,  domDocument: Document ) {
-			// Taking the text from the wrapper container element for now
 			const mermaidSource = data.item.getAttribute( 'source' ) as string;
 			const domElement = this.toDomElement( domDocument );
 
-			domElement.textContent = mermaidSource;
-
-			window.setTimeout( () => {
-				// @todo: by the looks of it the domElement needs to be hooked to tree in order to allow for rendering.
-				that._renderMermaid( domElement );
-			}, 100 );
+			that._renderMermaid( domElement, mermaidSource );
 
 			return domElement;
 		}
@@ -219,10 +214,7 @@ export default class MermaidEditing extends Plugin {
 					const domPreviewWrapper = domConverter.viewToDom(child);
 
 					if ( domPreviewWrapper ) {
-						domPreviewWrapper.textContent = newSource;
-						domPreviewWrapper.removeAttribute( 'data-processed' );
-
-						this._renderMermaid( domPreviewWrapper );
+						this._renderMermaid( domPreviewWrapper, newSource );
 					}
 				}
 			}
@@ -263,14 +255,36 @@ export default class MermaidEditing extends Plugin {
 	}
 
 	/**
-	 * Renders Mermaid in a given `domElement`. Expect this domElement to have mermaid
-	 * source set as text content.
+	 * Renders Mermaid (a parsed `source`) in a given `domElement`.
 	 */
-	async _renderMermaid( domElement: HTMLElement ) {
-		if (!window.mermaid && typeof this._config?.lazyLoad === "function") {
-			this.mermaid = await this._config.lazyLoad();
+	async _renderMermaid( domElement: HTMLElement, source: string ) {
+		if ( !this._mermaidPromise && typeof this._config?.lazyLoad === 'function' ) {
+			this._mermaidPromise = Promise.resolve( this._config.lazyLoad() ).then( instance => {
+				instance.initialize( this._config?.config ?? {} );
+				return instance;
+			} );
 		}
 
-		this.mermaid?.init( this._config?.config ?? {}, domElement );
+		const mermaid = await this._mermaidPromise;
+
+		if ( !mermaid ) {
+			return;
+		}
+
+		const generation = ++this._renderGeneration;
+		const id = `ck-mermaid-${ uid() }`;
+
+		try {
+			const { svg } = await mermaid.render( id, source );
+
+			if ( generation === this._renderGeneration ) {
+				domElement.innerHTML = svg;
+			}
+		} catch ( err: any ) {
+			if ( generation === this._renderGeneration ) {
+				domElement.innerText = err.message;
+			}
+			document.getElementById( id )?.remove();
+		}
 	}
 }

packages/ckeditor5-mermaid/src/utils.ts

@@ -5,6 +5,16 @@
 
 import { Editor } from "ckeditor5";
 
+export function debounce<T extends (...args: any[]) => void>( fn: T, waitMs: number ): T {
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+	return function( this: unknown, ...args: Parameters<T> ) {
+		if ( timeout ) {
+			clearTimeout( timeout );
+		}
+		timeout = setTimeout( () => fn.apply( this, args ), waitMs );
+	} as T;
+}
+
 /**
  * Helper function for setting the `isOn` state of buttons.
  *

packages/ckeditor5-mermaid/tests/mermaidediting.ts

@@ -1,8 +1,6 @@
-import { ClassicEditor, Essentials, Paragraph, Heading, CodeBlockEditing, _setModelData as setModelData, _getModelData as getModelData, _getViewData as getViewData } from 'ckeditor5';
+import { ClassicEditor, Essentials, Paragraph, Heading, CodeBlockEditing, ViewElement, _setModelData as setModelData, _getModelData as getModelData, _getViewData as getViewData } from 'ckeditor5';
 import MermaidEditing from '../src/mermaidediting.js';
-import { afterEach, beforeEach, describe, it } from 'vitest';
-import { expect } from 'vitest';
-import { vi } from 'vitest';
+import { afterEach, beforeEach, describe, it, expect, vi, type MockInstance } from 'vitest';
 
 /* global document */
 
@@ -12,7 +10,7 @@ describe( 'MermaidEditing', () => {
 	} );
 
 	describe( 'conversion', () => {
-		let domElement, editor, model;
+		let domElement: HTMLDivElement, editor: ClassicEditor, model: ClassicEditor['model'];
 
 		beforeEach( async () => {
 			domElement = document.createElement( 'div' );
@@ -154,7 +152,7 @@ describe( 'MermaidEditing', () => {
 				} );
 
 				describe( 'textarea value', () => {
-					let domTextarea = null;
+					let domTextarea: HTMLTextAreaElement;
 
 					beforeEach( () => {
 						// Using editor.setData() instead of setModelData helper because of #11365.
@@ -164,8 +162,8 @@ describe( 'MermaidEditing', () => {
 							'</pre>'
 						);
 
-						const textareaView = editor.editing.view.document.getRoot().getChild( 0 ).getChild( 1 );
-						domTextarea = editor.editing.view.domConverter.viewToDom( textareaView );
+						const textareaView = editor.editing.view.document.getRoot()!.getChild( 0 )! as ViewElement;
+						domTextarea = editor.editing.view.domConverter.viewToDom( textareaView.getChild( 1 )! ) as HTMLTextAreaElement;
 					} );
 
 					it( 'is properly set during the initial conversion', () => {
@@ -175,7 +173,7 @@ describe( 'MermaidEditing', () => {
 					it( 'is properly updated after model\'s attribute change', () => {
 						const { model } = editor;
 
-						const mermaidModel = model.document.getRoot().getChild( 0 );
+						const mermaidModel = model.document.getRoot()!.getChild( 0 )!;
 
 						model.change( writer => {
 							writer.setAttribute( 'source', 'abc', mermaidModel );
@@ -187,7 +185,7 @@ describe( 'MermaidEditing', () => {
 					it( 'doesn\'t loop if model attribute changes to the same value', () => {
 						const { model } = editor;
 
-						const mermaidModel = model.document.getRoot().getChild( 0 );
+						const mermaidModel = model.document.getRoot()!.getChild( 0 )!;
 
 						model.change( writer => {
 							writer.setAttribute( 'source', 'flowchart TB\nA --> B\nB --> C', mermaidModel );
@@ -198,9 +196,12 @@ describe( 'MermaidEditing', () => {
 				} );
 
 				describe( 'preview div', () => {
-					let domPreviewContainer, renderMermaidStub;
+					let domPreviewContainer: HTMLElement;
+					let renderMermaidStub: MockInstance;
 
 					beforeEach( () => {
+						renderMermaidStub = vi.spyOn( editor.plugins.get( 'MermaidEditing' ) as unknown as MermaidEditing, '_renderMermaid' );
+
 						// Using editor.setData() instead of setModelData helper because of #11365.
 						editor.setData(
 							'<pre spellcheck="false">' +
@@ -208,42 +209,31 @@ describe( 'MermaidEditing', () => {
 							'</pre>'
 						);
 
-						const previewContainerView = editor.editing.view.document.getRoot().getChild( 0 ).getChild( 2 );
-						domPreviewContainer = editor.editing.view.domConverter.viewToDom( previewContainerView );
-
-						renderMermaidStub = vi.spyOn( editor.plugins.get( 'MermaidEditing' ), '_renderMermaid' );
+						const wrapperView = editor.editing.view.document.getRoot()!.getChild( 0 )! as ViewElement;
+						const previewContainerView = wrapperView.getChild( 2 )!;
+						domPreviewContainer = editor.editing.view.domConverter.viewToDom( previewContainerView ) as HTMLElement;
 					} );
 
 					afterEach( () => {
 						vi.clearAllMocks();
 					} );
 
-					it( 'has proper inner text set during the initial conversion', () => {
-						expect( domPreviewContainer.textContent ).to.equal( 'flowchart TB\nA --> B\nB --> C' );
+					it( 'calls render with source during the initial conversion', () => {
+						expect( renderMermaidStub ).toBeCalledWith( domPreviewContainer, 'flowchart TB\nA --> B\nB --> C' );
 					} );
 
-					it( 'has proper inner text set after a model\'s attribute change', () => {
+					it( 'calls render with updated source after a model\'s attribute change', () => {
 						const { model } = editor;
 
-						const mermaidModel = model.document.getRoot().getChild( 0 );
+						renderMermaidStub.mockClear();
+
+						const mermaidModel = model.document.getRoot()!.getChild( 0 )!;
 
 						model.change( writer => {
 							writer.setAttribute( 'source', 'abc', mermaidModel );
 						} );
 
-						expect( domPreviewContainer.textContent ).to.equal( 'abc' );
-					} );
-
-					it( 'calls mermaid render function after a model\'s attribute change', () => {
-						const { model } = editor;
-
-						const mermaidModel = model.document.getRoot().getChild( 0 );
-
-						model.change( writer => {
-							writer.setAttribute( 'source', 'abc', mermaidModel );
-						} );
-
-						expect(renderMermaidStub).toBeCalledWith(domPreviewContainer);
+						expect( renderMermaidStub ).toBeCalledWith( domPreviewContainer, 'abc' );
 					} );
 				} );
 			} );
@@ -251,7 +241,7 @@ describe( 'MermaidEditing', () => {
 			it( 'adds a editing pipeline converter that has a precedence over code block', () => {
 				setModelData( editor.model, '<mermaid source="foo"></mermaid>' );
 
-				const firstViewChild = editor.editing.view.document.getRoot().getChild( 0 );
+				const firstViewChild = editor.editing.view.document.getRoot()!.getChild( 0 ) as ViewElement;
 
 				expect( firstViewChild.name ).to.equal( 'div' );
 				expect( firstViewChild.hasClass( 'ck-mermaid__wrapper' ), 'has ck-mermaid__wrapper class' ).to.be.true;
@@ -260,7 +250,7 @@ describe( 'MermaidEditing', () => {
 			it( 'does not convert code blocks other than mermaid language', () => {
 				setModelData( editor.model, '<codeBlock language="javascript">foo</codeBlock>' );
 
-				const firstViewChild = editor.editing.view.document.getRoot().getChild( 0 );
+				const firstViewChild = editor.editing.view.document.getRoot()!.getChild( 0 ) as ViewElement;
 
 				expect( firstViewChild.name ).not.to.equal( 'div' );
 				expect( firstViewChild.hasClass( 'ck-mermaid__wrapper' ), 'has ck-mermaid__wrapper class' ).to.be.false;
@@ -269,7 +259,8 @@ describe( 'MermaidEditing', () => {
 			it( 'adds a preview element', () => {
 				setModelData( editor.model, '<mermaid source="foo"></mermaid>' );
 
-				const widgetChildren = [ ...editor.editing.view.document.getRoot().getChild( 0 ).getChildren() ];
+				const widget = editor.editing.view.document.getRoot()!.getChild( 0 ) as ViewElement;
+				const widgetChildren = [ ...widget.getChildren() ] as ViewElement[];
 				const previewView = widgetChildren.filter( item => item.name === 'div' && item.hasClass( 'ck-mermaid__preview' ) );
 
 				expect( previewView.length ).to.equal( 1 );
@@ -278,7 +269,8 @@ describe( 'MermaidEditing', () => {
 			it( 'adds an editing element', () => {
 				setModelData( editor.model, '<mermaid source="foo"></mermaid>' );
 
-				const widgetChildren = [ ...editor.editing.view.document.getRoot().getChild( 0 ).getChildren() ];
+				const widget = editor.editing.view.document.getRoot()!.getChild( 0 ) as ViewElement;
+				const widgetChildren = [ ...widget.getChildren() ] as ViewElement[];
 				const previewView = widgetChildren.filter(
 					item => item.name === 'textarea' && item.hasClass( 'ck-mermaid__editing-view' )
 				);

packages/ckeditor5-mermaid/tsconfig.dist.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "rootDir": "./src",
-	"composite": false,
-    "types": [
-      "../typings/types.d.ts"
-    ]
-  }
-}

packages/ckeditor5-mermaid/tsconfig.release.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "sourceMap": false,
-    "declaration": true
-  },
-  "exclude": [
-    "./tests/",
-	"./src",
-    "./sample/"
-  ]
-}