Merge pull request #19 from ckeditor/add-support-for-nim

Update to support current installation methods of CKEditor 5 (v42.0.0+) and legacy installation methods with DLLs (pre-42.0.0).

.eslintrc.cjs

@@ -5,12 +5,28 @@
 module.exports = {
 	extends: 'ckeditor5',
 	root: true,
+	ignorePatterns: [
+		// Ignore the entire `build/` (the DLL build).
+		'build/**',
+		// Ignore the entire `dist/`.
+		'dist/**'
+	],
 	rules: {
 		// This rule disallows importing core DLL packages directly. Imports should be done using the `ckeditor5` package.
 		// Also, importing non-DLL packages is not allowed. If the package requires other features to work, they should be
 		// specified as soft-requirements.
 		// Read more: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-26.html#soft-requirements.
-		'ckeditor5-rules/ckeditor-imports': 'error'
+		'ckeditor5-rules/ckeditor-imports': 'error',
+		//  This rule disallows importing from any path other than the package main entrypoint.
+		'ckeditor5-rules/allow-imports-only-from-main-package-entry-point': 'error',
+		// As required by the ECMAScript (ESM) standard, all imports must include a file extension.
+		// If the import does not include it, this rule will try to automatically detect the correct file extension.
+		'ckeditor5-rules/require-file-extensions-in-imports': [
+			'error',
+			{
+				extensions: [ '.ts', '.js', '.json' ]
+			}
+		]
 	},
 	overrides: [
 		{

.gitignore

@@ -1,7 +1,8 @@
 .nyc_output/
 coverage/
+dist/
 node_modules/
 yarn.lock
 tmp/
 build/
-yarn.error
+yarn.error

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-mermaid",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Mermaid widget for CKEditor 5.",
   "private": true,
   "keywords": [
@@ -11,16 +11,18 @@
     "ckeditor5-plugin",
     "ckeditor5-mermaid"
   ],
+  "type": "module",
   "main": "src/index.js",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "CKSource (https://cksource.com/)",
   "homepage": "https://github.com/ckeditor/ckeditor5-mermaid",
   "bugs": "https://github.com/ckeditor/ckeditor5-mermaid/issues",
   "engines": {
-    "node": ">=14.0.0",
+    "node": ">=18.0.0",
     "npm": ">=5.7.1"
   },
   "files": [
+    "dist",
     "lang",
     "src",
     "theme",
@@ -28,47 +30,34 @@
     "ckeditor5-metadata.json"
   ],
   "dependencies": {
-    "mermaid": "9.1.7",
+    "mermaid": "^9.1.4",
     "lodash-es": "^4.17.15"
   },
-  "peerDependencies": {
-    "ckeditor5": "*"
-  },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.0.1",
-    "@ckeditor/ckeditor5-clipboard": "^35.0.1",
-    "@ckeditor/ckeditor5-code-block": "^35.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^35.0.1",
-    "@ckeditor/ckeditor5-engine": "^35.0.1",
-    "@ckeditor/ckeditor5-enter": "^35.0.1",
-    "@ckeditor/ckeditor5-essentials": "^35.0.1",
-    "@ckeditor/ckeditor5-heading": "^35.0.1",
+    "@ckeditor/ckeditor5-dev-build-tools": "^40.2.0",
     "@ckeditor/ckeditor5-inspector": "^4.0.0",
-    "@ckeditor/ckeditor5-link": "^35.0.1",
-    "@ckeditor/ckeditor5-markdown-gfm": "^35.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^35.0.1",
-    "@ckeditor/ckeditor5-typing": "^35.0.1",
-    "@ckeditor/ckeditor5-undo": "^35.0.1",
-    "@ckeditor/ckeditor5-widget": "^35.0.1",
-    "@ckeditor/ckeditor5-package-tools": "^1.0.0-beta.4",
-    "@ckeditor/ckeditor5-theme-lark": "^35.0.1",
+    "@ckeditor/ckeditor5-package-tools": "^2.0.0",
+    "ckeditor5": "latest",
     "eslint": "^7.32.0",
-    "eslint-config-ckeditor5": ">=3.1.1",
+    "eslint-config-ckeditor5": "^6.0.0",
     "http-server": "^14.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.6",
     "stylelint": "^13.13.1",
     "stylelint-config-ckeditor5": ">=2.0.1"
   },
-
+  "peerDependencies": {
+    "ckeditor5": ">=42.0.0 || ^0.0.0-nightly"
+  },
   "scripts": {
     "dll:build": "ckeditor5-package-tools dll:build",
-    "dll:serve": "http-server ./ -o sample/dll.html",
+    "dll:serve": "http-server ./ -o sample/index.html",
+    "build:dist": "node ./scripts/build-dist.mjs",
     "lint": "eslint \"**/*.js\" --quiet --ignore-pattern \"build/\"",
     "start": "ckeditor5-package-tools start",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/*.css'",
     "test": "ckeditor5-package-tools test",
-    "prepare": "yarn run dll:build",
+    "prepare": "yarn run dll:build && yarn run build:dist",
     "prepublishOnly": "yarn run dll:build",
     "translations:collect": "ckeditor5-package-tools translations:collect",
     "translations:download": "ckeditor5-package-tools translations:download",

sample/ckeditor.js

@@ -5,19 +5,19 @@
 
 /* globals console, window, document */
 
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import Typing from '@ckeditor/ckeditor5-typing/src/typing';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import Link from '@ckeditor/ckeditor5-link/src/link';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Typing } from '@ckeditor/ckeditor5-typing';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { Undo } from '@ckeditor/ckeditor5-undo';
+import { Enter } from '@ckeditor/ckeditor5-enter';
+import { Clipboard } from '@ckeditor/ckeditor5-clipboard';
+import { Link } from '@ckeditor/ckeditor5-link';
+import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
+import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
+
 import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
 
-import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
-import Mermaid from '../src/mermaid';
+import Mermaid from '../src/mermaid.js';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {

sample/index.html

@@ -17,6 +17,103 @@
 <div id="editor">
 </div>
 
-<script src="./ckeditor.dist.js"></script>
+<!-- DLL builds are served from the `node_modules/` directory -->
+<script src="../node_modules/ckeditor5/build/ckeditor5-dll.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-code-block/build/code-block.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>
+
+<!-- The "@ckeditor/ckeditor5-mermaid" package DLL build is served from the `build/` directory -->
+<script src="../build/mermaid.js"></script>
+
+<script>
+	console.log( 'Objects exported by the DLL build:', CKEditor5[ 'mermaid' ] );
+
+	CKEditor5.editorClassic.ClassicEditor
+		.create( document.querySelector( '#editor' ), {
+			plugins: [
+				CKEditor5[ 'mermaid' ].Mermaid,
+				CKEditor5.essentials.Essentials,
+				CKEditor5.autoformat.Autoformat,
+				CKEditor5.blockQuote.BlockQuote,
+				CKEditor5.basicStyles.Bold,
+				CKEditor5.heading.Heading,
+				CKEditor5.image.Image,
+				CKEditor5.image.ImageCaption,
+				CKEditor5.image.ImageStyle,
+				CKEditor5.image.ImageToolbar,
+				CKEditor5.image.ImageUpload,
+				CKEditor5.indent.Indent,
+				CKEditor5.basicStyles.Italic,
+				CKEditor5.link.Link,
+				CKEditor5.list.List,
+				CKEditor5.mediaEmbed.MediaEmbed,
+				CKEditor5.paragraph.Paragraph,
+				CKEditor5.table.Table,
+				CKEditor5.table.TableToolbar,
+				CKEditor5.codeBlock.CodeBlock,
+				CKEditor5.basicStyles.Code,
+				CKEditor5.upload.Base64UploadAdapter
+			],
+			toolbar: [
+				'mermaid',
+				'|',
+				'undo',
+				'redo',
+				'|',
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'link',
+				'code',
+				'bulletedList',
+				'numberedList',
+				'|',
+				'outdent',
+				'indent',
+				'|',
+				'uploadImage',
+				'blockQuote',
+				'insertTable',
+				'mediaEmbed',
+				'codeBlock'
+			],
+			image: {
+				toolbar: [
+					'imageStyle:inline',
+					'imageStyle:block',
+					'imageStyle:side',
+					'|',
+					'imageTextAlternative'
+				]
+			},
+			table: {
+				contentToolbar: [
+					'tableColumn',
+					'tableRow',
+					'mergeTableCells'
+				]
+			}
+		} )
+		.then( editor => {
+			window.editor = editor;
+		} )
+		.catch( error => {
+			console.error( 'There was a problem initializing the editor.', error );
+		} );
+</script>
+
+
 </body>
 </html>

scripts/build-dist.mjs

@@ -0,0 +1,61 @@
+#!/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 () => {
+	/**
+	 * 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.js',
+		output: dist( './index.js' ),
+		external: [
+			'ckeditor5',
+			'ckeditor5-premium-features',
+			...Object.keys( {
+				...pkg.dependencies,
+				...pkg.peerDependencies
+			} )
+		],
+		clean: true,
+		sourceMap: true,
+		translations: '**/*.po'
+	} );
+
+	/**
+	 * Step 2
+	 */
+	console.log( chalk.cyan( '2/2: Generating browser build...' ) );
+
+	await build( {
+		input: 'src/index.js',
+		output: dist( 'browser/index.js' ),
+		sourceMap: true,
+		minify: true,
+		browser: true,
+		name: '@ckeditor/ckeditor5-mermaid',
+		external: [
+			'ckeditor5',
+			'ckeditor5-premium-features'
+		]
+	} );
+} )();

src/commands/insertMermaidCommand.js

@@ -2,7 +2,7 @@
  * @module mermaid/insertmermaidcommand
  */
 
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 
 const MOCK_MERMAID_MARKUP = `flowchart TB
 A --> B

src/commands/mermaidPreviewCommand.js

@@ -2,9 +2,9 @@
  * @module mermaid/mermaidpreviewcommand
  */
 
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 
-import { checkIsOn } from '../utils';
+import { checkIsOn } from '../utils.js';
 
 /**
  * The mermaid preview command.

src/commands/mermaidSourceViewCommand.js

@@ -2,9 +2,9 @@
  * @module mermaid/mermaidsourceviewcommand
  */
 
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 
-import { checkIsOn } from '../utils';
+import { checkIsOn } from '../utils.js';
 
 /**
  * The mermaid source view command.

src/commands/mermaidSplitViewCommand.js

@@ -2,9 +2,9 @@
  * @module mermaid/mermaidsplitviewcommand
  */
 
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 
-import { checkIsOn } from '../utils';
+import { checkIsOn } from '../utils.js';
 
 /**
  * The mermaid split view command.

src/index.js

@@ -8,7 +8,7 @@ import previewModeIcon from './../theme/icons/preview-mode.svg';
 import splitModeIcon from './../theme/icons/split-mode.svg';
 import sourceModeIcon from './../theme/icons/source-mode.svg';
 
-export { default as Mermaid } from './mermaid';
+export { default as Mermaid } from './mermaid.js';
 
 export const icons = {
 	infoIcon,

src/mermaid.js

@@ -2,11 +2,11 @@
  * @module mermaid/mermaid
  */
 
-import { Plugin } from 'ckeditor5/src/core';
+import { Plugin } from 'ckeditor5/src/core.js';
 
-import MermaidEditing from './mermaidediting';
-import MermaidToolbar from './mermaidtoolbar';
-import MermaidUI from './mermaidui';
+import MermaidEditing from './mermaidediting.js';
+import MermaidToolbar from './mermaidtoolbar.js';
+import MermaidUI from './mermaidui.js';
 
 import '../theme/mermaid.css';
 

src/mermaidediting.js

@@ -2,17 +2,17 @@
  * @module mermaid/mermaidediting
  */
 
-import { Plugin } from 'ckeditor5/src/core';
-import { toWidget } from 'ckeditor5/src/widget';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { toWidget } from 'ckeditor5/src/widget.js';
 
-import mermaid from 'mermaid/dist/mermaid';
+import mermaid from 'mermaid/dist/mermaid.js';
 
 import { debounce } from 'lodash-es';
 
-import MermaidPreviewCommand from './commands/mermaidPreviewCommand';
-import MermaidSourceViewCommand from './commands/mermaidSourceViewCommand';
-import MermaidSplitViewCommand from './commands/mermaidSplitViewCommand';
-import InsertMermaidCommand from './commands/insertMermaidCommand';
+import MermaidPreviewCommand from './commands/mermaidPreviewCommand.js';
+import MermaidSourceViewCommand from './commands/mermaidSourceViewCommand.js';
+import MermaidSplitViewCommand from './commands/mermaidSplitViewCommand.js';
+import InsertMermaidCommand from './commands/insertMermaidCommand.js';
 
 // Time in milliseconds.
 const DEBOUNCE_TIME = 300;

src/mermaidtoolbar.js

@@ -2,8 +2,8 @@
  * @module mermaid/mermaidtoolbar
  */
 
-import { Plugin } from 'ckeditor5/src/core';
-import { WidgetToolbarRepository } from 'ckeditor5/src/widget';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { WidgetToolbarRepository } from 'ckeditor5/src/widget.js';
 
 export default class MermaidToolbar extends Plugin {
 	/**

src/mermaidui.js

@@ -2,8 +2,8 @@
  * @module mermaid/mermaidui
  */
 
-import { Plugin } from 'ckeditor5/src/core';
-import { ButtonView } from 'ckeditor5/src/ui';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ButtonView } from 'ckeditor5/src/ui.js';
 
 import insertMermaidIcon from '../theme/icons/insert.svg';
 import previewModeIcon from '../theme/icons/preview-mode.svg';

tests/commands/insertMermaidCommand.js

@@ -1,9 +1,12 @@
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
 import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import {
+	_setModelData as setModelData,
+	_getModelData as getModelData
+} from '@ckeditor/ckeditor5-engine';
 
-import InsertMermaidCommand from '../../src/commands/insertMermaidCommand';
-import MermaidEditing from '../../src/mermaidediting';
+import InsertMermaidCommand from '../../src/commands/insertMermaidCommand.js';
+import MermaidEditing from '../../src/mermaidediting.js';
 
 /* global document */
 

tests/commands/mermaidPreviewCommand.js

@@ -1,9 +1,12 @@
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
 import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import {
+	_setModelData as setModelData,
+	_getModelData as getModelData
+} from '@ckeditor/ckeditor5-engine';
 
-import MermaidPreviewCommand from '../../src/commands/mermaidPreviewCommand';
-import MermaidEditing from '../../src/mermaidediting';
+import MermaidPreviewCommand from '../../src/commands/mermaidPreviewCommand.js';
+import MermaidEditing from '../../src/mermaidediting.js';
 
 /* global document */
 

tests/commands/mermaidSourceViewCommand.js

@@ -1,9 +1,12 @@
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
 import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import {
+	_setModelData as setModelData,
+	_getModelData as getModelData
+} from '@ckeditor/ckeditor5-engine';
 
-import MermaidSourceViewCommand from '../../src/commands/mermaidSourceViewCommand';
-import MermaidEditing from '../../src/mermaidediting';
+import MermaidSourceViewCommand from '../../src/commands/mermaidSourceViewCommand.js';
+import MermaidEditing from '../../src/mermaidediting.js';
 
 /* global document */
 

tests/commands/mermaidSplitViewCommand.js

@@ -1,9 +1,12 @@
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
 import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import {
+	_setModelData as setModelData,
+	_getModelData as getModelData
+} from '@ckeditor/ckeditor5-engine';
 
-import MermaidSplitViewCommand from '../../src/commands/mermaidSplitViewCommand';
-import MermaidEditing from '../../src/mermaidediting';
+import MermaidSplitViewCommand from '../../src/commands/mermaidSplitViewCommand.js';
+import MermaidEditing from '../../src/mermaidediting.js';
 
 /* global document */
 

tests/index.js

@@ -1,5 +1,5 @@
-import { Mermaid as MermaidDll, icons } from '../src';
-import Mermaid from '../src/mermaid';
+import { Mermaid as MermaidDll, icons } from '../src/index.js';
+import Mermaid from '../src/mermaid.js';
 
 import infoIcon from './../theme/icons/info.svg';
 import insertMermaidIcon from './../theme/icons/insert.svg';

tests/manual/markdown.js

@@ -5,19 +5,18 @@
 
 /* globals console, window, document */
 
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import Typing from '@ckeditor/ckeditor5-typing/src/typing';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import Link from '@ckeditor/ckeditor5-link/src/link';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
-import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Typing } from '@ckeditor/ckeditor5-typing';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { Undo } from '@ckeditor/ckeditor5-undo';
+import { Enter } from '@ckeditor/ckeditor5-enter';
+import { Clipboard } from '@ckeditor/ckeditor5-clipboard';
+import { Link } from '@ckeditor/ckeditor5-link';
+import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
+import { Markdown } from '@ckeditor/ckeditor5-markdown-gfm';
+import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
 
-import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
-import Mermaid from '../../src/mermaid';
+import Mermaid from '../../src/mermaid.js';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {

tests/manual/mermaid.js

@@ -5,18 +5,17 @@
 
 /* globals console, window, document */
 
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import Typing from '@ckeditor/ckeditor5-typing/src/typing';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import Link from '@ckeditor/ckeditor5-link/src/link';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Typing } from '@ckeditor/ckeditor5-typing';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { Undo } from '@ckeditor/ckeditor5-undo';
+import { Enter } from '@ckeditor/ckeditor5-enter';
+import { Clipboard } from '@ckeditor/ckeditor5-clipboard';
+import { Link } from '@ckeditor/ckeditor5-link';
+import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
+import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
 
-import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
-import Mermaid from '../../src/mermaid';
+import Mermaid from '../../src/mermaid.js';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {

tests/mermaid.js

@@ -1,10 +1,10 @@
-import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Heading from '@ckeditor/ckeditor5-heading/src/heading';
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import Mermaid from '../src/mermaid';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Essentials } from '@ckeditor/ckeditor5-essentials';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { Heading } from '@ckeditor/ckeditor5-heading';
+import { _setModelData as setModelData } from '@ckeditor/ckeditor5-engine';
 
-import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import Mermaid from '../src/mermaid.js';
 
 /* global document */
 

tests/mermaidediting.js

@@ -1,11 +1,14 @@
-import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Heading from '@ckeditor/ckeditor5-heading/src/heading';
-import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
-import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
-import CodeBlockEditing from '@ckeditor/ckeditor5-code-block/src/codeblockediting';
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import MermaidEditing from '../src/mermaidediting';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Essentials } from '@ckeditor/ckeditor5-essentials';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { Heading } from '@ckeditor/ckeditor5-heading';
+import { CodeBlockEditing } from '@ckeditor/ckeditor5-code-block';
+import {
+	_setModelData as setModelData,
+	_getModelData as getModelData,
+	_getViewData as getViewData
+} from '@ckeditor/ckeditor5-engine';
+import MermaidEditing from '../src/mermaidediting.js';
 
 /* global document */
 

tests/mermaidtoolbar.js

@@ -1,12 +1,10 @@
-import ClassicTestEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import {
-	setData
-} from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
-import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
-import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import { ClassicEditor as ClassicTestEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Essentials } from '@ckeditor/ckeditor5-essentials';
 import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget';
+import { _setModelData as setData } from '@ckeditor/ckeditor5-engine';
 
-import Mermaid from '../src/mermaid';
+import Mermaid from '../src/mermaid.js';
 
 /* global document */
 
@@ -38,6 +36,10 @@ describe( 'MermaidToolbar', () => {
 
 	describe( 'toolbar', () => {
 		it( 'should be initialized with expected buttons', () => {
+			editor.ui.focusTracker.isFocused = true;
+
+			setData( model, '<mermaid displayMode="split" source="">[]</mermaid>' );
+
 			expect( toolbar.items ).to.have.length( 5 );
 			expect( toolbar.items.get( 0 ).label ).to.equal( 'Source view' );
 			expect( toolbar.items.get( 1 ).label ).to.equal( 'Split view' );

tests/mermaidui.js

@@ -1,8 +1,8 @@
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { _setModelData as setModelData } from '@ckeditor/ckeditor5-engine';
 
-import Mermaid from '../src/mermaid';
-import MermaidUI from '../src/mermaidui';
+import Mermaid from '../src/mermaid.js';
+import MermaidUI from '../src/mermaidui.js';
 
 /* global document */