Cannot get renderHTML properly declared with typescript for tiptap custom extension (type...

I am switching from CKEditor to TipTap editor in my Angular project. In order to first get to know TipTap I created a new project using Angular 19.

I am trying to create a new custom extension for images. Goal is to be able to upload them to my REST API and possibly be able to resize the image.

The existing plugin everyone is suggesting for resizing images does not seem to be working in Angular as it is optimized for React...

I'm having problems to correctly implement the renderHTML function. I keep getting errors like:

Argument type {renderHTML({node, HTMLAttributes}: {node: any, HTMLAttributes: any}): [string, Record<string, any>], addOptions(): ImageUploadOptions} is not assignable to parameter type Partial<NodeConfig<ImageUploadOptions, any>> | undefined


The simplest version of the plugin is below.


type ImageUploadOptions = {
HTMLAttributes: { [key: string]: string },
uploadFn: (file: File) => Promise<Awaited<string>>
};

interface MyUploadStorage{

}

export let ImageUploadExtension: Node<ImageUploadOptions>;
ImageUploadExtension = Node.create<ImageUploadOptions>({
name: 'imageUpload',
group: 'block',
inline: false,
draggable: true,


addAttributes() {
return {
src: {
default: null,
},
alt: {
default: null,
},
title: {
default: null,
},
};
},

parseHTML() {
return [
{
tag: 'img[src]',
},
];
},

addOptions(): ImageUploadOptions {
return {
HTMLAttributes: {},
uploadFn: (file: File) => Promise.resolve(''), // Override this function with your upload logic
};
},

renderHTML({node, HTMLAttributes}) {
return ['img', HTMLAttributes];
}



});


I've also extended the renderHTML function a bit following a lot of examples:

renderHTML({ HTMLAttributes }) {
return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
},


But then the error this.options is not a know variable. Apparently Typescript doesn't understand this.options is a valid variable. All I read is that I should use the generic Node.create<ImageUploadOptions> and all should be well.

This thing is driving me nuts. Especially since I read that TipTap is written in Typescript.

I am using "ngx-tiptap": "^12.0.0", for integration TipTap with Angular.

Below I include the package.json.

{
"name": "angular-tiptap-editor",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.0.0",
"@angular/cdk": "^19.0.4",
"@angular/common": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/core": "^19.0.0",
"@angular/forms": "^19.0.0",
"@angular/material": "^19.0.4",
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@tiptap/core": "^2.10.3",
"@tiptap/extension-blockquote": "^2.10.3",
"@tiptap/extension-bullet-list": "^2.10.3",
"@tiptap/extension-code-block": "^2.10.4",
"@tiptap/extension-code-block-lowlight": "^2.10.4",
"@tiptap/extension-color": "^2.10.4",
"@tiptap/extension-font-family": "^2.10.4",
"@tiptap/extension-highlight": "^2.10.4",
"@tiptap/extension-image": "^2.10.3",
"@tiptap/extension-list-item": "^2.10.3",
"@tiptap/extension-mention": "^2.10.4",
"@tiptap/extension-subscript": "^2.10.4",
"@tiptap/extension-superscript": "^2.10.4",
"@tiptap/extension-table": "^2.10.4",
"@tiptap/extension-table-cell": "^2.10.4",
"@tiptap/extension-table-header": "^2.10.4",
"@tiptap/extension-table-row": "^2.10.4",
"@tiptap/extension-text-align": "^2.10.3",
"@tiptap/extension-text-style": "^2.10.4",
"@tiptap/starter-kit": "^2.10.3",
"@tiptap/suggestion": "^2.10.4",
"highlight.js": "^11.11.0",
"ngx-tiptap": "^12.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.0.5",
"@angular/cli": "^19.0.5",
"@angular/compiler-cli": "^19.0.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.6.2"
}
}

Continue reading...