feat(passage): add heading level handling PIE-150

Author: PatriciaRomaniuc

packages/passage/src/index.js

@@ -5,6 +5,31 @@ import { createRoot } from 'react-dom/client';
 
 import StimulusTabs from './stimulus-tabs';
 
+function getBaseHeadingLevel(element) {
+  const player =
+    element.closest('pie-player') ||
+    element.closest('pie-item-player');
+
+  if (player) {
+    let raw = player.baseHeadingLevel;
+
+    // fallback in case someone sets via HTML attribute manually
+    if (raw == null) {
+      raw =
+        player.getAttribute('base-heading-level') ??
+        player.getAttribute('baseheadinglevel');
+    }
+
+    const playerLevel = parseInt(raw, 10);
+
+    if (Number.isFinite(playerLevel) && playerLevel >= 1 && playerLevel <= 6) {
+      return playerLevel;
+    }
+  }
+
+  return undefined;
+}
+
 export default class PiePassage extends HTMLElement {
   constructor() {
     super();
@@ -15,6 +40,7 @@ export default class PiePassage extends HTMLElement {
     this._root = null;
     this._mathObserver = null;
     this._mathRenderPending = false;
+    this._playerObserver = null;
   }
 
   setLangAttribute() {
@@ -70,6 +96,7 @@ export default class PiePassage extends HTMLElement {
     this.setAttribute('aria-label', 'Passage');
     this.setAttribute('role', 'region');
     this._initMathObserver();
+    this._initPlayerObserver();
     this._render();
   }
 
@@ -84,6 +111,8 @@ export default class PiePassage extends HTMLElement {
 
       const elem = React.createElement(StimulusTabs, {
         tabs: passagesTabs,
+        model: this._model,
+        baseHeadingLevel: getBaseHeadingLevel(this),
       });
 
       if (!this._root) {
@@ -95,8 +124,26 @@ export default class PiePassage extends HTMLElement {
     }
   }
 
+  _initPlayerObserver() {
+    const player = this.closest('pie-player') || this.closest('pie-item-player');
+    if (!player) return;
+
+    this._playerObserver = new MutationObserver(() => {
+      this._render();
+    });
+    this._playerObserver.observe(player, { attributes: true, attributeFilter: ['base-heading-level'] });
+  }
+
+  _disconnectPlayerObserver() {
+    if (this._playerObserver) {
+      this._playerObserver.disconnect();
+      this._playerObserver = null;
+    }
+  }
+
   disconnectedCallback() {
     this._disconnectMathObserver();
+    this._disconnectPlayerObserver();
     if (this._root) {
       this._root.unmount();
     }

packages/passage/src/stimulus-tabs.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import { styled } from '@mui/material/styles';
-import { Collapsible, color, PreviewPrompt, Purpose, UiLayout } from '@pie-lib/render-ui';
+import { Collapsible, color, PreviewPrompt, Purpose, UiLayout, transformDataHeadings } from '@pie-lib/render-ui';
 
 const PassagesContainer = styled('div')({
   flexGrow: 1,
@@ -172,24 +172,27 @@ class StimulusTabs extends React.Component {
   }
 
   renderTab(tab, disabledTabs) {
+    const { baseHeadingLevel } = this.props;
+    const clampedLevel = !!baseHeadingLevel ? Math.min(6, Math.max(1, baseHeadingLevel)) : undefined;
+    const TitleTag = !!baseHeadingLevel ? `h${clampedLevel}` : 'h2'; // default to h2 if no base level is provided - this was the previous behavior
+    const textLevel = !!baseHeadingLevel ? Math.min(6, Math.max(1, clampedLevel + 1)) : undefined; // promote text headings one level above title
+
     return (
       <Passage key={tab.id} id={`tabpanel-${tab.id}`} role="tabpanel" aria-labelledby={`button-${tab.id}`}>
         {this.renderInstructions(tab.teacherInstructions, disabledTabs)}
 
-        {(tab.title || tab.subtitle) && (
-          <h2>
-            {tab.title && (
-              <Purpose purpose="passage-title">
-                <PassageTitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.title) }}/>
-              </Purpose>
-            )}
-            {tab.subtitle && (
-              <Purpose purpose="passage-subtitle">
-                <PassageSubtitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.subtitle) }}
-                />
-              </Purpose>
-            )}
-          </h2>
+        {tab.title && (
+          <Purpose purpose="passage-title">
+            <TitleTag>
+              <PassageTitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.title) }} />
+            </TitleTag>
+          </Purpose>
+        )}
+
+        {tab.subtitle && (
+          <Purpose purpose="passage-subtitle">
+            <PassageSubtitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.subtitle) }} />
+          </Purpose>
         )}
 
         {tab.author && (
@@ -200,11 +203,7 @@ class StimulusTabs extends React.Component {
 
         {tab.text && (
           <Purpose purpose="passage-text">
-            <div
-              key={tab.id}
-              className="text"
-              dangerouslySetInnerHTML={{ __html: this.parsedText(tab.text) }}
-            />
+            <div key={tab.id} className="text" dangerouslySetInnerHTML={{ __html: !!baseHeadingLevel ? transformDataHeadings(tab.text, textLevel) : tab.text }} />
           </Purpose>
         )}
       </Passage>
@@ -283,6 +282,7 @@ StimulusTabs.propTypes = {
   ).isRequired,
   disabledTabs: PropTypes.bool,
   model: PropTypes.object,
+  baseHeadingLevel: PropTypes.number,
 };
 
 export default StimulusTabs;