From aa549d0cd8d5c64ac95cdef2d41e9c978bbe8375 Mon Sep 17 00:00:00 2001
From: sidgaikwad <gaikwadsiddharth039@gmail.com>
Date: Fri, 4 Sep 2026 11:53:43 +0530
Subject: [PATCH 1/2] fix: only tear down an embed script tag we injected
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

loadScript deliberately cooperates with a page that loads embed.js itself
— it returns early when window.ImageEditor already exists, and reuses a
host-injected tag rather than duplicating it. resetLoader did not: it
removed whatever tag matched the URL and deleted window.ImageEditor
unconditionally.

On such a page a versioned-bundle failure inside one component removed a
DOM node we never created and deleted a global we do not own, breaking
every other consumer of the embed with no indication why.

Track the tags we inject in a WeakSet and gate resetLoader's teardown on
it. A tag that has provably failed (error event or reused-tag timeout) is
still removed either way — a dead tag is no use to the host either, and
leaving it would make every retry reuse it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/loadScript.ts       | 48 ++++++++++++++++++++++++++++++-----------
 test/loadScript.test.ts | 39 +++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/src/loadScript.ts b/src/loadScript.ts
index 8cceb77..c4aeb0b 100644
--- a/src/loadScript.ts
+++ b/src/loadScript.ts
@@ -15,6 +15,13 @@ interface TrackedLoad {
 // share a single <script> tag.
 const loads = new Map<string, TrackedLoad>();
 
+// The tags this module injected. Anything else matching the script URL was
+// put there by the host page, which may have other consumers of the embed:
+// a reset must not remove it, or delete the global it installed, from under
+// them. A tag that has provably failed is still removed either way — see
+// failWith.
+const ownedTags = new WeakSet<HTMLScriptElement>();
+
 const resolveUrl = (scriptUrl: string): string =>
   new URL(scriptUrl, document.baseURI).href;
 
@@ -54,15 +61,18 @@ export const loadScript = (
     const tag = existing ?? document.createElement('script');
     let timeout: ReturnType<typeof setTimeout> | undefined;
 
-    const failWith = (error: Error) => {
-      // A tag that fired `error` never fires again — evict the cache and
-      // remove the dead tag so a retry injects a fresh one.
+    const failWith = (error: Error, removeTag: boolean) => {
+      // A tag that fired `error` (or timed out) never fires again — evict
+      // the cache and remove the dead tag so a retry injects a fresh one,
+      // even when the host injected it: a failed tag is no use to anyone.
+      // A reset is different — the tag there may be perfectly alive — so it
+      // removes only what we own.
       if (timeout !== undefined) clearTimeout(timeout);
       loads.delete(scriptUrl);
-      tag.remove();
+      if (removeTag) tag.remove();
       reject(error);
     };
-    abort = failWith;
+    abort = (error: Error) => failWith(error, ownedTags.has(tag));
 
     tag.addEventListener(
       'load',
@@ -83,7 +93,8 @@ export const loadScript = (
         failWith(
           new Error(
             `Failed to load the image editor embed script: ${scriptUrl}`
-          )
+          ),
+          true
         );
       },
       { once: true }
@@ -97,11 +108,13 @@ export const loadScript = (
         failWith(
           new Error(
             `Timed out waiting for an existing embed script tag: ${scriptUrl}`
-          )
+          ),
+          true
         );
       }, REUSED_TAG_TIMEOUT_MS);
     } else {
       tag.src = scriptUrl;
+      ownedTags.add(tag);
       document.head.appendChild(tag);
     }
   });
@@ -115,14 +128,25 @@ export const loadScript = (
  * promise forever — including rejections — so after a bundle-load failure
  * the only way to retry is to reload embed.js with fresh module state.
  * Rejects any still-pending load for the URL (waiters fail fast through
- * their normal error paths instead of hanging on a removed tag), removes
- * the embed script tag, deletes window.ImageEditor, and evicts the cached
- * load; the next loadScript call starts from scratch.
+ * their normal error paths instead of hanging on a removed tag) and evicts
+ * the cached load; the next loadScript call starts from scratch.
+ *
+ * The script tag and window.ImageEditor are only torn down when we injected
+ * the tag ourselves. On a page that loaded embed.js itself the embed may be
+ * in active use by other consumers, and removing a working global out from
+ * under them would be far worse than not retrying.
  */
 export const resetLoader = (scriptUrl: string = defaultScriptUrl): void => {
+  // Captured before abort(), which may remove the tag itself.
+  const tag = findScriptTag(scriptUrl);
+  const ownedTag = tag && ownedTags.has(tag) ? tag : null;
+
   const tracked = loads.get(scriptUrl);
   loads.delete(scriptUrl);
   tracked?.abort(new Error(`The image editor loader was reset: ${scriptUrl}`));
-  findScriptTag(scriptUrl)?.remove();
-  delete window.ImageEditor;
+
+  if (ownedTag) {
+    ownedTag.remove();
+    delete window.ImageEditor;
+  }
 };
diff --git a/test/loadScript.test.ts b/test/loadScript.test.ts
index 90002b4..3789486 100644
--- a/test/loadScript.test.ts
+++ b/test/loadScript.test.ts
@@ -192,3 +192,42 @@ it('resetLoader removes the global, the tag, and the cached promise', async () =
   fire(scriptTags()[0], 'load');
   await retry;
 });
+
+it('resetLoader leaves a host-injected tag and its global alone', async () => {
+  // The host page loaded embed.js itself and other consumers may be using
+  // the global — tearing it down here would break them.
+  const hostTag = document.createElement('script');
+  hostTag.src = 'https://cdn.unlayer.com/image-editor/embed.js';
+  document.head.appendChild(hostTag);
+
+  const promise = loadScript();
+  const embed = mockEmbed();
+  window.ImageEditor = embed;
+  fire(hostTag, 'load');
+  await promise;
+
+  resetLoader();
+
+  expect(window.ImageEditor).toBe(embed);
+  expect(scriptTags()).toEqual([hostTag]);
+});
+
+it('resetLoader rejects waiters on a reused host tag without removing it', async () => {
+  const hostTag = document.createElement('script');
+  hostTag.src = 'https://cdn.unlayer.com/image-editor/embed.js';
+  document.head.appendChild(hostTag);
+
+  const pending = loadScript();
+  const rejection = expect(pending).rejects.toThrow(/loader was reset/);
+
+  resetLoader();
+  await rejection;
+
+  // Our cache is cleared, but the host's still-loading tag is untouched.
+  expect(scriptTags()).toEqual([hostTag]);
+});
+
+it('resetLoader is a no-op when nothing was ever loaded', () => {
+  expect(() => resetLoader()).not.toThrow();
+  expect(scriptTags()).toHaveLength(0);
+});

From 5bd8d3d4aa08be4b9205587f3be994fafa48369c Mon Sep 17 00:00:00 2001
From: sidgaikwad <gaikwadsiddharth039@gmail.com>
Date: Fri, 4 Sep 2026 23:07:47 +0530
Subject: [PATCH 2/2] docs: describe what resetLoader actually does

The JSDoc, the call-site comment and the README all justified the reset by
claiming embed.js memoizes a failed bundle load forever, so reloading it
was the only route back. That is not true of the current loader: it nulls
loadPromise in a catch specifically so a transient CDN blip does not kill
the editor for the page session.

So a remount recovers on its own, including on host-loaded pages where the
reset now deliberately leaves the tag and global alone. Describe the reset
as clearing the state we own, not as the mechanism recovery depends on.

No behaviour change.
---
 README.md           |  2 +-
 src/ImageEditor.tsx | 11 +++++++----
 src/loadScript.ts   | 16 +++++++++-------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index eafdcdb..97d74fd 100644
--- a/README.md
+++ b/README.md
@@ -91,7 +91,7 @@ const dataUrl = editorRef.current?.editor?.getImage();
 Two distinct channels:
 
 - **`onLoadError`** — the editor loaded fine, but the _image_ couldn't be loaded into the canvas (CORS, dead URL, decode error).
-- **`onError`** — the wrapper couldn't reach a working editor: the embed script failed to load, editor creation was rejected, or re-applying a changed `image` failed. After a CDN failure the wrapper automatically resets its loader state, so a later remount retries from scratch.
+- **`onError`** — the wrapper couldn't reach a working editor: the embed script failed to load, editor creation was rejected, or re-applying a changed `image` failed. A later remount retries from scratch after a CDN failure. The wrapper also clears its own loader state, but only tears down a script tag it injected itself — an embed the host page loaded is left intact for its other consumers.
 
 ## Tools
 
diff --git a/src/ImageEditor.tsx b/src/ImageEditor.tsx
index a01c9e8..84f3831 100644
--- a/src/ImageEditor.tsx
+++ b/src/ImageEditor.tsx
@@ -133,10 +133,13 @@ function ImageEditorInner(
         }
       })
       .catch((error) => {
-        // If the versioned bundle never evaluated, the CDN loader has
-        // cached a rejected promise it will return forever — hard-reset it
-        // so the next mount attempt can retry from scratch. When the impl
-        // global exists, the failure was a mount error; keep the loader.
+        // If the versioned bundle never evaluated, drop the loader state
+        // we own so the next mount starts from a fresh embed.js. This is
+        // not what makes recovery possible — embed.js nulls its own cached
+        // promise on failure — so on a host-loaded page resetLoader leaves
+        // the tag and global in place and only our cache is cleared. When
+        // the impl global exists the failure was a mount error, not a
+        // bundle-load one; keep the loader.
         if (!window.__ImageEditorImpl__) {
           resetLoader(scriptUrl);
         }
diff --git a/src/loadScript.ts b/src/loadScript.ts
index c4aeb0b..d1554ac 100644
--- a/src/loadScript.ts
+++ b/src/loadScript.ts
@@ -124,17 +124,19 @@ export const loadScript = (
 };
 
 /**
- * Hard-reset the embed loader. The CDN loader caches its versioned-bundle
- * promise forever — including rejections — so after a bundle-load failure
- * the only way to retry is to reload embed.js with fresh module state.
- * Rejects any still-pending load for the URL (waiters fail fast through
- * their normal error paths instead of hanging on a removed tag) and evicts
- * the cached load; the next loadScript call starts from scratch.
+ * Reset this module's loader state for a script URL. Rejects any
+ * still-pending load (waiters fail fast through their normal error paths
+ * instead of hanging on a removed tag) and evicts the cached load, so the
+ * next loadScript call starts from scratch.
  *
  * The script tag and window.ImageEditor are only torn down when we injected
  * the tag ourselves. On a page that loaded embed.js itself the embed may be
  * in active use by other consumers, and removing a working global out from
- * under them would be far worse than not retrying.
+ * under them is not ours to do.
+ *
+ * Recovery does not depend on any of this: embed.js nulls its own cached
+ * promise when a bundle load fails, so a later createEditor retries whether
+ * or not the tag was ours. This only clears the state we own.
  */
 export const resetLoader = (scriptUrl: string = defaultScriptUrl): void => {
   // Captured before abort(), which may remove the tag itself.