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);
});
}