diff --git a/src/lib/editorFile.js b/src/lib/editorFile.js index 1c98fea5e..c59127d03 100644 --- a/src/lib/editorFile.js +++ b/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(); + 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(); + } // Handle custom stylesheets if provided if (options.stylesheets) { diff --git a/src/lib/editorManager.js b/src/lib/editorManager.js index 53384932a..3a12f6184 100644 --- a/src/lib/editorManager.js +++ b/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); }); }