2 files changed, 20 insertions, 5 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
index 7c00e09..5d6d08f 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
@@ -1,7 +1,9 @@
 import React from 'react'
 
 import {
-  Paragraph, ParagraphHeading
+  Paragraph,
+  SectionHeading,
+  HeadingText,
 } from './inline.text'
 
 import {
@@ -27,9 +29,9 @@ export const inlineComponents = {
   intro_paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
-  section_heading: React.memo(ParagraphHeading),
-  heading_text: React.memo(ParagraphHeading),
-  header: React.memo(ParagraphHeading),
+  section_heading: React.memo(SectionHeading),
+  heading_text: React.memo(HeadingText),
+  header: React.memo(SectionHeading),
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
   intro: React.memo(Intro),
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
index f544e6f..5d7135b 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
@@ -23,7 +23,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   )
 }
 
-export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+export const SectionHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   if (paragraph.hidden) return null
   let className = currentParagraph ? 'section_heading current' : 'section_heading'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
@@ -35,3 +35,16 @@ export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotatio
     </div>
   )
 }
+
+export const HeadingText = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+  if (paragraph.hidden) return null
+  let className = currentParagraph ? 'section_heading current' : 'section_heading'
+  const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
+  return (
+    <div
+      className={className}
+    >
+      <span>{text}</span>
+    </div>
+  )
+}