TinyMce extend with own plugin - Fails

[mikkeljohansen]

We are trying to get the TinyMce package to work in v17

It works with plain/vanilla TinyMce with v7 and api-key to enable pro-features.

But when we try to add a simple tinymce plugin it fails and the editor doesn’t even loads.

custom-element.js:6 Uncaught (in promise) NotSupportedError: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “umb-stylesheet-rule-input” has already been used with this registry

To keep it as simple as possible, but still using a setup that could look like a real setup.
We have tried to use the standard dotnet templates from Umbraco (umbraco + umbraco-extension)

We have registered the TinyMce in the Extension project’s wwwroot/App_Plugins folder
umbraco-package.json + manifest.js

and in the AppSettings.json in the “Core” project

With these settings everything works perfect. A TinyMce datatype with some pro-plugins enabled. And the editor is working as expected.

Now the problems starts - Adding a simple plugin

helloworld-plugin.ts

import { UmbTinyMcePluginBase } from '@tiny-mce-umbraco/backoffice/core';
import type { TinyMcePluginArguments } from '@tiny-mce-umbraco/backoffice/core';
//import type { Editor } from '@tiny-mce-umbraco/backoffice/external/tinymce';

export default class UmbTinyMceHelloWorldPlugin extends UmbTinyMcePluginBase {
    constructor(args: TinyMcePluginArguments) {
        super(args);
        this.register();
    }
    
    public register(): void {
        this.editor.ui.registry.addButton('helloworld', {
            text: 'Hello World',
            onAction: () => {
                this.editor.insertContent('Hello, World!');
            },
        });
    }
}

manifest.ts

import type { ManifestTinyMcePlugin } from '@tiny-mce-umbraco/backoffice/core';

export const manifests: Array<ManifestTinyMcePlugin> = [
	{
		type: 'tinyMcePlugin',
		alias: 'Umb.TinyMcePlugin.HelloWorld',
		name: 'Hello World TinyMCE Plugin',
		js: () => import('./helloworld-plugin.js'),
		meta: {
			toolbar: [
				{
					alias: 'helloworld',
					label: 'helloworld',
					icon: 'icon-list',
				},
			],			
			config: {
				propertyEditorSchemaAlias: 'Umbraco.TextBox',
				keep_styles: false
			}
		},
	}
];

bundle-manifests.ts

import { manifests as entrypoints } from "./entrypoints/manifest.js";
import { manifests as helloworld } from "./tinymce-plugins/helloworld/manifest.js";

// Job of the bundle is to collate all the manifests from different parts of the extension and load other manifests
// We load this bundle from umbraco-package.json
export const manifests: Array<UmbExtensionManifest> = [
  ...entrypoints,
  ...helloworld,
];

It all builds fine.
The umbraco-extensions templates entrypoints extensions makes a fine console output.
But when the TinyMce editor is supposed to be loaded. The error mentioned in the top is outputted and nothing happens.

Does anybody had success adding plugins to the TinyMce in v17?

Are we so lucky, that there could be a simple sample we could look at and get inspirred?

Thanks for help in advance

[mikkeljohansen]

Found the solution

We are using VITE and in the vite.config.ts it needed to have tiny-mce-umbraco added to the rollUpOptions

    rollupOptions: {
      // Ensure to externalize dependencies that shouldn't be bundled
      external: [/^@umbraco/, /^@tiny-mce-umbraco/],
    }