Cannot find module '@umbraco-cms/backoffice/tiptap'

[erikjanwestendorp]

What type of issue is it? (Choose one - delete the others)

Wrong documentation

What article/section is this about?

rich-text-editor/extensions

Describe the issue

When attempting to add the following code sample:

import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
import { Highlight } from '@tiptap/extension-highlight';

export default class UmbTiptapHighlightExtensionApi extends UmbTiptapExtensionApiBase {
	getTiptapExtensions = () => [Highlight];
}

Cannot find module '@umbraco-cms/backoffice/tiptap' or its corresponding type declarations.

[sofietoft]

Thanks for reporting this @erikjanwestendorp ! 💪

I'll run this b our frontend developers, to get it verified.

What specific version of Umbraco are you using? Is it 15.1.1?

[erikjanwestendorp]

@sofietoft Sorry, my mistake. For some reason, I had a very old version of @umbraco-cms/backoffice, but now I’m facing a different issue. First, I follow the Vite package setup as described here:

https://docs.umbraco.com/umbraco-cms/customizing/development-flow/vite-package-setup.

After that, I follow the steps in:
https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/extensions#adding-a-native-extension

However, after following these steps, I get the following console errors:

GET https://localhost:99999/App_Plugins/MyTiptapExtension/highlight.tiptap-api.js net::ERR_ABORTED 404 (Not Found)

and

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://localhost:99999/App_Plugins/MyTiptapExtension/highlight.tiptap-api.js

So, I updated the umbraco-package.json like so (change api path to client.js):

{
    "name": "My Tiptap Extension",
    "version": "1.0.0",
    "extensions": [
        {
            "type": "tiptapExtension",
            "alias": "My.Tiptap.Highlight",
            "name": "My Highlight Tiptap Extension",
            "api": "/App_Plugins/MyTiptapExtension/client.js",
            "meta": {
                "icon": "icon-thumbnail-list",
                "label": "Highlight",
                "group": "#tiptap_extGroup_formatting"
            }
        },
        {
            "type": "tiptapToolbarExtension",
            "kind": "button",
            "alias": "My.Tiptap.Toolbar.TaskList",
            "name": "My Highlight Tiptap Toolbar Extension",
            "api": "/App_Plugins/MyTiptapExtension/client.js",
            "meta": {
                "alias": "highlight",
                "icon": "icon-brush",
                "label": "Highlight"
            }
        }
    ]
}

But then I get this:

create-extension-ele…-api.function.js:61 -- Extension of alias "My.Tiptap.Toolbar.TaskList" did not succeed creating an Element with Api, Element was created but the imported Api JS file did not export a 'api' or 'default'. 
{__isMatchedWithKind: true, type: 'tiptapToolbarExtension', kind: 'button', alias: 'My.Tiptap.Toolbar.TaskList', element: ƒ, …}

My vite.config.ts looks like this:

import { defineConfig } from "vite";

export default defineConfig({
    build: {
        lib: {
            entry: "src/index.ts", 
            formats: ["es"],
        },
        outDir: "../../MyProject/App_Plugins/MyTiptapExtension", 
        emptyOutDir: true,
        sourcemap: true,
        rollupOptions: {
            external: [/^@umbraco/],            
        },
    },
    base: "/App_Plugins/MyTiptapExtension/", 
});

And my index.ts like this:

export * from './highlight.tiptap-api';
export * from './highlight.tiptap-toolbar-api';

[leekelleher]

@erikjanwestendorp Thank you for testing out the Tiptap extension documentation steps, sorry that you've experienced issues with it. I've re-reviewed the steps and there is room for improvements on how to set-up the initial structure for an Umbraco extension/package.

Hopefully the latest (but currently undocumented) dotnet new umbraco-extension template will resolve many of these pain points. I'll be working with the Community Packages Team to update the existing documentation.

In the meantime, the issue you've experienced is with referencing the client.js (compiled from the index.ts) for both the Tiptap extension and toolbar APIs, as both extensions are expecting the export to be either named api or be the default export. Which in this case would cause a conflict with the named api exports, and the default to using the class names.

The current way to workaround this would be to use the bundle extension type, then you would be able to define the Tiptap manifests within TypeScript, using the () => import("./highlight.tiptap-api.js") syntax. (The Vite JS bundler would handle updating the filepath names).

This approach will align nicely with the latest dotnet new umbraco-extension template. I'll look to update the documentation accordingly.

---

@sofietoft This is the work item that the Community Package Team has for updating the documentation for the new umbraco-extension template. https://github.com/orgs/umbraco/projects/41?pane=issue&itemId=88857460
I'll try to coordinate efforts on the updates. 🤞

[sofietoft]

Thanks for the insights @leekelleher ! 😄

Let me know if you anything from me team, regarding the umbraco-extensions template docs 🙌