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.
(please see at the bottom for Edit 1: seems like the linter is the problem and not the compiler…)

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.

Using JetBrains Webstorm.

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.

Same goes for the function addNodeView: I cannot get this declared properly. This should return a function

  addNodeView() {
    return ({ node, getPos, editor }) => {
      const img = document.createElement('img');
      img.setAttribute('src', node.attrs['src']);
      img.setAttribute('alt', node.attrs[ 'alt'] || '');
      img.setAttribute('title', node.attrs['title'] || '');

      return {};
    };
  },

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

I have even tried to just copy the blockquote.ts extension (with a new name) to my project, and get the same errors. So maybe there is something wrong with my project settings?

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"
  }
}

EDIT 1
Ok, so it seems that my IDE is fooling me: the linter(?) is giving stricter errors than the actual Angular 19 compiler……

Any help on fixing that?