Tiptap extension function not found

Questions
,
1

I made my own tiptap extension. Everything loads into the backend and looks correct. When I try to apply the change to text I get the error:

Uncaught TypeError: editor.chain().focus().toggleMyMark is not a function

I disabled minify in the vite.config but still no success. I have no errors during the build process, only when trying to use it. I’m sure there is something obvious I am missing, but I don’t know what.

// myMark.extension.ts

import {Mark} from "@tiptap/core";
import {UmbTiptapExtensionApiBase} from "@umbraco-cms/backoffice/tiptap";

export default class UmbTiptapMyMarkExtensionApi extends UmbTiptapExtensionApiBase {
  getTiptapExtensions = () => [MyMark];
}

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    myMark: {
      setMyMark: (attributes?: {myMark: string}) => ReturnType;
      toggleMyMark: (attributes?: {myMark: string}) => ReturnType;
      unsetMyMark: () => ReturnType;
    };
  }
}

const MyMark = Mark.create({
  name: `myMark`,

  addAttributes() {
    return {
      myMark: {
        default: null,
        parseHTML: element => element.getAttribute(`data-myMark`),
        renderHTML: attributes => ({
          "data-myMark": attributes.myMark,
          class: attributes.myMark,
        }),
      },
    };
  },

  addCommands() {
    return {
      setMyMark:
        attributes =>
        ({commands}) => {
          return commands.setMark(this.name, attributes);
        },
      toggleMyMark:
        attributes =>
        ({commands}) => {
          return commands.toggleMark(this.name, attributes);
        },
      unsetMyMark:
        () =>
        ({commands}) => {
          return commands.unsetMark(this.name);
        },
    };
  },

  addOptions() {
    return {HTMLAttributes: {}};
  },

  parseHTML() {
    return [{tag: `span`}];
  },

  renderHTML({HTMLAttributes}) {
    return [`span`, HTMLAttributes, 0];
  },
});


//myMark.toolbar.ts

import {UmbTiptapToolbarElementApiBase} from "@umbraco-cms/backoffice/tiptap";
import type {Editor} from "@umbraco-cms/backoffice/external/tiptap";
import type {MetaTiptapToolbarMenuItem} from "@umbraco-cms/backoffice/tiptap";

export default class UmbTiptapToolbarMyMarkExtensionApi extends UmbTiptapToolbarElementApiBase {
  override execute(editor?: Editor, item?: MetaTiptapToolbarMenuItem) {
    if (!item?.data) return;
    editor
      ?.chain()
      .focus()
      .toggleMyMark({myMark: `${item.data}`})
      .run();
  }
}

// manifest.ts

export const MyMarkManifest: Array<UmbExtensionManifest> = [
  {
    type: `tiptapExtension`,
    kind: `button`,
    alias: `the.Tiptap.MyMark`,
    name: `My Mark`,
    api: () => import(`./myMark.extension.js`),
    meta: {
      icon: `icon-brush`,
      label: `My Mark`,
      group: `#tiptap_extGroup_formatting`,
    },
  },
  {
    type: `tiptapToolbarExtension`,
    kind: `menu`,
    alias: `the.Toolbar.MyMark`,
    name: `My Mark Toolbar`,
    js: () => import(`./myMark.toolbar.js`),
    items: [
      {label: `1`, data: `a`},
      {label: `2`, data: `b`},
      {label: `3`, data: `c`},
    ],
    meta: {
      alias: `theMyMark`,
      icon: `icon-ruler`,
      label: `My Mark`,
    },
  },
];