fix(editor): prevent styling loss flash on custom page tabs when splitting/closing panes (#2449)

Author: bajrangCoder

src/lib/editorFile.js

@@ -29,6 +29,18 @@ import run from "./run";
 import saveFile from "./saveFile";
 import appSettings from "./settings";
 
+let mainCSSStyleSheet = null;
+
+function getMainCSSStyleSheet() {
+	if (mainCSSStyleSheet) return mainCSSStyleSheet;
+	for (const sheet of document.styleSheets) {
+		if (sheet.href && sheet.href.endsWith("main.css")) {
+			return sheet;
+		}
+	}
+	return null;
+}
+
 function syncQuickToolsVisibility(file) {
 	const { $toggler } = quickTools;
 	const hideForFile = !!file?.hideQuickTools;
@@ -530,7 +542,43 @@ export default class EditorFile {
 					shadow = container.attachShadow({ mode: "open" });
 
 					// Add base styles to shadow DOM first
-					shadow.appendChild(<link rel="stylesheet" href="build/main.css" />);
+					const sharedSheet = getMainCSSStyleSheet();
+					let adopted = false;
+					if (sharedSheet) {
+						try {
+							shadow.adoptedStyleSheets = [sharedSheet];
+							adopted = true;
+						} catch (e) {
+							console.warn(
+								"Failed to adopt document stylesheet, attempting constructed fallback",
+								e,
+							);
+							if (
+								typeof CSSStyleSheet !== "undefined" &&
+								CSSStyleSheet.prototype.replaceSync
+							) {
+								try {
+									const cssText = Array.from(sharedSheet.cssRules)
+										.map((rule) => rule.cssText)
+										.join("\n");
+									const constructedSheet = new CSSStyleSheet();
+									constructedSheet.replaceSync(cssText);
+									shadow.adoptedStyleSheets = [constructedSheet];
+									adopted = true;
+									mainCSSStyleSheet = constructedSheet;
+								} catch (innerError) {
+									console.warn(
+										"Failed constructed stylesheet fallback",
+										innerError,
+									);
+								}
+							}
+						}
+					}
+
+					if (!adopted) {
+						shadow.appendChild(<link rel="stylesheet" href="build/main.css" />);
+					}
 
 					// Handle custom stylesheets if provided
 					if (options.stylesheets) {

src/lib/editorManager.js

@@ -408,13 +408,36 @@ async function EditorManager($header, $body) {
 		if (!node || node.type !== "split") return;
 
 		node.element.dataset.direction = node.direction;
-		cleanupPaneSplitHandles(node.element);
-		node.element.replaceChildren();
+
+		const targetElements = [];
 		node.children.forEach((child, index) => {
 			if (index > 0) {
-				node.element.append(createPaneSplitHandle(node, index));
+				targetElements.push(createPaneSplitHandle(node, index));
+			}
+			targetElements.push(child.element);
+		});
+
+		cleanupPaneSplitHandles(node.element);
+
+		const currentChildren = Array.from(node.element.children);
+		const targetSet = new Set(targetElements);
+
+		currentChildren.forEach((childEl) => {
+			if (!targetSet.has(childEl)) {
+				childEl.remove();
 			}
-			node.element.append(child.element);
+		});
+
+		let currentEl = node.element.firstElementChild;
+		for (const targetEl of targetElements) {
+			if (currentEl === targetEl) {
+				currentEl = currentEl.nextElementSibling;
+			} else {
+				node.element.insertBefore(targetEl, currentEl);
+			}
+		}
+
+		node.children.forEach((child) => {
 			renderPaneLayout(child);
 		});
 	}