chore(style-editor): Implement optimistic updates for real time headless rendering

[KevinDavilaDotCMS]

style.editor.mechanis.mov

[Copilot]

Pull request overview

This PR implements optimistic updates for real-time headless rendering in the style editor. The implementation adds immediate visual feedback when users modify styles by updating the iframe instantly while debouncing the actual API save calls. A time machine feature provides history tracking and automatic rollback capabilities when save operations fail.

Key Changes:

• Time machine feature for undo/rollback with deep cloning support for state snapshots
• New iframe messenger service centralizing postMessage communication
• Optimistic update pattern with automatic rollback on API failure
• Form builder service extracting reactive form creation logic

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
public.ts	Adds styleProperties field to DotCMSBasicContentlet interface
withTimeMachine.ts	New time machine feature providing history tracking, undo/redo, and state navigation
withTimeMachine.spec.ts	Comprehensive tests for time machine functionality
withLoad.ts	Adds history tracking on page load
withEditor.ts	Updates type signatures from ContentletPayload to ActionPayload
withEditor.spec.ts	Updates test mocks to match new ActionPayload structure
withSave.ts	Adds saveStyleEditor method with optimistic update rollback on failure
models.ts	Adds StyleEditorProperties type and SaveStylePropertiesPayload interface
withClient.ts	Integrates time machine for graphqlResponse with optimistic update methods
uve-iframe-messenger.service.ts	New service centralizing iframe communication
uve-iframe-messenger.service.spec.ts	Tests for iframe messenger service
dot-page-api.service.ts	Adds saveStyleProperties API method
dot-page-api.service.spec.ts	Tests for saveStyleProperties endpoint
edit-ema-editor.component.ts	Refactors to use iframe messenger service throughout
style-editor-graphql.utils.ts	Utilities for updating/extracting style properties from GraphQL responses
style-editor-form-builder.service.ts	Service for building reactive forms from schemas
dot-uve-style-editor-form.component.ts	Implements optimistic updates with immediate iframe sync and debounced saves
dot-uve-style-editor-form.component.spec.ts	Updates tests with mocked dependencies
dot-uve-style-editor-form.component.scss	Adds form actions styling
uve-style-editor-field-input.component.spec.ts	Adds jest-dom import
dot-uve-contentlet-tools.component.ts	Updates to emit ActionPayload instead of ContentletPayload
dot-uve-contentlet-tools.component.spec.ts	Updates test expectations for ActionPayload
dot-uve-contentlet-tools.component.html	Calls new setSelectedContent method

[rjvelazco]

Can we use a LinkedSignal or a signalMethod?

[rjvelazco]

Just a comment as a reminder

[rjvelazco]

linkedSignal/signalMethod?

[KevinDavilaDotCMS]

Do you mean previousIndex?

I think no, we need as a local variable to compare with the index on the store

[rjvelazco]

I think we can do something like:

const $undoChange = linkedSignal({
    source: this.#uveStore.currentIndex,
    computed: (next, prev) => {
        return prev >= 0 && next < prev;
    },
});

const handleRollback = signalMethod(shouldRollback => {
    if (shouldRollback) {
        this.#restoreFormFromRollback();
    }
});

// Constructor
handleRollback(this.$undoChange);

[rjvelazco]

YOU ARE THE MAN!

[KevinDavilaDotCMS]

Closed in favor of: #34208