fix(minor): don't render empty links

This ensures that the text styling is not messed up.
gmsgowtham · May 18, 2023 · 7f763c4 · 7f763c4
1 parent 93094a3
commit 7f763c4
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 0 deletions.
diff --git a/src/lib/Parser.tsx b/src/lib/Parser.tsx
@@ -117,6 +117,11 @@ class Parser {
 				});
 			}
 			case "link": {
+				// Don't render anchors without text and children
+				if (token.text.trim.length < 1 && token.tokens.length < 1) {
+					return null;
+				}
+
 				// Note: Linking Images (https://www.markdownguide.org/basic-syntax/#linking-images) are wrapped
 				// in paragraph token, so will be handled via `getNormalizedSiblingNodesForBlockAndInlineTokens`
 				const linkStyle = {

diff --git a/src/lib/__tests__/Markdown.spec.tsx b/src/lib/__tests__/Markdown.spec.tsx
@@ -525,6 +525,18 @@ describe("Links", () => {
 		const tree = r.toJSON();
 		expect(tree).toMatchSnapshot();
 	});
+	it("Links without text, (no render)", () => {
+		const r = render(
+			<Markdown
+				value={
+					"Table of Contents[](https://mastersoftwaretesting.com/testing-fundamentals/software-testing-101-what-is-software-testing#table-of-contents)\n-------------------------------------------------------------------------------------------------------------------------------------------\n"
+				}
+			/>,
+		);
+		expect(screen.queryByText("Table of Contents")).toBeTruthy();
+		const tree = r.toJSON();
+		expect(tree).toMatchSnapshot();
+	});
 });
 
 // https://www.markdownguide.org/basic-syntax/#images-1

diff --git a/src/lib/__tests__/__snapshots__/Markdown.spec.tsx.snap b/src/lib/__tests__/__snapshots__/Markdown.spec.tsx.snap
@@ -5038,6 +5038,112 @@ See the section on
 </RCTScrollView>
 `;
 
+exports[`Links Links without text, (no render) 1`] = `
+<RCTScrollView
+  data={
+    [
+      <Text
+        selectable={true}
+        style={
+          {
+            "borderBottomColor": "#d0d7de",
+            "borderBottomWidth": 1,
+            "color": "#333333",
+            "fontSize": 28,
+            "fontWeight": "500",
+            "lineHeight": 36,
+            "marginVertical": 8,
+            "paddingBottom": 4,
+          }
+        }
+      >
+        <Text
+          selectable={true}
+          style={
+            {
+              "borderBottomColor": "#d0d7de",
+              "borderBottomWidth": 1,
+              "color": "#333333",
+              "fontSize": 28,
+              "fontWeight": "500",
+              "lineHeight": 36,
+              "marginVertical": 8,
+              "paddingBottom": 4,
+            }
+          }
+        >
+          Table of Contents
+        </Text>
+      </Text>,
+    ]
+  }
+  getItem={[Function]}
+  getItemCount={[Function]}
+  initialNumToRender={8}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={8}
+  onContentSizeChange={[Function]}
+  onLayout={[Function]}
+  onMomentumScrollBegin={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  removeClippedSubviews={false}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={[]}
+  style={
+    {
+      "backgroundColor": "#ffffff",
+    }
+  }
+  viewabilityConfigCallbackPairs={[]}
+>
+  <View>
+    <View
+      onFocusCapture={[Function]}
+      onLayout={[Function]}
+      style={null}
+    >
+      <Text
+        selectable={true}
+        style={
+          {
+            "borderBottomColor": "#d0d7de",
+            "borderBottomWidth": 1,
+            "color": "#333333",
+            "fontSize": 28,
+            "fontWeight": "500",
+            "lineHeight": 36,
+            "marginVertical": 8,
+            "paddingBottom": 4,
+          }
+        }
+      >
+        <Text
+          selectable={true}
+          style={
+            {
+              "borderBottomColor": "#d0d7de",
+              "borderBottomWidth": 1,
+              "color": "#333333",
+              "fontSize": 28,
+              "fontWeight": "500",
+              "lineHeight": 36,
+              "marginVertical": 8,
+              "paddingBottom": 4,
+            }
+          }
+        >
+          Table of Contents
+        </Text>
+      </Text>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
 exports[`Links Titles 1`] = `
 <RCTScrollView
   data={