fix: correctly parse the content displayed to the user (#56, #61)

NoMercy235 · Apr 4, 2020 · 77117be · 77117be
1 parent 25c2322
commit 77117be
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 22 deletions.
diff --git a/src/admin/story-view/view/components/general/GeneralTab.js b/src/admin/story-view/view/components/general/GeneralTab.js
@@ -17,7 +17,7 @@ class GeneralTab extends Component {
           variant="h6"
           color="inherit"
         >
-          {story.shortDescription}
+          {parseContent(story.shortDescription)}
         </Typography>
         <div className={styles.longDescriptionContainer}>
           <img

diff --git a/src/admin/story-view/view/components/write-story/node-preview/NodePreview.js b/src/admin/story-view/view/components/write-story/node-preview/NodePreview.js
@@ -9,6 +9,7 @@ import { OptionModel } from '../../../../../../infrastructure/models/OptionModel
 import { OPTIONS_ADMIN_TABLE } from '../../../../../../shared/constants/tables';
 import { renderOptionTableTitle } from '../../sequences/option-table/OptionTableTitle';
 import TableCmp from '../../../../../../shared/components/table/TableCmp';
+import { parseContent } from '../../../../../../shared/utilities';
 
 import { styles } from './NodePreview.css';
 
@@ -92,9 +93,7 @@ class NodePreview extends Component {
         <div className={classes.previewContainer}>
           {this.renderPreviewHeader()}
           <Divider className={classes.divider}/>
-          <Typography>
-            {sequence.content}
-          </Typography>
+          {parseContent(sequence.content)}
           <Divider className={classes.divider}/>
           {this.renderOptionsTable()}
         </div>

diff --git a/src/public/story-read/view/components/sequence/DisplaySequence.js b/src/public/story-read/view/components/sequence/DisplaySequence.js
@@ -52,10 +52,6 @@ class DisplaySequence extends Component {
     );
   };
 
-  renderContent = () => {
-    return parseContent(this.props.seq.content);
-  };
-
   componentDidUpdate () {
     this.scrollToCardTop();
   }
@@ -68,7 +64,7 @@ class DisplaySequence extends Component {
           <CardHeader title={this.renderTitle()}/>
           <CardContent>
             {this.renderPicture()}
-            {this.renderContent()}
+            {parseContent(seq.content)}
           </CardContent>
           <CardActions disableSpacing>
             <List className={styles.optionsContainer}>

diff --git a/src/shared/utilities.js b/src/shared/utilities.js
@@ -2,19 +2,12 @@ import React from 'react';
 import { createMuiTheme, Typography } from '@material-ui/core';
 import { runInAction } from 'mobx';
 
-export const parseContent = (content, options = {}) => {
-  return content.split('\n').map((line, i) => {
-    if (line === '') return <br key={i}/>;
-    return (
-      <Typography
-        key={i}
-        className={options.className || ''}
-        variant={options.variant || 'h6'}
-      >
-        {line}
-      </Typography>
-    );
-  });
+export const parseContent = (content) => {
+  return (
+    <Typography component="pre" style={{ whiteSpace: 'pre-line' }}>
+      {content}
+    </Typography>
+  );
 };
 
 /**