Fix: Document Outline: Exception caused by headings with formatting

To display the RichText content that comes from the headings we should use the RichText.Content component.
WordPress · Jul 25, 2018 · 337a1cb · 337a1cb
1 parent 1c2882a
commit 337a1cb
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/editor/components/document-outline/index.js b/editor/components/document-outline/index.js
@@ -15,6 +15,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
  */
 import './style.scss';
 import DocumentOutlineItem from './item';
+import RichText from './../rich-text';
 
 /**
  * Module constants
@@ -118,7 +119,13 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 							onClick={ () => onSelectHeading( item.clientId ) }
 							path={ item.path }
 						>
-							{ item.isEmpty ? emptyHeadingContent : item.attributes.content }
+							{ item.isEmpty ?
+								emptyHeadingContent :
+								<RichText.Content
+									tagName="span"
+									value={ item.attributes.content }
+								/>
+							}
 							{ isIncorrectLevel && incorrectLevelContent }
 							{ item.level === 1 && hasMultipleH1 && multipleH1Headings }
 							{ hasTitle && item.level === 1 && ! hasMultipleH1 && singleH1Headings }

diff --git a/editor/components/document-outline/test/__snapshots__/index.js.snap b/editor/components/document-outline/test/__snapshots__/index.js.snap
@@ -12,7 +12,11 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = `
       onClick={[Function]}
       path={Array []}
     >
-      Heading parent
+      <Component
+        format="children"
+        tagName="span"
+        value="Heading parent"
+      />
     </TableOfContentsItem>
     <TableOfContentsItem
       isValid={true}
@@ -21,7 +25,11 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = `
       onClick={[Function]}
       path={Array []}
     >
-      Heading child
+      <Component
+        format="children"
+        tagName="span"
+        value="Heading child"
+      />
     </TableOfContentsItem>
   </ul>
 </div>
@@ -39,7 +47,11 @@ exports[`DocumentOutline header blocks present should render warnings for multip
       onClick={[Function]}
       path={Array []}
     >
-      Heading 1
+      <Component
+        format="children"
+        tagName="span"
+        value="Heading 1"
+      />
       <br
         key="incorrect-break-multiple-h1"
       />
@@ -56,7 +68,11 @@ exports[`DocumentOutline header blocks present should render warnings for multip
       onClick={[Function]}
       path={Array []}
     >
-      Heading 1
+      <Component
+        format="children"
+        tagName="span"
+        value="Heading 1"
+      />
       <br
         key="incorrect-break-multiple-h1"
       />