fix: prevent fetch resources in contenteditable

package.json

@@ -101,11 +101,11 @@
         "@maskito/angular": "2.5.0",
         "@maskito/core": "2.5.0",
         "@maskito/kit": "2.5.0",
-        "@ng-web-apis/common": "4.0.1",
-        "@ng-web-apis/intersection-observer": "4.0.1",
-        "@ng-web-apis/mutation-observer": "4.0.1",
-        "@ng-web-apis/resize-observer": "4.0.1",
-        "@ng-web-apis/universal": "4.0.1",
+        "@ng-web-apis/common": "4.1.2",
+        "@ng-web-apis/intersection-observer": "4.1.2",
+        "@ng-web-apis/mutation-observer": "4.1.2",
+        "@ng-web-apis/resize-observer": "4.1.2",
+        "@ng-web-apis/universal": "4.1.2",
         "@nguniversal/builders": "16.2.0",
         "@nx/angular": "19.2.2",
         "@nx/jest": "19.2.2",

projects/demo/src/app/app.pages.ts

@@ -11,10 +11,10 @@ export const DEMO_PAGES: TuiDocRoutePages = [
             'editor, setup, starter kit, wysiwyg, редактор, текст, html, rich, text',
     },
     {
-        section: `Documentation`,
-        title: `Tokens`,
+        section: 'Documentation',
+        title: 'Tokens',
         route: `${TuiDemoPath.StarterKit}/Options`,
-        keywords: `TUI_EDITOR_OPTIONS, TUI_ATTACH_FILES_LOADER`,
+        keywords: 'TUI_EDITOR_OPTIONS, TUI_ATTACH_FILES_LOADER',
     },
     {
         section: 'Documentation',
@@ -217,6 +217,12 @@ export const DEMO_PAGES: TuiDocRoutePages = [
                     'editor, embed, video player, audio player, html5, wysiwyg, редактор, плеер, html, rich, text',
                 route: `/${TuiDemoPath.EmbedHtml5}`,
             },
+            {
+                section: 'Documentation',
+                title: 'PDF',
+                keywords: 'editor, embed, pdf',
+                route: `/${TuiDemoPath.EmbedPDF}`,
+            },
         ],
     },
     {

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

@@ -139,6 +139,11 @@ export const routes: Routes = [
         loadComponent: async () => import('./pages/embed/html5'),
         title: 'Editor — HTML5',
     }),
+    route({
+        path: TuiDemoPath.EmbedPDF,
+        loadComponent: async () => import('./pages/embed/pdf'),
+        title: 'Editor — PDF',
+    }),
     route({
         path: TuiDemoPath.ToolbarBottom,
         loadComponent: async () => import('./pages/toolbar/bottom'),

projects/demo/src/app/pages/color-picker/examples/4/index.less

@@ -1,8 +1,8 @@
 .paint {
     position: absolute;
-    width: 24px;
-    height: 24px;
-    right: 48px;
+    width: 1.5rem;
+    height: 1.5rem;
+    right: 3rem;
     pointer-events: auto;
 
     input {

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

@@ -20,8 +20,8 @@ import {ExampleTuiEmbedTool} from './embed-tool/embed-tool.component';
             deps: [Injector],
             useFactory: (injector: Injector) => [
                 import('@taiga-ui/editor').then(({TuiStarterKit}) => TuiStarterKit),
-                import('@taiga-ui/editor').then(({tuiCreateImageEditorExtension}) =>
-                    tuiCreateImageEditorExtension({injector}),
+                import('@taiga-ui/editor').then(({tuiCreateIframeEditorExtension}) =>
+                    tuiCreateIframeEditorExtension({injector}),
                 ),
             ],
         },
@@ -32,7 +32,6 @@ export default class Example {
     private readonly isE2E = inject(TUI_IS_E2E);
 
     protected readonly builtInTools = [TuiEditorTool.Undo];
-
     protected readonly control = new FormControl(
         `
         <p>Here is an online IDE:</p>

projects/demo/src/app/pages/embed/pdf/examples/1/index.html

@@ -0,0 +1,12 @@
+<tui-editor
+    class="editor"
+    [formControl]="control"
+    [tools]="builtInTools"
+    (fileAttached)="attach($event)"
+/>
+
+<h4>HTML:</h4>
+<div [innerHTML]="safe(control.value)"></div>
+
+<h4>Text:</h4>
+<p>{{ control.value }}</p>

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

@@ -0,0 +1,7 @@
+.editor {
+    min-height: 43.75rem;
+}
+
+::ng-deep iframe {
+    border: 1px solid var(--tui-background-accent-1);
+}

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

@@ -0,0 +1,137 @@
+import type {Injector} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    INJECTOR,
+    ViewChild,
+} from '@angular/core';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import type {SafeHtml} from '@angular/platform-browser';
+import {DomSanitizer} from '@angular/platform-browser';
+import {TUI_IS_E2E, tuiPure, tuiTypedFromEvent} from '@taiga-ui/cdk';
+import type {TuiEditorAttachedFile} from '@taiga-ui/editor';
+import {
+    TUI_ATTACH_FILES_LOADER,
+    TUI_ATTACH_FILES_OPTIONS,
+    TUI_EDITOR_EXTENSIONS,
+    TuiEditor,
+    TuiEditorTool,
+} from '@taiga-ui/editor';
+import type {Observable} from 'rxjs';
+import {map} from 'rxjs';
+
+@Component({
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiEditor],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: TUI_EDITOR_EXTENSIONS,
+            deps: [INJECTOR],
+            useFactory: (injector: Injector) => [
+                import('@taiga-ui/editor').then(({TuiStarterKit}) => TuiStarterKit),
+                import('@tiptap/extension-text-style').then(({TextStyle}) => TextStyle),
+                import('@taiga-ui/editor').then(({TuiLink}) => TuiLink),
+                import('@taiga-ui/editor').then(({TuiFileLink}) => TuiFileLink),
+                import('@taiga-ui/editor').then(({tuiCreateIframeEditorExtension}) =>
+                    tuiCreateIframeEditorExtension({injector}),
+                ),
+            ],
+        },
+        {
+            provide: TUI_ATTACH_FILES_LOADER,
+            useFactory:
+                () =>
+                ([file]: File[]): Observable<
+                    Array<TuiEditorAttachedFile<{type: string}>>
+                > => {
+                    const fileReader = new FileReader();
+
+                    // For example, instead of uploading to a file server,
+                    // we convert the result immediately into content to base64
+                    fileReader.readAsDataURL(file);
+
+                    return tuiTypedFromEvent(fileReader, 'load').pipe(
+                        map(() => [
+                            {
+                                name: file.name,
+
+                                /* base64 or link to the file on your server */
+                                link: String(fileReader.result),
+
+                                attrs: {
+                                    type: file.type,
+                                },
+                            },
+                        ]),
+                    );
+                },
+        },
+        {
+            provide: TUI_ATTACH_FILES_OPTIONS,
+            useValue: {
+                accept: 'application/pdf',
+                multiple: false,
+            },
+        },
+    ],
+    host: {
+        class: 'html5-editor-example',
+        '[class._e2e]': 'isE2E',
+    },
+})
+export default class Example {
+    @ViewChild(TuiEditor)
+    private readonly editor?: TuiEditor;
+
+    private readonly sanitizer = inject(DomSanitizer);
+
+    protected readonly isE2E = inject(TUI_IS_E2E);
+
+    protected readonly builtInTools = [
+        TuiEditorTool.Undo,
+        TuiEditorTool.Link,
+        TuiEditorTool.Attach,
+    ];
+
+    protected readonly control = new FormControl(
+        `
+            <p>sample.pdf</p>
+            <iframe
+                data-type="iframe-editor"
+                src="https://mozilla.github.io/pdf.js/web/viewer.html?url=https://pdfobject.com/pdf/sample.pdf"
+                width="100%"
+                height="300"
+            ></iframe>
+            <p>Hello world</p>
+    `,
+        Validators.required,
+    );
+
+    @tuiPure
+    protected safe(content: string | null): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(content ?? '');
+    }
+
+    protected attach([file]: Array<TuiEditorAttachedFile<{type: string}>>): void {
+        this.editor?.editorService
+            ?.getOriginTiptapEditor()
+            ?.chain()
+            .focus('end')
+            .createParagraphNear()
+            .insertContent(file.name)
+            .run();
+
+        this.editor?.editorService?.setIframe({
+            allowfullscreen: false,
+            frameborder: null,
+            // For example, src: `https://mozilla.github.io/pdf.js/web/viewer.html?url${file.link}`,
+            src: `data:application/pdf;base64${file.link}`,
+            width: '100%',
+            height: 300,
+        });
+    }
+}

projects/demo/src/app/pages/embed/pdf/index.html

@@ -0,0 +1,11 @@
+<tui-doc-page
+    header="Editor"
+    type="components"
+>
+    <tui-doc-example
+        id="pdf"
+        heading="PDF"
+        [component]="component1"
+        [content]="example1"
+    />
+</tui-doc-page>

projects/demo/src/app/pages/embed/pdf/index.ts

@@ -0,0 +1,25 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink} from '@taiga-ui/core';
+import {TUI_EDITOR_DEFAULT_EXTENSIONS, TUI_EDITOR_EXTENSIONS} from '@taiga-ui/editor';
+
+@Component({
+    standalone: true,
+    imports: [TuiAddonDoc, TuiLink, RouterLink],
+    templateUrl: './index.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: TUI_EDITOR_EXTENSIONS,
+            useValue: TUI_EDITOR_DEFAULT_EXTENSIONS,
+        },
+    ],
+})
+export default class Example {
+    protected readonly component1 = import('./examples/1');
+    protected readonly example1 = {
+        HTML: import('./examples/1/index.html?raw'),
+        TypeScript: import('./examples/1/index.ts?raw'),
+    };
+}

projects/demo/src/app/pages/focus/examples/1/index.less

@@ -1,7 +1,7 @@
 ::ng-deep {
     .has-focus:not(tui-image-editor),
     tui-image-editor.has-focus img {
-        border-radius: 3px;
+        border-radius: 0.1875rem;
         box-shadow: 0 0 0 3px #68cef8;
     }
 }

projects/demo/src/app/pages/starter/index.html

@@ -159,7 +159,7 @@ <h4>Text:</h4>
             id="options"
             heading="TUI_EDITOR_OPTIONS"
         >
-            <tui-doc-code [code]="exampleOptions"></tui-doc-code>
+            <tui-doc-code [code]="exampleOptions" />
 
             <p>
                 <strong>Description of the available configurations:</strong>
@@ -259,7 +259,7 @@ <h4>Text:</h4>
             id="attach-files"
             heading="TUI_ATTACH_FILES_LOADER / TUI_ATTACH_FILES_OPTIONS"
         >
-            <tui-doc-code [code]="exampleFileAttach"></tui-doc-code>
+            <tui-doc-code [code]="exampleFileAttach" />
         </tui-doc-example>
     </ng-template>
 </tui-doc-page>

projects/demo/src/app/pages/starter/index.ts

@@ -2,6 +2,7 @@ import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {TuiAddonDoc} from '@taiga-ui/addon-doc';
 import {TUI_IS_E2E, TuiAutoFocus} from '@taiga-ui/cdk';
+import {TuiLink} from '@taiga-ui/core';
 import {
     TUI_EDITOR_DEFAULT_EXTENSIONS,
     TUI_EDITOR_DEFAULT_TOOLS,
@@ -10,7 +11,6 @@ import {
     TuiEditorSocket,
     TuiEditorTool,
 } from '@taiga-ui/editor';
-import {TuiLink} from "@taiga-ui/core";
 
 @Component({
     standalone: true,

projects/demo/src/app/pages/toolbar/bottom/examples/1/index.less

@@ -1,6 +1,6 @@
 .editor {
-    min-height: 200px;
-    max-height: 200px;
+    min-height: 12.5rem;
+    max-height: 12.5rem;
 
     ::ng-deep [data-appearance] {
         tui-toolbar {

projects/demo/src/app/shared/logo/index.less

@@ -17,8 +17,8 @@
 }
 
 .logo-icon {
-    min-width: 180px;
-    min-height: 30px;
+    min-width: 11.25rem;
+    min-height: 1.875rem;
     color: #eb5a3d;
 
     &:host-context([tuiTheme='dark']) & {

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

@@ -6,6 +6,7 @@ export const TuiDemoPath = {
     Checkbox: 'checkbox',
     ColorPickerTool: 'custom-tool/color-picker',
     EmbedHtml5: 'embed/html5',
+    EmbedPDF: 'embed/pdf',
     EmbedIframe: 'embed/iframe',
     EmbedYoutube: 'embed/youtube',
     Focus: 'focus',

projects/demo/src/styles.less

@@ -1,5 +1,5 @@
 @import '@taiga-ui/styles/taiga-ui-global.less';
-@import '@taiga-ui/legacy/styles/taiga-ui-theme.less'; // TODO: check affected styles
+@import '@taiga-ui/core/styles/taiga-ui-theme.less';
 @import '~highlight.js/styles/github.css';
 
 body {

projects/editor/src/components/color-selector/color-selector.style.less

@@ -52,8 +52,8 @@
 }
 
 .t-hr {
-    height: 1px;
-    margin: 0 0 0 -1px;
+    height: 0.0625rem;
+    margin: 0 0 0 -0.0625rem;
     border: none;
     background: var(--tui-background-neutral-1-hover);
 }

projects/editor/src/components/editor-socket/styles/details.less

@@ -18,7 +18,7 @@ summary {
     }
 
     p {
-        min-width: 1px;
+        min-width: 0.0625rem;
         margin: 0;
     }