Dynamically replace CKEditor5

I'm using a custom build of the CKEditor5 ClassicEditor in an Angular application (@ckeditor/ckeditor5-angular package) within a large application.

On some pages I need to show an extra toolbar button. So I have a default toolbar used in most places, and then where I need to show the extra button, I just push the new button into the toolbar config.

The only way I could get the new button to show up is by destroying and recreating the CKEditor, and after doing this, the new button appears and does the right thing when it is clicked.

However, I've noticed that on pages where I do show this extra button, after the editor has been destroyed and recreated, I lose a load of custom styling for the editor and it is no longer connected to my from model (so on pages where I have the default toolbar, I can update the contents of the editor, and it gets sent to the back-end when the form is submitted. But on pages where I show the custom button, although I can update the contents of the editor, any changes are not sent to the back-end.

I've noticed that when the editor is recreated, it no longer sits within the <ckeditor> element, but on pages where it is not recreated, all of the component mark-up is inside the <ckeditor> element.

Here is the function I use to recreate the editor:

private recreateEditor(): void {
  setTimeout(() => {
    this.instance.editorInstance.destroy().then(() => {
      const editorBase = document.querySelector('#ckEditor')
      this.Editor.create(editorBase, this.rteConfig);
    });
  });
}

Please help!