The feature that passed every test but never left the tab

TLDR

Multi-surface applications (e.g., visual WYSIWYG editor, raw HTML editor, Monaco diff view) that synchronize state by listening to native browser input events fail to catch custom JavaScript DOM mutations. Native input events fire for user typing and document.execCommand() calls, but do not fire for direct DOM modifications (appendChild, Range.insertNode()). Custom structural editing features must invoke an explicit state synchronization function upon completion.

Editing Strategy	Browser input Event Fired	Multi-Surface Sync Status	Solution
User Typing / execCommand	Yes	Synced automatically	Standard input listener
Direct DOM Manipulation	No (Silent DOM mutation)	Out of sync (State stays in active tab)	Explicit syncState() trigger

---

Technical defect analysis

Toolbar functions (e.g., column splitting, callout box insertions, definition list generation) performed direct DOM manipulations:

// DEFECTIVE IMPLEMENTATION: Direct DOM mutation fires NO input event!
export function insertCalloutBox(range, text) {
  const callout = document.createElement('div');
  callout.className = 'callout-box';
  callout.textContent = text;
range.insertNode(callout); // DOM mutates visually in active tab, BUT no 'input' event fires!   // State synchronization layer is NEVER triggered! }

Because direct DOM methods (appendChild, insertNode) do not trigger browser input events, changes remained visible inside the active WYSIWYG tab while the underlying canonical state held outdated HTML. Switching to raw HTML or Monaco Diff tabs revealed un-updated content.

---

Remediation: explicit state synchronization triggers

Create a central synchronization trigger and invoke it explicitly at the completion of all custom DOM mutation operations:

// Central synchronization trigger
export function triggerStateSync(surfaceElement) {
  if (!surfaceElement) return;
  const updatedHtml = surfaceElement.innerHTML;
// Push updated HTML content to canonical state store & active sibling surfaces   stateStore.updateContent(updatedHtml, { originSurface: surfaceElement.id }); }
// Custom structural editing function with explicit sync trigger export function insertCalloutBox(range, text, primarySurfaceEl) {   const callout = document.createElement('div');   callout.className = 'callout-box';   callout.textContent = text;
range.insertNode(callout);
// EXPLICIT SYNC: Notify sync engine of non-event-firing DOM mutations   triggerStateSync(primarySurfaceEl); }

Rule of thumb: Invoke an explicit state synchronization trigger whenever modifying the DOM via direct Node or Range APIs in multi-surface editors.