feat(image-editor): wire Save and focal-point persistence for the new image editor

core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/file-upload-fields/binary-field/binary-field-image-editor.spec.ts

@@ -56,9 +56,11 @@ test.describe('Binary field image editor — new editor', () => {
         }
     });
 
-    // The unified Binary field shows "Edit image" for image files. The new
-    // editor opens the legacy image editor JSP inside a PrimeNG dialog iframe.
-    test('import image and Edit opens legacy image editor dialog @critical', async ({ page }) => {
+    // The unified Binary field shows "Edit image" for image files. In the new
+    // Edit Content the new Angular image editor opens (the FEATURE_FLAG_NEW_IMAGE_EDITOR
+    // gate was removed, so it is always used here; the legacy Dojo editor only runs in
+    // the legacy Edit Content — see the describe block below).
+    test('import image and Edit opens the new Angular image editor @critical', async ({ page }) => {
         const formPage = new NewEditContentFormPage(page);
         await formPage.goToNew(contentTypeVariable);
 

core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/file-upload-fields/binary-field/helpers/binary-field.ts

@@ -96,20 +96,17 @@ export class BinaryField extends FileField {
     }
 
     /**
-     * New editor: the legacy image editor JSP is embedded in a PrimeNG dialog
-     * iframe (`dot-legacy-image-editor-dialog`), not the Dojo `#dotImageDialog`.
+     * New editor: clicking "Edit image" opens the Angular image editor
+     * ({@link DotImageEditorComponent}, `data-testid="image-editor-root"`) inside a
+     * PrimeNG dialog. The flag that used to gate it (FEATURE_FLAG_NEW_IMAGE_EDITOR) was
+     * removed, so the new editor is always used in the new Edit Content — there is no
+     * legacy Dojo iframe here.
      */
     async expectImageEditorOpen() {
         const dialog = this.page.getByRole('dialog');
         await expect(dialog).toBeVisible({ timeout: 15000 });
 
-        const iframe = dialog.getByTestId('legacy-image-editor-iframe');
-        await expect(iframe).toBeVisible({ timeout: 30000 });
-
-        const editorFrame = this.page.frameLocator('[data-testid="legacy-image-editor-iframe"]');
-        await expect(editorFrame.locator('#dotImageDialog, #imageToolIframe').first()).toBeVisible({
-            timeout: 30000
-        });
+        await expect(dialog.getByTestId('image-editor-root')).toBeVisible({ timeout: 30000 });
     }
 
     async openImageEditorInNewEditor() {

core-web/libs/dotcms-models/src/lib/dot-contentlets-events.model.ts

@@ -1,4 +1,6 @@
-import { DotCMSContentType, DotPageContainer, DotPageContent } from '@dotcms/dotcms-models';
+import { DotCMSContentType } from './dot-content-types.model';
+import { DotPageContainer } from './dot-page-container.model';
+import { DotPageContent } from './dot-page-content.model';
 
 export interface DotContentletEvent<T = Record<string, unknown>> {
     name: string;

core-web/libs/dotcms-models/src/lib/dot-file-metadata.model.ts

@@ -11,4 +11,9 @@ export interface DotFileMetadata {
     height?: number;
     width?: number;
     editableAsText?: boolean;
+    /**
+     * Focal point as an `"x,y"` string (normalized 0..1), exposed by the backend on image
+     * binary metadata and used to re-seed the image editor's focal marker on reopen.
+     */
+    focalPoint?: string;
 }

core-web/libs/dotcms-models/src/lib/dot-http-request-options.model.ts

@@ -1,5 +1,5 @@
 export interface DotHttpRequestOptions {
     method: string;
     headers: { [key: string]: string };
-    body: any;
+    body: XMLHttpRequestBodyInit | null;
 }

core-web/libs/dotcms-models/src/lib/dot-workflow-action.model.ts

@@ -70,7 +70,7 @@ export interface DotCMSSystemAction {
 
 export interface DotCMSWorkflowInput {
     id: string;
-    body: any;
+    body: Record<string, unknown>;
 }
 
 export interface DotCMSContentletWorkflowActions {

core-web/libs/dotcms-models/src/lib/page-model-change-event.ts

@@ -1,5 +1,4 @@
-import { DotPageContainer } from '@dotcms/dotcms-models';
-
+import { DotPageContainer } from './dot-page-container.model';
 import { PageModelChangeEventType } from './page-model-change-event.type';
 
 export interface PageModelChangeEvent {

core-web/libs/dotcms-models/src/lib/shared-models.ts

@@ -36,8 +36,7 @@ export const enum FeaturedFlags {
     FEATURE_FLAG_UVE_LEGACY_SCRIPT_INJECTION = 'FEATURE_FLAG_UVE_LEGACY_SCRIPT_INJECTION',
     FEATURE_FLAG_NEW_BLOCK_EDITOR = 'FEATURE_FLAG_NEW_BLOCK_EDITOR',
     FEATURE_FLAG_REPORT_ISSUE_ENABLED = 'FEATURE_FLAG_REPORT_ISSUE_ENABLED',
-    FEATURE_FLAG_LOCALE_SELECTOR_V2 = 'FEATURE_FLAG_LOCALE_SELECTOR_V2',
-    FEATURE_FLAG_NEW_IMAGE_EDITOR = 'FEATURE_FLAG_NEW_IMAGE_EDITOR'
+    FEATURE_FLAG_LOCALE_SELECTOR_V2 = 'FEATURE_FLAG_LOCALE_SELECTOR_V2'
 }
 
 export const enum DotConfigurationVariables {

core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.util.spec.ts

@@ -570,11 +570,18 @@ describe('DotEditContentCalendarFieldUtil - TDD Approach', () => {
             const todayInServerTz = getCurrentServerTime(SERVER_TIMEZONE_MOCKS.GULF);
             expect(result?.displayValue.getDate()).toBe(todayInServerTz.getDate());
 
-            // formValue (UTC) might be different day due to timezone conversion, allow ±2 days
-            const expectedFormDate = todayInServerTz.getDate();
-            const actualFormDate = result?.formValue.getDate();
-            expect(actualFormDate).toBeDefined();
-            expect(Math.abs(actualFormDate - expectedFormDate)).toBeLessThanOrEqual(2);
+            // formValue (UTC) might fall on a different calendar day due to timezone
+            // conversion; allow ±2 days. Compare the whole-day distance, not getDate()
+            // day-of-month subtraction — the latter wraps at month boundaries (e.g.
+            // Jun 30 vs Jul 1 would read as |30 - 1| = 29 instead of a 1-day difference).
+            const formValue = result?.formValue;
+            expect(formValue).toBeDefined();
+            const dayMs = 24 * 60 * 60 * 1000;
+            const dayAtMidnight = (date: Date) =>
+                new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+            const dayDistance =
+                Math.abs(dayAtMidnight(formValue!) - dayAtMidnight(todayInServerTz)) / dayMs;
+            expect(dayDistance).toBeLessThanOrEqual(2);
         });
 
         it('should handle "now" defaultValue correctly for DATE fields', () => {

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

@@ -48,6 +48,7 @@ import {
 } from './../../services/image-editor';
 import { DotFileFieldUploadService } from './../../services/upload-file/upload-file.service';
 import { FileFieldStore } from './../../store/file-field.store';
+import { parseFocalPoint } from './../../utils/focal-point.util';
 import { getUiMessage } from './../../utils/messages';
 import { DotFileFieldPreviewComponent } from './../dot-file-field-preview/dot-file-field-preview.component';
 import { DotFileFieldUiMessageComponent } from './../dot-file-field-ui-message/dot-file-field-ui-message.component';
@@ -104,10 +105,10 @@ export class DotFileFieldComponent
     readonly #legacyDojoImageEditorLauncher = inject(LegacyDojoImageEditorLauncher);
     /**
      * New Angular image editor launcher. Provided by the Angular edit-content shell
-     * ({@link EditContentShellComponent}) and gated behind the
-     * `FEATURE_FLAG_NEW_IMAGE_EDITOR` flag via its `isAvailable()`. Injected as
-     * `{ optional: true }`: when absent (e.g. the legacy web-component host) or its
-     * flag is off, `onEditImage()` falls back to the legacy launchers.
+     * ({@link EditContentShellComponent}); its `isAvailable()` is always true now that
+     * the new editor is GA in the new Edit Content. Injected as `{ optional: true }`:
+     * when absent (e.g. the legacy web-component host), `onEditImage()` falls back to
+     * the legacy launchers.
      */
     readonly #imageEditorLauncher = inject(IMAGE_EDITOR_LAUNCHER, { optional: true });
     /**
@@ -408,13 +409,16 @@ export class DotFileFieldComponent
                 : variable;
 
         // Prefer the new Angular image editor when its launcher is provided (Angular
-        // edit-content shell) and its feature flag is on. Otherwise fall back to the
-        // legacy editor: Dojo DOM events for the web-component bridge, dialog iframe
-        // elsewhere.
+        // edit-content shell). Otherwise fall back to the legacy editor: Dojo DOM events
+        // for the web-component bridge, dialog iframe elsewhere.
         const newLauncher = this.#imageEditorLauncher;
 
         if (newLauncher?.isAvailable()) {
             const metadata = this.#currentMetadata();
+            // Seed the editor with the asset's stored focal point (exposed on the binary
+            // metadata as an "x,y" string by DefaultTransformStrategy) so reopening restores
+            // the marker instead of resetting it to centre.
+            const focalPoint = parseFocalPoint(metadata?.focalPoint);
 
             this.#applyEditedImage(
                 newLauncher.open({
@@ -424,7 +428,8 @@ export class DotFileFieldComponent
                     fieldName: editorVariable,
                     byInode: !!inode,
                     fileName: this.$currentFileName() || undefined,
-                    mimeType: metadata?.contentType
+                    mimeType: metadata?.contentType,
+                    focalPoint
                 })
             );
 

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/focal-point.util.spec.ts

@@ -0,0 +1,25 @@
+import { parseFocalPoint } from './focal-point.util';
+
+describe('parseFocalPoint', () => {
+    it('parses an "x,y" focal point string into a point', () => {
+        expect(parseFocalPoint('0.88,0.31')).toEqual({ x: 0.88, y: 0.31 });
+    });
+
+    it('returns undefined for an unset/empty value', () => {
+        expect(parseFocalPoint(undefined)).toBeUndefined();
+        expect(parseFocalPoint(null)).toBeUndefined();
+        expect(parseFocalPoint('')).toBeUndefined();
+    });
+
+    it('treats the (0,0) "no focal point" sentinel as undefined', () => {
+        // The backend uses (0,0) to mean "no focal point" -> editor opens centred.
+        expect(parseFocalPoint('0,0')).toBeUndefined();
+    });
+
+    it('returns undefined for a malformed or single-value string', () => {
+        // "0.0" has no comma -> one token -> the y axis parses to NaN.
+        expect(parseFocalPoint('0.0')).toBeUndefined();
+        expect(parseFocalPoint('not-a-point')).toBeUndefined();
+        expect(parseFocalPoint('abc,xyz')).toBeUndefined();
+    });
+});

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/focal-point.util.ts

@@ -0,0 +1,32 @@
+import { NormalizedPoint } from '@dotcms/image-editor';
+
+/**
+ * Parses a focal point stored as an `"x,y"` string (the backend exposes it on the
+ * binary field metadata as a custom `focalPoint` attribute) into a normalized 0..1
+ * point for seeding the image editor.
+ *
+ * Returns `undefined` for an unset/empty value, the `(0,0)` "no focal point" sentinel,
+ * or a malformed/single-value string, so the editor opens centred instead of seeding a
+ * bogus marker.
+ *
+ * @param value - The raw `focalPoint` metadata string (e.g. `"0.88,0.31"`).
+ * @returns The parsed point, or `undefined` when there is no usable focal point.
+ */
+export function parseFocalPoint(value: string | null | undefined): NormalizedPoint | undefined {
+    if (!value) {
+        return undefined;
+    }
+
+    const [x, y] = value.split(',').map(Number);
+
+    if (!Number.isFinite(x) || !Number.isFinite(y)) {
+        return undefined;
+    }
+
+    // (0,0) is the backend's "no focal point" sentinel -> open centred.
+    if (x === 0 && y === 0) {
+        return undefined;
+    }
+
+    return { x, y };
+}

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

@@ -1,22 +1,17 @@
 import { expect } from '@jest/globals';
-import { createServiceFactory, mockProvider, SpectatorService } from '@ngneat/spectator/jest';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest';
+import { Subject } from 'rxjs';
 
 import { DialogService } from 'primeng/dynamicdialog';
 
-import { DotPropertiesService } from '@dotcms/data-access';
-import { DotCMSTempFile, FeaturedFlags } from '@dotcms/dotcms-models';
+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>;
-    // Drives the new-image-editor flag; `next()` flows through `toSignal` so the same
-    // service instance reflects on/off without re-creating it.
-    const featureFlag$ = new BehaviorSubject<boolean>(true);
-    const getFeatureFlag = jest.fn(() => featureFlag$);
 
     const params: ImageEditorOpenParams = {
         inode: 'inode-1',
@@ -26,28 +21,17 @@ describe('AngularImageEditorLauncher', () => {
 
     const createService = createServiceFactory({
         service: AngularImageEditorLauncher,
-        providers: [mockProvider(DotPropertiesService, { getFeatureFlag })],
         mocks: [DialogService]
     });
 
     beforeEach(() => {
-        // Default the flag ON so the open() tests below run the Angular path; the
-        // gating itself is covered by the dedicated tests.
-        featureFlag$.next(true);
         onClose = new Subject<DotCMSTempFile | undefined>();
         spectator = createService();
         spectator.inject(DialogService).open.mockReturnValue({ onClose });
     });
 
-    it('should be available when FEATURE_FLAG_NEW_IMAGE_EDITOR is on', () => {
+    it('should always be available (the new editor is the editor for the new Edit Content)', () => {
         expect(spectator.service.isAvailable()).toBe(true);
-        expect(getFeatureFlag).toHaveBeenCalledWith(FeaturedFlags.FEATURE_FLAG_NEW_IMAGE_EDITOR);
-    });
-
-    it('should NOT be available when the feature flag is off', () => {
-        featureFlag$.next(false);
-
-        expect(spectator.service.isAvailable()).toBe(false);
     });
 
     it('should open the DotImageEditorComponent with a headerless, closable dialog that owns Esc', () => {

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

@@ -1,12 +1,10 @@
 import { Observable, map, take } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
 
 import { DialogService } from 'primeng/dynamicdialog';
 
-import { DotPropertiesService } from '@dotcms/data-access';
-import { DotCMSTempFile, FeaturedFlags } from '@dotcms/dotcms-models';
+import { DotCMSTempFile } from '@dotcms/dotcms-models';
 import {
     DotImageEditorComponent,
     DotImageEditorLauncher,
@@ -16,24 +14,17 @@ import {
 /**
  * Launches the Angular `@dotcms/image-editor` modal through PrimeNG's `DialogService`.
  *
- * Gated behind the {@link FeaturedFlags.FEATURE_FLAG_NEW_IMAGE_EDITOR} feature flag:
- * `isAvailable()` resolves to the server-configured value, which ships as `false`
- * for rollback safety (mirroring the other new-editor flags), so the binary field
- * falls back to the legacy Dojo editor until an admin enables it.
+ * Provided by the new Edit Content shell, so the new image editor is used whenever this
+ * launcher is injected. The binary field falls back to the legacy Dojo editor only when
+ * no launcher is present (i.e. the field renders outside the new Edit Content).
  */
 @Injectable()
 export class AngularImageEditorLauncher implements DotImageEditorLauncher {
     readonly #dialogService = inject(DialogService);
-    readonly #propertiesService = inject(DotPropertiesService);
-
-    /** Resolved value of the new-image-editor feature flag (off until the server replies). */
-    readonly #enabled = toSignal(
-        this.#propertiesService.getFeatureFlag(FeaturedFlags.FEATURE_FLAG_NEW_IMAGE_EDITOR),
-        { initialValue: false }
-    );
 
+    /** Always available: the new image editor is the editor for the new Edit Content. */
     isAvailable(): boolean {
-        return this.#enabled();
+        return true;
     }
 
     /**

core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.ts

@@ -515,7 +515,7 @@ export class DotImageEditorCanvasComponent {
         };
     }
 
-    /** Lazily attaches a single ResizeObserver to the displayed image element. */
+    /** Lazily attaches a single ResizeObserver to the displayed image and its stage. */
     #observeDisplayImg(): void {
         const img = this.$displayImg()?.nativeElement;
 
@@ -525,6 +525,19 @@ export class DotImageEditorCanvasComponent {
 
         this.#resizeObserver = new ResizeObserver(() => this.#measureImageRect());
         this.#resizeObserver.observe(img);
+
+        // Also observe the stage. Toggling full-screen resizes the dialog, which
+        // re-centres the image within the stage WITHOUT changing the image's own size
+        // — a ResizeObserver on the image alone never reports that, leaving
+        // imageRect.x/y (img.offsetLeft/Top) stale and the focal/crop overlays
+        // mispositioned (notably on the full-screen -> windowed transition). The stage
+        // (the image's offsetParent) always resizes with the dialog, so observing it
+        // re-measures the image's offset box and keeps the overlays aligned.
+        const stage = this.$stage()?.nativeElement;
+
+        if (stage) {
+            this.#resizeObserver.observe(stage);
+        }
     }
 
     /**

core-web/libs/image-editor/src/lib/components/dot-image-editor-focal-overlay/dot-image-editor-focal-overlay.component.scss

@@ -38,11 +38,13 @@
         width: 6px;
         height: 6px;
         transform: translate(-50%, -50%);
-        background-color: var(--p-primary-color, #426bf0);
+        // Red target dot: high-contrast against arbitrary image content and the
+        // conventional colour for a focal-point marker (distinct from the UI primary).
+        background-color: var(--p-red-500, #ef4444);
         border-radius: 9999px;
     }
 
     &:focus-visible {
-        border-color: var(--p-primary-color, #426bf0);
+        border-color: var(--p-red-500, #ef4444);
     }
 }

core-web/libs/image-editor/src/lib/components/dot-image-editor-footer/dot-image-editor-footer.component.html

@@ -16,4 +16,11 @@
             <i class="material-symbols-outlined text-[1.25rem]">download</i>
         </ng-template>
     </p-button>
+
+    <p-button
+        [label]="'edit.content.image-editor.footer.save' | dm"
+        [attr.aria-label]="'edit.content.image-editor.footer.save.aria' | dm"
+        [loading]="store.isBusy() || store.saveStatus() === 'saving'"
+        (onClick)="onSave()"
+        data-testid="image-editor-save-btn" />
 </div>