Merge pull request #296 from ckeditor/fix-typings

Fix: Fix the component properties and event types.

Internal: Add `tsconfig.json` to the demo.

Internal: Lint only the `.ts` and `.vue` files.

demo/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "../src/plugin.ts"
+    ]
+  },
+  "include": [
+    "**/*"
+  ]
+}

package.json

@@ -78,7 +78,7 @@
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly",
     "test": "vitest run --coverage",
     "test:watch": "vitest --ui --watch",
-    "lint": "eslint \"{demo,src,tests}/**/*\"",
+    "lint": "eslint \"{demo,src,tests}/**/*.{ts,vue}\"",
     "postinstall": "node ./scripts/postinstall.js",
     "changelog": "node ./scripts/changelog.js",
     "release:prepare-packages": "node ./scripts/preparepackages.js",

src/ckeditor.vue

@@ -19,22 +19,17 @@ import {
 	onBeforeUnmount
 } from 'vue';
 import type { Editor, EditorConfig, EventInfo } from 'ckeditor5';
+import type { Props, ExtractEditorType } from './types.js';
 
-type EditorType = TEditor extends { create( ...args: any[] ): Promise<infer E> } ? E : never;
+type EditorType = ExtractEditorType<TEditor>;
 
 defineOptions( {
 	name: 'CKEditor'
 } );
 
 const model = defineModel( 'modelValue', { type: String, default: '' } );
 
-const props = withDefaults( defineProps<{
-	editor: TEditor;
-	config?: EditorConfig;
-	tagName?: string;
-	disabled?: boolean;
-	disableTwoWayDataBinding?: boolean;
-}>(), {
+const props = withDefaults( defineProps<Props<TEditor>>(), {
 	config: () => ( {} ),
 	tagName: 'div',
 	disabled: false,

src/types.ts

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import type { EditorConfig } from 'ckeditor5';
+
+/**
+ * This file contains types for the CKEditor 5 Vue component.
+ * These types were moved to a separate file, because the `vue-tsc`
+ * package couldn't generate the correct types for the component
+ * when the types were in the component file. This is a workaround
+ * that may be fixed in the next versions of `vue-tsc`.
+ */
+
+/**
+ * The props accepted by the `<ckeditor>` component.
+ */
+export interface Props<TEditor> {
+	editor: TEditor;
+	config?: EditorConfig;
+	tagName?: string;
+	disabled?: boolean;
+	disableTwoWayDataBinding?: boolean;
+}
+
+/**
+ * The editor type extracted from the editor instance type.
+ */
+export type ExtractEditorType<TEditor> = TEditor extends { create( ...args: Array<any> ): Promise<infer E> }
+	? E
+	: never;

tsconfig.json

@@ -26,5 +26,7 @@
     "declaration": true,
     "declarationDir": "./dist"
   },
-  "include": ["src/plugin.ts"]
+  "include": [
+    "src"
+  ]
 }