Ckeditor5-angular: No type definitions for CKEditor5.Config?

[seanbotha123]

Hi,

Can we not have type definitions for the config property of the editor?

Regards
Sean

[ma2ciek]

Hi, @seanbotha123!

Unfortunately, type definitions for CKEditor 5 builds still don't exist. You can subscribe to the https://github.com/ckeditor/ckeditor5/issues/504 issue.

Different builds provide different sets of plugins thus different toolbar options, so it can't be done from the ckeditor5-angular side.

You can check all possible options here: https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html

[PMoransais]

Your documentation suggests to import the editor into the component that uses it:

_import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; or ckeditor5-build-inline_

This results in an error because of typescript being unable to find the declaration file d.ts

Could not find a declaration file for module '@ckeditor/ckeditor5-build-inline'. 'c:/iBreeder Dev/dev.iBreeder.net/iBreeder.com/node_modules/@ckeditor/ckeditor5-build-inline/build/ckeditor.js' implicitly has an 'any' type.
Try npm install @types/ckeditor__ckeditor5-build-inline if it exists or add a new declaration (.d.ts) file containing declare module '@ckeditor/ckeditor5-build-inline';ts( ...

Given that typescript is the default language for angular and thus your component, could you give a detailed example that lets us use that angular version of the editor with typescript out of the box, even if you declare the build as any. In fact you should add that to the doc.

Thank you for your help

[ma2ciek]

Hi @PMoransais.

Your documentation suggests to import the editor into the component that uses it:
_import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; or ckeditor5-build-inline_
This results in an error because of typescript being unable to find the declaration file d.ts

We can't add declaration files for builds to our integration. It's up to the developer to choose the build or even build the editor from source and use that build in the angular integration later. But we should mention it in our docs indeed (Note that this error happens only for the strict mode). That part is on the review already - https://github.com/ckeditor/ckeditor5/pull/1535/files#diff-bba2ee914d15379a204c8e67fbb57176R72.

Given that typescript is the default language for angular and thus your component, could you give a detailed example that lets us use that angular version of the editor with typescript out of the box, even if you declare the build as any. In fact you should add that to the doc.

Defining declaration files isn't such easy for existing JS libraries. Unless you want to define all interfaces and actualize them later on your own. We started working on the https://github.com/ckeditor/ckeditor5/issues/1415, but things get complicated and there's no ROI for it at this moment. You'll be also intreseted in https://github.com/ckeditor/ckeditor5/issues/504.

[ma2ciek]

For anyone having the problem with importing the CKEditor 5 builds in the future, this should fix the problem:

1. Create a file typings.d.ts (or however you want to name it) and fill it with missing typings for your libraries:

// Empty typings for the editor used in the app to satisfy the TS compiler in the strict mode:
declare module '@ckeditor/ckeditor5-build-classic' { // or other CKEditor 5 build.
    const ClassicEditorBuild: any;

    export = ClassicEditorBuild;
}

1. Make sure that this file will be handled by both tsconfig.app.json and tsconfig.spec.json.

2. The above things will make the package visible for the TS compiler under the namespace import later (import * as ClassicEditorBuild from '@ckeditor/ckeditor5-build-classic';)

Note: Depending on your TypeScript configuration you should have either namespace or default imports and exports.

[Manimall]

please, add types

[revzo]

For anyone having the problem with importing the CKEditor 5 builds in the future, this should fix the problem:

1. Create a file typings.d.ts (or however you want to name it) and fill it with missing typings for your libraries:

// Empty typings for the editor used in the app to satisfy the TS compiler in the strict mode:
declare module '@ckeditor/ckeditor5-build-classic' { // or other CKEditor 5 build.
  const ClassicEditorBuild: any;

  export = ClassicEditorBuild;
}

1. Make sure that this file will be handled by both tsconfig.app.json and tsconfig.spec.json.
2. The above things will make the package visible for the TS compiler under the namespace import later (import * as ClassicEditorBuild from '@ckeditor/ckeditor5-build-classic';)

Note: Depending on your TypeScript configuration you should have either namespace or default imports and exports.

Thanks :)