Merge pull request #7290 from hotosm/fix/id-editor-sandbox-editor-global-bleed

Fix cross-session state bleed between OSM iD editor and Sandbox editor

Author: ramyaragupathy

frontend/src/components/editor.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { gpx } from '@tmcw/togeojson';
@@ -7,6 +7,19 @@ import '@openstreetmap/id/dist/iD.css';
 
 import { OSM_CLIENT_ID, OSM_REDIRECT_URI, OSM_SERVER_URL } from '../config';
 import messages from './messages';
+import {
+  registerIdEditorStylesheet,
+  activateIdEditorStylesheet,
+} from '../utils/idEditorStylesheets';
+
+// @openstreetmap/id has no real ESM/CJS exports — it only assigns itself to
+// window.iD as a side effect on import. Capture it here, right after the
+// import above forces that assignment, so this module keeps its own private
+// reference instead of the shared global, which @osm-sandbox/sandbox-id
+// (imported by sandboxEditor.js) later overwrites.
+const officialID = window.iD;
+
+registerIdEditorStylesheet('official');
 
 export default function Editor({ setDisable, comment, presets, imagery, gpxUrl, extraIdParams }) {
   const dispatch = useDispatch();
@@ -19,13 +32,21 @@ export default function Editor({ setDisable, comment, presets, imagery, gpxUrl,
   const customSource =
     iDContext && iDContext.background() && iDContext.background().findSource('custom');
 
+  // Only one of the OSM iD editor / Sandbox editor is ever mounted at a
+  // time, but both of their stylesheets stay loaded for the whole page
+  // session once visited. Disable the other one's so its rules can't leak
+  // into this editor via their shared ".ideditor" root class.
+  useLayoutEffect(() => {
+    activateIdEditorStylesheet('official');
+  }, []);
+
   useEffect(() => {
     if (!customImageryIsSet && imagery && customSource) {
       if (imagery.startsWith('http')) {
         iDContext.background().baseLayerSource(customSource.template(imagery));
         setCustomImageryIsSet(true);
         // this line is needed to update the value on the custom background dialog
-        window.iD.prefs('background-custom-template', imagery);
+        officialID.prefs('background-custom-template', imagery);
       } else {
         const imagerySource = iDContext.background().findSource(imagery);
         if (imagerySource) {
@@ -52,7 +73,7 @@ export default function Editor({ setDisable, comment, presets, imagery, gpxUrl,
       const offsetStr = params.get('offset'); // "10,-10"
       if (!offsetStr) return;
       const offsetInMeters = offsetStr.split(',').map(Number); // [10, -10]
-      const offset = window.iD.geoMetersToOffset(offsetInMeters);
+      const offset = officialID.geoMetersToOffset(offsetInMeters);
       iDContext.background().offset(offset);
     } else {
       // reset offset if params not present
@@ -66,13 +87,13 @@ export default function Editor({ setDisable, comment, presets, imagery, gpxUrl,
       if (iDContext === null) {
         // we need to keep iD context on redux store because iD works better if
         // the context is not restarted while running in the same browser session
-        dispatch({ type: 'SET_EDITOR', context: window.iD.coreContext() });
+        dispatch({ type: 'SET_EDITOR', context: officialID.coreContext() });
       }
     }
   }, [windowInit, iDContext, dispatch]);
 
   // Reset context on unmount so the sandbox editor always gets a fresh context
-  // from its own window.iD (sandbox-id), preventing cross-editor context bleed.
+  // from its own iD module (sandbox-id), preventing cross-editor context bleed.
   useEffect(() => {
     return () => {
       dispatch({ type: 'SET_EDITOR', context: null });
@@ -90,12 +111,12 @@ export default function Editor({ setDisable, comment, presets, imagery, gpxUrl,
       // if presets is not a populated list we need to set it as null
       try {
         if (presets.length) {
-          window.iD.presetManager.addablePresetIDs(presets);
+          officialID.presetManager.addablePresetIDs(presets);
         } else {
-          window.iD.presetManager.addablePresetIDs(null);
+          officialID.presetManager.addablePresetIDs(null);
         }
       } catch (e) {
-        window.iD.presetManager.addablePresetIDs(null);
+        officialID.presetManager.addablePresetIDs(null);
       }
       // setup the context
       iDContext

frontend/src/components/sandboxEditor.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { useIntl } from 'react-intl';
@@ -15,6 +15,19 @@ import {
 import { useSandboxOAuthCallback } from '../hooks/UseSandboxOAuthCallback';
 import { getValidTokenOrInitiateAuth, fetchSandboxLicense } from '../utils/sandboxUtils';
 import { useOsmFeaturesQuery } from '../api/projects';
+import {
+  registerIdEditorStylesheet,
+  activateIdEditorStylesheet,
+} from '../utils/idEditorStylesheets';
+
+// @osm-sandbox/sandbox-id has no real ESM/CJS exports — it only assigns
+// itself to window.iD as a side effect on import. Capture it here, right
+// after the imports above force that assignment, so this module keeps its
+// own private reference instead of the shared global, which
+// @openstreetmap/id (imported by editor.js) later overwrites.
+const sandboxID = window.iD;
+
+registerIdEditorStylesheet('sandbox');
 
 export default function SandboxEditor({
   setDisable,
@@ -49,6 +62,14 @@ export default function SandboxEditor({
 
   useSandboxOAuthCallback(sandboxId);
 
+  // Only one of the OSM iD editor / Sandbox editor is ever mounted at a
+  // time, but both of their stylesheets stay loaded for the whole page
+  // session once visited. Disable the other one's so its rules can't leak
+  // into this editor via their shared ".ideditor" root class.
+  useLayoutEffect(() => {
+    activateIdEditorStylesheet('sandbox');
+  }, []);
+
   const customSource =
     iDContext && iDContext.background() && iDContext.background().findSource('custom');
 
@@ -58,7 +79,7 @@ export default function SandboxEditor({
         iDContext.background().baseLayerSource(customSource.template(imagery));
         setCustomImageryIsSet(true);
         // this line is needed to update the value on the custom background dialog
-        window.iD.prefs('background-custom-template', imagery);
+        sandboxID.prefs('background-custom-template', imagery);
       } else {
         const imagerySource = iDContext.background().findSource(imagery);
         if (imagerySource) {
@@ -72,7 +93,7 @@ export default function SandboxEditor({
     if (iDContext === null) {
       // we need to keep iD context on redux store because iD works better if
       // the context is not restarted while running in the same browser session
-      dispatch({ type: 'SET_EDITOR', context: window.iD.coreContext() });
+      dispatch({ type: 'SET_EDITOR', context: sandboxID.coreContext() });
     }
   }, [iDContext, dispatch]);
 
@@ -113,12 +134,12 @@ export default function SandboxEditor({
         // set up presets
         try {
           if (presets && presets.length) {
-            window.iD.presetManager.addablePresetIDs(presets);
+            sandboxID.presetManager.addablePresetIDs(presets);
           } else {
-            window.iD.presetManager.addablePresetIDs(null);
+            sandboxID.presetManager.addablePresetIDs(null);
           }
         } catch (e) {
-          window.iD.presetManager.addablePresetIDs(null);
+          sandboxID.presetManager.addablePresetIDs(null);
         }
 
         // set up the context
@@ -268,7 +289,7 @@ export default function SandboxEditor({
       // Reset auth status for this sandbox on unmount
       dispatch(setSandboxAuthStatus(sandboxId, 'idle'));
       // Reset context on unmount so the OSM iD editor always gets a fresh context
-      // from its own window.iD (@openstreetmap/id), preventing cross-editor context bleed.
+      // from its own iD module (@openstreetmap/id), preventing cross-editor context bleed.
       dispatch({ type: 'SET_EDITOR', context: null });
     };
   }, [dispatch, sandboxId]);

frontend/src/utils/idEditorStylesheets.js

@@ -0,0 +1,24 @@
+// @openstreetmap/id and @osm-sandbox/sandbox-id each ship a stylesheet that,
+// once loaded as part of the Editor/SandboxEditor lazy chunk, is never
+// unloaded for the rest of the page session. Both stylesheets style the same
+// shared ".ideditor" root class, so once a user has opened both editor types
+// in one session, whichever stylesheet loaded most recently can leak
+// conflicting rules into the other editor. Only one of the two editors is
+// ever mounted at a time, so tag each package's <link> as it loads and keep
+// only the active one's stylesheet enabled.
+const ATTR = 'data-id-editor-pkg';
+
+// Call once, at module scope, immediately after importing a package's own
+// CSS file. Webpack defers running a lazy chunk's JS until its <link> has
+// loaded, so at this exact point the tag we're looking for is reliably the
+// most recently appended stylesheet link.
+export function registerIdEditorStylesheet(key) {
+  const link = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).pop();
+  if (link) link.setAttribute(ATTR, key);
+}
+
+export function activateIdEditorStylesheet(key) {
+  document.querySelectorAll(`link[${ATTR}]`).forEach((link) => {
+    link.disabled = link.getAttribute(ATTR) !== key;
+  });
+}