feat(edit-content): add Angular image editor with events-based signalStore (#36063)

New @dotcms/image-editor library — a full-screen "Edit image" modal that renders a
live, server-side preview by building dotCMS /contentAsset/image filter URLs (a viewer
of the endpoint). State is an @ngrx/signals events-based store (eventGroup/withReducer/
on/injectDispatch + rxMethod effects) with adjust/transform/crop/focalPoint/fileInfo/
zoom slices and a coalesced command history (undo/redo + removable applied edits).

- DotImageEditorComponent (OnPush) opened via PrimeNG DialogService
- Canvas with two-layer image crossfade + skeleton/spinner/error+retry
- Tool rail (move/crop/focal), accordion panels (Adjust/Transform/File info/History),
  footer (Cancel/Download/Save split button)
- IMAGE_EDITOR_LAUNCHER seam (Angular/Legacy/Noop); binary field 'Edit image' now opens
  the new editor and saves via the _imageToolSaveFile temp-file flow
- 79 edit.content.image-editor.* i18n keys; Storybook story for isolated testing

Closes #36063

Author: oidacra

core-web/apps/dotcms-ui/.storybook/main.js

@@ -14,6 +14,7 @@ module.exports = {
         '../../../libs/template-builder/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/block-editor/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/edit-content/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+        '../../../libs/image-editor/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/ui/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/portlets/**/*.stories.@(js|jsx|ts|tsx|mdx)'
     ],

core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts

@@ -4,14 +4,12 @@ import {
     createComponentFactory,
     createHostFactory,
     Spectator,
-    SpectatorHost,
-    SpyObject
+    SpectatorHost
 } from '@ngneat/spectator/jest';
 import { of } from 'rxjs';
 
 import { provideHttpClient } from '@angular/common/http';
-import { Component, NgZone } from '@angular/core';
-import { fakeAsync, tick } from '@angular/core/testing';
+import { Component } from '@angular/core';
 import {
     ControlContainer,
     FormControl,
@@ -46,6 +44,7 @@ import { getUiMessage } from './utils/binary-field-utils';
 import { CONTENTTYPE_FIELDS_MESSAGE_MOCK, fileMetaData } from './utils/mock';
 
 import { BINARY_FIELD_MOCK, createFormGroupDirectiveMock } from '../../utils/mocks';
+import { IMAGE_EDITOR_LAUNCHER } from '../shared/image-editor-launcher';
 
 const TEMP_FILE_MOCK: DotCMSTempFile = {
     fileName: 'image.png',
@@ -81,21 +80,24 @@ const MOCK_DOTCMS_FILE = {
     binaryFieldMetaData: fileMetaData
 };
 
+const imageEditorLauncherMock = {
+    isAvailable: jest.fn().mockReturnValue(true),
+    open: jest.fn().mockReturnValue(of(null))
+};
+
 describe('DotEditContentBinaryFieldComponent', () => {
     let spectator: Spectator<DotEditContentBinaryFieldComponent>;
     let store: DotBinaryFieldStore;
-
-    let dotBinaryFieldEditImageService: SpyObject<DotBinaryFieldEditImageService>;
     let dotAiService: DotAiService;
-    let ngZone: NgZone;
 
     const createComponent = createComponentFactory({
         component: DotEditContentBinaryFieldComponent,
         componentProviders: [
             DotBinaryFieldStore,
             DotBinaryFieldEditImageService,
             DotAiService,
-            DialogService
+            DialogService,
+            { provide: IMAGE_EDITOR_LAUNCHER, useValue: imageEditorLauncherMock }
         ],
         componentViewProviders: [
             { provide: ControlContainer, useValue: createFormGroupDirectiveMock() }
@@ -135,6 +137,9 @@ describe('DotEditContentBinaryFieldComponent', () => {
         // which can cause these async setups to hang/flap. Force real timers for isolation.
         jest.useRealTimers();
 
+        imageEditorLauncherMock.isAvailable.mockReturnValue(true);
+        imageEditorLauncherMock.open.mockReturnValue(of(null));
+
         spectator = createComponent({
             detectChanges: false,
             props: {
@@ -145,9 +150,7 @@ describe('DotEditContentBinaryFieldComponent', () => {
             }
         });
         store = spectator.inject(DotBinaryFieldStore, true);
-        dotBinaryFieldEditImageService = spectator.inject(DotBinaryFieldEditImageService, true);
         dotAiService = spectator.inject(DotAiService, true);
-        ngZone = spectator.inject(NgZone);
     });
 
     it('shouldnt show url import button if not setted in settings', () => {
@@ -301,38 +304,59 @@ describe('DotEditContentBinaryFieldComponent', () => {
         });
 
         describe('Edit Image', () => {
-            it('should open edit image dialog when click on edit image button', () => {
+            it('should launch the image editor through the launcher seam on edit image', () => {
                 spectator.detectChanges();
-                const spy = jest.spyOn(dotBinaryFieldEditImageService, 'openImageEditor');
                 spectator.triggerEventHandler(DotBinaryFieldPreviewComponent, 'editImage', null);
-                expect(spy).toHaveBeenCalled();
+
+                expect(imageEditorLauncherMock.open).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        variable: BINARY_FIELD_MOCK.variable,
+                        fieldName: BINARY_FIELD_MOCK.name,
+                        byInode: false
+                    })
+                );
             });
 
-            it('should emit the tempId of the edited image', () => {
-                // Needed because the openImageEditor method is using a DOM custom event
-                ngZone.run(
-                    fakeAsync(() => {
-                        const spy = jest.spyOn(dotBinaryFieldEditImageService, 'openImageEditor');
-                        const spyTempFile = jest.spyOn(store, 'setFileFromTemp');
-                        const dotBinaryFieldPreviewComponent = spectator.fixture.debugElement.query(
-                            By.css('dot-binary-field-preview')
-                        );
-                        dotBinaryFieldPreviewComponent.triggerEventHandler('editImage');
-                        const customEvent = new CustomEvent(
-                            `binaryField-tempfile-${BINARY_FIELD_MOCK.variable}`,
-                            {
-                                detail: { tempFile: TEMP_FILE_MOCK }
-                            }
-                        );
-                        document.dispatchEvent(customEvent);
+            it('should map asset identifiers from the contentlet when launching', () => {
+                spectator.setInput('contentlet', {
+                    ...MOCK_DOTCMS_FILE,
+                    inode: 'inode-123',
+                    fileName: 'photo.png'
+                });
+                spectator.detectChanges();
 
-                        tick(1000);
+                spectator.triggerEventHandler(DotBinaryFieldPreviewComponent, 'editImage', null);
 
-                        expect(spy).toHaveBeenCalled();
-                        expect(spyTempFile).toHaveBeenCalledWith(TEMP_FILE_MOCK);
+                expect(imageEditorLauncherMock.open).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        inode: 'inode-123',
+                        variable: BINARY_FIELD_MOCK.variable,
+                        fieldName: BINARY_FIELD_MOCK.name,
+                        byInode: true,
+                        fileName: 'photo.png'
                     })
                 );
             });
+
+            it('should apply the edited temp file through the store', () => {
+                imageEditorLauncherMock.open.mockReturnValue(of(TEMP_FILE_MOCK));
+                const spyTempFile = jest.spyOn(store, 'setFileFromTemp');
+                spectator.detectChanges();
+
+                spectator.triggerEventHandler(DotBinaryFieldPreviewComponent, 'editImage', null);
+
+                expect(spyTempFile).toHaveBeenCalledWith(TEMP_FILE_MOCK);
+            });
+
+            it('should not apply a temp file when the editor is cancelled', () => {
+                imageEditorLauncherMock.open.mockReturnValue(of(null));
+                const spyTempFile = jest.spyOn(store, 'setFileFromTemp');
+                spectator.detectChanges();
+
+                spectator.triggerEventHandler(DotBinaryFieldPreviewComponent, 'editImage', null);
+
+                expect(spyTempFile).not.toHaveBeenCalled();
+            });
         });
     });
 

core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts

@@ -38,6 +38,7 @@ import {
     DotCMSContentTypeField,
     DotCMSContentTypeFieldVariable,
     DotCMSTempFile,
+    DotFileMetadata,
     DotGeneratedAIImage
 } from '@dotcms/dotcms-models';
 import {
@@ -58,10 +59,11 @@ import { BinaryFieldMode, BinaryFieldStatus } from './interfaces';
 import { DotBinaryFieldEditImageService } from './service/dot-binary-field-edit-image/dot-binary-field-edit-image.service';
 import { DotBinaryFieldValidatorService } from './service/dot-binary-field-validator/dot-binary-field-validator.service';
 import { DotBinaryFieldStore } from './store/binary-field.store';
-import { getUiMessage } from './utils/binary-field-utils';
+import { getFileMetadata, getUiMessage } from './utils/binary-field-utils';
 
 import { DEFAULT_MONACO_CONFIG } from '../../models/dot-edit-content-field.constant';
 import { getFieldVariablesParsed, stringToJson } from '../../utils/functions.util';
+import { AngularImageEditorLauncher, IMAGE_EDITOR_LAUNCHER } from '../shared/image-editor-launcher';
 
 export const DEFAULT_BINARY_FIELD_MONACO_CONFIG: MonacoEditorConstructionOptions = {
     ...DEFAULT_MONACO_CONFIG,
@@ -97,6 +99,7 @@ type SystemOptionsType = {
         DotBinaryFieldStore,
         DotLicenseService,
         DotBinaryFieldValidatorService,
+        { provide: IMAGE_EDITOR_LAUNCHER, useClass: AngularImageEditorLauncher },
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -118,6 +121,7 @@ export class DotEditContentBinaryFieldComponent
     readonly #dotAiService = inject(DotAiService);
     readonly #dialogService = inject(DialogService);
     readonly #destroyRef = inject(DestroyRef);
+    readonly #imageEditorLauncher = inject(IMAGE_EDITOR_LAUNCHER);
 
     $isAIPluginInstalled = toSignal(this.#dotAiService.checkPluginInstallation(), {
         initialValue: false
@@ -389,14 +393,32 @@ export class DotEditContentBinaryFieldComponent
     /**
      * Open Image Editor
      *
+     * Launches the editor through the {@link IMAGE_EDITOR_LAUNCHER} seam and applies
+     * the edited image back to the field via the binary field store.
+     *
      * @memberof DotEditContentBinaryFieldComponent
      */
     onEditImage() {
-        this.#dotBinaryFieldEditImageService.openImageEditor({
-            inode: this.contentlet?.inode,
-            tempId: this.tempId,
-            variable: this.variable
-        });
+        const inode = this.contentlet?.inode;
+        const metadata = this.contentlet
+            ? (getFileMetadata(this.contentlet) as Partial<DotFileMetadata>)
+            : null;
+
+        this.#imageEditorLauncher
+            .open({
+                inode,
+                tempId: this.tempId,
+                variable: this.variable,
+                fieldName: this.$field()?.name,
+                byInode: !!inode,
+                fileName: this.contentlet?.fileName ?? metadata?.name,
+                mimeType: metadata?.contentType
+            })
+            .pipe(
+                filter((tempFile): tempFile is DotCMSTempFile => !!tempFile),
+                takeUntilDestroyed(this.#destroyRef)
+            )
+            .subscribe((tempFile) => this.#dotBinaryFieldStore.setFileFromTemp(tempFile));
     }
 
     /**

core-web/libs/edit-content/src/lib/fields/shared/image-editor-launcher/angular-image-editor.launcher.spec.ts

@@ -0,0 +1,71 @@
+import { expect } from '@jest/globals';
+import { createServiceFactory, mockProvider, SpectatorService } from '@ngneat/spectator/jest';
+import { Subject } from 'rxjs';
+
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { DotCMSTempFile } from '@dotcms/dotcms-models';
+import { DotImageEditorComponent, ImageEditorOpenParams } from '@dotcms/image-editor';
+
+import { AngularImageEditorLauncher } from './angular-image-editor.launcher';
+
+describe('AngularImageEditorLauncher', () => {
+    let spectator: SpectatorService<AngularImageEditorLauncher>;
+    let onClose: Subject<DotCMSTempFile | undefined>;
+
+    const params: ImageEditorOpenParams = {
+        inode: 'inode-1',
+        variable: 'binaryField',
+        fieldName: 'binary'
+    };
+
+    const createService = createServiceFactory({
+        service: AngularImageEditorLauncher,
+        providers: [mockProvider(DotMessageService)],
+        mocks: [DialogService]
+    });
+
+    beforeEach(() => {
+        onClose = new Subject<DotCMSTempFile | undefined>();
+        spectator = createService();
+        spectator.inject(DialogService).open.mockReturnValue({ onClose });
+    });
+
+    it('should report itself as available', () => {
+        expect(spectator.service.isAvailable()).toBe(true);
+    });
+
+    it('should open the DotImageEditorComponent with a closable, escapable dialog', () => {
+        spectator.service.open(params).subscribe();
+
+        expect(spectator.inject(DialogService).open).toHaveBeenCalledWith(
+            DotImageEditorComponent,
+            expect.objectContaining({
+                data: params,
+                modal: true,
+                closable: true,
+                closeOnEscape: true
+            })
+        );
+    });
+
+    it('should resolve the temp file emitted on close', () => {
+        const tempFile = { id: 'temp-123' } as DotCMSTempFile;
+        let result: DotCMSTempFile | null | undefined;
+
+        spectator.service.open(params).subscribe((value) => (result = value));
+        onClose.next(tempFile);
+
+        expect(result).toEqual(tempFile);
+    });
+
+    it('should resolve null when the dialog closes without a value', () => {
+        let result: DotCMSTempFile | null | undefined;
+
+        spectator.service.open(params).subscribe((value) => (result = value));
+        onClose.next(undefined);
+
+        expect(result).toBeNull();
+    });
+});

core-web/libs/edit-content/src/lib/fields/shared/image-editor-launcher/angular-image-editor.launcher.ts

@@ -0,0 +1,54 @@
+import { Observable, map, take } from 'rxjs';
+
+import { Injectable, inject } from '@angular/core';
+
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { DotCMSTempFile } from '@dotcms/dotcms-models';
+import {
+    DotImageEditorComponent,
+    DotImageEditorLauncher,
+    ImageEditorOpenParams
+} from '@dotcms/image-editor';
+
+/**
+ * Launches the Angular `@dotcms/image-editor` modal through PrimeNG's `DialogService`.
+ */
+@Injectable()
+export class AngularImageEditorLauncher implements DotImageEditorLauncher {
+    readonly #dialogService = inject(DialogService);
+    readonly #dotMessageService = inject(DotMessageService);
+
+    isAvailable(): boolean {
+        return true;
+    }
+
+    /**
+     * Opens the image editor dialog for the given asset.
+     *
+     * @param params - Identifiers and metadata of the asset to edit
+     * @returns Emits the saved temp file, or `null` if the user cancelled
+     */
+    open(params: ImageEditorOpenParams): Observable<DotCMSTempFile | null> {
+        const ref = this.#dialogService.open(DotImageEditorComponent, {
+            header: undefined,
+            data: params,
+            width: 'min(92vw, 75rem)',
+            height: '90%',
+            modal: true,
+            draggable: false,
+            resizable: false,
+            closable: true,
+            closeOnEscape: true,
+            dismissableMask: false,
+            contentStyle: { height: '100%', overflow: 'hidden', padding: '0' },
+            styleClass: 'dot-image-editor-dialog'
+        });
+
+        return ref.onClose.pipe(
+            map((tempFile?: DotCMSTempFile) => tempFile ?? null),
+            take(1)
+        );
+    }
+}

core-web/libs/edit-content/src/lib/fields/shared/image-editor-launcher/image-editor-launcher.token.ts

@@ -0,0 +1,15 @@
+import { InjectionToken } from '@angular/core';
+
+import { DotImageEditorLauncher } from '@dotcms/image-editor';
+
+export type { DotImageEditorLauncher, ImageEditorOpenParams } from '@dotcms/image-editor';
+
+/**
+ * DI seam for launching the image editor from the binary field.
+ *
+ * Providers swap implementations (Angular dialog, legacy Dojo bridge, or noop)
+ * without the consuming field knowing which editor surfaces the result.
+ */
+export const IMAGE_EDITOR_LAUNCHER = new InjectionToken<DotImageEditorLauncher>(
+    'IMAGE_EDITOR_LAUNCHER'
+);

core-web/libs/edit-content/src/lib/fields/shared/image-editor-launcher/index.ts

@@ -0,0 +1,8 @@
+export {
+    IMAGE_EDITOR_LAUNCHER,
+    DotImageEditorLauncher,
+    ImageEditorOpenParams
+} from './image-editor-launcher.token';
+export { AngularImageEditorLauncher } from './angular-image-editor.launcher';
+export { LegacyDojoImageEditorLauncher } from './legacy-dojo-image-editor.launcher';
+export { NoopImageEditorLauncher } from './noop-image-editor.launcher';