ckeditor5 - Type 'DecoupledEditorUI' is not assignable to type 'EditorUI'

[rafaelpadu]

I am trying to use CKEditor 5 in Angular 16 with a custom editor type. I am getting the error

✘ [ERROR] TS2416: Property 'ui' in type 'DecoupledEditor' is not assignable to the same property in base type 'DataApi & ElementApi & Editor'.
  Type 'DecoupledEditorUI' is not assignable to type 'EditorUI'.
    The types of 'editor.commands' are incompatible between these types.
      Type 'import("/home/rafael/Documentos/SCC4/projetos/easyweb2/node_modules/@ckeditor/ckeditor5-core/src/commandcollection").default' is not assignable to type 'import("/home/rafael/Documentos/SCC4/projetos/easyweb2/node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/commandcollection").default'.
        Types have separate declarations of a private property '_commands'. [plugin angular-compiler]

    node_modules/@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor.d.ts:48:13:
      48 │     readonly ui: DecoupledEditorUI;

My code is as follows:

import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

export class TemplateFormComponent implements OnInit {

  Editor = DecoupledEditor;
  ...
  onReady(editor: any) {
     this.editTemp=editor;
     editor.ui.getEditableElement().parentElement.insertBefore(
       editor.ui.view.toolbar.element,
       editor.ui.getEditableElement()
     );
  }

...
}

.html:

<ckeditor id="txtid" [editor]="Editor" formControlName="text" (ready)="onReady($event)" (change)="changeText($event)" style=" max-width: 650px; border:var(--ck-focus-ring); border-color:#ced4da;"></ckeditor>

My package.json:

    ...
    "@ckeditor/ckeditor5-angular": "^7.0.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "^39.0.2",
    "@ckeditor/ckeditor5-core": "^39.0.2",
    "@ckeditor/ckeditor5-engine": "^39.0.2",
    "@ckeditor/ckeditor5-utils": "^39.0.2",
    "@ckeditor/ckeditor5-watchdog": "^39.0.2", 
    ...

I also created a ckeditor.typings.d.ts:

declare module '@ckeditor/ckeditor5-build-decoupled-document'{
  const Editor: any;
  export = Editor;
}

Any thoughts?

[Witoso]

Hi, sorry for the late reply! Why are you declaring the typings? We are shipping packages with full TypeScript support right now.

[timmyrosen]

I have this same issue, with no custom types declared. I only got this error once I updated from angular 16 to angular 17 and ckeditor from 40.0 to 40.1.

On a first ng serve I don't get any error, but when live reload runs (or an ng build) I get this error:

Error: ../ckeditor5-custom-build/node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.d.ts:39:14 - error TS2416: Property 'ui' in type 'ClassicEditor' is not assignable to the same property in base type 'DataApi & ElementApi & Editor'.
  Type 'ClassicEditorUI' is not assignable to type 'EditorUI'.
    The types of 'editor.commands' are incompatible between these types.
      Type 'import("/Users/timmyrosen/www/aware-admin-v3/node_modules/@ckeditor/ckeditor5-core/src/commandcollection").default' is not assignable to type 'import("/Users/timmyrosen/www/aware-admin-v3/node_modules/@ckeditor/ckeditor5-ui/node_modules/@ckeditor/ckeditor5-core/src/commandcollection").default'.
        Types have separate declarations of a private property '_commands'.

39     readonly ui: ClassicEditorUI;
                ~~ 

My project package.json:

dependencies:
"@ckeditor/ckeditor5-angular": "^7.0.1",
"@ckeditor/ckeditor5-core": "^40.1.0",
"@ckeditor/ckeditor5-engine": "^40.1.0",
"@ckeditor/ckeditor5-utils": "^40.1.0",
"@ckeditor/ckeditor5-watchdog": "^40.1.0",

devDependencies:
"ckeditor5": "^40.1.0",

My editor build package.json:

"dependencies": {
    "@ckeditor/ckeditor5-alignment": "^40.1.0",
    "@ckeditor/ckeditor5-autoformat": "^40.1.0",
    "@ckeditor/ckeditor5-basic-styles": "^40.1.0",
    "@ckeditor/ckeditor5-block-quote": "^40.1.0",
    "@ckeditor/ckeditor5-editor-classic": "^40.1.0",
    "@ckeditor/ckeditor5-essentials": "^40.1.0",
    "@ckeditor/ckeditor5-font": "^40.1.0",
    "@ckeditor/ckeditor5-heading": "^40.1.0",
    "@ckeditor/ckeditor5-highlight": "^40.1.0",
    "@ckeditor/ckeditor5-horizontal-line": "^40.1.0",
    "@ckeditor/ckeditor5-image": "^40.1.0",
    "@ckeditor/ckeditor5-indent": "^40.1.0",
    "@ckeditor/ckeditor5-link": "^40.1.0",
    "@ckeditor/ckeditor5-list": "^40.1.0",
    "@ckeditor/ckeditor5-media-embed": "^40.1.0",
    "@ckeditor/ckeditor5-paragraph": "^40.1.0",
    "@ckeditor/ckeditor5-paste-from-office": "^40.1.0",
    "@ckeditor/ckeditor5-remove-format": "^40.1.0",
    "@ckeditor/ckeditor5-select-all": "^40.1.0",
    "@ckeditor/ckeditor5-source-editing": "^40.1.0",
    "@ckeditor/ckeditor5-table": "^40.1.0",
    "@ckeditor/ckeditor5-typing": "^40.1.0"
  },
  "devDependencies": {
    "@ckeditor/ckeditor5-dev-translations": "^39.3.0",
    "@ckeditor/ckeditor5-dev-utils": "^39.3.0",
    "@ckeditor/ckeditor5-theme-lark": "^40.1.0",
    "css-loader": "^5.2.7",
    "postcss": "^8.4.31",
    "postcss-loader": "^4.3.0",
    "raw-loader": "^4.0.2",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^4.2.3",
    "ts-loader": "^9.4.4",
    "typescript": "^4.9.5",
    "webpack": "^5.88.2",
    "webpack-cli": "^4.10.0"
  },

If I only update angular from 16 to 17 but stay on v40.0 of ckeditor, I get this error:

Error: node_modules/@appbolaget/ckeditor5-custom-build/build/ckeditor.d.ts:24:15 - error TS2417: Class static side 'typeof Editor' incorrectly extends base class static side 'typeof ClassicEditor'.
  Types of property 'builtinPlugins' are incompatible.
    Type '(typeof BlockQuote | typeof SelectAll | typeof Essentials | typeof Image | typeof ImageCaption | typeof ImageResize | typeof ImageStyle | ... 23 more ... | typeof AwareMediaPlugin)[]' is not assignable to type 'PluginConstructor<Editor>[]'.
      Type 'typeof BlockQuote | typeof SelectAll | typeof Essentials | typeof Image | typeof ImageCaption | typeof ImageResize | typeof ImageStyle | ... 23 more ... | typeof AwareMediaPlugin' is not assignable to type 'PluginConstructor<Editor>'.
        Type 'typeof AwareMediaPlugin' is not assignable to type 'PluginConstructor<Editor>'.
          Type 'typeof AwareMediaPlugin' is not assignable to type 'PluginClassConstructor<Editor> & PluginStaticMembers<Editor>'.
            Type 'typeof AwareMediaPlugin' is not assignable to type 'PluginClassConstructor<Editor>'.
              Types of construct signatures are incompatible.
                Type 'new (editor: Editor) => AwareMediaPlugin' is not assignable to type 'new (editor: Editor) => PluginInterface'.
                  Types of parameters 'editor' and 'editor' are incompatible.
                    Type 'import("/Users/timmyrosen/www/aware-admin-v3/node_modules/@ckeditor/ckeditor5-editor-classic/node_modules/@ckeditor/ckeditor5-core/src/editor/editor").default' is not assignable to type 'import("/Users/timmyrosen/www/aware-admin-v3/node_modules/@ckeditor/ckeditor5-core/src/editor/editor").default'.
                      Types of property 'commands' are incompatible.
                        Type 'import("/Users/timmyrosen/www/aware-admin-v3/node_modules/@ckeditor/ckeditor5-editor-classic/node_modules/@ckeditor/ckeditor5-core/src/commandcollection").default' is not assignable to type 'import("/Users/timmyrosen/www/aware-admin-v3/node_modules/@ckeditor/ckeditor5-core/src/commandcollection").default'.
                          Types have separate declarations of a private property '_commands'.

24 declare class Editor extends ClassicEditor {

I'm currently running the @angular-devkit/build-angular:browser builder but get the same error when trying the new esbuild builder.