editor.ui.registry.addButton doesn't work in Angular app when changing pages

What is the current behavior? Describe the bug If you have a TinyMCE editor on a page where you’ve added a button using editor.ui.registry.addButton then change to another page and then go back to the first page, the custom button doesn’t show up anymore. The button is there after page refresh but not after Angular page transition.

Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tiny.cloud or similar.

Link to repo (hard to reproduce in a cloud environment)

Steps to reproduce:

1. Add a self-hosted TinyMCE editor on a page inside your angular app.

@NgModule({
    declarations: [
        AppComponent,
        Page1Component,
        Page2Component,
    ],
    imports: [
        EditorModule,
        BrowserModule,
        AppRoutingModule,
    ],
    providers: [
        {provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js'}
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor() {
        tinymce.defaultSettings = {
            menubar: false,
            height: 300,
            suffix: '.min',
            base_url: '/tinymce'
        }
    }}

1. Register a custom button for the editor:

import { AfterViewInit, Component, ViewChild } from '@angular/core'
import { EditorComponent } from '@tinymce/tinymce-angular'

export const TinyMCEConfig = {
    content_css: '/assets/tinymce.css',
    height: '100%',
    toolbar: `
        undo redo preview fullscreen |
        test |
    `
}

@Component({
    selector: 'app-page1',
    templateUrl: './page1.component.html',
    styleUrls: ['./page1.component.scss']
})
export class Page1Component implements AfterViewInit {
    editorConfig = TinyMCEConfig

    @ViewChild('editor') editorComponent!: EditorComponent

    ngAfterViewInit(): void {
        this.editorComponent.editor.ui.registry.addButton('test', {
            text: 'My Test button',
            onAction: () => {}
        })
    }
}

1. Set the config for your TinyMCE editor to include the custom button

<editor [init]="editorConfig" #editor style="height: 400px;"></editor>

1. Use the Angular router to create a second page (the editor will be on the first page). The second page can be an empty component. The point is to change from Page 1 to Page 2. When doing that, the custom button will disappear.

What is the expected behavior? The expected behavior is to show the custom buttons even if you change pages in the Angular app.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE? This happens in every browser on version "tinymce": "^5.7.1" and "@tinymce/tinymce-angular": "^4.2.2". I didn’t check older versions.

[jscasca]

Hey @IonelLupu my best guess is that there is a race condition going on in there somewhere. Can you try adding the button during the setup phase of the editor?

editorConfig: any = {...TinyMCEConfig, setup: (e) => e.ui.registry.addButton('test', {text: 'button', onAction: () => {}})};

Just nicer. I was just running a quick test in your repo

[jscasca]

@IonelLupu To the best of my knowledge the buttons have to be added once the editor is available and before it has finished initialising. The race condition happens because the editor is asynchronously initialising and the ngAfterViewInit of your code fires before the editor has finished but if you wait longer the setup phase finishes before adding the button and nothing happens since it doesn’t lallow buttons to be added dynamically in the toolbar. I’m not sure if this is actually documented somewhere but you can always ask in the original TinyMCE repo

I will close the ticket with the suggestion to add buttons during setup for best results 😃