How to find declaration for my typescript/react module?

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

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}/>;
}