Tiptap Extension tutorial has errors

[Spleeding1 (Carl Brubaker)]

I am trying to follow this guide, but it won’t build because of errors.

getTiptapExtensions = () => [Highlight];
results in “Property ‘getTiptapExtensions’ in type ‘UmbTiptapHighlightExtensionApi’ is not assignable to the same property in base type ‘UmbTiptapExtensionApiBase’.”

If i try to use

getTiptapExtensions(args?: UmbTiptapExtensionArgs): Array<Extension | Mark | Node> {
  return [Highlight]
 }

I get “Type ‘Mark<HighlightOptions, any>’ is not assignable to type ‘Extension<any, any> | Mark<any, any> | Node<any, any>’.”

Also, for
editor?.chain().focus().toggleHighlight().run();
results with “Property ‘toggleHighlight’ does not exist on type ‘ChainedCommands’.”

Then finally in manifest.ts, I can’t seem to find the api and js import()s.

My file structure is:

Extension
> src
  > tiptapExtension
    > manifest.ts
    > tiptapExtension.ts
    > tiptapToolbarExtension.ts
  > bundle.manifests.ts
> package.json
> tsconfig.json
> vite.config.ts

[rammi987 (Lucas Bach Bisgaard)]

Hello Carl.
I´ll try my best to navigate you thouge is.

For the files, you need the manifests.ts with contains.

{
    type: 'tiptapExtension',
    alias: 'custom.Tiptap.highlight',
    name: 'Highligt Tiptap Extension',
    api: () => import('./highligt.js'),
},
{
	type: 'tiptapToolbarExtension',
	kind: 'button',
	alias: 'custom.Toolbar.highligt',
	name: 'highligt Editor Tiptap Extension',
	api: () => import('./toolbar-highligt.js'),
	meta: {
		alias: 'umbHighligtEditor',
		icon: 'icon-code-xml',
		label: ''highligt',
	},
},

for the ./highligt.js file it is
remeber in your package.json and have @tiptap/extension-highlight installed.

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

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

and for the toolbar-highligt

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

export default class UmbTiptapToolbarHighlightExtensionApi extends UmbTiptapToolbarElementApiBase {
    override execute(editor?: Editor) {
        editor?.chain().focus().toggleHighlight().run();
    }
}

[Spleeding1 (Carl Brubaker)]

haha, so I feel dumb, but I was in the wrong directory when I installed the extension package.

However, I can’t install the extension package

npm error Found: @tiptap/[email protected]
npm error node_modules/@tiptap/core
npm error   peer @tiptap/core@"^2.7.0" from @tiptap/[email protected]
npm error   node_modules/@tiptap/extension-blockquote
npm error     @tiptap/extension-blockquote@"^2.11.7" from @tiptap/[email protected]
npm error     node_modules/@tiptap/starter-kit
npm error       peer @tiptap/starter-kit@"2.11.7" from @umbraco-cms/[email protected]
npm error       node_modules/@umbraco-cms/backoffice
npm error         dev @umbraco-cms/backoffice@"^*" from the root project
npm error   peer @tiptap/core@"^2.7.0" from @tiptap/[email protected]
npm error   node_modules/@tiptap/extension-bold
npm error     @tiptap/extension-bold@"^2.11.7" from @tiptap/[email protected]
npm error     node_modules/@tiptap/starter-kit
npm error       peer @tiptap/starter-kit@"2.11.7" from @umbraco-cms/[email protected]
npm error       node_modules/@umbraco-cms/backoffice
npm error         dev @umbraco-cms/backoffice@"^*" from the root project
npm error   31 more (@tiptap/extension-bullet-list, ...)
npm error
npm error Could not resolve dependency:
npm error @tiptap/extension-highlight@"*" from the root project
npm error
npm error Conflicting peer dependency: @tiptap/[email protected]
npm error node_modules/@tiptap/core
npm error   peer @tiptap/core@"^3.0.7" from @tiptap/[email protected]
npm error   node_modules/@tiptap/extension-highlight
npm error     @tiptap/extension-highlight@"*" from the root project

What version of highlight should I be installing?

[rammi987 (Lucas Bach Bisgaard)]

I depend on the Umbraco version.
Umbraco 16.1.0-rc use 2.11.7. I´ll recomenent you´re using the same version as Umbraco to avoid conflicts. It look like you are trying to install 3.0.7 witch are in WIP for Umbraco v 17.

but it look like the npm error also suggest you are going with tiptap verion 2.11.7

Any dont worry #h5yr for trying

[Spleeding1 (Carl Brubaker)]

Yeah, that got it. Thanks