fix(pubcontent): render soft-line break + editor inline code styles

seed-hypermedia · Nov 1, 2023 · 061110a · 061110a
1 parent ffc22ad
commit 061110a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git 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
@@ -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"