From ff10e4ad18854bc675a58621e069ca13726e951b Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 23 May 2020 00:39:56 -0700
Subject: inline splitting

---
 frontend/src/components/renderers/Latex.js | 35 +++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 6 deletions(-)

(limited to 'frontend/src/components/renderers')

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;
+        }
     }
 }
 
-- 
cgit v1.2.3