Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rafaelpadu opened this issue Sep 20, 2023 · 2 comments
Labels
pending:feedback This issue is blocked by necessary feedback.

Comments

@rafaelpadu
Copy link

rafaelpadu commented Sep 20, 2023

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
Copy link
Member

Witoso commented Oct 10, 2023

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

@Witoso Witoso added the pending:feedback This issue is blocked by necessary feedback. label Oct 10, 2023
@timmyrosen
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending:feedback This issue is blocked by necessary feedback.
Projects
None yet
Development

No branches or pull requests

3 participants