Typing commands for extended nodes

[arrocke]

I extended the Link node extension to add a command openLinkModal which as it says opens a modal to edit the current link. However when I try to type the command, I get a typescript error Subsequent property declarations must have the same type.... I don't want to change the node name, or copy the extension into my source code. We've got other extensions, far more complicated that this problem applies to where those aren't going to be viable options. Anybody have ideas?

Here is the extension file:

import BaseLink from '@tiptap/extension-link'

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    link: { // The typescript is for this property here
      openLinkModal: () => ReturnType
    }
  }
}

const Link = BaseLink.extend({
  addCommands() {
    return {
      ...(this.parent ? this.parent() : {}),
      openLinkModal: () => () => {
        this.storage.onEditLink?.()
        return true
      }
    }
  }
})
export default Link

[rykala]

@arrocke Hello, I am trying to do the exact same thing. Do you mind sharing if you managed to solve it? Thank you 🙏

[arrocke]

I never did solve it and am no longer at the job where this was an issue. One thing I was going to try and didn't get the chance was to use patch-package to remove the global types defined by the tiptap package so that I could define my own.

[bdbch]

An easy fix is to re-declare all of BaseLink’s commands alongside your new one. For example:

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    link: {
      setLink: (attributes: { href: string; target?: string }) => ReturnType
      toggleLink: (attributes: { href: string; target?: string }) => ReturnType
      unsetLink: () => ReturnType
      openLinkModal: () => ReturnType
    }
  }
}

This is a bit annoying to do but there's no easier way that I could come up with right now.

Ideally, the extension’s command types would be exported so you could import and extend them without duplicating all the built-in commands. But for now, this re-declaration is the straightforward option.