chore: sync

.npmrc

@@ -1,5 +1,5 @@
 strict-ssl=false
 engine-strict=false
-ignore-engines=true # Note: ngx-highlightjs Error - Unsupported engine
-force=true # Note: cypress-image-snapshot require only cypress 4.x
+ignore-engines=true
+force=true
 legacy-peer-deps=true

projects/demo/src/app/app.component.ts

@@ -8,20 +8,16 @@ import {
 import {Router} from '@angular/router';
 import {LOCAL_STORAGE} from '@ng-web-apis/common';
 import {TUI_DOC_PAGE_LOADED} from '@taiga-ui/addon-doc';
-import {TUI_IS_CYPRESS} from '@taiga-ui/cdk';
 import pkg from '@tinkoff/tui-editor/package.json';
 import {Observable} from 'rxjs';
 
 @Component({
-    selector: 'tui-app',
+    selector: 'app',
     templateUrl: './app.component.html',
     styleUrls: ['./app.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiAppComponent implements OnInit {
-    @HostBinding('class._is-cypress-mode')
-    readonly isCypressMode = this.isCypress;
-
     @HostBinding('class._loaded')
     readonly pageLoadedInit = '0';
 
@@ -31,7 +27,6 @@ export class TuiAppComponent implements OnInit {
     version = pkg.version;
 
     constructor(
-        @Inject(TUI_IS_CYPRESS) private readonly isCypress: boolean,
         @Inject(TUI_DOC_PAGE_LOADED) private readonly pageLoaded$: Observable<boolean>,
         @Inject(Router) protected readonly router: Router,
         @Inject(LOCAL_STORAGE) protected readonly storage: Storage,

projects/demo/src/app/app.routes.ts

@@ -236,9 +236,9 @@ export const appRoutes: Routes = [
 @NgModule({
     imports: [
         RouterModule.forRoot(appRoutes, {
-            initialNavigation: `enabledBlocking`,
-            relativeLinkResolution: `corrected`,
             scrollPositionRestoration: `enabled`,
+            anchorScrolling: `enabled`,
+            scrollOffset: [0, 64],
         }),
     ],
     exports: [RouterModule],

projects/demo/src/app/pages/embed/html5/examples/1/index.less

@@ -1,5 +1,5 @@
 :host {
-    &._cypress ::ng-deep {
+    &._e2e ::ng-deep {
         //noinspection CssInvalidPseudoSelector
         video::-webkit-media-controls-current-time-display,
         video::-webkit-media-controls-time-remaining-display,

projects/demo/src/app/pages/embed/html5/examples/1/index.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
-import {TUI_IS_CYPRESS, tuiPure, tuiTypedFromEvent} from '@taiga-ui/cdk';
+import {TUI_IS_E2E, tuiPure, tuiTypedFromEvent} from '@taiga-ui/cdk';
 import {
     TUI_ATTACH_FILES_LOADER,
     TUI_ATTACH_FILES_OPTIONS,
@@ -93,7 +93,7 @@ import {map} from 'rxjs/operators';
     ],
     host: {
         class: 'html5-editor-example',
-        '[class._cypress]': 'isCypress',
+        '[class._e2e]': 'isE2E',
     },
 })
 export class TuiEditorEmbedHtml5Example1 {
@@ -111,14 +111,14 @@ export class TuiEditorEmbedHtml5Example1 {
             <p>Here is video: </p>
 
             <video controls="controls" width="100%" preload="${
-                this.isCypress ? 'none' : 'auto'
+                this.isE2E ? 'none' : 'auto'
             }" controlsList="nodownload">
                 <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
             </video>
 
             <p>Here is audio: </p>
             <audio controls style="width: 100%" preload="${
-                this.isCypress ? 'none' : 'auto'
+                this.isE2E ? 'none' : 'auto'
             }" controlsList="nodownload">
               <source src="https://www.w3docs.com/build/audios/audio.mp3" type="audio/mp3">
             </audio>
@@ -129,13 +129,13 @@ export class TuiEditorEmbedHtml5Example1 {
     );
 
     constructor(
-        @Inject(TUI_IS_CYPRESS) readonly isCypress: boolean,
+        @Inject(TUI_IS_E2E) readonly isE2E: boolean,
         @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
     ) {}
 
     @tuiPure
-    safe(content: string): SafeHtml {
-        return this.sanitizer.bypassSecurityTrustHtml(content);
+    safe(content: string | null): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(content ?? '');
     }
 
     attach([file]: Array<TuiEditorAttachedFile<{type: string}>>): void {

projects/demo/src/app/pages/embed/iframe/examples/1/index.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component, Inject, Injector} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
-import {TUI_IS_CYPRESS, tuiPure} from '@taiga-ui/cdk';
+import {TUI_IS_E2E, tuiPure} from '@taiga-ui/cdk';
 import {TUI_EDITOR_EXTENSIONS, TuiEditorTool} from '@tinkoff/tui-editor';
 
 @Component({
@@ -33,7 +33,7 @@ export class TuiEditorEmbedIframeExample1 {
         <p>Here is an online IDE:</p>
         <iframe
          src="https://codepen.io/mehdinajafi/embed/LYyqNqR?default-tab=html${
-             this.isCypress ? '' : '%2Cresult'
+             this.isE2E ? '' : '%2Cresult'
          }&editable=true"
          height="375"
          width="100%"
@@ -59,11 +59,11 @@ export class TuiEditorEmbedIframeExample1 {
 
     constructor(
         @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
-        @Inject(TUI_IS_CYPRESS) private readonly isCypress: boolean,
+        @Inject(TUI_IS_E2E) private readonly isE2E: boolean,
     ) {}
 
     @tuiPure
-    safe(content: string): SafeHtml {
-        return this.sanitizer.bypassSecurityTrustHtml(content);
+    safe(content: string | null): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(content ?? '');
     }
 }

projects/demo/src/app/pages/embed/youtube/examples/1/index.ts

@@ -42,7 +42,7 @@ export class TuiEditorEmbedYoutubeExample1 {
      * TUI_SANITIZER doesn't support iframe inside content
      */
     @tuiPure
-    safe(content: string): SafeHtml {
-        return this.sanitizer.bypassSecurityTrustHtml(content);
+    safe(content: string | null): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(content ?? '');
     }
 }

projects/demo/src/app/pages/starter/editor-starter.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {TUI_IS_CYPRESS} from '@taiga-ui/cdk';
+import {TUI_IS_E2E} from '@taiga-ui/cdk';
 import {
     defaultEditorExtensions,
     defaultEditorTools,
@@ -65,7 +65,7 @@ export class TuiEditorStarterPageComponent {
 
     tools = this.toolsVariants[0];
 
-    constructor(@Inject(TUI_IS_CYPRESS) readonly isCypress: boolean) {}
+    constructor(@Inject(TUI_IS_E2E) readonly isE2E: boolean) {}
 
     get disabled(): boolean {
         return this.control.disabled;

projects/demo/src/app/pages/starter/editor-starter.module.ts

@@ -11,15 +11,13 @@ import {TuiAutoFocusModule} from '@taiga-ui/cdk';
 import {TuiLinkModule} from '@taiga-ui/core';
 import {TuiIslandModule, TuiMarkerIconModule} from '@taiga-ui/kit';
 import {TuiEditorModule, TuiEditorSocketModule} from '@tinkoff/tui-editor';
-import {HighlightModule} from 'ngx-highlightjs';
 
 import {TuiEditorStarterPageComponent} from './editor-starter.component';
 
 @NgModule({
     imports: [
         CommonModule,
         TuiAddonDocModule,
-        HighlightModule,
         TuiIslandModule,
         TuiLinkModule,
         TuiMarkerIconModule,

projects/demo/src/app/pages/starter/editor-starter.template.html

@@ -15,15 +15,15 @@
                 [style.maxHeight.px]="maxHeight"
                 [style.minHeight.px]="minHeight"
                 [tools]="tools"
-                [tuiAutoFocus]="!isCypress"
+                [tuiAutoFocus]="!isE2E"
             >
                 Start typing
             </tui-editor>
 
             <h4>HTML:</h4>
             <tui-editor-socket
                 class="tui-example"
-                [content]="control.value"
+                [content]="control.value || ''"
             ></tui-editor-socket>
 
             <h4>Text:</h4>

projects/demo/src/index.html

@@ -39,6 +39,6 @@
         <title>TUI Editor</title>
     </head>
     <body>
-        <tui-app></tui-app>
+        <app></app>
     </body>
 </html>

projects/demo/src/styles.less

@@ -101,21 +101,3 @@ markdown {
         }
     }
 }
-
-._is-cypress-mode {
-    &._hide-scrollbar tui-scroll-controls {
-        display: none !important;
-    }
-
-    &._hide-cursor * {
-        caret-color: transparent !important;
-    }
-
-    &._no-smooth-scroll * {
-        scroll-behavior: auto !important;
-    }
-
-    &._stop-animation * {
-        animation-iteration-count: 0 !important;
-    }
-}