feat: add support for inline code & pre blocks on web

Expensify · May 7, 2024 · d9a04ba · d9a04ba
1 parent 09f4caf
commit d9a04ba
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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));
   }
 }