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

## Summary
Wires the new Angular image editor's **Save** to the temp-file flow and
completes
**focal-point persistence** for the new Edit Content.

On Save, the editor GETs the contentAsset filter URL it already builds
for preview, with
`binaryFieldId=<fieldVar>&_imageToolSaveFile=true` appended; the servlet
stages the filtered
render as a `DotCMSTempFile`, the dialog closes returning it, and the
field stages it (preview
refreshes; the temp id is sent as the field value on check-in — the
source binary is never
overwritten). A focal point is folded into the same request
(`/filter/FocalPoint/fp/x,y` +
`overwrite=true`) and committed via `copyMetadata`; the editor seeds the
marker from the asset's
stored focal on open and treats a focal-only change as dirty.

Closes #36067.

## What changed
**Image editor (`libs/image-editor`)** — new `withSave` feature +
`saveRequested/saveSucceeded/saveFailed`
events + `saveEditedImage` GET; `buildSaveUrl` reuses the preview filter
chain, appends the save
flags, and folds in the focal point (epsilon-compared against the seeded
baseline — recenter-to-clear
and untouched-seed both handled); the dialog closes with the temp on
success and stays open + surfaces
the error on failure; focal seeded on open from
`ImageEditorOpenParams.focalPoint`; `isDirty` widened to
detect a focal move (epsilon-tolerant); footer **Save** button (+ i18n)
shows a loading spinner while the
editor is busy applying a filter **or** saving.

**Binary field (`libs/edit-content`)** — `onEditImage` reads the asset's
stored focal
(`{field}MetaData.focalPoint`, via `parseFocalPoint`) and passes it to
the launcher so the marker
re-seeds on reopen; null-metadata guards (`handleTempFile`,
`getFileMetadata`) so the image-tool temp
(`metadata: null`) renders instead of crashing.

**Backend** — `BinaryExporterServlet` re-wraps the temp after copying
the rendered bytes so it carries
real metadata (`image`/`mimeType`/dimensions) — it was returning
`metadata:null/image:false/mimeType:unknown`,
which left the field showing a file icon — mirroring
`TempFileAPI.createTempFile`;
`DefaultTransformStrategy.addBinaries` exposes `focalPoint` on the
content REST read path (mirrors
`BinaryViewStrategy`) so the editor can re-seed.

## Acceptance criteria
- [x] Save builds the contentAsset filter URL + `binaryFieldId` +
`_imageToolSaveFile=true` and GETs it
- [x] Returned temp id used; dialog closes with the temp file; field
preview refreshes (on check-in)
- [x] Error → dialog stays open, error surfaced, field value unchanged
- [x] `binaryFieldId` is the dynamic field variable
- [x] Focal point folded into the save chain + committed; seeded on
open; focal-only change marks dirty
- [x] `focalPoint` exposed on the content read path
- [ ] Download / Cancel — verified, implemented in part 1 (#36236)
- [ ] Enterprise availability gate — #36058

## Test plan
Unit: `buildSaveUrl` (filters, focal seed-vs-centre, recenter-to-clear,
epsilon), `withSave` (status
transitions + the built Save URL), footer Save (click, loading spinner
on busy/saving), dialog
close-on-success / no-close-on-failure, focal seeding, `isDirty`
(epsilon), `parseFocalPoint`,
null-metadata guards, `DefaultTransformStrategy` focalPoint — **334
(image-editor) + 1980 (edit-content)
passing**, lint clean, backend compiles.

Manual (local, `FEATURE_FLAG_NEW_IMAGE_EDITOR=true`): open the editor on
a Binary field → apply a filter /
move the focal point → Save → the dialog closes; after **Publish** the
field shows the edited image;
reopen the editor → the focal marker is restored.

## Notes
- Branched off the in-flight part-1 branch (#36063, currently in the
merge queue), so until that merges the
  diff includes its commits — rebase onto `main` once #36063 lands.
- Out of scope (#36058): the new unified File field's Edit action +
`setPreviewFile` consumption and the
Enterprise availability gate. The committed-thumbnail "shows the old
image until Publish" behaviour is the
expected publish lifecycle (the field renders the committed binary), not
a bug.

---------

Co-authored-by: Adrian Molina <adrian.molina@dotcms.com>

Author: oidacra

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
                 })
             );