Skip to content

Commit 3395eb0

Browse files
pomekpomek
authored
Merge pull request #244 from ckeditor/ck/13545-add-vue-poc
Feature: Improve typings for events emitted by the Vue component. Internal: Add Vue linter and apply suggestions. Internal: Update demo project to better reflect real-world usage. Closes ckeditor/ckeditor5#13545. MAJOR BREAKING CHANGE: Integration now requires Editor version 37 or later.
2 parents 89a04fc + 3c7cffa commit 3395eb0

24 files changed

+7318
-12003
lines changed

Diff for: ‎.eslintrc.js

+25-3
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,35 @@
77

88
// Note: The ESLint configuration is mandatory for vue-cli.
99
module.exports = {
10-
'extends': 'ckeditor5',
10+
'extends': [
11+
'plugin:vue/vue3-recommended',
12+
'ckeditor5'
13+
],
14+
// https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
15+
'parser': 'vue-eslint-parser',
16+
'parserOptions': {
17+
'parser': '@typescript-eslint/parser',
18+
'sourceType': 'module'
19+
},
1120
'rules': {
1221
'ckeditor5-rules/license-header': [ 'error', { headerLines: [
1322
'/**',
1423
' * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.',
1524
' * For licensing, see LICENSE.md.',
1625
' */'
17-
] } ]
18-
}
26+
] } ],
27+
'vue/multi-word-component-names': 'off'
28+
},
29+
'overrides': [
30+
{
31+
'files': [
32+
'demo/**/*.js',
33+
'demo/**/*.ts',
34+
'demo/**/*.vue'
35+
],
36+
'rules': {
37+
'ckeditor5-rules/license-header': 'off'
38+
}
39+
}
40+
]
1941
};

Diff for: ‎.travis.yml

+5-3
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ cache:
1313
before_install:
1414
- export START_TIME=$( date +%s )
1515
install:
16-
- npm install
16+
- yarn install
1717
script:
18-
- npm run coverage
19-
- npm run test -- --browsers=Firefox
18+
- yarn run lint
19+
- yarn run coverage
20+
- ./scripts/test-demo.js
21+
- yarn run test -- --browsers=Firefox
2022
- if [[ $TRAVIS_TEST_RESULT -eq 0 ]]; then cat coverage/lcov.info | ./node_modules/.bin/coveralls; fi
2123
after_script:
2224
- export END_TIME=$( date +%s )

Diff for: ‎README.md

+22-9
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@ See the ["Rich text editor component for Vue.js"](https://ckeditor.com/docs/cked
2525
After cloning this repository, install necessary dependencies:
2626

2727
```bash
28-
npm install
28+
yarn install
2929
```
3030

3131
### Executing tests
3232

3333
```bash
34-
npm run test -- [additional options]
34+
yarn run test -- [additional options]
3535
# or
36-
npm t -- [additional options]
36+
yarn t -- [additional options]
3737
```
3838

3939
The command accepts the following options:
@@ -44,20 +44,20 @@ The command accepts the following options:
4444
* `--reporter` (`-r`) – Reporter for Karma (default: `mocha`, can be changed to `dots`).
4545
* `--browsers` (`-b`) – Browsers that will be used to run tests (default: `Chrome`, available: `Firefox`).
4646

47-
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.
47+
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.
4848

4949
### Building the package
5050

5151
Build a minified version of the package that is ready to publish:
5252

5353
```bash
54-
npm run build
54+
yarn run build
5555
```
5656

5757
### Changelog generator
5858

5959
```bash
60-
npm run changelog
60+
yarn run changelog
6161
```
6262

6363
### Testing component with Vue CLI
@@ -78,12 +78,25 @@ Otherwise, the application will fail to load the component correctly and, as a r
7878

7979
## Releasing package
8080

81+
### Prerequisites
82+
83+
Before releasing a new version, run a demo project to confirm that the integration works in a real-world scenario.
84+
85+
1. Navigate to the `demo` folder.
86+
2. Reinstall the dependencies.
87+
3. Run `yarn dev` to see if the integration works as expected.
88+
4. Run `yarn build` to see if the project with the integration builds without errors.
89+
90+
```Text
91+
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.
92+
```
93+
8194
### Changelog
8295

8396
Before starting the release process, you need to generate the changelog:
8497

8598
```bash
86-
npm run changelog
99+
yarn run changelog
87100
```
88101

89102
### Publishing
@@ -93,15 +106,15 @@ After generating the changelog, you are able to release the package.
93106
First, you need to bump the version:
94107

95108
```bash
96-
npm run release:bump-version
109+
yarn run release:bump-version
97110
```
98111

99112
You can also use the `--dry-run` option in order to see what this task does.
100113

101114
After bumping the version, you can publish the changes:
102115

103116
```bash
104-
npm run release:publish
117+
yarn run release:publish
105118
```
106119

107120
Note: Only the `dist/` directory will be published.

Diff for: ‎demo/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist
2+
node_modules

Diff for: ‎demo/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>CKEditor Vue example</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.ts"></script>
11+
</body>
12+
</html>

Diff for: ‎demo/package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "demo",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@ckeditor/ckeditor5-build-classic": "^37.0.0-alpha.3",
13+
"@ckeditor/ckeditor5-vue": "file:..",
14+
"vue": "^3.2.47"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^4.1.0",
18+
"typescript": "^4.9.3",
19+
"vite": "^4.2.0",
20+
"vue-tsc": "^1.2.0"
21+
}
22+
}

Diff for: ‎demo/src/App.vue

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<h1>Example of using CKEditor 5 in Vue.js 3.x</h1>
3+
4+
<ckeditor
5+
v-model="data"
6+
tag-name="textarea"
7+
:editor="ClassicEditor"
8+
:config="config"
9+
:disabled="disabled"
10+
@ready="onReady"
11+
@focus="onFocus"
12+
@blur="onBlur"
13+
@input="onInput"
14+
@destroy="onDestroy"
15+
/>
16+
17+
<button @click="toggleEditorDisabled">
18+
{{ disabled ? 'Enable' : 'Disable' }} editor
19+
</button>
20+
21+
<h2>Live editor data</h2>
22+
23+
<textarea v-model="data" />
24+
</template>
25+
26+
<script setup lang="ts">
27+
import { ref, reactive } from 'vue';
28+
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
29+
import type { EventInfo } from '@ckeditor/ckeditor5-utils';
30+
31+
// State
32+
const data = ref( '<p>Hello world!</p>' );
33+
34+
const disabled = ref( false );
35+
36+
const config = reactive( {
37+
toolbar: [ 'heading', '|', 'bold', 'italic' ]
38+
} );
39+
40+
// Methods
41+
function toggleEditorDisabled() {
42+
disabled.value = !disabled.value;
43+
}
44+
45+
function onReady( editor: ClassicEditor ) {
46+
window.editor = editor;
47+
48+
console.log( 'Editor is ready.', { editor } );
49+
}
50+
51+
function onFocus( event: EventInfo, editor: ClassicEditor ) {
52+
console.log( 'Editor focused.', { event, editor } );
53+
}
54+
55+
function onBlur( event: EventInfo, editor: ClassicEditor ) {
56+
console.log( 'Editor blurred.', { event, editor } );
57+
}
58+
59+
function onInput( data: string, event: EventInfo, editor: ClassicEditor ) {
60+
console.log( 'Editor data input.', { event, editor, data } );
61+
}
62+
63+
function onDestroy( editor: ClassicEditor ) {
64+
console.log( 'Editor destroyed.', { editor } );
65+
}
66+
</script>
67+
68+
<style>
69+
body {
70+
max-width: 800px;
71+
margin: 20px auto;
72+
}
73+
74+
textarea {
75+
width: 100%;
76+
height: 100px;
77+
font-family: monospace;
78+
}
79+
80+
button {
81+
margin-top: 10px;
82+
}
83+
</style>

Diff for: ‎demo/src/main.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createApp } from 'vue';
2+
import CKEditorPlugin from '@ckeditor/ckeditor5-vue';
3+
import App from './App.vue';
4+
5+
createApp( App )
6+
.use( CKEditorPlugin )
7+
.mount( '#app' );

Diff for: ‎demo/src/vite-env.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type ClassicEditor from '@ckeditor/ckeditor5-build-classic';
2+
3+
declare global {
4+
interface Window {
5+
editor: ClassicEditor;
6+
}
7+
}

Diff for: ‎demo/tsconfig.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ESNext",
4+
"useDefineForClassFields": true,
5+
"module": "ESNext",
6+
"moduleResolution": "Node",
7+
"strict": true,
8+
"resolveJsonModule": true,
9+
"isolatedModules": true,
10+
"esModuleInterop": true,
11+
"lib": ["ESNext", "DOM"],
12+
"skipLibCheck": true,
13+
"noEmit": true,
14+
"allowSyntheticDefaultImports": true,
15+
"types": [
16+
"vite/client"
17+
]
18+
},
19+
"include": [
20+
"src/**/*.ts",
21+
"src/**/*.vue",
22+
"vite.config.ts"
23+
]
24+
}

Diff for: ‎demo/vite.config.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { defineConfig } from 'vite';
2+
import vue from '@vitejs/plugin-vue';
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig( {
6+
plugins: [ vue() ],
7+
optimizeDeps: {
8+
/**
9+
* This is required only because we use "npm link" for
10+
* testing purposes. See `dependencies` in `package.json`.
11+
*/
12+
include: [ '@ckeditor/ckeditor5-vue' ]
13+
}
14+
} );

0 commit comments

Comments
 (0)