fix(core/structure): prevent section header wrappers from collapsing in flex layouts

builds/respec-worker.js

@@ -1,4 +1,4 @@
-// ReSpec Worker
+// ReSpec Worker v1.0.0
 // hljs is either inlined by core/worker.js (preferred) or loaded below via
 // importScripts as a fallback when the inline fetch was not possible.
 if (typeof self.hljs === "undefined" && self.RESPEC_HIGHLIGHT_URL) {
@@ -9,16 +9,44 @@ if (typeof self.hljs === "undefined" && self.RESPEC_HIGHLIGHT_URL) {
   }
 }
 
-self.addEventListener("message", ({ data }) => {
-  if (data.action !== "highlight") return;
-  const { code } = data;
-  const langs = data.languages?.length ? data.languages : undefined;
-  try {
-    const { value, language } = self.hljs.highlightAuto(code, langs);
-    Object.assign(data, { value, language });
-  } catch (err) {
-    console.error("Could not transform some code?", err);
-    Object.assign(data, { value: code, language: "" });
+self.addEventListener("message", ({ data: originalData }) => {
+  const data = Object.assign({}, originalData);
+  switch (data.action) {
+    case "highlight-load-lang": {
+      const { langScript, propName, lang } = data;
+      try {
+        if (!langScript) {
+          throw new Error(`No script content provided for language "${lang}"`);
+        }
+        // importScripts() from blob workers is blocked for cross-origin URLs
+        // (blob worker origin is "null"). Create a same-origin blob URL from
+        // the pre-fetched script content to load the language safely.
+        const blob = new Blob([langScript], { type: "application/javascript" });
+        const objectURL = URL.createObjectURL(blob);
+        try {
+          importScripts(objectURL);
+        } finally {
+          URL.revokeObjectURL(objectURL);
+        }
+        self.hljs.registerLanguage(lang, self[propName]);
+      } catch (err) {
+        console.error("Failed to load or register language", lang, err);
+      }
+      break;
+    }
+    case "highlight": {
+      const { code } = data;
+      const langs = data.languages.length ? data.languages : undefined;
+      try {
+        const { value, language } = self.hljs.highlightAuto(code, langs);
+        Object.assign(data, { value, language });
+      } catch (err) {
+        console.error("Could not transform some code?", err);
+        // Post back the original code
+        Object.assign(data, { value: code, language: "" });
+      }
+      break;
+    }
   }
   self.postMessage(data);
 });

src/styles/respec.css.js

@@ -138,6 +138,7 @@ aside.example .marker > a.self-link {
 .header-wrapper {
   display: flex;
   align-items: baseline;
+  width: 100%;
 }
 
 :is(h2, h3, h4, h5, h6):not(#toc > h2, #abstract > h2, #sotd > h2, .head > h2):has(+ a.self-link) {

tests/spec/core/style-spec.js

@@ -1,4 +1,5 @@
 import { flushIframes, makeRSDoc, makeStandardOps } from "../SpecHelper.js";
+import respecCss from "../../../src/styles/respec.css.js";
 
 describe("Core — Style", () => {
   afterAll(flushIframes);
@@ -7,4 +8,10 @@ describe("Core — Style", () => {
     const style = doc.getElementById("respec-mainstyle");
     expect(style).toBeTruthy();
   });
+
+  it("makes header wrapper full width", () => {
+    expect(respecCss).toMatch(
+      /\.header-wrapper\s*\{[^}]*\bwidth:\s*100%\s*;[^}]*\}/
+    );
+  });
 });