Improve typings for events and update project demo

.eslintrc.js

@@ -7,13 +7,35 @@
 
 // Note: The ESLint configuration is mandatory for vue-cli.
 module.exports = {
-	'extends': 'ckeditor5',
+	'extends': [
+		'plugin:vue/vue3-recommended',
+		'ckeditor5'
+	],
+	// https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
+	'parser': 'vue-eslint-parser',
+	'parserOptions': {
+		'parser': '@typescript-eslint/parser',
+		'sourceType': 'module'
+	},
 	'rules': {
 		'ckeditor5-rules/license-header': [ 'error', { headerLines: [
 			'/**',
 			' * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.',
 			' * For licensing, see LICENSE.md.',
 			' */'
-		] } ]
-	}
+		] } ],
+		'vue/multi-word-component-names': 'off'
+	},
+	'overrides': [
+		{
+			'files': [
+				'demo/**/*.js',
+				'demo/**/*.ts',
+				'demo/**/*.vue'
+			],
+			'rules': {
+				'ckeditor5-rules/license-header': 'off'
+			}
+		}
+	]
 };

.travis.yml

@@ -13,10 +13,12 @@ cache:
 before_install:
 - export START_TIME=$( date +%s )
 install:
-- npm install
+- yarn install
 script:
-- npm run coverage
-- npm run test -- --browsers=Firefox
+- yarn run lint
+- yarn run coverage
+- ./scripts/test-demo.js
+- yarn run test -- --browsers=Firefox
 - if [[ $TRAVIS_TEST_RESULT -eq 0 ]]; then cat coverage/lcov.info | ./node_modules/.bin/coveralls; fi
 after_script:
 - export END_TIME=$( date +%s )

README.md

@@ -25,15 +25,15 @@ See the ["Rich text editor component for Vue.js"](https://ckeditor.com/docs/cked
 After cloning this repository, install necessary dependencies:
 
 ```bash
-npm install
+yarn install
 ```
 
 ### Executing tests
 
 ```bash
-npm run test -- [additional options]
+yarn run test -- [additional options]
 # or
-npm t -- [additional options]
+yarn t -- [additional options]
 ```
 
 The command accepts the following options:
@@ -44,20 +44,20 @@ The command accepts the following options:
 * `--reporter` (`-r`) – Reporter for Karma (default: `mocha`, can be changed to `dots`).
 * `--browsers` (`-b`) – Browsers that will be used to run tests (default: `Chrome`, available: `Firefox`).
 
-If you are going to change the component (`src/ckeditor.js`) or plugin (`src/plugin.js`) files, remember about rebuilding the package. You can use `npm run develop` in order to do it automatically.
+If you are going to change the component (`src/ckeditor.js`) or plugin (`src/plugin.js`) files, remember about rebuilding the package. You can use `yarn run develop` in order to do it automatically.
 
 ### Building the package
 
 Build a minified version of the package that is ready to publish:
 
 ```bash
-npm run build
+yarn run build
 ```
 
 ### Changelog generator
 
 ```bash
-npm run changelog
+yarn run changelog
 ```
 
 ### Testing component with Vue CLI
@@ -78,12 +78,25 @@ Otherwise, the application will fail to load the component correctly and, as a r
 
 ## Releasing package
 
+### Prerequisites
+
+Before releasing a new version, run a demo project to confirm that the integration works in a real-world scenario.
+
+1. Navigate to the `demo` folder.
+2. Reinstall the dependencies.
+3. Run `yarn dev` to see if the integration works as expected.
+4. Run `yarn build` to see if the project with the integration builds without errors.
+
+```Text
+Dependencies in the `demo` project need to be reinstalled after any changes to the integration, because in `package.json` we use `file:` instead of `link:` due to Vite limitations. Unlike `link:`, which creates a symlink to the integration, `file:` copies its contents when `yarn install` is run and never updates after that.
+```
+
 ### Changelog
 
 Before starting the release process, you need to generate the changelog:
 
 ```bash
-npm run changelog
+yarn run changelog
 ```
 
 ### Publishing
@@ -93,15 +106,15 @@ After generating the changelog, you are able to release the package.
 First, you need to bump the version:
 
 ```bash
-npm run release:bump-version
+yarn run release:bump-version
 ```
 
 You can also use the `--dry-run` option in order to see what this task does.
 
 After bumping the version, you can publish the changes:
 
 ```bash
-npm run release:publish
+yarn run release:publish
 ```
 
 Note: Only the `dist/` directory will be published.

demo/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

demo/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CKEditor Vue example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

demo/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "demo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": "^37.0.0-alpha.3",
+    "@ckeditor/ckeditor5-vue": "file:..",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0",
+    "vue-tsc": "^1.2.0"
+  }
+}

demo/src/App.vue

@@ -0,0 +1,83 @@
+<template>
+  <h1>Example of using CKEditor 5 in Vue.js 3.x</h1>
+
+  <ckeditor
+    v-model="data"
+    tag-name="textarea"
+    :editor="ClassicEditor"
+    :config="config"
+    :disabled="disabled"
+    @ready="onReady"
+    @focus="onFocus"
+    @blur="onBlur"
+    @input="onInput"
+    @destroy="onDestroy"
+  />
+
+  <button @click="toggleEditorDisabled">
+    {{ disabled ? 'Enable' : 'Disable' }} editor
+  </button>
+
+  <h2>Live editor data</h2>
+
+  <textarea v-model="data" />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+import type { EventInfo } from '@ckeditor/ckeditor5-utils';
+
+// State
+const data = ref( '<p>Hello world!</p>' );
+
+const disabled = ref( false );
+
+const config = reactive( {
+	toolbar: [ 'heading', '|', 'bold', 'italic' ]
+} );
+
+// Methods
+function toggleEditorDisabled() {
+	disabled.value = !disabled.value;
+}
+
+function onReady( editor: ClassicEditor ) {
+	window.editor = editor;
+
+	console.log( 'Editor is ready.', { editor } );
+}
+
+function onFocus( event: EventInfo, editor: ClassicEditor ) {
+	console.log( 'Editor focused.', { event, editor } );
+}
+
+function onBlur( event: EventInfo, editor: ClassicEditor ) {
+	console.log( 'Editor blurred.', { event, editor } );
+}
+
+function onInput( data: string, event: EventInfo, editor: ClassicEditor ) {
+	console.log( 'Editor data input.', { event, editor, data } );
+}
+
+function onDestroy( editor: ClassicEditor ) {
+	console.log( 'Editor destroyed.', { editor } );
+}
+</script>
+
+<style>
+body {
+	max-width: 800px;
+	margin: 20px auto;
+}
+
+textarea {
+	width: 100%;
+	height: 100px;
+	font-family: monospace;
+}
+
+button {
+	margin-top: 10px;
+}
+</style>

demo/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import CKEditorPlugin from '@ckeditor/ckeditor5-vue';
+import App from './App.vue';
+
+createApp( App )
+	.use( CKEditorPlugin )
+	.mount( '#app' );

demo/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+import type ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
+declare global {
+	interface Window {
+		editor: ClassicEditor;
+	}
+}

demo/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+		"types": [
+			"vite/client"
+		]
+  },
+  "include": [
+		"src/**/*.ts",
+		"src/**/*.vue",
+		"vite.config.ts"
+	]
+}

demo/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig( {
+	plugins: [ vue() ],
+	optimizeDeps: {
+		/**
+		 * This is required only because we use "npm link" for
+		 * testing purposes. See `dependencies` in `package.json`.
+		 */
+		include: [ '@ckeditor/ckeditor5-vue' ]
+	}
+} );