fix symbol render bug + latex line break support

2 files changed, 18 insertions, 4 deletions

diff --git a/frontend/src/components/renderers/Latex.js b/frontend/src/components/renderers/Latex.js
index 7aacf7a..6915f75 100644
--- a/frontend/src/components/renderers/Latex.js
+++ b/frontend/src/components/renderers/Latex.js
@@ -10,8 +10,17 @@ const StyledInlineLatex = styled.div`
 
 class Latex extends React.Component {
     render() {
-        // split by line break chars (\\, \newline, \break)
-        const els = this.props.content.split(/\\\\|\\newline|\\break/)
+        // split by \begin{...} and \end{...} flags
+        const els = this.props.content.split(/(\\begin\{.*\}[\s\S]*?\\end\{.*\})/gm).map(line => {
+            // line doesnt start with \begin{...}, safe to split on \\
+            if (!line.match(/^(\\begin\{.*\})/)) {
+                return line.split("\\\\")
+            } else {
+                return line
+            }
+        }).flat()
+
+        console.log(els)
 
         // if <=1 lines, just render block
         if (els.length <= 1) {
@@ -22,7 +31,7 @@ class Latex extends React.Component {
             );
         } else {
             // new inline block for every line
-            const blocks = els.map(line => 
+            const blocks = els.map(line =>
                 <StyledInlineLatex>
                     <InlineMath>
                         {line}
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 36c6d2c..7852e4d 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -25,8 +25,13 @@ textarea, input[type=text], input[type=password], .Dropdown-root {
   margin: 1.7em 0;
 }
 
+/* fix weird symbol height in render mode */
 .large-op {
-  transform: translateY(-0.6em);
+  transform: translateY(-0.55em);
+}
+
+.small-op {
+  transform: translateY(-0.1em);
 }
 
 code, pre {