Add support for margin elements in HTML tabsets

Fixes #3280

Author: dragonstyle

src/format/html/format-html-bootstrap.ts

@@ -676,6 +676,9 @@ function processColumnElements(
   // Process margin elements that may appear in callouts
   processMarginElsInCallouts(doc);
 
+  // Process margin elements that may appear in tabsets
+  processMarginElsInTabsets(doc);
+
   // Group margin elements by their parents and wrap them in a container
   // Be sure to ignore containers which are already processed
   // and should be left alone
@@ -954,6 +957,53 @@ const processMarginElsInCallouts = (doc: Document) => {
   });
 };
 
+const processMarginElsInTabsets = (doc: Document) => {
+  // Move margin elements inside tabsets into a separate container that appears
+  // before the tabset- this will hold the margin content
+  // quarto.js will detect tab changed events and propery show and hide elements
+  // by marking them with a collapse class.
+
+  const tabSetNodes = doc.querySelectorAll("div.panel-tabset");
+  tabSetNodes.forEach((tabsetNode) => {
+    const tabSetEl = tabsetNode as Element;
+    const tabNodes = tabSetEl.querySelectorAll("div.tab-pane");
+
+    const marginEls: Element[] = [];
+    let count = 0;
+    tabNodes.forEach((tabNode) => {
+      const tabEl = tabNode as Element;
+      const tabId = tabEl.id;
+
+      const marginNodes = tabEl.querySelectorAll(
+        ".column-margin, aside, .aside",
+      );
+
+      if (tabId && marginNodes.length > 0) {
+        const marginArr = Array.from(marginNodes);
+        marginArr.forEach((marginNode) => {
+          const marginEl = marginNode as Element;
+          marginEl.classList.add("tabset-margin-content");
+          marginEl.classList.add(`${tabId}-tab-margin-content`);
+          if (count > 0) {
+            marginEl.classList.add("collapse");
+          }
+          marginEls.push(marginEl);
+        });
+      }
+      count++;
+    });
+
+    if (marginEls) {
+      const containerEl = doc.createElement("div");
+      containerEl.classList.add("tabset-margin-container");
+      marginEls.forEach((marginEl) => {
+        containerEl.appendChild(marginEl);
+      });
+      tabSetEl.before(containerEl);
+    }
+  });
+};
+
 interface MarginNodeProcessor {
   selector: string;
   canProcess(el: Element): boolean;

src/resources/formats/html/quarto.js

@@ -461,9 +461,44 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
   for (const tabEl of tabEls) {
     const id = tabEl.getAttribute("data-bs-target");
     if (id) {
-      const columnEl = document.querySelector(`${id} .column-margin`);
+      const columnEl = document.querySelector(
+        `${id} .column-margin, .tabset-margin-content`
+      );
       if (columnEl)
-        tabEl.addEventListener("shown.bs.tab", function (_event) {
+        tabEl.addEventListener("shown.bs.tab", function (event) {
+
+          const el = event.srcElement;
+          if (el) {
+            const visibleCls = `${el.id}-margin-content`;
+            // walk up until we find a parent tabset
+            let panelTabsetEl = el.parentElement;
+            while (panelTabsetEl) {
+              if (panelTabsetEl.classList.contains("panel-tabset")) {
+                break;
+              }
+              panelTabsetEl = panelTabsetEl.parentElement;
+            }
+
+            if (panelTabsetEl) {
+              const prevSib = panelTabsetEl.previousElementSibling;
+              if (
+                prevSib &&
+                prevSib.classList.contains("tabset-margin-container")
+              ) {
+                const childNodes = prevSib.querySelectorAll(
+                  ".tabset-margin-content"
+                );
+                for (const childEl of childNodes) {
+                  if (childEl.classList.contains(visibleCls)) {
+                    childEl.classList.remove("collapse");
+                  } else {
+                    childEl.classList.add("collapse");
+                  }
+                }
+              }
+            }
+          }
+
           layoutMarginEls();
         });
     }

tests/docs/smoke-all/2023/03/03/article-layout/tabs-callouts-3280.qmd

@@ -0,0 +1,73 @@
+---
+title: "column-margin Misplacement in panel-tabset Reproducible Example"
+format: html
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        - [".tabset-margin-container .tabset-margin-content", ".tabset-margin-container .tabset-margin-content.collapse", ".column-container .callout-collapse"]
+---
+
+## Header 1
+
+::: {.panel-tabset}
+
+### Subheader 1
+
+::: {.column-margin}
+Margin Text 1
+:::
+
+<!-- ![](https://quarto.org/docs/gallery/articles/advanced-layout-pdf.png) -->
+
+### Subheader 2
+
+::: {.column-margin}
+Margin Text 2
+:::
+
+::: {.column-margin}
+Margin Text 3
+:::
+
+
+::: 
+
+
+:::{.callout-note collapse=true}
+
+## hi
+
+This is a callout what is up bro
+
+:::{.column-margin}
+This is margin content
+:::
+
+
+:::
+
+
+## Header 2
+
+::: {.panel-tabset}
+
+### Subheader 1
+
+::: {.column-margin}
+Margin Text 1
+:::
+
+<!-- ![](https://quarto.org/docs/gallery/articles/advanced-layout-pdf.png) -->
+
+### Subheader 2
+
+::: {.column-margin}
+Margin Text 2
+:::
+
+::: {.column-margin}
+Margin Text 3
+:::
+
+:::