From b6d40eadfff6b78ce29be3c922c09281b8fdb478 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Fri, 15 Nov 2024 09:10:33 +0100 Subject: [PATCH 1/9] Add Vue 3.x TS section. --- .../integrations-cdn/vuejs-v3.md | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/docs/getting-started/integrations-cdn/vuejs-v3.md b/docs/getting-started/integrations-cdn/vuejs-v3.md index f0e75c64c82..ee1adfe1189 100644 --- a/docs/getting-started/integrations-cdn/vuejs-v3.md +++ b/docs/getting-started/integrations-cdn/vuejs-v3.md @@ -400,6 +400,65 @@ const cloud = useCKEditorCloud( { ``` +### TypeScript support + +The CKEditor 5 Vue component is written in TypeScript and provides type definitions. If you use TypeScript in your project, you can take advantage of them. In order to do so, you need to import the component and its types using `import type` statement. Take a look at the following example: + +```html + +``` + +While typings for the base editor should be available out of the box, some bundlers tend to not install `ckeditor5` package which provides typings for the editor. If you encounter any issues with the typings, you can install the `ckeditor5` package manually: + +```bash +npm install --save-dev ckeditor5 +``` + +If you want to use types for premium features, you can import them in a similar way as the base editor types. Keep in mind that you need to install the `ckeditor5-premium-features` package in order to use them. You can do it by running the following command: + +```bash +npm install --save-dev ckeditor5-premium-features +``` + +After installing the package, you can import the types in the following way: + +```html + +``` + ## Contributing and reporting issues The source code of this component is available on GitHub in [https://github.com/ckeditor/ckeditor5-vue](https://github.com/ckeditor/ckeditor5-vue). From ea002d09c8b78891175b62cdd2ad3764abe21aa0 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Fri, 15 Nov 2024 09:20:30 +0100 Subject: [PATCH 2/9] Adjust docs --- .../getting-started/integrations-cdn/vuejs-v3.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/getting-started/integrations-cdn/vuejs-v3.md b/docs/getting-started/integrations-cdn/vuejs-v3.md index ee1adfe1189..7bf134ff5cd 100644 --- a/docs/getting-started/integrations-cdn/vuejs-v3.md +++ b/docs/getting-started/integrations-cdn/vuejs-v3.md @@ -437,11 +437,7 @@ const TestEditor = computed( () => { ``` -While typings for the base editor should be available out of the box, some bundlers tend to not install `ckeditor5` package which provides typings for the editor. If you encounter any issues with the typings, you can install the `ckeditor5` package manually: - -```bash -npm install --save-dev ckeditor5 -``` +#### Typings for premium features If you want to use types for premium features, you can import them in a similar way as the base editor types. Keep in mind that you need to install the `ckeditor5-premium-features` package in order to use them. You can do it by running the following command: @@ -459,6 +455,16 @@ import type { Mention } from 'https://cdn.ckeditor.com/typings/ckeditor5-premium ``` +#### Known issues + +In the above example, the `ClassicEditor` type is imported from the `ckeditor5` package, but the editor itself is loaded from the CDN. Keep in mind that `import type` is used to import only the types, not the actual code, and it's not fetched from the CDN as it's synthetic module definition stored in the integration package. + +While typings for the base editor should be available out of the box, some bundlers tend to not install `ckeditor5` package which provides typings for the editor. If you encounter any issues with the typings, you can install the `ckeditor5` package manually: + +```bash +npm install --save-dev ckeditor5 +``` + ## Contributing and reporting issues The source code of this component is available on GitHub in [https://github.com/ckeditor/ckeditor5-vue](https://github.com/ckeditor/ckeditor5-vue). From b4f1f0cda36295419cbc695112d6d63ea7057249 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Fri, 15 Nov 2024 09:52:34 +0100 Subject: [PATCH 3/9] Add React TS docs. --- .../integrations-cdn/react-default-cdn.md | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) diff --git a/docs/getting-started/integrations-cdn/react-default-cdn.md b/docs/getting-started/integrations-cdn/react-default-cdn.md index 05ad92108a6..805715cfb81 100644 --- a/docs/getting-started/integrations-cdn/react-default-cdn.md +++ b/docs/getting-started/integrations-cdn/react-default-cdn.md @@ -345,6 +345,85 @@ const CKEditorDemo = () => { For more information, please refer to the {@link getting-started/setup/ui-language Setting the UI language} guide. +### TypeScript support + +The official React integration for CKEditor 5 is written in TypeScript and provides full support for it. If you are using TypeScript in your project, you can use the `CKEditor` component without any additional configuration, however, if you want to use some specific types from CKEditor 5 packages, you can import them directly from provided package exports. Take a look at the following example: + +```tsx +import React from 'react'; +import { CKEditor, useCKEditorCloud } from '@ckeditor/ckeditor5-react'; + +import type { EventInfo } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'; + +const CKEditorDemo = () => { + const cloud = useCKEditorCloud( { + version: '{@var ckeditor5-version}', + translations: [ 'es' ] + } ); + + if ( cloud.status === 'error' ) { + return
Error!
; + } + + if ( cloud.status === 'loading' ) { + return
Loading...
; + } + + const { + ClassicEditor, + Essentials, + Bold, + Italic, + Paragraph + } = cloud.CKEditor; + + return ( + Hello world!

' } + config={ { + licenseKey: '', + toolbar: [ 'undo', 'redo', '|', 'bold', 'italic' ], + plugins: [ Bold, Essentials, Italic, Paragraph ], + } } + onBlur={ ( event: EventInfo ) => { + // your event handler + } } + /> + ); +}; +``` + +In the above example, the `EventInfo` type is imported from the `[@ckeditor/ckeditor5-react](https://cdn.ckeditor.com/typings/ckeditor5.d.ts)` package. If you need to use types from CKEditor 5 packages, you can import them directly from the provided package exports. + +#### Typings for premium features + +If you want to use types for premium features, you can import them in a similar way as the base editor types. Keep in mind that you need to install the `ckeditor5-premium-features` package in order to use them. You can do it by running the following command: + +```bash +npm install --save-dev ckeditor5-premium-features +``` + +After installing the package, you can import the types in the following way: + +```html + +``` + +#### Known issues + +In the above example, the `ClassicEditor` type is imported from the `ckeditor5` package, but the editor itself is loaded from the CDN. Keep in mind that `import type` is used to import only the types, not the actual code, and it's not fetched from the CDN as it's synthetic module definition stored in the integration package. + +While typings for the base editor should be available out of the box, some bundlers tend to not install `ckeditor5` package which provides typings for the editor. If you encounter any issues with the typings, you can install the `ckeditor5` package manually: + +```bash +npm install --save-dev ckeditor5 +``` + ## Contributing and reporting issues The source code of rich text editor component for React is available on GitHub in [https://github.com/ckeditor/ckeditor5-react](https://github.com/ckeditor/ckeditor5-react). From d321a6e794575213d97677c285cb69f8ea240374 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Fri, 15 Nov 2024 10:17:16 +0100 Subject: [PATCH 4/9] Adjust docs --- docs/getting-started/integrations-cdn/react-default-cdn.md | 6 +++--- docs/getting-started/integrations-cdn/vuejs-v3.md | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/getting-started/integrations-cdn/react-default-cdn.md b/docs/getting-started/integrations-cdn/react-default-cdn.md index 805715cfb81..7962d24058f 100644 --- a/docs/getting-started/integrations-cdn/react-default-cdn.md +++ b/docs/getting-started/integrations-cdn/react-default-cdn.md @@ -394,7 +394,9 @@ const CKEditorDemo = () => { }; ``` -In the above example, the `EventInfo` type is imported from the `[@ckeditor/ckeditor5-react](https://cdn.ckeditor.com/typings/ckeditor5.d.ts)` package. If you need to use types from CKEditor 5 packages, you can import them directly from the provided package exports. +In the example above, the `EventInfo` type is imported from the `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` package, while the editor itself is loaded from the CDN. Note that `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` is not an actual URL to the CKEditor 5 typings file, but a synthetic TypeScript module providing typings for the editor. The actual typings are supplied by the `ckeditor5` package, which is a dependency of the `@ckeditor/ckeditor5-react` package. + +Although this setup might seem a bit complex, it is designed to prevent users from directly importing anything from the `ckeditor5` package, which could lead to duplicated code issues. #### Typings for premium features @@ -416,8 +418,6 @@ import type { Mention } from 'https://cdn.ckeditor.com/typings/ckeditor5-premium #### Known issues -In the above example, the `ClassicEditor` type is imported from the `ckeditor5` package, but the editor itself is loaded from the CDN. Keep in mind that `import type` is used to import only the types, not the actual code, and it's not fetched from the CDN as it's synthetic module definition stored in the integration package. - While typings for the base editor should be available out of the box, some bundlers tend to not install `ckeditor5` package which provides typings for the editor. If you encounter any issues with the typings, you can install the `ckeditor5` package manually: ```bash diff --git a/docs/getting-started/integrations-cdn/vuejs-v3.md b/docs/getting-started/integrations-cdn/vuejs-v3.md index 7bf134ff5cd..f9482a9ae36 100644 --- a/docs/getting-started/integrations-cdn/vuejs-v3.md +++ b/docs/getting-started/integrations-cdn/vuejs-v3.md @@ -437,6 +437,10 @@ const TestEditor = computed( () => { ``` +In the example above, the `ClassicEditor` type is imported from the `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` package, while the editor itself is loaded from the CDN. Note that `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` is not an actual URL to the CKEditor 5 typings file, but a synthetic TypeScript module providing typings for the editor. The actual typings are supplied by the `ckeditor5` package, which is a dependency of the `@ckeditor/ckeditor5-vue` package. + +Although this setup might seem a bit complex, it is designed to prevent users from directly importing anything from the `ckeditor5` package, which could lead to duplicated code issues. + #### Typings for premium features If you want to use types for premium features, you can import them in a similar way as the base editor types. Keep in mind that you need to install the `ckeditor5-premium-features` package in order to use them. You can do it by running the following command: @@ -457,8 +461,6 @@ import type { Mention } from 'https://cdn.ckeditor.com/typings/ckeditor5-premium #### Known issues -In the above example, the `ClassicEditor` type is imported from the `ckeditor5` package, but the editor itself is loaded from the CDN. Keep in mind that `import type` is used to import only the types, not the actual code, and it's not fetched from the CDN as it's synthetic module definition stored in the integration package. - While typings for the base editor should be available out of the box, some bundlers tend to not install `ckeditor5` package which provides typings for the editor. If you encounter any issues with the typings, you can install the `ckeditor5` package manually: ```bash From b6e9c7ee0901a9928ff12c9ae0822cab0855dec6 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Fri, 15 Nov 2024 10:19:13 +0100 Subject: [PATCH 5/9] Adjust docs. --- docs/getting-started/integrations-cdn/react-default-cdn.md | 2 +- docs/getting-started/integrations-cdn/vuejs-v3.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getting-started/integrations-cdn/react-default-cdn.md b/docs/getting-started/integrations-cdn/react-default-cdn.md index 7962d24058f..e0b2157a746 100644 --- a/docs/getting-started/integrations-cdn/react-default-cdn.md +++ b/docs/getting-started/integrations-cdn/react-default-cdn.md @@ -347,7 +347,7 @@ For more information, please refer to the {@link getting-started/setup/ui-langua ### TypeScript support -The official React integration for CKEditor 5 is written in TypeScript and provides full support for it. If you are using TypeScript in your project, you can use the `CKEditor` component without any additional configuration, however, if you want to use some specific types from CKEditor 5 packages, you can import them directly from provided package exports. Take a look at the following example: +The official React integration for CKEditor 5 is written in TypeScript and provides full support for it. If you are using TypeScript in your project, you can use the `CKEditor` component without any additional configuration, however, if you want to use some specific types from CKEditor 5 packages, you can import them directly from a special package containing typings. Take a look at the following example: ```tsx import React from 'react'; diff --git a/docs/getting-started/integrations-cdn/vuejs-v3.md b/docs/getting-started/integrations-cdn/vuejs-v3.md index f9482a9ae36..c58c4aded20 100644 --- a/docs/getting-started/integrations-cdn/vuejs-v3.md +++ b/docs/getting-started/integrations-cdn/vuejs-v3.md @@ -402,7 +402,7 @@ const cloud = useCKEditorCloud( { ### TypeScript support -The CKEditor 5 Vue component is written in TypeScript and provides type definitions. If you use TypeScript in your project, you can take advantage of them. In order to do so, you need to import the component and its types using `import type` statement. Take a look at the following example: +The CKEditor 5 Vue component is written in TypeScript and provides type definitions. If you use TypeScript in your project, you can take advantage of them. In order to do so, you need to import the component and its types using `import type` statement from a special package containing typings. Take a look at the following example: ```html ``` -#### Known issues +## Known issues -While typings for the base editor should be available out of the box, some bundlers tend to not install `ckeditor5` package which provides typings for the editor. If you encounter any issues with the typings, you can install the `ckeditor5` package manually: +While type definitions for the base editor should be available out of the box, some bundlers do not install the `ckeditor5` package, which provides typing for the editor. If you encounter any issues with the type definitions, you can install the `ckeditor5` package manually: ```bash npm install --save-dev ckeditor5 From e64a0b31408f839f43da7c97bdb8bef144cebf86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gorzeli=C5=84ski?= Date: Fri, 15 Nov 2024 12:00:11 +0100 Subject: [PATCH 7/9] Docs: Proofread the Vue CDN guide. --- .../integrations-cdn/react-default-cdn.md | 2 +- .../integrations-cdn/vuejs-v3.md | 22 +++++++++++-------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/docs/getting-started/integrations-cdn/react-default-cdn.md b/docs/getting-started/integrations-cdn/react-default-cdn.md index 4bd8a3a2024..1669109923b 100644 --- a/docs/getting-started/integrations-cdn/react-default-cdn.md +++ b/docs/getting-started/integrations-cdn/react-default-cdn.md @@ -400,7 +400,7 @@ Although this setup might seem complex, it prevents users from directly importin #### Type definitions for premium features -If you want to use types for premium features, you can import them similarly to the base editor types. Remember that you need to install the `ckeditor5-premium-features` package to use them. You can do it by running the following command. +If you want to use types for premium features, you can import them similarly to the base editor types. Remember that you need to install the `ckeditor5-premium-features` package to use them. You can do it by running the following command: ```bash npm install --save-dev ckeditor5-premium-features diff --git a/docs/getting-started/integrations-cdn/vuejs-v3.md b/docs/getting-started/integrations-cdn/vuejs-v3.md index c58c4aded20..db6803d97f7 100644 --- a/docs/getting-started/integrations-cdn/vuejs-v3.md +++ b/docs/getting-started/integrations-cdn/vuejs-v3.md @@ -402,7 +402,7 @@ const cloud = useCKEditorCloud( { ### TypeScript support -The CKEditor 5 Vue component is written in TypeScript and provides type definitions. If you use TypeScript in your project, you can take advantage of them. In order to do so, you need to import the component and its types using `import type` statement from a special package containing typings. Take a look at the following example: +The CKEditor 5 Vue component is written in TypeScript and provides type definitions. If you use TypeScript in your project, you can take advantage of them. To do so, import the component and its types using an `import type` statement from a special package containing type definitions. Take a look at the following example: ```html ``` -In the example above, the `ClassicEditor` type is imported from the `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` package, while the editor itself is loaded from the CDN. Note that `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` is not an actual URL to the CKEditor 5 typings file, but a synthetic TypeScript module providing typings for the editor. The actual typings are supplied by the `ckeditor5` package, which is a dependency of the `@ckeditor/ckeditor5-vue` package. +In the example above, the ClassicEditor type is imported from the `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` package, while the editor itself loads from the CDN. Note that `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` is not an actual URL to the CKEditor 5 types file but a synthetic TypeScript module providing type definitions for the editor. The `ckeditor5` package supplies the actual typings, which depend on the `@ckeditor/ckeditor5-react` package. -Although this setup might seem a bit complex, it is designed to prevent users from directly importing anything from the `ckeditor5` package, which could lead to duplicated code issues. +Although this setup might seem complex, it prevents users from directly importing anything from the `ckeditor5` package, which could lead to duplicated code issues. -#### Typings for premium features +#### Type definitions for premium features -If you want to use types for premium features, you can import them in a similar way as the base editor types. Keep in mind that you need to install the `ckeditor5-premium-features` package in order to use them. You can do it by running the following command: +If you want to use types for premium features, you can import them similarly to the base editor types. Remember that you need to install the `ckeditor5-premium-features` package to use them. You can do it by running the following command: ```bash npm install --save-dev ckeditor5-premium-features @@ -459,9 +463,9 @@ import type { Mention } from 'https://cdn.ckeditor.com/typings/ckeditor5-premium ``` -#### Known issues +## Known issues -While typings for the base editor should be available out of the box, some bundlers tend to not install `ckeditor5` package which provides typings for the editor. If you encounter any issues with the typings, you can install the `ckeditor5` package manually: +While type definitions for the base editor should be available out of the box, some bundlers do not install the `ckeditor5` package, which provides typing for the editor. If you encounter any issues with the type definitions, you can install the `ckeditor5` package manually: ```bash npm install --save-dev ckeditor5 From eef3934a383bdf399c1afbc19df2f6623c07e1fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gorzeli=C5=84ski?= Date: Fri, 15 Nov 2024 12:48:43 +0100 Subject: [PATCH 8/9] Docs: Minor fix. --- scripts/release/assets/zip/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/release/assets/zip/index.html b/scripts/release/assets/zip/index.html index 91b850c6b90..0213a6f2e1d 100644 --- a/scripts/release/assets/zip/index.html +++ b/scripts/release/assets/zip/index.html @@ -39,6 +39,7 @@ ClassicEditor .create( document.querySelector( '#editor' ), { + licenseKey: 'GPL', // Or plugins: [ Essentials, Paragraph, Bold, Italic, Font ], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', From 2c595fc838a73bf4a6859b86ba3cf0c9e3507183 Mon Sep 17 00:00:00 2001 From: Bartek Biedrzycki Date: Fri, 15 Nov 2024 12:57:14 +0100 Subject: [PATCH 9/9] Docs: minor fixes. [short flow] --- docs/getting-started/integrations-cdn/react-default-cdn.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/integrations-cdn/react-default-cdn.md b/docs/getting-started/integrations-cdn/react-default-cdn.md index 1669109923b..beadb633a69 100644 --- a/docs/getting-started/integrations-cdn/react-default-cdn.md +++ b/docs/getting-started/integrations-cdn/react-default-cdn.md @@ -347,7 +347,7 @@ For more information, please refer to the {@link getting-started/setup/ui-langua ### TypeScript support -The official React integration for CKEditor 5 is written in TypeScript and fully supports it. If you use TypeScript in your project, you can use the `CKEditor` component without additional configuration. However, if you want to use some specific types from CKEditor 5 packages, you can import them directly from a special package containing type definitions. Take a look at the following example: +The official React integration for CKEditor 5 is written in TypeScript and fully supports it. If you use TypeScript in your project, you can use the `CKEditor` component without additional configuration. However, if you want to use some specific types from the CKEditor 5 packages, you can import them directly from a special package containing type definitions. Take a look at the following example: ```tsx import React from 'react';