feat: add loading lazy for image (#1391)

taiga-family · Sep 16, 2024 · bc59d44 · bc59d44
1 parent ef8beca
commit bc59d44
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 5 deletions.
diff --git a/projects/demo/src/app/pages/starter/import/component.md b/projects/demo/src/app/pages/starter/import/component.md
@@ -12,7 +12,11 @@ import {TUI_EDITOR_DEFAULT_TOOLS} from '@taiga-ui/editor';
   providers: [
     {
       provide: TUI_EDITOR_EXTENSIONS,
-      useValue: TUI_EDITOR_DEFAULT_EXTENSIONS,
+      deps: [Injector],
+      useFactory: (injector: Injector) => [
+        ...TUI_EDITOR_DEFAULT_EXTENSIONS,
+        import('@taiga-ui/editor').then(({setup}) => setup({injector})),
+      ],
     },
   ],
   // ...

diff --git a/projects/demo/src/app/pages/starter/index.ts b/projects/demo/src/app/pages/starter/index.ts
@@ -1,5 +1,5 @@
 import {NgIf} from '@angular/common';
-import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, Injector} 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';
@@ -32,7 +32,11 @@ import {
     providers: [
         {
             provide: TUI_EDITOR_EXTENSIONS,
-            useValue: TUI_EDITOR_DEFAULT_EXTENSIONS,
+            deps: [Injector],
+            useFactory: (injector: Injector) => [
+                ...TUI_EDITOR_DEFAULT_EXTENSIONS,
+                import('@taiga-ui/editor').then(({setup}) => setup({injector})),
+            ],
         },
     ],
 })

diff --git a/projects/editor/src/components/editor-socket/editor-socket.component.ts b/projects/editor/src/components/editor-socket/editor-socket.component.ts
@@ -8,9 +8,10 @@ import {
     signal,
     ViewEncapsulation,
 } from '@angular/core';
-import type {SafeHtml} from '@angular/platform-browser';
+import {EVENT_MANAGER_PLUGINS, type SafeHtml} from '@angular/platform-browser';
 import {DomSanitizer} from '@angular/platform-browser';
 import {tuiIsElement} from '@taiga-ui/cdk';
+import {PreventEventPlugin} from '@taiga-ui/event-plugins';
 
 import {TuiTiptapEditor} from '../../directives/tiptap-editor/tiptap-editor.directive';
 import {TUI_EDITOR_OPTIONS} from '../../tokens/editor-options';
@@ -37,6 +38,16 @@ export class TuiEditorSocket {
     protected readonly options = inject(TUI_EDITOR_OPTIONS);
     protected readonly html = signal<SafeHtml | string | null>(null);
 
+    constructor() {
+        ngDevMode &&
+            console.assert(
+                !!inject<unknown[]>(EVENT_MANAGER_PLUGINS).find(
+                    (plugin) => plugin instanceof PreventEventPlugin,
+                ),
+                'NG_EVENT_PLUGINS is missing from global providers',
+            );
+    }
+
     @Input()
     public set content(content: string | null) {
         if (!content) {

diff --git a/projects/editor/src/components/editor/editor.component.less b/projects/editor/src/components/editor/editor.component.less
@@ -51,7 +51,7 @@
 }
 
 .t-editor-placeholder:not(:empty) {
-    margin: 1rem 1rem -1rem;
+    margin: 1rem 1rem -0.625rem;
     min-block-size: 1.625rem;
 }
 

diff --git a/projects/editor/src/extensions/image-editor/image-editor.component.html b/projects/editor/src/extensions/image-editor/image-editor.component.html
@@ -24,6 +24,8 @@
     >
         <img
             contenteditable="false"
+            decoding="async"
+            loading="lazy"
             [alt]="alt"
             [attr.width]="width"
             [class.ProseMirror-selectednode]="focused"

diff --git a/projects/editor/src/extensions/image-editor/image-editor.extension.ts b/projects/editor/src/extensions/image-editor/image-editor.extension.ts
@@ -157,3 +157,5 @@ export function tuiCreateImageEditorExtension<T, K>({
         },
     });
 }
+
+export const setup = tuiCreateImageEditorExtension;
-Original file line number
+Diff line change
@@ Expand Up / @@ -157,3 +157,5 @@ export function tuiCreateImageEditorExtension<T, K>({ @@
             },
         });
     }
+    export const setup = tuiCreateImageEditorExtension;