DISCO-290 Set Rex heading levels for Assignable

src/app/content/components/Assigned.tsx

@@ -109,7 +109,7 @@ export default () => {
     <ErrorModal />
     <ErrorBoundary>
       <AssignedTopBar section={section} />
-      <Page lockNavigation={true} ToastOverride={ToastOverride}>
+      <Page topHeadingLevel={2} lockNavigation={true} ToastOverride={ToastOverride}>
         {prevNext
           ? <PrevNextBar
             book={book}

src/app/content/components/Page.spec.tsx

@@ -17,6 +17,7 @@ import { renderToDom } from '../../../test/reactutils';
 import { makeSearchResultHit, makeSearchResults } from '../../../test/searchResults';
 import AccessibilityButtonsWrapper from '../../components/AccessibilityButtonsWrapper';
 import * as Services from '../../context/Services';
+import * as selectNavigation from '../../navigation/selectors';
 import { scrollTo } from '../../domUtils';
 import { locationChange, push } from '../../navigation/actions';
 import { addToast } from '../../notifications/actions';
@@ -157,6 +158,51 @@ describe('Page', () => {
     );
   };
 
+  describe('Content tweaks for assignable', () => {
+    let pageElement: HTMLElement;
+
+    const htmlHelper = async(html: string) => {
+      archiveLoader.mock.cachedPage.mockImplementation(() => ({
+        ...page,
+        content: html,
+      }));
+
+      const {root} = renderToDom(
+        <Provider store={store}>
+          <Services.Provider value={services}>
+            <MessageProvider>
+              <AccessibilityButtonsWrapper>
+                <ConnectedPage topHeadingLevel={2} />
+              </AccessibilityButtonsWrapper>
+            </MessageProvider>
+          </Services.Provider>
+        </Provider>
+      );
+      const query = root.querySelector<HTMLElement>('#main-content');
+
+      if (!query) {
+        return expect(query).toBeTruthy();
+      }
+      pageElement = query;
+
+      // page lifecycle hooks
+      await Promise.resolve();
+
+      return pageElement.innerHTML;
+    };
+
+    it('changes heading levels when specified', async() => {
+      jest.spyOn(selectNavigation, 'query').mockReturnValue({
+        section: [page.id, shortPage.id],
+      });
+      jest.spyOn(select, 'book')
+        .mockReturnValue(formatBookData(book, mockCmsBook));
+
+      expect(await htmlHelper('<h3>Largest heading</h3><h4>Second largest heading</h4>'))
+      .toEqual('<h2>Largest heading</h2><h3>Second largest heading</h3>');
+    });
+  });
+
   describe('Content tweaks for generic styles', () => {
     let pageElement: HTMLElement;
 

src/app/content/components/Page/PageComponent.tsx

@@ -47,7 +47,7 @@ export default class PageComponent extends Component<PagePropTypes> {
       contentLinks.reduceReferences(parsedContent, this.props.contentLinks);
       lazyResources.makeResourcesLazy(parsedContent);
 
-      transformContent(parsedContent, parsedContent.body, this.props.intl, services);
+      transformContent(parsedContent, parsedContent.body, this.props, services);
 
       if (this.props.lockNavigation) {
         linksToOtherPagesOpenInNewTab(parsedContent.body, this.props.currentPath);

src/app/content/components/Page/connector.ts

@@ -34,6 +34,7 @@ export interface PagePropTypes {
   textSize: TextResizerValue;
   lockNavigation: boolean;
   ToastOverride: StyledComponent<'div', any, {}, never>;
+  topHeadingLevel?: number;
 }
 
 export default connect(

src/app/content/components/Page/contentDOMTransformations.ts

@@ -21,15 +21,19 @@ export function linksToOtherPagesOpenInNewTab(rootEl: HTMLElement, currentPath:
 // .../src/scripts/modules/media/body/body.coffee#L123
 // We are passing Document because it is required to prerender.
 export const transformContent = (
-  document: Document, rootEl: HTMLElement, intl: IntlShape, services: AppServices & MiddlewareAPI
+  document: Document,
+  rootEl: HTMLElement,
+  props: { intl: IntlShape, topHeadingLevel?: number },
+  services: AppServices & MiddlewareAPI
 ) => {
   removeDocumentTitle(rootEl);
+  if (props.topHeadingLevel) { changeHeadingLevels(document, rootEl, props.topHeadingLevel); }
   wrapElements(document, rootEl);
   tweakFigures(rootEl);
   fixLists(rootEl);
-  wrapSolutions(document, rootEl, intl);
+  wrapSolutions(document, rootEl, props.intl);
   expandSolutionForFragment(document);
-  moveFootnotes(document, rootEl, intl);
+  moveFootnotes(document, rootEl, props.intl);
   optimizeImages(rootEl, services);
 };
 
@@ -42,6 +46,40 @@ function removeDocumentTitle(rootEl: HTMLElement) {
   ].join(',')).forEach((el) => el.remove());
 }
 
+// set the top heading's level to topHeadingLevel and adjust other headings accordingly
+function changeHeadingLevels(document: Document, rootEl: HTMLElement, topHeadingLevel: number) {
+  const headingLevels = [ 1, 2, 3, 4, 5, 6 ];
+  const currentTopHeading = headingLevels.find((level) => rootEl.querySelectorAll(`h${level}`)?.length);
+
+  if (!currentTopHeading || topHeadingLevel === currentTopHeading) {
+    return;
+  }
+
+  const differenceInLevels = topHeadingLevel - currentTopHeading;
+
+  headingLevels.forEach((level) => {
+    const origTagName = `h${level}`;
+    const tags = rootEl.querySelectorAll(origTagName);
+
+    if (tags.length > 0) {
+      const newTagName = `h${level + differenceInLevels}`;
+
+      tags.forEach((tag) => {
+        const contents = tag.innerHTML;
+        const newTagEl = document.createElement(newTagName);
+
+        Array.from(tag.attributes).forEach((attr) => {
+          newTagEl.setAttribute(attr.name, attr.value);
+        });
+
+        newTagEl.innerHTML = contents;
+
+        tag.replaceWith(newTagEl);
+      });
+    }
+  });
+}
+
 // Wrap title and content elements in header and section elements, respectively
 function wrapElements(document: Document, rootEl: HTMLElement) {
   rootEl.querySelectorAll(`.example, .exercise, .note, .abstract,