inline splitting

2 files changed, 30 insertions, 8 deletions

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 615dc2a..8012b99 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -31,8 +31,7 @@ const FlexRight = styled.div`
 `
 
 const LatexWrapper = styled.div`
-    margin-top: 2em;
-    margin-bottom: 2em;
+    margin: 2em;
 `
 
 class NewPaste extends React.Component {
diff --git a/frontend/src/components/renderers/Latex.js b/frontend/src/components/renderers/Latex.js
index 299432e..c5dd57c 100644
--- a/frontend/src/components/renderers/Latex.js
+++ b/frontend/src/components/renderers/Latex.js
@@ -1,14 +1,37 @@
 import React from 'react';
-import { BlockMath } from 'react-katex';
+import { BlockMath, InlineMath } from 'react-katex';
 import 'katex/dist/katex.min.css';
+import styled from 'styled-components'
+
+const StyledInlineLatex = styled.div`
+    display: block;
+    margin-bottom: 0.5em;
+`
 
 class Latex extends React.Component {
     render() {
-        return (
-            <BlockMath>
-                {this.props.content}
-            </BlockMath>
-        );
+        // split by line break chars (\\, \newline, \break)
+        const els = this.props.content.split(/\\\\|\\newline|\\break/)
+
+        // if <=1 lines, just render block
+        if (els.length <= 1) {
+            return (
+                <BlockMath>
+                    {this.props.content}
+                </BlockMath>
+            );
+        } else {
+            // new inline block for every line
+            const blocks = els.map(line => 
+                <StyledInlineLatex>
+                    <InlineMath>
+                        {line}
+                    </InlineMath>
+                </StyledInlineLatex>
+            )
+
+            return blocks;
+        }
     }
 }