Lazy loaded tui-editor

[ratn1ksun]

Hi everyone, I've been scratching my head for two days trying to figure out the strange behavior of the tui-editor component loaded via polymorpheusOutlet. For some reason, some of the tools, specifically 'bold', 'italic', and 'align', refuse to work. Meanwhile, the markdown syntax is correctly interpreted, but it's impossible to bold the text by clicking the 'B' button in the toolbar. On the other hand, other tools like 'insertHorizontalRule' or 'fontSize' work correctly. There are no errors in the console accompanying this behavior.

During debugging, I discovered a pattern:

if the component is statically mounted in the template (1), and in the same template, a component (2) containing the static tui-editor is dynamically mounted, the editor's behavior changes and fully matches the expected one.

I assumed that the cause of this behavior might be related to the providers, but my attempts — specifically adding the configuration from the guide in the project root or directly in the lazily loaded component (2) — didn't lead to any results. I also tried specifying the parent injector for the PolymorpheusComponent. I tend to think that I’ve missed something very obvious or I don’t know something, so I’d appreciate any hints on where to dig.

P.S. ionic is out of guilty scope

// -- 1 --
// Static component

import {
	ChangeDetectionStrategy,
	Component,
	inject,
	Injector,
	Output,
} from '@angular/core';
import {
	IonButton,
	IonButtons,
	IonHeader,
	IonModal,
	IonTitle,
	IonToolbar,
} from '@ionic/angular/standalone';
import { WipeScreenService } from '../../services/wipe-screen.service';
import { TUI_EDITOR_DEFAULT_EXTENSIONS, TUI_EDITOR_EXTENSIONS, TuiEditor } from '@taiga-ui/editor';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { AsyncPipe } from '@angular/common';
import { fromPromise } from 'rxjs/internal/observable/innerFrom';
import { map } from 'rxjs';
import { PolymorpheusComponent, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';

@Component({
	selector: 'app-modal',
	imports: [
		IonModal,
		IonHeader,
		IonToolbar,
		IonTitle,
		IonButtons,
		IonButton,
		TuiEditor,
		ReactiveFormsModule,
		AsyncPipe,
		PolymorpheusOutlet,
	],
	template: `
		<ion-modal
			(ionModalWillPresent)="openEvent.emit()"
			[trigger]="trigger()"
			[canDismiss]="true"
			[initialBreakpoint]="1"
			[breakpoints]="[0, 1]"
			[mode]="'ios'"
			#modal
		>
			<ng-template>
				

                                <!--	<tui-editor [formControl]="testControl">Placeholder</tui-editor>      -->
				<!--	 If you uncomment this line, the behavior of both becomes expected.  -->
				
				<ion-header>
					<ion-toolbar>
						<ion-title>{{ title() }}</ion-title>
						<ion-buttons slot="end">
							<ion-button (click)="onClose()">Закрыть</ion-button>
						</ion-buttons>
					</ion-toolbar>
				</ion-header>

				<div (touchmove)="virtualScrolled($event)" class="modal-content">
					<ng-container *polymorpheusOutlet="testComponent$ | async" />
				</div>

			</ng-template>
		</ion-modal>
	`,
	styleUrl: './modal.component.scss',
	changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ModalComponent{
	constructor(protected injector: Injector) {}

         protected readonly testControl = new FormControl('');

	testComponent$ = fromPromise(
		import('../testComponent').then((c) => c.default)
	).pipe(map((component) => new PolymorpheusComponent(component, this.injector)));
	
}

// -- 2 --
// dynamicly mounted component

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TuiEditor, TuiEditorToolType } from '@taiga-ui/editor';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { RouteAbleModalService } from '@web/storybook_mobile';
import { tuiTakeUntilDestroyed } from '@taiga-ui/cdk';
import { VendorAboutStateService } from '../../pages/personal-cabinet/vendor-about/model/vendor-about-state.service';
import { AsyncPipe } from '@angular/common';

@Component({
	selector: 'testComponent',
	imports: [TuiEditor, ReactiveFormsModule, AsyncPipe],
	template: `
		<tui-editor [formControl]="control"> Example </tui-editor>

		<span> {{ control.valueChanges | async }} </span>
	`,
	styleUrl: './change-vendor-description.component.scss',
	changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class testComponent{
	constructor(
		private lsModal: RouteAbleModalService,
		private vendorAboutState: VendorAboutStateService
	) {
		vendorAboutState.getOrgProperties$
			.pipe(tuiTakeUntilDestroyed())
			.subscribe(({ description }) => this.control.patchValue(description));

	}

	readonly tools: TuiEditorToolType[] = ['undo', 'insertHorizontalRule', 'fontSize', 'bold'];
	readonly control = new FormControl();
}

// Root config of my app

export const appConfig: ApplicationConfig = {
	providers: [
		{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

		provideIonicAngular({
			mode: 'ios',
		}),
		provideHttpClient(withInterceptorsFromDi(), withInterceptors([cacheInterceptor])),
		provideRouter(routes, withPreloading(PreloadAllModules)),
		provideAnimations(),
		importProvidersFrom(AbpModule, TuiDialog, TuiAlert, TuiSheetDialog),
		{
			provide: APP_INITIALIZER,
			useFactory: (initializer: Initializer) => () => initializer.init(),
			deps: [Initializer, ApiBaseUrlHolder],
			multi: true,
		},
		{
			provide: API_BASE_URL,
			useFactory: (apiBaseUrlHolder: ApiBaseUrlHolder) => apiBaseUrlHolder.appBaseUrl,
			deps: [ApiBaseUrlHolder],
			multi: true,
		},
		{
			provide: HTTP_INTERCEPTORS,
			useClass: AuthInterceptor,
			multi: true,
		},
		{
			provide: HTTP_INTERCEPTORS,
			useClass: CustomAbpHttpInterceptor,
			multi: true,
		},
		{ provide: HTTP_INTERCEPTORS, useClass: XsrfInterceptor, multi: true },
		{
			provide: TUI_LANGUAGE,
			useValue: of(TUI_RUSSIAN_LANGUAGE),
		},

		{
			provide: TUI_EDITOR_EXTENSIONS,
			deps: [Injector],
			useFactory: (injector: Injector) => [
				...TUI_EDITOR_DEFAULT_EXTENSIONS,
				import('@taiga-ui/editor').then(({ setup }) => setup({ injector }))
			],
		},

		NG_EVENT_PLUGINS,
		provideServiceWorker('ngsw-worker.js', {
			enabled: !isDevMode(),
			registrationStrategy: 'registerWhenStable:30000',
		}),
	],
};

// tui versions

    "@taiga-ui/addon-charts": "4.32.0",
    "@taiga-ui/addon-mobile": "4.32.0",
    "@taiga-ui/cdk": "4.32.0",
    "@taiga-ui/core": "4.32.0",
    "@taiga-ui/editor": "^4.22.0",
    "@taiga-ui/event-plugins": "^4.3.1",
    "@taiga-ui/i18n": "4.32.0",
    "@taiga-ui/icons": "4.32.0",
    "@taiga-ui/kit": "4.32.0",
    "@taiga-ui/legacy": "4.32.0",
    "@taiga-ui/styles": "4.32.0",
	

[ratn1ksun]

Upd: Thanks, guys. This is strange, but the reason why the behavior of tui-editor was unstable was a collision with ion-toolbar. I don't fully understand how this could happen, but I'm continuing my research...

[ratn1ksun]

Upd: In this ordred both works properly. Seems like, some kind of collision happens but, i don't even imagine how to ensure what exactly happened

// -- 1 --
// Static component (modified)


<ng-template>
  <div (touchmove)="virtualScrolled($event)" class="modal-content">
	  <ng-container *polymorpheusOutlet="testComponent$ | async" />
  </div>

  <ion-header>
	  <ion-toolbar>
		  <ion-title>{{ title() }}</ion-title>
		  <ion-buttons slot="end">
			  <ion-button (click)="onClose()">Закрыть</ion-button>
		  </ion-buttons>
	  </ion-toolbar>
  </ion-header>
  </ng-template>

[splincode]

@ratn1ksun could you add minimal github repo for reproduce?

[ratn1ksun]

@splincode sure, here it is

https://github.com/ratn1ksun/lazy-load-editor-showcase