open internal links in the app #2124

src/shared/hooks/useOnInternalLinkClick.ts

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { useHistory } from "react-router-dom";
+import { InternalLinkData } from "../components";
+import { QueryParamKey, ROUTE_PATHS } from "../constants";
+import { useRoutesContext } from "../contexts";
+import { getParamsFromOneOfRoutes } from "../utils";
+
+const useOnInternalLinkClick = () => {
+  const { getCommonPagePath } = useRoutesContext();
+  const history = useHistory();
+
+  const onInternalLinkClick = useCallback((data: InternalLinkData) => {
+    const feedPageParams = getParamsFromOneOfRoutes<{ id: string }>(
+      data.pathname,
+      [ROUTE_PATHS.COMMON, ROUTE_PATHS.V04_COMMON],
+    );
+
+    if (!feedPageParams) {
+      return;
+    }
+
+    const itemId = data.params[QueryParamKey.Item];
+    const messageId = data.params[QueryParamKey.Message];
+
+    history.push(
+      getCommonPagePath(feedPageParams.id, {
+        item: itemId,
+        message: messageId,
+      }),
+    );
+  }, []);
+
+  return { onInternalLinkClick };
+};
+
+export default useOnInternalLinkClick;

src/shared/ui-kit/TextEditor/components/Leaf/Leaf.module.scss

@@ -15,3 +15,9 @@
 .underline {
   text-decoration: underline;
 }
+
+.internalLink {
+  cursor: pointer;
+  text-decoration: underline;
+  color: var(--primary-fill);
+}

src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx

@@ -1,17 +1,32 @@
 import React, { FC } from "react";
 import classNames from "classnames";
 import { RenderLeafProps } from "slate-react";
+import { parseMessageLink } from "@/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils";
+import useOnInternalLinkClick from "@/shared/hooks/useOnInternalLinkClick";
 import styles from "./Leaf.module.scss";
 
 const Leaf: FC<RenderLeafProps> = (props) => {
   const { attributes, leaf, children } = props;
+  const { onInternalLinkClick } = useOnInternalLinkClick();
   const className = classNames(styles.leaf, {
     [styles.bold]: leaf.bold,
     [styles.italic]: leaf.italic,
     [styles.underline]: leaf.underline,
   });
   let finalEl = children;
 
+  const internalLink = parseMessageLink(leaf.text);
+  if (internalLink) {
+    finalEl = (
+      <span
+        onClick={() => onInternalLinkClick(internalLink)}
+        className={styles.internalLink}
+      >
+        {children}
+      </span>
+    );
+  }
+
   if (leaf.code) {
     finalEl = <code>{children}</code>;
   }