ckeditor5-angular
ckeditor5-angular copied to clipboard
ckeditor
ckeditor5 - Type 'DecoupledEditorUI' is not assignable to type 'EditorUI'
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?
Hi, sorry for the late reply! Why are you declaring the typings? We are shipping packages with full TypeScript support right now.
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.
