From d9a04ba56b50763d052bce82d9ca6c25ebb842f3 Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Tue, 7 May 2024 12:08:03 +0200
Subject: [PATCH] feat: add support for inline code & pre blocks on web

---
 ...ownTextInputDecoratorViewNativeComponent.ts |  4 ++++
 src/styleUtils.ts                              |  4 ++++
 src/web/parserUtils.ts                         | 18 ++++++++++++++----
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/MarkdownTextInputDecoratorViewNativeComponent.ts b/src/MarkdownTextInputDecoratorViewNativeComponent.ts
index 0c7d2338..12c87b27 100644
--- a/src/MarkdownTextInputDecoratorViewNativeComponent.ts
+++ b/src/MarkdownTextInputDecoratorViewNativeComponent.ts
@@ -30,6 +30,7 @@ interface MarkdownStyle {
     borderColor: ColorValue;
     borderWidth: Float;
     borderRadius: Float;
+    borderStyle: string;
     padding: Float;
   };
   pre: {
@@ -40,7 +41,10 @@ interface MarkdownStyle {
     borderColor: ColorValue;
     borderWidth: Float;
     borderRadius: Float;
+    borderStyle: string;
     padding: Float;
+    marginTop: Float;
+    marginBottom: Float;
   };
   mentionHere: {
     color: ColorValue;
diff --git a/src/styleUtils.ts b/src/styleUtils.ts
index 9c9eeb2d..3a64b9f7 100644
--- a/src/styleUtils.ts
+++ b/src/styleUtils.ts
@@ -40,6 +40,7 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
       borderColor: 'gray',
       borderWidth: 1,
       borderRadius: 4,
+      borderStyle: 'solid',
       padding: 0,
     },
     pre: {
@@ -51,6 +52,9 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
       borderWidth: 1,
       borderRadius: 4,
       padding: 2,
+      borderStyle: 'solid',
+      marginTop: 5,
+      marginBottom: 5,
     },
     mentionHere: {
       color: 'green',
diff --git a/src/web/parserUtils.ts b/src/web/parserUtils.ts
index 1daa6621..8d1f87c9 100644
--- a/src/web/parserUtils.ts
+++ b/src/web/parserUtils.ts
@@ -20,6 +20,9 @@ type NestedNode = {
 
 function addStyling(targetElement: HTMLElement, type: MarkdownType, markdownStyle: PartialMarkdownStyle) {
   const node = targetElement;
+  Object.assign(node.dataset, {
+    type,
+  });
   switch (type) {
     case 'syntax':
       Object.assign(node.style, markdownStyle.syntax);
@@ -49,12 +52,17 @@ function addStyling(targetElement: HTMLElement, type: MarkdownType, markdownStyl
       });
       break;
     case 'code':
-      Object.assign(node.style, markdownStyle.code);
+      Object.assign(node.style, {...markdownStyle.code, lineHeight: 1.4});
       break;
     case 'pre':
-      Object.assign(node.style, markdownStyle.pre);
+      Object.assign(node.style, {
+        ...markdownStyle.pre,
+        display: 'block',
+        maxWidth: '100%',
+        width: 'max-content',
+        boxSizing: 'border-box',
+      });
       break;
-
     case 'blockquote':
       Object.assign(node.style, {
         ...markdownStyle.blockquote,
@@ -77,7 +85,9 @@ function addStyling(targetElement: HTMLElement, type: MarkdownType, markdownStyl
 
 function addSubstringAsTextNode(root: HTMLElement, text: string, startIndex: number, endIndex: number) {
   const substring = text.substring(startIndex, endIndex);
-  if (substring.length > 0) {
+  if (root.dataset.type === 'pre' && (BrowserUtils.isChromium || BrowserUtils.isFirefox)) {
+    root.appendChild(document.createTextNode(substring.replace(/^\n|\n$/g, '')));
+  } else if (substring.length > 0) {
     root.appendChild(document.createTextNode(substring));
   }
 }