Tutorial for adding Tiptap extension in Umbraco 17?

[lassespilling (Lasse Dollis Spilling)]

Any decent tutorial for adding a tiptap extension in Umbraco 17?

Already tried these tutorials:

Vite Package Setup | CMS | Umbraco Documentation

Extensions | CMS | Umbraco Documentation

But there is no detailed instructions for where files go.
Just names of files and their contents.

Like where does manifests.ts go?
Is it part of Vite SRC or outside it, just referencing build files?

I am trying to get this to work:

GitHub - Intevation/tiptap-extension-office-paste

Here is what i have so far:

[nielslyngsoe (Niels Lyngsø)]

Hi @lassespilling

There is sort of two question there, I will answer the one about the manifests, so you can get started writing extensions for the Backoffice.

Manifests, can go many places but the most usual way to bring them into the Backoffice is via the umbraco-package.json. This brings an array of Manifests, but maybe you like to branch out of the JSON and do a ‘manifests.js’(manifest.ts) for this to take part in the umbraco-package.json you can use a extension type(manifest type) called bundle, which takes a JS file that exports manifests.

I would start here:

Register an Extension | CMS | Umbraco Documentation

And specifically for the bundle you can read about it here (it is also linked from the article above)

Bundle | CMS | Umbraco Documentation

Regarding making a extension specifically for TipTap then there is some material here that I hope will lead you to the knowledge succeeding with your mission.

Extensions | CMS | Umbraco Documentation

Good luck

[lassespilling (Lasse Dollis Spilling)]

This is what ended up working for me:

// App_Plugins/TipTapOfficePaste/umbraco-package.json
{
    "$schema": "../../umbraco-package-schema.json",
    "name": "TipTap Office Paste",
    "version": "0.1.0",
    "extensions": [
        {
            "type": "bundle",
            "alias": "TipTap.OfficePaste.Bundle",
            "name": "Office Paste Bundle",
            "js": "/App_Plugins/TipTapOfficePaste/dist/manifest.js"
        }
    ]
}

// App_Plugins/TipTapOfficePaste/client/src/manifests.ts
import type { ManifestTiptapExtension, ManifestTiptapToolbarExtensionButtonKind } from '@umbraco-cms/backoffice/tiptap';

export const manifests: Array<ManifestTiptapExtension | ManifestTiptapToolbarExtensionButtonKind> = [
    {
        type: 'tiptapExtension',
        alias: 'My.Tiptap.Highlight',
        name: 'My Highlight Tiptap Extension',
        api: () => import('./highlight.tiptap-api.ts'),
        meta: {
            icon: 'icon-brush',
            label: 'Highlight',
            group: '#tiptap_extGroup_formatting',
        },
    },
    {
        type: 'tiptapToolbarExtension',
        kind: 'button',
        alias: 'My.Tiptap.Toolbar.Highlight',
        name: 'My Highlight Tiptap Toolbar Extension',
        api: () => import('./highlight.tiptap-toolbar-api.ts'),
        forExtensions: ['My.Tiptap.Highlight'],
        meta: {
            alias: 'highlight',
            icon: 'icon-brush',
            label: 'Highlight',
        },
    },
]

// App_Plugins/TipTapOfficePaste/client/vite.config.ts
import { defineConfig } from "vite";

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

// App_Plugins/TipTapOfficePaste/client/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
    "module": "ESNext",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"],
  "types": [
      "@umbraco-cms/backoffice/extension-types"
  ]
}

// App_Plugins/TipTapOfficePaste/client/package.json
{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "watch": "vite build --watch"
  },
  "dependencies": {
    "@tiptap/extension-highlight": "^3.13.0",
    "lit": "^3.3.1"
  },
  "devDependencies": {
    "@umbraco-cms/backoffice": "^17.0.2",
    "typescript": "~5.9.3",
    "vite": "^7.2.4"
  }
}

[nielslyngsoe (Niels Lyngsø)]

Looks good, thanks for sharing.