how can i use ckeditor5 with typescript in react?

[abhig02]

🆕 Feature request

💻 Version of CKEditor

CKEditor5

[xinglie]

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

[ma2ciek]

Hi, @abhig02.

What actually do you need?

[ma2ciek]

Closing because of lack of activity and missing problem description.

[intelliapps-io]

Looking for a declaration file for the npm module '@ckeditor/ckeditor5-react'.

[ma2ciek]

Hi, @intelliapps-io!

We don't provide any TS declaration files for our packages yet. Maybe it will change in the future, you can subscribe to the ckeditor/ckeditor5#504 if you want to track this topic.

[arasrezaei]

Hello.

declare module '@ckeditor/ckeditor5-react' {
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    import Event from '@ckeditor/ckeditor5-utils/src/eventinfo'
    import { EditorConfig } from '@ckeditor/ckeditor5-core/src/editor/editorconfig'
    import * as React from 'react';
    const CKEditor: React.FunctionComponent<{
        disabled?: boolean;
        editor: typeof ClassicEditor;
        data?: string;
        id?: string;
        config?: EditorConfig;
        onReady?: (editor: ClassicEditor) => void;
        onChange?: (event: Event, editor: ClassicEditor) => void;
        onBlur?: (event: Event, editor: ClassicEditor) => void;
        onFocus?: (event: Event, editor: ClassicEditor) => void;
        onError?: (event: Event, editor: ClassicEditor) => void;
    }>
    export { CKEditor };
}

make sure install base ckeditor types.

[ujjwalchadha8]

Hello @ma2ciek! I am looking for the types too and in my case for the balloon editor. This is blocking our further development with CKEditor. I see that this issue was recently reopened and triaged. When can we expect the types to be released?

[roydukkey]

@arasrezaei Do you know if @ckeditor/ckeditor5-react supports ref?

[arasrezaei]

@arasrezaei Do you know if @ckeditor/ckeditor5-react supports ref?
<CKEditor onReady={editor=> {CKRef.current = editor}} />

[NattieGit]

This is still a requested and important feature for anyone wanting to use this package in a typescript project.

Is there any update on the implementation of typescript type declarations for this package?

In a post above, a user arasrezaei has already kindly provided most of, if not all of the information required for you to add a type declaration file.

The fact that this would be so simple to add boggles the mind that it's been a requested feature for so long and not implemented.

Are you open to pull requests to add a type declaration file, because if so, this could expedite the process greatly.

Thanks for your time :)

[ptmkenny]

@nyatalieee As noted in the linked thread above, CKEditor5 is being migrated to TypeScript: ckeditor/ckeditor5#11704

[andrelcb]

Olá.

declare module '@ckeditor/ckeditor5-react' {
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    import Event from '@ckeditor/ckeditor5-utils/src/eventinfo'
    import { EditorConfig } from '@ckeditor/ckeditor5-core/src/editor/editorconfig'
    import * as React from 'react';
    const CKEditor: React.FunctionComponent<{
        disabled?: boolean;
        editor: typeof ClassicEditor;
        data?: string;
        id?: string;
        config?: EditorConfig;
        onReady?: (editor: ClassicEditor) => void;
        onChange?: (event: Event, editor: ClassicEditor) => void;
        onBlur?: (event: Event, editor: ClassicEditor) => void;
        onFocus?: (event: Event, editor: ClassicEditor) => void;
        onError?: (event: Event, editor: ClassicEditor) => void;
    }>
    export { CKEditor };
}

certifique-se de instalar os tipos básicos de ckeditor.

JSX element type 'CKEditor' has no construction or call signatures.

i get this error

[pomek]

Starting from version 6.0.0 (https://github.com/ckeditor/ckeditor5-react/releases/tag/v6.0.0), the CKEditor React component is migrated to TypeScript. The component publishes its declarations, so a TS compiler should not complain anymore.

[frimmy]

was still getting this error after upgrading to v6 -- can this issue be re-opened?

[Witoso]

@frimmy could you be a little bit more specific about which error you have in mind?

[frimmy]

Olá.

declare module '@ckeditor/ckeditor5-react' {
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    import Event from '@ckeditor/ckeditor5-utils/src/eventinfo'
    import { EditorConfig } from '@ckeditor/ckeditor5-core/src/editor/editorconfig'
    import * as React from 'react';
    const CKEditor: React.FunctionComponent<{
        disabled?: boolean;
        editor: typeof ClassicEditor;
        data?: string;
        id?: string;
        config?: EditorConfig;
        onReady?: (editor: ClassicEditor) => void;
        onChange?: (event: Event, editor: ClassicEditor) => void;
        onBlur?: (event: Event, editor: ClassicEditor) => void;
        onFocus?: (event: Event, editor: ClassicEditor) => void;
        onError?: (event: Event, editor: ClassicEditor) => void;
    }>
    export { CKEditor };
}

certifique-se de instalar os tipos básicos de ckeditor.

JSX element type 'CKEditor' has no construction or call signatures.

i get this error

the same error reported by @andrelcb - JSX element type 'CKEditor' has no construction or call signatures

[Witoso]

As CKEditor ships the typings you shouldn't do: declare module '@ckeditor/ckeditor5-react' if you use it with TypeScript. Those module augmentations are no longer needed. Check our demo.