feat(image-editor): add Angular image editor

[oidacra]

Summary

Replaces the legacy Dojo ImageEditor.js with a new standalone Angular library
@dotcms/image-editor, wired into Edit Content's binary field through an
IMAGE_EDITOR_LAUNCHER seam (Angular-only path).

The editor is a viewer of a dotCMS endpoint: the <img> src is a computed
/contentAsset/image/{id}/{field}/filter/... URL, so every control change rebuilds
the URL and the server renders the adjusted image — no client-side pixel work.

State is an events-based NgRx Signal Store (@ngrx/signals/events), composed of
one vertical signalStoreFeature per area of functionality (adjust, transform,
crop, focal point, file info, tools, history, asset, preview, download) — each
bundling its own reducers, selectors and effects.

Scope note

This PR delivers the editor shell, the server-side preview pipeline, the panels and
the crop/focal tools, plus Download. Saving the edited image back to the field
is intentionally deferred to #36067 — the editor currently previews and downloads.

What's included

• Library @dotcms/image-editor: root dialog, header, canvas (crossfade, zoom +
  pan, crop/focal overlays), side panels (Adjust / Transform / File info / History),
  footer (Cancel + Download).
• Server-side preview via the filter-URL builder (single source of truth) and Download.
• Command history: removable applied-edits list + undo/redo, keyboard shortcuts
  (Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z, Ctrl+Y), ignored while a text field is focused.
• Launcher seam in libs/edit-content (token + Angular launcher) and binary-field wiring.
• Canvas interactions: zoom with drag-to-pan, fit-to-screen, crop-to-current-view,
  focal-centered aspect crop.

Preview robustness

• Preview fetched as a complete, verified blob (local object URL), so a
  partially-generated server response can't paint a truncated frame; incomplete
  responses are detected and retried silently.
• decode() + natural-dimension gate before promoting a frame.

Code organization

• Constants in one image-editor.constants.ts; types/models in models/image-editor.models.ts.
• Store split into store/features/with-*.feature.ts + store-utils.ts; store.ts is a thin composition.

Testing

• nx lint image-editor / nx lint edit-content — clean
• nx test image-editor — 258 passing (per-feature unit specs + store-utils + dimensions.util + integration; store-feature branch coverage ~100%)
• nx test edit-content — 1961 passing (28 skipped)
• Verified live (local dotCMS, demo content): preview, crop, focal, zoom/pan, fit, download, undo/redo (incl. Cmd+Z), panel persistence.

Issues

• Closes [IMAGE EDITOR] Build DotImageEditorComponent modal shell and image-editor signalStore #36063 — modal shell + image-editor signalStore
• Closes [IMAGE EDITOR] Image editor server-side preview pipeline via /contentAsset/image filter URLs #36064 — server-side preview pipeline via /contentAsset/image filter URLs
• Closes [IMAGE EDITOR] Image editor panels: Adjust, Transform, Flip, Output dimensions, File info #36065 — panels (Adjust, Transform, Flip, Output dimensions, File info)
• Closes [IMAGE EDITOR] Image editor interactive crop tool and focal point picker with seeding #36066 — interactive crop tool + focal point picker with seeding
• Partially addresses [IMAGE EDITOR] Wire image editor Save, Download, and Cancel to FileFieldStore temp-file flow #36067 — Download and Cancel are wired; Save to the FileFieldStore temp-file flow is deferred to that issue
• Related [IMAGE EDITOR] Implement AngularImageEditorLauncher full-screen modal for new edit content #36062 — the AngularImageEditorLauncher modal is implemented, but true full-screen sizing is not working yet (follow-up there)

[claude]

Claude finished @oidacra's task in 1m 32s —— View job

---

Rollback Safety Analysis

• Read rollback-unsafe categories reference
• Get full PR diff
• Analyze diff against unsafe categories
• Apply appropriate label

---

Result: ✅ Safe to Roll Back

This PR introduces the new Angular image editor library (@dotcms/image-editor) gated behind a feature flag (FEATURE_FLAG_NEW_IMAGE_EDITOR=false by default). All changes were checked against every rollback-unsafe category:

Category	Finding
C-1 Structural Data Model Change	❌ No runonce tasks, no table/column changes
C-2 Elasticsearch Mapping Change	❌ No ES mapping or reindex changes
C-3 Content JSON Model Version Bump	❌ No CURRENT_MODEL_VERSION changes
C-4 DROP TABLE / DROP COLUMN	❌ No DDL drops
H-1 One-Way Data Migration	❌ No data transformations
H-2 RENAME TABLE / COLUMN	❌ No renames
H-3 PK Restructuring	❌ No PK changes
H-4 New Content Type Field Type	❌ No new field type registered in FieldTypeAPI
H-5 Binary Storage Provider Change	❌ No storage provider changes
H-6 DROP PROCEDURE/FUNCTION	❌ No stored procedure changes
H-7 NOT NULL column without default	❌ No DB schema changes at all
H-8 VTL Viewtool Contract Change	❌ No viewtool changes
M-1 Non-Broadening Column Type Change	❌ No column type changes
M-2 Push Publishing Bundle Format	❌ No Bundler/Handler changes
M-3 REST/GraphQL API Contract Change	❌ Only additive: new feature flag constant added to ConfigurationResource allowlist and FeatureFlagName interface — purely additive, no existing field renamed or removed
M-4 OSGi Plugin API Breakage	❌ No OSGi interface changes

What changed (backend):

• FeatureFlagName.java: New constant FEATURE_FLAG_NEW_IMAGE_EDITOR added (additive only)
• ConfigurationResource.java: New flag added to the feature flag allowlist (additive only)
• dotmarketing-config.properties: New flag defaulting to false (the legacy Dojo editor remains active until explicitly enabled)
• Language.properties: New i18n keys added (purely additive)
• All other changes are Angular/TypeScript frontend files in core-web/libs/image-editor/ and core-web/libs/edit-content/

The feature flag defaults to false, so rolling back to N-1 simply means the new editor is never shown — N-1 ignores the unknown flag value and continues using the legacy Dojo editor. No data has been written in a new format, no schema has changed, and no API contract has been broken.

Label applied: AI: Safe To Rollback

[github-actions]

🤖 Bedrock Review — deepseek.v3.2

[🟡 Medium] core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts:125 — #imageEditorLauncher is injected with { optional: true }, but the isAvailable() check on line 130 (if (!launcher?.isAvailable())) will throw a runtime error if launcher is null. The optional injection means launcher could be undefined, but isAvailable() is called on a potentially undefined object. Should be if (!launcher || !launcher.isAvailable()).

[🟡 Medium] core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts:130 — The fallback logic to the legacy Dojo editor is correct, but the openImageEditor call uses this.tempId which might be undefined when editing an existing contentlet (byInode: true). The legacy service might expect tempId only for new files. This could cause a bug in the fallback path. Ensure the parameters are valid for both new and existing assets.

[🟡 Medium] core-web/libs/edit-content/src/lib/fields/shared/image-editor-launcher/angular-image-editor.launcher.ts:35 — isAvailable() returns this.#enabled(). The toSignal call uses { initialValue: false }, so the feature flag defaults to false until the server responds. This is safe (defaults to disabled), but means the new editor won't be available until the flag is fetched. This is acceptable but should be noted as intentional.

[🟡 Medium] core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.ts:130 — The pendingSrc signal is set via an effect that subscribes to previewUrl$. If the preview URL changes rapidly, there's a risk of race conditions where an older preview might be promoted after a newer one. The effect uses switchMap which cancels previous requests, which is correct, but the pendingSrc update and image load event handling should be robust to out-of-order completions. The current logic with displayedUrl comparison seems adequate.

[🟡 Medium] core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.ts:454 — The component uses viewChild for displayImg and stage. The ResizeObserver is set up in an effect that depends on displayImg(). If the element reference changes (e.g., on image swap), the observer should be re-established. The current effect will re-run when displayImg changes, which is correct, but ensure cleanup of previous observer (it uses takeUntilDestroyed on the effect destroy ref, which will clean up on component destroy, but not on element change). Might need explicit unobserve in a cleanup function.

[🟡 Medium] core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.ts:200-210 — The onStagePointerDown method initiates panning. It uses setPointerCapture and listens to pointermove/pointerup on the window. This is fine, but there's no guard against multiple simultaneous pointer events (e.g., multitouch). Should ensure only one pan gesture is active at a time (check panning() signal). Currently panning is a boolean signal, but the event handlers could be triggered again while panning is true. Consider ignoring new pointerdown if panning() is already true.

[🟠 High] core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.ts:230 — The retry() method dispatches retryRequested. However, if the preview is in an error state, clicking retry should also reset the previewStatus to 'loading' or similar. The store likely handles this, but ensure the UI provides feedback (the loading spinner appears). The template shows spinner when previewStatus() === 'loading', which should be triggered by the store event.

[🟡 Medium] core-web/libs/image-editor/src/lib/components/dot-image-editor-address-bar/dot-image-editor-address-bar.component.ts:73 — #absoluteUrl() uses this.#document.location?.origin. If the document is not available (e.g., SSR), this could be undefined. The fallback to empty string is okay, but the resulting URL might be malformed (e.g., undefined/path). Should handle gracefully: if origin is falsy, return the relative URL as-is? The copy operation would then copy a relative path, which might be acceptable. However, the clipboard copy expects a full URL; consider throwing or showing a user-friendly error if origin is missing.

[🟡 Medium] core-web/libs/image-editor/src/lib/components/dot-image-editor-address-bar/dot-image-editor-address-bar.component.ts:50-65 — copyUrl() uses navigator.clipboard.writeText. This API may not be available in insecure contexts (HTTP without HTTPS) or if the user denies permission. The catch block shows an error toast, which is good. However, the error message is generic; could consider checking for DOMException and providing a more specific message (but i18n may limit this). Acceptable as is.

[🟡 Medium] core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.html:16 — The skeleton is shown when previewStatus() === 'idle' && !displayedUrl(). This is fine, but note that displayedUrl() could be a stale value from a previous edit session? The logic ensures skeleton only shows before first image loads. Acceptable.

[🟡 Medium] core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.html:35-45 — The pending image layer uses (error)="onPendingError()". If the pending image fails to load (e.g., 404), the error handler dispatches previewErrored. However, the pending image's src is an object URL from a blob; blob URLs shouldn't 404. The error would indicate the blob was invalid or corrupted. This is handled, but ensure the object URL is revoked after error to avoid memory leak. The pendingSrc effect likely revokes previous URL, but if error occurs before the next change, the URL might linger. Consider revoking in onPendingError.

[🟡 Medium] core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.html:100-115 — The footer band for focal tool shows aspect ratio buttons. The selectedAspect is a local signal initialized to first preset. Changing the aspect updates the focal overlay via the store? The applyFocalCrop() dispatches an event with the selected aspect. However, the focal overlay might need to update visually when aspect changes. The overlay likely listens to store state for aspect ratio. Ensure the store is updated when user selects a different aspect preset (currently only on button click). The selectedAspect.set(preset) updates the local signal but not the store. The focal overlay might rely on store state; need to dispatch a store event to update aspect ratio. Check DotImageEditorFocalOverlayComponent for input.

[🟡 Medium] core-web/libs/edit-content/src/lib/edit-content.shell.component.ts:12-25 — The DialogService is added to providers along with the IMAGE_EDITOR_LAUNCHER token. This scopes the new Angular image editor to the edit-content shell. However, note that DialogService is already provided in a higher module (likely PrimeNG module). Providing it again here creates a new instance scoped to this component and its children. This is intentional to avoid leaking into legacy paths, but could cause duplicate dialog instances if other parts of the app also provide it. Ensure there are no adverse side effects (e.g., dialogs from other components not working). Since it's a leaf component shell, likely safe.

[🟡 Medium] core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts:135 — The test sets up imageEditorLauncherMock.isAvailable.mockReturnValue(true). However, the mock is provided via { provide: IMAGE_EDITOR_LAUNCHER, useValue: imageEditorLauncherMock }. This is fine, but note that the mock's isAvailable is called in the component's onEditImage. The test suite covers both new and legacy paths. Good.

[🟡 Medium] core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts:304-306 — The test "should map asset identifiers from the contentlet when launching" checks that byInode: true is passed. However, the byInode parameter is derived from !!inode. If inode is present, byInode is true

---

_{Run: #27981924511 · tokens: in: 21192 · out: 2048 · total: 23240}