transition content parsing functions (#2333)

* remove wrapElements and tweakFigures parsing funcs * restore functions and add transition conditions * snapshots * update snaps * revert snapshot changes * remove conditional * whitespace * add comment --------- Co-authored-by: Beth Shook <[email protected]> Co-authored-by: staxly[bot] <35789409+staxly[bot]@users.noreply.github.com>
openstax · Sep 19, 2024 · 729cdd3 · 729cdd3
1 parent bb00e9b
commit 729cdd3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/src/app/content/components/Page.spec.tsx b/src/app/content/components/Page.spec.tsx
@@ -342,14 +342,14 @@ describe('Page', () => {
               + `data-print-placement="here" `
               + `aria-label="Show/Hide Solution"`
             + `>
-      <summary class="btn-link ui-toggle" title="Show/Hide Solution" data-content="Show/Hide Solution"></summary>
-      <section class="ui-body" role="alert">
+        <summary class="btn-link ui-toggle" title="Show/Hide Solution" data-content="Show/Hide Solution"></summary>
+        <section class="ui-body" role="alert">
               <h4 data-type="title" class="solution-title"><span class="os-text">Solution</span></h4>
               <div class="os-solution-container">
                 <p id="paragraph2">answer answer answer.</p>
               </div>
             </section>
-    </details>
+      </details>
           </section></div>
         `);
       });

diff --git a/src/app/content/components/Page/contentDOMTransformations.ts b/src/app/content/components/Page/contentDOMTransformations.ts
@@ -115,19 +115,22 @@ function wrapSolutions(document: Document, rootEl: HTMLElement, intl: IntlShape)
 
   // Wrap solutions in a details element so "Show/Hide Solutions" work
   rootEl.querySelectorAll('.exercise .solution, [data-type="exercise"] [data-type="solution"]').forEach((el) => {
-    el.setAttribute('aria-label', intl.formatMessage({id: 'i18n:content:solution:toggle-title'}));
-    const contents = el.innerHTML;
-    const detailsEl = document.createElement('details');
-
-    Array.from(el.attributes).forEach((attr) => {
-      detailsEl.setAttribute(attr.name, attr.value);
-    });
-
-    detailsEl.innerHTML = `
-      <summary class="btn-link ui-toggle" title="${title}" data-content="${title}"></summary>
-      <section class="ui-body" role="alert">${contents}</section>
-    `;
-    el.replaceWith(detailsEl);
+    // this markup will already be baked into content in some cases
+    if (el.tagName.toLowerCase() !== 'details') {
+      el.setAttribute('aria-label', intl.formatMessage({id: 'i18n:content:solution:toggle-title'}));
+      const contents = el.innerHTML;
+      const detailsEl = document.createElement('details');
+
+      Array.from(el.attributes).forEach((attr) => {
+        detailsEl.setAttribute(attr.name, attr.value);
+      });
+
+      detailsEl.innerHTML = `
+        <summary class="btn-link ui-toggle" title="${title}" data-content="${title}"></summary>
+        <section class="ui-body" role="alert">${contents}</section>
+      `;
+      el.replaceWith(detailsEl);
+    }
   });
 }