@pie-lib/render-ui 5.2.0-next.8 → 6.0.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.2.0-next.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@5.2.0-next.8...@pie-lib/render-ui@5.2.0-next.9) (2026-04-23)
+
+### Features
+
+- **render-ui:** add transformDataHeadings function to convert data-heading paragraphs to headings - PIE-151 ([b59a7cc](https://github.com/pie-framework/pie-lib/commit/b59a7cc091ce9d1ace1679bd854e72ab3d57fc76))
+
 # [5.2.0-next.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@5.2.0-next.7...@pie-lib/render-ui@5.2.0-next.8) (2026-04-15)
 
 ### Bug Fixes

package/lib/index.js

@@ -79,6 +79,12 @@ Object.defineProperty(exports, "hasText", {
   }
 });
 exports.indicators = void 0;
+Object.defineProperty(exports, "transformDataHeadings", {
+  enumerable: true,
+  get: function get() {
+    return _transformHeadings.transformDataHeadings;
+  }
+});
 Object.defineProperty(exports, "withUndoReset", {
   enumerable: true,
   get: function get() {
@@ -102,5 +108,6 @@ exports.color = color;
 var _hasText = require("./has-text");
 var _hasMedia = require("./has-media");
 var _enableAudioAutoplayImage = _interopRequireDefault(require("./assets/enableAudioAutoplayImage"));
+var _transformHeadings = require("./transform-headings");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["indicators","_interopRequireWildcard","require","exports","_feedback","_interopRequireDefault","_collapsible","_withUndoReset","_previewLayout","_uiLayout","_htmlAndMath","_inputContainer","_previewPrompt","_readable","_purpose","color","_hasText","_hasMedia","_enableAudioAutoplayImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sources":["../src/index.js"],"sourcesContent":["import * as indicators from './response-indicators';\nimport Feedback from './feedback';\nimport Collapsible from './collapsible';\nimport withUndoReset from './withUndoReset';\nimport PreviewLayout from './preview-layout';\nimport UiLayout from './ui-layout';\nimport HtmlAndMath from './html-and-math';\nimport InputContainer from './input-container';\nimport PreviewPrompt from './preview-prompt';\nimport Readable from './readable';\nimport Purpose from './purpose';\nimport * as color from './color';\nimport { hasText } from './has-text';\nimport { hasMedia } from './has-media';\nimport EnableAudioAutoplayImage from './assets/enableAudioAutoplayImage';\n\nexport {\n  HtmlAndMath,\n  indicators,\n  withUndoReset,\n  Feedback,\n  UiLayout,\n  PreviewLayout,\n  Collapsible,\n  InputContainer,\n  PreviewPrompt,\n  color,\n  Readable,\n  Purpose,\n  hasText,\n  hasMedia,\n  EnableAudioAutoplayImage,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAoDC,OAAA,CAAAH,UAAA,GAAAA,UAAA;AACpD,IAAAI,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,cAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,cAAA,GAAAH,sBAAA,CAAAH,OAAA;AACA,IAAAO,SAAA,GAAAJ,sBAAA,CAAAH,OAAA;AACA,IAAAQ,YAAA,GAAAL,sBAAA,CAAAH,OAAA;AACA,IAAAS,eAAA,GAAAN,sBAAA,CAAAH,OAAA;AACA,IAAAU,cAAA,GAAAP,sBAAA,CAAAH,OAAA;AACA,IAAAW,SAAA,GAAAR,sBAAA,CAAAH,OAAA;AACA,IAAAY,QAAA,GAAAT,sBAAA,CAAAH,OAAA;AACA,IAAAa,KAAA,GAAAd,uBAAA,CAAAC,OAAA;AAAiCC,OAAA,CAAAY,KAAA,GAAAA,KAAA;AACjC,IAAAC,QAAA,GAAAd,OAAA;AACA,IAAAe,SAAA,GAAAf,OAAA;AACA,IAAAgB,yBAAA,GAAAb,sBAAA,CAAAH,OAAA;AAAyE,SAAAD,wBAAAkB,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAApB,uBAAA,YAAAA,wBAAAkB,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["indicators","_interopRequireWildcard","require","exports","_feedback","_interopRequireDefault","_collapsible","_withUndoReset","_previewLayout","_uiLayout","_htmlAndMath","_inputContainer","_previewPrompt","_readable","_purpose","color","_hasText","_hasMedia","_enableAudioAutoplayImage","_transformHeadings","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sources":["../src/index.js"],"sourcesContent":["import * as indicators from './response-indicators';\nimport Feedback from './feedback';\nimport Collapsible from './collapsible';\nimport withUndoReset from './withUndoReset';\nimport PreviewLayout from './preview-layout';\nimport UiLayout from './ui-layout';\nimport HtmlAndMath from './html-and-math';\nimport InputContainer from './input-container';\nimport PreviewPrompt from './preview-prompt';\nimport Readable from './readable';\nimport Purpose from './purpose';\nimport * as color from './color';\nimport { hasText } from './has-text';\nimport { hasMedia } from './has-media';\nimport EnableAudioAutoplayImage from './assets/enableAudioAutoplayImage';\nimport { transformDataHeadings } from './transform-headings';\n\nexport {\n  HtmlAndMath,\n  indicators,\n  withUndoReset,\n  Feedback,\n  UiLayout,\n  PreviewLayout,\n  Collapsible,\n  InputContainer,\n  PreviewPrompt,\n  color,\n  Readable,\n  Purpose,\n  hasText,\n  hasMedia,\n  EnableAudioAutoplayImage,\n  transformDataHeadings,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAoDC,OAAA,CAAAH,UAAA,GAAAA,UAAA;AACpD,IAAAI,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,cAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,cAAA,GAAAH,sBAAA,CAAAH,OAAA;AACA,IAAAO,SAAA,GAAAJ,sBAAA,CAAAH,OAAA;AACA,IAAAQ,YAAA,GAAAL,sBAAA,CAAAH,OAAA;AACA,IAAAS,eAAA,GAAAN,sBAAA,CAAAH,OAAA;AACA,IAAAU,cAAA,GAAAP,sBAAA,CAAAH,OAAA;AACA,IAAAW,SAAA,GAAAR,sBAAA,CAAAH,OAAA;AACA,IAAAY,QAAA,GAAAT,sBAAA,CAAAH,OAAA;AACA,IAAAa,KAAA,GAAAd,uBAAA,CAAAC,OAAA;AAAiCC,OAAA,CAAAY,KAAA,GAAAA,KAAA;AACjC,IAAAC,QAAA,GAAAd,OAAA;AACA,IAAAe,SAAA,GAAAf,OAAA;AACA,IAAAgB,yBAAA,GAAAb,sBAAA,CAAAH,OAAA;AACA,IAAAiB,kBAAA,GAAAjB,OAAA;AAA6D,SAAAD,wBAAAmB,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAArB,uBAAA,YAAAA,wBAAAmB,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}

package/lib/transform-headings.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformDataHeadings = transformDataHeadings;
+/**
+ * transformDataHeadings
+ *
+ * Rewrites every `<p data-heading="headingN">…</p>` in an HTML string to a
+ * proper heading element whose level is `clamp(baseLevel + N - 1, 1, 6)`.
+ *
+ *
+ * This is a pure function: it performs no DOM mutations and has no side-effects.
+ * It relies on the browser's (or jsdom's) HTML parser via DOMParser, so it must
+ * only be called in an environment that provides that global.
+ *
+ * @param {string} html       - Raw HTML string (passage body, prompt, etc.)
+ * @param {number} baseLevel  - The base heading level (1–6). Defaults to 2.
+ * @returns {string}          - HTML string with promoted heading elements.
+ *
+ * @example
+ * // baseLevel=2, data-heading="heading1" → <h2 data-heading="heading1">…</h2>
+ * // baseLevel=2, data-heading="heading2" → <h3 data-heading="heading2">…</h3>
+ * // baseLevel=3, data-heading="heading1" → <h3 data-heading="heading1">…</h3>
+ */
+function transformDataHeadings() {
+  var html = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var baseLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (!html) return html;
+  var parser = new DOMParser();
+  var doc = parser.parseFromString(html, 'text/html');
+  doc.body.querySelectorAll('[data-heading]').forEach(function (el) {
+    var raw = el.getAttribute('data-heading') || '';
+    var n = parseInt(raw.replace('heading', ''), 10);
+    if (!Number.isFinite(n)) return; // skip malformed values
+
+    var level = Math.min(6, Math.max(1, baseLevel + n - 1));
+    var heading = doc.createElement("h".concat(level));
+    heading.setAttribute('data-heading', raw);
+
+    // Copy all other attributes (class, id, style, …)
+    Array.from(el.attributes).forEach(function (attr) {
+      if (attr.name !== 'data-heading') {
+        heading.setAttribute(attr.name, attr.value);
+      }
+    });
+    heading.innerHTML = el.innerHTML;
+    el.replaceWith(heading);
+  });
+  return doc.body.innerHTML;
+}
+//# sourceMappingURL=transform-headings.js.map

package/lib/transform-headings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform-headings.js","names":["transformDataHeadings","html","arguments","length","undefined","baseLevel","parser","DOMParser","doc","parseFromString","body","querySelectorAll","forEach","el","raw","getAttribute","n","parseInt","replace","Number","isFinite","level","Math","min","max","heading","createElement","concat","setAttribute","Array","from","attributes","attr","name","value","innerHTML","replaceWith"],"sources":["../src/transform-headings.js"],"sourcesContent":["/**\n * transformDataHeadings\n *\n * Rewrites every `<p data-heading=\"headingN\">…</p>` in an HTML string to a\n * proper heading element whose level is `clamp(baseLevel + N - 1, 1, 6)`.\n *\n *\n * This is a pure function: it performs no DOM mutations and has no side-effects.\n * It relies on the browser's (or jsdom's) HTML parser via DOMParser, so it must\n * only be called in an environment that provides that global.\n *\n * @param {string} html       - Raw HTML string (passage body, prompt, etc.)\n * @param {number} baseLevel  - The base heading level (1–6). Defaults to 2.\n * @returns {string}          - HTML string with promoted heading elements.\n *\n * @example\n * // baseLevel=2, data-heading=\"heading1\" → <h2 data-heading=\"heading1\">…</h2>\n * // baseLevel=2, data-heading=\"heading2\" → <h3 data-heading=\"heading2\">…</h3>\n * // baseLevel=3, data-heading=\"heading1\" → <h3 data-heading=\"heading1\">…</h3>\n */\nexport function transformDataHeadings(html = '', baseLevel = 2) {\n  if (!html) return html;\n\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(html, 'text/html');\n\n  doc.body.querySelectorAll('[data-heading]').forEach((el) => {\n    const raw = el.getAttribute('data-heading') || '';\n    const n = parseInt(raw.replace('heading', ''), 10);\n\n    if (!Number.isFinite(n)) return; // skip malformed values\n\n    const level = Math.min(6, Math.max(1, baseLevel + n - 1));\n    const heading = doc.createElement(`h${level}`);\n\n    heading.setAttribute('data-heading', raw);\n\n    // Copy all other attributes (class, id, style, …)\n    Array.from(el.attributes).forEach((attr) => {\n      if (attr.name !== 'data-heading') {\n        heading.setAttribute(attr.name, attr.value);\n      }\n    });\n\n    heading.innerHTML = el.innerHTML;\n    el.replaceWith(heading);\n  });\n\n  return doc.body.innerHTML;\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,qBAAqBA,CAAA,EAA2B;EAAA,IAA1BC,IAAI,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,EAAE;EAAA,IAAEG,SAAS,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;EAC5D,IAAI,CAACD,IAAI,EAAE,OAAOA,IAAI;EAEtB,IAAMK,MAAM,GAAG,IAAIC,SAAS,CAAC,CAAC;EAC9B,IAAMC,GAAG,GAAGF,MAAM,CAACG,eAAe,CAACR,IAAI,EAAE,WAAW,CAAC;EAErDO,GAAG,CAACE,IAAI,CAACC,gBAAgB,CAAC,gBAAgB,CAAC,CAACC,OAAO,CAAC,UAACC,EAAE,EAAK;IAC1D,IAAMC,GAAG,GAAGD,EAAE,CAACE,YAAY,CAAC,cAAc,CAAC,IAAI,EAAE;IACjD,IAAMC,CAAC,GAAGC,QAAQ,CAACH,GAAG,CAACI,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;IAElD,IAAI,CAACC,MAAM,CAACC,QAAQ,CAACJ,CAAC,CAAC,EAAE,OAAO,CAAC;;IAEjC,IAAMK,KAAK,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEnB,SAAS,GAAGW,CAAC,GAAG,CAAC,CAAC,CAAC;IACzD,IAAMS,OAAO,GAAGjB,GAAG,CAACkB,aAAa,KAAAC,MAAA,CAAKN,KAAK,CAAE,CAAC;IAE9CI,OAAO,CAACG,YAAY,CAAC,cAAc,EAAEd,GAAG,CAAC;;IAEzC;IACAe,KAAK,CAACC,IAAI,CAACjB,EAAE,CAACkB,UAAU,CAAC,CAACnB,OAAO,CAAC,UAACoB,IAAI,EAAK;MAC1C,IAAIA,IAAI,CAACC,IAAI,KAAK,cAAc,EAAE;QAChCR,OAAO,CAACG,YAAY,CAACI,IAAI,CAACC,IAAI,EAAED,IAAI,CAACE,KAAK,CAAC;MAC7C;IACF,CAAC,CAAC;IAEFT,OAAO,CAACU,SAAS,GAAGtB,EAAE,CAACsB,SAAS;IAChCtB,EAAE,CAACuB,WAAW,CAACX,OAAO,CAAC;EACzB,CAAC,CAAC;EAEF,OAAOjB,GAAG,CAACE,IAAI,CAACyB,SAAS;AAC3B","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "5.2.0-next.8",
+  "version": "6.0.0",
   "description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
   "module": "src/index.js",
   "main": "lib/index.js",
@@ -14,9 +14,9 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/icons": "^3.2.0-next.4",
-    "@pie-lib/math-rendering": "^4.2.0-next.3",
-    "@pie-lib/test-utils": "^1.2.0-next.3",
+    "@pie-lib/icons": "^4.0.0",
+    "@pie-lib/math-rendering": "^5.0.0",
+    "@pie-lib/test-utils": "^2.0.0",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.7.2",
@@ -31,5 +31,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "80a22e0d49de8a923a1130afa9532e6d2d58eadd"
+  "gitHead": "bf0904ba8bdd2d6f88fb8ad99060e45e40180348"
 }

package/src/index.js

@@ -13,6 +13,7 @@ import * as color from './color';
 import { hasText } from './has-text';
 import { hasMedia } from './has-media';
 import EnableAudioAutoplayImage from './assets/enableAudioAutoplayImage';
+import { transformDataHeadings } from './transform-headings';
 
 export {
   HtmlAndMath,
@@ -30,4 +31,5 @@ export {
   hasText,
   hasMedia,
   EnableAudioAutoplayImage,
+  transformDataHeadings,
 };

package/src/transform-headings.js

@@ -0,0 +1,50 @@
+/**
+ * transformDataHeadings
+ *
+ * Rewrites every `<p data-heading="headingN">…</p>` in an HTML string to a
+ * proper heading element whose level is `clamp(baseLevel + N - 1, 1, 6)`.
+ *
+ *
+ * This is a pure function: it performs no DOM mutations and has no side-effects.
+ * It relies on the browser's (or jsdom's) HTML parser via DOMParser, so it must
+ * only be called in an environment that provides that global.
+ *
+ * @param {string} html       - Raw HTML string (passage body, prompt, etc.)
+ * @param {number} baseLevel  - The base heading level (1–6). Defaults to 2.
+ * @returns {string}          - HTML string with promoted heading elements.
+ *
+ * @example
+ * // baseLevel=2, data-heading="heading1" → <h2 data-heading="heading1">…</h2>
+ * // baseLevel=2, data-heading="heading2" → <h3 data-heading="heading2">…</h3>
+ * // baseLevel=3, data-heading="heading1" → <h3 data-heading="heading1">…</h3>
+ */
+export function transformDataHeadings(html = '', baseLevel = 2) {
+  if (!html) return html;
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+
+  doc.body.querySelectorAll('[data-heading]').forEach((el) => {
+    const raw = el.getAttribute('data-heading') || '';
+    const n = parseInt(raw.replace('heading', ''), 10);
+
+    if (!Number.isFinite(n)) return; // skip malformed values
+
+    const level = Math.min(6, Math.max(1, baseLevel + n - 1));
+    const heading = doc.createElement(`h${level}`);
+
+    heading.setAttribute('data-heading', raw);
+
+    // Copy all other attributes (class, id, style, …)
+    Array.from(el.attributes).forEach((attr) => {
+      if (attr.name !== 'data-heading') {
+        heading.setAttribute(attr.name, attr.value);
+      }
+    });
+
+    heading.innerHTML = el.innerHTML;
+    el.replaceWith(heading);
+  });
+
+  return doc.body.innerHTML;
+}