fix: 🐛 fix bug in parsing links

themashcodee · Aug 26, 2024 · 4c7240d · 4c7240d
1 parent 405350c
commit 4c7240d
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

diff --git a/src/utils/markdown_parser/elements/paragraph.tsx b/src/utils/markdown_parser/elements/paragraph.tsx
@@ -1,6 +1,7 @@
 import {
   Delete,
   Emphasis,
+  HTML,
   InlineCode,
   Link,
   SlackBroadcast,
@@ -25,6 +26,7 @@ export const Paragraph = (props: Props) => {
     <p>
       {element.children.map((subelement, i) => {
         if (subelement.type === "text") return <Text key={i} element={subelement} />;
+        if (subelement.type === "html") return <HTML key={i} element={subelement} />;
         if (subelement.type === "emphasis") return <Emphasis key={i} element={subelement} />;
         if (subelement.type === "inlineCode") return <InlineCode key={i} element={subelement} />;
         if (subelement.type === "delete") return <Delete key={i} element={subelement} />;

diff --git a/src/utils/markdown_parser/parser.tsx b/src/utils/markdown_parser/parser.tsx
@@ -28,6 +28,16 @@ type Options = {
   hooks: GlobalStore["hooks"];
 };
 
+// Helper function to check if a string is a valid URL
+function isValidURL(string: string) {
+  try {
+    new URL(string);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
 export const markdown_parser = (markdown: string, options: Options): ReactNode => {
   if (!markdown) return null;
 
@@ -40,7 +50,16 @@ export const markdown_parser = (markdown: string, options: Options): ReactNode =
   // REPLACE SINGLE tilde WITH DOUBLE tilde
   text_string = text_string.replace(/(?<!~)~(?!~)([^~]+)~(?!~)/g, "~~$1~~");
   // CHANGE LINK FORMATTING FROM <link|label> to [label](link), EXCLUDING LINKS STARTING WITH !date
-  text_string = text_string.replace(/<(?!(?:!date))([^|>]+)\|([^>]+)>/g, "[$2]($1)");
+  text_string = text_string.replace(/<(?!(?:!date))([^|>]+)\|([^>]+)>/g, (match, link, label) => {
+    if (isValidURL(link)) return `[${label}](${link})`;
+    return match;
+  });
+  // CHANGE LINK FORMATTING FROM <link> to [link](link), EXCLUDING LINKS STARTING WITH !date
+  text_string = text_string.replace(/<(?!(?:!date))([^|>]+)>/g, (match, link) => {
+    if (isValidURL(link)) return `[${link}](${link})`;
+    return match;
+  });
+
   // REPLACE \n\n WITH '[[DOUBLE_LINE_BREAK]]' to prevent @yozora/parser to eat it
   text_string = text_string.replace(/\n\n/g, "[[DOUBLE_LINE_BREAK]]");
   // REPLACE <!here> with @here
@@ -51,6 +70,7 @@ export const markdown_parser = (markdown: string, options: Options): ReactNode =
   text_string = text_string.replace(/<!channel>/g, "@channel");
 
   const parsed_data = parser.parse(text_string);
+  console.log({ text_string, parsed_data });
 
   const elements = parsed_data.children as unknown as MarkdownElement[];
 

diff --git a/src/utils/markdown_parser/sub_elements/html.tsx b/src/utils/markdown_parser/sub_elements/html.tsx
@@ -0,0 +1,25 @@
+import { HTMLSubElement } from "../types";
+
+type Props = {
+  element: HTMLSubElement;
+};
+
+export const HTML = (props: Props) => {
+  const { element } = props;
+
+  if (!element.value) return <span>{element.value}</span>;
+  if (element.value === " ") return <span>&nbsp;</span>;
+
+  return (
+    <span>
+      {element.value.split("[[DOUBLE_LINE_BREAK]]").map((line, index) => {
+        return (
+          <span key={index}>
+            {index > 0 && <span className="slack_blocks_to_jsx__line_break_not_first"></span>}
+            {line}
+          </span>
+        );
+      })}
+    </span>
+  );
+};
diff --git a/src/utils/markdown_parser/sub_elements/index.ts b/src/utils/markdown_parser/sub_elements/index.ts
@@ -10,3 +10,4 @@ export * from "./slack_user_group_mention";
 export * from "./slack_broadcast";
 export * from "./slack_date";
 export * from "./slack_emoji";
+export * from "./html";
diff --git a/src/utils/markdown_parser/types.ts b/src/utils/markdown_parser/types.ts
@@ -3,6 +3,11 @@ export type SlackEmojiSubElement = {
   value: string;
 };
 
+export type HTMLSubElement = {
+  type: "html";
+  value: string;
+};
+
 export type SlackDateSubElement = {
   type: "slack_date";
   value: {
@@ -114,6 +119,7 @@ export type ParagraphElement = {
     | SlackBroadcastSubElement
     | SlackDateSubElement
     | SlackEmojiSubElement
+    | HTMLSubElement
   )[];
 };