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

KevinDavilaDotCMS · 2025-12-30T01:34:08Z

style.editor.mechanis.mov

…chine functionality and code cleanup - Added time machine capabilities to manage state history for optimistic updates in the style editor. - Cleaned up code formatting and ensured consistent use of semicolons and newlines across various files. These changes improve the maintainability and functionality of the style editor, allowing for better state management and user experience.

…gement - Refactored the style editor form component to utilize a dedicated form builder service, enhancing form creation and management. - Removed unused imports and cleaned up code for better readability. - Updated methods for extracting and updating style properties to streamline functionality and improve performance. - Ensured consistent handling of form values during rollback operations. These changes enhance the maintainability and efficiency of the style editor, providing a more robust user experience.

…nger import - Removed the test button from the edit-ema editor component to streamline the UI. - Updated the import path for the UveIframeMessengerService to reflect its new location. - Cleaned up console log statements in the contentlet tools component for better code clarity. - Adjusted style properties handling in the GraphQL utility functions for consistency. These changes enhance the maintainability of the code and improve the overall user experience in the edit-ema editor.

- Removed unused imports from the edit-ema editor component and style editor form builder service for improved clarity. - Updated import paths for consistency across components, ensuring better maintainability. - Streamlined the GraphQL utility functions by adjusting import statements, enhancing code readability. These changes contribute to a cleaner codebase and facilitate easier future modifications.

…tyle-editor-for-real-time-headless-rendering

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

Copilot · 2025-12-31T19:54:32Z

.../dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

+        // Debounced subscription: Save to API
+        formValueChanges$
+            .pipe(
+                debounceTime(3000),


The debounce time is hardcoded to 3000ms (3 seconds). Consider extracting this as a configurable constant at the class or module level to make it easier to adjust based on testing and user feedback. For example, defining a constant like STYLE_SAVE_DEBOUNCE_MS = 3000 would improve maintainability.

Copilot · 2025-12-31T19:54:33Z

.../dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

+                distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
+            )
+            .subscribe((formValues) => {
+                this.#updateIframeImmediately(formValues);
+            });
+
+        // Debounced subscription: Save to API
+        formValueChanges$
+            .pipe(
+                debounceTime(3000),
+                distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))


Using JSON.stringify for deep equality comparison can be inefficient and unreliable (object key ordering issues). Consider using a proper deep equality function from a utility library or the store's built-in comparison. Additionally, the same comparison is performed twice in two different subscription chains - consider extracting this logic to avoid duplication.

Copilot · 2025-12-31T19:54:33Z

...uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.spec.ts

-        imports: [AccordionModule, ButtonModule]
+        imports: [AccordionModule, ButtonModule],
+        providers: [
+            // mockProvider(UVEStore),


The commented-out code // mockProvider(UVEStore), should be removed. If the UVEStore mock provider is not needed, it should be deleted rather than left commented. Commented-out code reduces code clarity and maintainability.

Suggested change

// mockProvider(UVEStore),

Copilot · 2025-12-31T19:54:33Z

core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/save/withSave.ts

+                                    error: (error) => {
+                                        console.error('Error saving style properties:', error);
+
+                                        // Rollback the optimistic update
+                                        const rolledBack = store.rollbackGraphqlResponse();
+
+                                        if (!rolledBack) {
+                                            console.error(
+                                                'Failed to rollback optimistic update - no history available'
+                                            );
+
+                                            return;
+                                        }
+
+                                        // Update iframe with rolled back state
+                                        const rolledBackResponse = store.$customGraphqlResponse();
+                                        if (rolledBackResponse) {
+                                            iframeMessenger.sendPageData(rolledBackResponse);
+                                        }
+                                        console.warn(
+                                            '[TEST] Rolled back optimistic style update due to save failure'
+                                        );
+                                    }


The error handler in the tapResponse only logs to console but doesn't update the UI state or show any user-facing error message. When a style save fails and rollback occurs, the user should be notified through the UI (e.g., via a toast message) so they understand their changes weren't persisted. Consider adding a user-facing error notification using the MessageService or similar.

Copilot · 2025-12-31T19:54:34Z

core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.spec.ts

+                pageId: 'test-page-123',
+                containerIdentifier: 'container-id-456',
+                containerUUID: 'container-uuid-789',
+                contentledIdentifier: 'contentlet-id-abc',


There's a spelling error in the property name. The property is named "contentledIdentifier" but should be "contentletIdentifier" (missing 't'). This matches the typo in the interface definition.

Suggested change

contentledIdentifier: 'contentlet-id-abc',

contentletIdentifier: 'contentlet-id-abc',

Copilot · 2025-12-31T19:54:35Z

.../dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

    $reloadSchemaEffect = effect(() => {
-        const schema = this.$schema();
+        // This allow to preserve the current value on the form when the schema is reloaded.
+        // TODO: Remove untracked when we have the styleProperties in PageAPI response, also ensure that the form is rebuilt correctly.
+        const schema = untracked(() => this.$schema());
        if (schema) {
            this.#buildForm(schema);
+            this.#listenToFormChanges();
        }


The TODO comment indicates that the untracked wrapper and this special handling should be removed once styleProperties are included in the PageAPI response. However, the corresponding test on line 232 is skipped (xdescribe) but the actual functionality in the component still runs. This creates a mismatch where untested code is active in production. Consider either enabling the test with the current behavior or adding a different test that validates the current untracked behavior.

Copilot · 2025-12-31T19:54:35Z

core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/load/withLoad.ts

+                                            store.addHistory({ pageAsset });
+


The history is being added to the store in withLoad.ts, but the pageAsset data doesn't match the type expected by the time machine. The time machine in withClient is configured for ClientConfigState['graphqlResponse'] type, but here you're adding pageAsset which is of type DotCMSPageAsset. This type mismatch could cause issues. The addHistory call should be removed from here or the correct type should be used - likely the graphqlResponse should be added instead of pageAsset.

Suggested change

store.addHistory({ pageAsset });

Copilot · 2025-12-31T19:54:35Z

core-web/libs/portlets/edit-ema/portlet/src/lib/shared/models.ts

+    pageId: string;
+    containerIdentifier: string;
+    containerUUID: string;
+    contentledIdentifier: string;


There's a spelling error in the parameter name. The parameter is named "contentledIdentifier" but should be "contentletIdentifier" (missing 't'). This typo appears in both the interface definition and JSDoc.

Suggested change

contentledIdentifier: string;

contentletIdentifier: string;

Copilot · 2025-12-31T19:54:36Z

core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts

+     */
+    saveStyleProperties({
+        containerIdentifier,
+        contentledIdentifier,


There's a spelling error in the parameter name. The parameter is named "contentledIdentifier" but should be "contentletIdentifier" (missing 't'). This typo is also used in the JSDoc comment on line 98.

Copilot · 2025-12-31T19:54:36Z

.../dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

+        // Use the store's saveStyleEditor method which handles API call and rollback on failure
+        this.#uveStore.saveStyleEditor({
+            containerIdentifier: activeContentlet.container.identifier,
+            contentledIdentifier: activeContentlet.contentlet.identifier,


There's a spelling error in the variable name. The variable is named "contentledIdentifier" but should be "contentletIdentifier" (missing 't'). This typo propagates throughout the payload construction.

Suggested change

contentledIdentifier: activeContentlet.contentlet.identifier,

contentletIdentifier: activeContentlet.contentlet.identifier,

rjvelazco · 2026-01-02T15:41:59Z

.../dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

+        this.$previousIndex.set(currentIndex);
+    });
+
    $reloadSchemaEffect = effect(() => {


Can we use a LinkedSignal or a signalMethod?

rjvelazco · 2026-01-02T18:31:51Z

...uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.spec.ts


-    describe('schema changes', () => {
+    // TODO: Remove skip when we have the styleProperties in PageAPI response and remove the untracked in $reloadSchemaEffect.
+    xdescribe('schema changes', () => {


Just a comment as a reminder

rjvelazco · 2026-01-02T18:32:54Z

.../dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

+    readonly STYLE_EDITOR_FIELD_TYPES = STYLE_EDITOR_FIELD_TYPES;
+    readonly $previousIndex = signal(-1);
+
+    readonly #rollbackDetectionEffect = effect(() => {


linkedSignal/signalMethod?

rjvelazco · 2026-01-02T18:37:05Z

.../dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

+        formValueChanges$
+            .pipe(
+                distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
+            )
+            .subscribe((formValues) => {
+                this.#updateIframeImmediately(formValues);
+            });
+
+        // Debounced subscription: Save to API
+        formValueChanges$
+            .pipe(
+                debounceTime(3000),
+                distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
+            )
+            .subscribe((formValues) => {
+                this.#saveStyleProperties(formValues);
+            });


Since the operators are executed sequentially, you can do this:

Suggested change

formValueChanges$

.pipe(

distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))

)

.subscribe((formValues) => {

this.#updateIframeImmediately(formValues);

});

// Debounced subscription: Save to API

formValueChanges$

.pipe(

debounceTime(3000),

distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))

)

.subscribe((formValues) => {

this.#saveStyleProperties(formValues);

});

formValueChanges$

.pipe(

distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)),

tap((formValues) => this.#updateIframeImmediately(formValues)),

debounceTime(3000),

)

.subscribe((formValues) => this.#saveStyleProperties(formValues));

rjvelazco · 2026-01-02T18:38:27Z

.../dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

+        const activeContentlet = this.#uveStore.activeContentlet();
+        const customGraphqlResponse = this.#uveStore.$customGraphqlResponse();
+
+        if (!activeContentlet || !customGraphqlResponse) {


Why are we checking the customGraphqlResponse?

rjvelazco · 2026-01-02T18:42:25Z

.../portlets/edit-ema/portlet/src/lib/services/iframe-messenger/uve-iframe-messenger.service.ts

+@Injectable({
+    providedIn: 'root'
+})
+export class UveIframeMessengerService {


This is cool!

I think next step should be create an NgEventHandler service to reduce the component load due the handleNgEvent function

rjvelazco · 2026-01-02T18:43:30Z

core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/timeMachine/withTimeMachine.ts

+ * );
+ * ```
+ */
+export function withTimeMachine<T>(options?: TimeMachineOptions) {


YOU ARE THE MAN!

kevindaviladev added 2 commits December 29, 2025 17:13

WIP. Need to commit to change to other branch.

d6e2d50

KevinDavilaDotCMS linked an issue Dec 30, 2025 that may be closed by this pull request

[TASK] Implement Optimistic Updates in Style Editor for Real-Time Headless Rendering #34085

Open

5 tasks

github-actions bot mentioned this pull request Dec 30, 2025

[TASK] Implement Optimistic Updates in Style Editor for Real-Time Headless Rendering #34085

Open

5 tasks

kevindaviladev added 5 commits December 30, 2025 01:45

Added jsdoc

3dc6716

Merge branch 'main' into 34085-task-implement-optimistic-updates-in-s…

3ea1ebd

…tyle-editor-for-real-time-headless-rendering

KevinDavilaDotCMS changed the title ~~34085 task implement optimistic updates in style editor for real time headless rendering~~ chore(style-editor): Implement optimistic updates for real time headless rendering Dec 31, 2025

KevinDavilaDotCMS marked this pull request as ready for review December 31, 2025 03:08

KevinDavilaDotCMS requested review from adrianjm-dotCMS, dario-daza, fmontes, hmoreras, nicobytes, oidacra, rjvelazco and zJaaal December 31, 2025 18:04

dario-daza approved these changes Dec 31, 2025

View reviewed changes

nicobytes requested a review from Copilot December 31, 2025 19:44

Merge branch 'main' into 34085-task-implement-optimistic-updates-in-s…

8e617c1

…tyle-editor-for-real-time-headless-rendering

Copilot started reviewing on behalf of nicobytes December 31, 2025 19:44 View session

Copilot AI reviewed Dec 31, 2025

View reviewed changes

rjvelazco approved these changes Jan 2, 2026

View reviewed changes

	contentledIdentifier: 'contentlet-id-abc',
	contentletIdentifier: 'contentlet-id-abc',

	contentledIdentifier: activeContentlet.contentlet.identifier,
	contentletIdentifier: activeContentlet.contentlet.identifier,

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

Are you sure you want to change the base?

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

Conversation

KevinDavilaDotCMS commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

rjvelazco Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

rjvelazco Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

rjvelazco Jan 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rjvelazco Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

rjvelazco Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

rjvelazco Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

rjvelazco Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

rjvelazco Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

KevinDavilaDotCMS commented Dec 30, 2025 •

edited

Loading

rjvelazco Jan 2, 2026 •

edited

Loading