search

ckeditor / ckeditor5-angular

Official CKEditor 5 Angular 5+ component.
https://ckeditor.com/ckeditor-5
Other
202 stars 110 forks source link

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

Open rafaelpadu opened 11 months ago

rafaelpadu commented 11 months ago

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 commented 11 months ago

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

timmyrosen commented 9 months ago

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.