How to find declaration for my typescript/react module?

Question

I am very (very) new in frontend technologies, specially react and typescript.

My issue come when trying to do a simple thing that is to use a react component https://github.com/ckeditor/ckeditor5

So I went to the examples and found this:

https://github.com/ckeditor/ckeditor5-react-example/blob/master/package.json

I am trying to include the ckeditor with the ClassicEditor module

So I added this on my package.json

"@ckeditor/ckeditor5-editor-classic": "^12.0.0",
"@ckeditor/ckeditor5-essentials": "^11.0.0",
"@ckeditor/ckeditor5-paragraph": "^11.0.0",
"@ckeditor/ckeditor5-react": "^1.1.2",

and checking the implementation here https://github.com/ckeditor/ckeditor5-react-example/blob/master/src/App.js

I need to import the module definition for typescript (I guess)

import CKEditor from '@ckeditor/ckeditor5-react';

// NOTE: We use editor from source (not a build)!
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

So, this part has this weird note, but happen that does not work in my project (says is missing and cannot find it)

Any idea what else I could do to add it? I tried removing the /src/classiceditor part but is still missing.

I made a npm install and I am able to see the classiceditor code there with package.json and more... the /src/classiceditor folder actually exists node_modules with /@ckeditor/ckeditor5-editor-classic/src/classiceditor.js

Any idea what I'm missing?

Answer 1

It seems that @ckeditor/ckeditor5-react does not provide any types and is not typed in DefinitelyTyped, so you can not use it in typescript that easily.

If you want to use @ckeditor/ckeditor5-react with types, you will have to type it yourself.

Example for this :

in your project, declare a file types/@ckeditor/ckeditor5-react/index.d.ts. In this file add this (very incomplete) type :

declare module '@ckeditor/ckeditor5-react' {
    export default class Ckeditor extends React.Component {
        constructor({disabled}: {disabled?: boolean}) // this part needs to be fullfilled with your needs
    }
}

This way you will be able to use CKeditor in your react app this way :

export function UseCKE() {
    return <Ckeditor disabled={true}/>;
}

Answer 2

For those who still looking for better solution, I found this solution from Github.

you need create file ./types/ckeditor/index.d.ts and write to

declare module '@ckeditor/ckeditor5-react';
declare module '@ckeditor/ckeditor5-build-classic';

Answer 3

for anyone else having the same issue you also try declaring a file types/@ckeditor/index.d.ts and add the following content

declare module '@ckeditor/*' {
  const classes: any;
  export default classes;
}

the accepted answer did not work for me when dealing with @ckeditor/ckeditor5-build-classic

Answer 4

For me the working solution was

1. Add the below lines to tsconfig.json

"compilerOptions": {
    "allowJs": true,
    "target": "es2015"
    // other options
}

2. Creating typings.d.ts in typings folder in the app folder

declare module '@ckeditor/ckeditor5-build-classic' {
    const ClassicEditorBuild: any;

    export = ClassicEditorBuild;
}

Answer 5

As of 2022 there are (non-official, third party) CKEditor types in DefinitelyTyped:

npm i --save-dev @types/ckeditor__ckeditor5-core

In the CKEditor 5 GitHub repo, there's also ongoing discussion about support for TypeScript.