From 061110a35c34cbb82dec60477f97168df0d53247 Mon Sep 17 00:00:00 2001
From: Horacio Herrera <hi@horacioh.com>
Date: Wed, 1 Nov 2023 23:52:04 +0100
Subject: [PATCH] fix(pubcontent): render soft-line break + editor inline code
 styles

---
 frontend/packages/editor/src/editor.css       | 10 ++++++++
 .../shared/src/publication-content.tsx        | 25 ++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/frontend/packages/editor/src/editor.css b/frontend/packages/editor/src/editor.css
index 8ca46e666c..ab269b8bef 100644
--- a/frontend/packages/editor/src/editor.css
+++ b/frontend/packages/editor/src/editor.css
@@ -92,3 +92,13 @@
 [data-list-type='ol'] .node-blockContainer {
   display: list-item;
 }
+
+.editor code {
+  background-color: var(--color4);
+  font-family: 'ui-monospace', 'SFMono-Regular', 'SF Mono', Menlo, Consolas,
+    'Liberation Mono', monospace;
+  overflow: hidden;
+  font-size: 0.8em;
+  line-height: 1.5;
+  padding: 2px var(--space-7);
+}
diff --git a/frontend/packages/shared/src/publication-content.tsx b/frontend/packages/shared/src/publication-content.tsx
index 163281a3ab..27882ffef1 100644
--- a/frontend/packages/shared/src/publication-content.tsx
+++ b/frontend/packages/shared/src/publication-content.tsx
@@ -782,7 +782,27 @@ function InlineContentView({
             textDecorationLine = 'line-through'
           }
 
-          let children: any = content.text
+          // TODO: fix this hack to render soft-line breaks
+          let children: any = content.text.split('\n')
+
+          if (children.length > 1) {
+            children = children.map(
+              (l: string, i: number, a: Array<string>) => {
+                if (a.length == i - 1) {
+                  return l
+                } else {
+                  return (
+                    <>
+                      {l}
+                      <br />
+                    </>
+                  )
+                }
+              },
+            )
+          } else {
+            children = content.text
+          }
 
           if (content.styles.bold) {
             children = (
@@ -807,8 +827,7 @@ function InlineContentView({
           if (content.styles.code) {
             children = (
               <Text
-                backgroundColor="$backgroundFocus"
-                // bg="red"
+                backgroundColor="$color4"
                 fontFamily="$mono"
                 tag="code"
                 borderRadius="$2"