UVE Real-Time Canvas

[fmontes]

Proposed Changes

• change 1
• change 2

Checklist

• Tests
• Translations
• Security Implications Contemplated (add notes if applicable)

Additional Info

** any additional useful context or info **

Screenshots

Original	Updated
** original screenshot **	** updated screenshot **

[Copilot]

Pull request overview

This PR introduces a real-time canvas for the Universal Visual Editor (UVE) with zoom controls, a right sidebar for content editing, and comprehensive store refactoring. The changes establish a cleaner architecture with flat state structure, domain-prefixed properties, and improved separation of concerns.

Changes:

• Implements zoom functionality with controls and gesture support for the UVE canvas
• Adds a right sidebar with tabbed interface for content editing and style editor
• Refactors UVE store to use flat state structure with domain prefixes (uve*, page*, editor*, view*, workflow*)
• Introduces new presentational components following container/presentational pattern
• Removes deprecated store features and consolidates state management

Reviewed changes

Copilot reviewed 101 out of 130 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
withUVEToolbar.ts	File deleted - toolbar state moved to withView feature
withSave.ts	File deleted - save functionality consolidated into withPageApi
withClient.ts	File deleted - client configuration moved to withPage feature
dot-uve.store.ts	Complete refactoring with flat state structure and domain-prefixed properties
README.md	Added comprehensive architecture documentation with 200+ lines
models.ts	Removed deprecated interfaces (UVEToolbarProps, EditorProps, UnlockOptions) and updated palette tabs enum
shared/models.ts	Removed UnlockOptions interface and showBanner/showOverlay from ToggleLockOptions
mocks.ts	Updated page mock properties from isLocked/lockedByUser to locked/lockedBy/lockedByName
edit-ema-editor.component.scss	Added zoom canvas layout with grid system and right sidebar wrapper
edit-ema-editor.component.html	Complete template refactor with zoom controls, browser toolbar, and right sidebar tabs
dot-uve-zoom-controls component	New component for zoom in/out/reset controls
dot-uve-iframe component	New component extracted from editor with height reporting and traditional page support
dot-uve-contentlet-quick-edit component	New presentational component for inline contentlet editing with dynamic form generation
dot-uve-palette.component.ts	Refactored to use local signalState for tab management instead of global store
lib.routes.ts	Removed DotEditPageResolver and DotPageStateService, added UVEStore and dependencies as providers

Comments suppressed due to low confidence (1)

core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts:1

• The comment mentions a circular dependency between withWorkflow and withPageApi but doesn't provide a clear reference to where this is documented or how to resolve it safely. Consider adding a reference to related documentation or tracking issue for future resolution.

import { signalStore, withFeature, withMethods, withState } from '@ngrx/signals';

[Copilot]

The comment on line 28 should be updated to reflect that currentTab is now managed as local state using signalState in DotUvePaletteComponent, rather than being removed entirely. The current wording might suggest the feature was deleted rather than relocated.

Suggested change

	// currentTab removed - now managed locally in DotUvePaletteComponent
	// currentTab is now managed as local state via signalState in DotUvePaletteComponent

[Copilot]

The enum values for STYLE_EDITOR (4) and LAYERS (3) are out of order. For maintainability and clarity, enum values should be sequential. Consider reordering to have LAYERS = 3 followed by STYLE_EDITOR = 4, or renumbering to maintain sequential order.

Suggested change

	STYLE_EDITOR = 4,
	LAYERS = 3
	LAYERS = 3,
	STYLE_EDITOR = 4

[Copilot]

The ToggleLockOptions interface is missing documentation for the lockedBy, canLock, and isLockedByCurrentUser properties. Adding JSDoc comments would improve code maintainability and developer experience.

[Copilot]

The magic number 3 represents the height in pixels for the drop indicator. This should be extracted as a named constant (e.g., DROP_INDICATOR_HEIGHT_PX = 3) to improve code readability and maintainability.

[Copilot]

The null check added for lang on lines 38-41 is a good defensive programming practice. However, similar null safety should also be verified in the ngAfterViewInit and onChange methods to ensure consistency across the component lifecycle.

[Copilot]

The magic string 'default' is used to check the device inode. This should be extracted as a named constant (e.g., DEFAULT_DEVICE_INODE = 'default') to improve maintainability and prevent typos in future comparisons.

[Copilot]

The effect rebuilds the form on every data() change. Consider adding a check to compare the current contentlet identifier with the previous one to avoid unnecessary form rebuilds when only non-form-related data changes.

Suggested change

	protected readonly DotCMSClazzes = DotCMSClazzes;
	constructor() {
	// Build form when data changes
	effect(() => {
	const { fields, contentlet } = this.data();
	if (!fields || fields.length === 0) {
	this.contentletForm.set(null);
	return;
	}
	private readonly previousContentletInode = signal<string | null>(null);
	protected readonly DotCMSClazzes = DotCMSClazzes;
	constructor() {
	// Build form when data changes, but avoid unnecessary rebuilds
	effect(() => {
	const { fields, contentlet } = this.data();
	const currentInode = contentlet?.inode ?? null;
	const previousInode = this.previousContentletInode();
	if (!fields || fields.length === 0 || !contentlet) {
	this.contentletForm.set(null);
	this.previousContentletInode.set(null);
	return;
	}
	// If the contentlet identifier hasn't changed and a form already exists,
	// skip rebuilding the form.
	if (previousInode === currentInode && this.contentletForm()) {
	return;
	}
	this.previousContentletInode.set(currentInode);

[Copilot]

The TODO comment on line 85 indicates missing translation for button labels. This should be tracked and resolved to maintain consistency with the rest of the application's i18n implementation.

Suggested change

	<!-- TODO: Needs to translate the label -->
	<p-button
	type="button"
	label="Cancel"
	[outlined]="true"
	(click)="handleCancel()"
	[disabled]="loading()"></p-button>
	<p-button
	type="submit"
	label="Save"
	<p-button
	type="button"
	[label]="'dot.common.cancel' | dm"
	[outlined]="true"
	(click)="handleCancel()"
	[disabled]="loading()"></p-button>
	<p-button
	type="submit"
	[label]="'dot.common.save' | dm"

[Copilot]

The method name maybeHandleIframeHeightMessage uses "maybe" which is ambiguous. Consider renaming to tryHandleIframeHeightMessage or handleIframeHeightMessageIfValid to better convey that this is a conditional handler that returns success status.

[Copilot]

The type guard isQuickEditSupportedField casts clazz to QuickEditFieldClass before checking inclusion. This defeats the purpose of the type guard. The cast should be removed and the return type should properly narrow the type based on the runtime check.

[fmontes]

I need to test and review this.

[fmontes]

This comment is not needed.

[fmontes]

This needs permissions, what about if the user don't have permissions to edit a piece of content? how that works right now? however it works we need to do the same here.

[fmontes]

Also how do we handle required field here?

[fmontes]

I don't like an architecture where a form component receives a "loading" input.

[fmontes]

Why do we need two here? we might need signal state or something.

[fmontes]

Needs to review this.

[fmontes]

delete this.

[fmontes]

Delete this.

[fmontes]

Oops, needs to fix this.

[fmontes]

This needs to go to the SDK.