UVE: Unable to edit page when document.write re-executes inline scripts and throws 'already declared'

[rjvelazco]

Problem Statement

In the Universal Visual Editor (UVE), traditional (VTL) pages are rendered into the editor iframe via document.open() / document.write() / document.close(). The component writes the page content more than once per render:

• the reactive effect ($isTraditionalPageEffect) and the iframe (load) handler both call insertPageContent, and
• doc.close() itself re-fires the iframe load event, which routes straight back into insertPageContent.

Each re-write re-executes all of the page's inline <script> blocks in the same global scope. For customer pages whose inline scripts declare top-level const/let (e.g. let resizeTimer, const urlParams), the second/third write throws:

Uncaught SyntaxError: Identifier 'resizeTimer' has already been declared
Failed to execute 'write' on 'Document': Identifier 'urlParams' has already been declared

These declarations are perfectly valid and work fine on the live published page — they only collide in the editor because we write the same document repeatedly into a scope that already has them defined. The thrown error aborts the script run that the inline editor (TinyMCE) setup depends on, so inline editing never initializes and the page is not editable (window.dotUVE is defined, but tinymce.editors is empty and there are no contenteditable elements).

Impact: Customers with valid top-level const/let in VTL inline scripts cannot use inline editing in UVE. Discovered on a customer instance.

Browser & OS: Chromium-based browsers (reproduces wherever document.write re-entrancy occurs).

Steps to Reproduce

1. On a traditional (VTL) page, add an inline <script> that declares a top-level let or const, e.g. let resizeTimer; (no IIFE / module wrapping).
2. Open the page in the Universal Visual Editor in Edit mode.
3. Open the browser console.
4. Observe Uncaught SyntaxError: Identifier '…' has already been declared errors thrown from insertPageContent.
5. Try to edit content or doing inline editing.

Acceptance Criteria

• insertPageContent writes the iframe document once per unique render — re-entrant load events and the synthetic load fired by doc.close() do not trigger a destructive re-write of identical content.
• Genuine content changes (real-time canvas) still re-render correctly.
• Navigating to a different page (src changes) still re-renders, even if the rendered HTML is identical.
• Inline editing initializes correctly on VTL pages whose inline scripts declare valid top-level const/let.
• No "Identifier '…' has already been declared" errors appear in the console when editing such pages.
• Existing UVE iframe behavior (SEO data, inline-edit toggle, click/navigation handling) is unchanged, covered by unit tests.

dotCMS Version

Latest from main branch.

Links

• Freshdesk ticket #37857

[rjvelazco]

💡 Suggested fix (from Claude)

File: core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.ts

Root cause recap

insertPageContent runs more than once per render:

• the reactive effect ($isTraditionalPageEffect) and the iframe (load) handler both call it, and
• doc.close() re-fires the iframe load event, routing straight back into insertPageContent.

Each call does doc.open()/write()/close(), re-executing all of the page's inline scripts in the same global scope. Customer scripts with valid top-level let/const then collide on the 2nd/3rd write → "Identifier '…' has already been declared", which aborts the TinyMCE/inline-edit setup.

The fix: de-dupe destructive re-writes

Add a lastWrittenKey field, keyed on src + content, and only re-write when it actually changes.

// new field on the component
/**
 * Identifies the last content written into the iframe document, keyed by
 * `src` + rendered content. Used to skip redundant, destructive re-writes.
 */
private lastWrittenKey: string | null = null;

private insertPageContent(pageRender: string, enableInlineEdit: boolean): void {
    const iframeElement = this.iframe?.nativeElement;
    if (!iframeElement) {
        return;
    }

    const doc = iframeElement.contentDocument;
    if (!doc) {
        return;
    }

    const content = this.$isEmaLegacyScriptInjectionEnabled()
        ? addEditorPageScript(pageRender)
        : pageRender;

    // De-dupe destructive re-writes. The reactive effect and the iframe's
    // (load) handler can both fire for the same render, and doc.close()
    // itself re-fires the iframe load event — re-routing back into here.
    // Re-writing identical content re-executes the page's top-level
    // const/let declarations in the same global scope, throwing
    // "Identifier '…' has already been declared" and aborting inline-edit
    // (TinyMCE) setup. Only re-write when src or content actually changes;
    // real-time canvas edits change `content`, navigation changes `src`.
    const writeKey = `${this.src()}::${content}`;

    if (writeKey !== this.lastWrittenKey) {
        this.lastWrittenKey = writeKey;

        doc.open();
        doc.write(content);
        doc.close();
    }

    this.handleInlineScripts(enableInlineEdit);
}

Why this works

Trigger	Behavior with the guard
Re-entrant load (the synthetic load doc.close() fires)	same src + same content → write skipped → no re-execution, no redeclaration crash
Redundant effect run (signals unchanged)	same key → write skipped
Real-time canvas edit (pageRender changes)	content differs → re-writes as before ✅
Navigation to another page (src changes)	key differs even if HTML matches → re-writes as before ✅

The customer's let/const declarations are valid (they work fine on the live published page) — the crash only happened because we wrote the same document repeatedly into a scope that still had those identifiers. For traditional/VTL pages, real-time updates come as full server-rendered HTML and the iframe is fully reloaded ($iframeURL returns new String('')), so writing exactly once per unique render is the correct behavior — not a workaround.

handleInlineScripts still runs on every call (it tears down its prior click listener before re-subscribing, so it stays idempotent), preserving the inline-edit toggle behavior when only enableInlineEdit changes.

Notes

• This targets the right layer: the crash comes from re-running the customer's scripts, not ours. "Inject our script once" / "make dot-uve.js idempotent" wouldn't prevent the customer-script redeclaration, because the full document.write re-runs customer scripts regardless.
• Suggested follow-up (separate, lower priority): harden dot-uve.js (sdk-editor.ts) to be idempotent — guard registerUVEEvents/scrollHandler so re-running it can't double-bind listeners. Defense-in-depth, not required for this bug.

Disclaimer: AI-generated suggestion — review before merging.

[github-actions]

PRs linked to this issue

• fix(uve): prevent duplicate document.write re-executing inline scripts on VTL pages by @gortiz-dotcms