diff --git a/src/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils/parseMessageLink.ts b/src/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils/parseMessageLink.ts index 5454df7109..e43e4a43fd 100644 --- a/src/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils/parseMessageLink.ts +++ b/src/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils/parseMessageLink.ts @@ -7,7 +7,7 @@ export interface ParseMessageLinkData { params: Record; } -export const parseMessageLink = (url: string): ParseMessageLinkData | null => { +export const parseMessageLink = (url?: string): ParseMessageLinkData | null => { if (!url) { return null; } diff --git a/src/shared/hooks/useInternalLink.ts b/src/shared/hooks/useInternalLink.ts new file mode 100644 index 0000000000..aab763f524 --- /dev/null +++ b/src/shared/hooks/useInternalLink.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 useInternalLink = () => { + 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 useInternalLink; diff --git a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss index 54b9200185..aab31db135 100644 --- a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss +++ b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss @@ -2,4 +2,6 @@ .link { color: var(--primary-fill); + cursor: pointer; + text-decoration: underline; } diff --git a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx index 2a28326665..0c38eb9fe4 100644 --- a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx +++ b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx @@ -1,5 +1,7 @@ import React, { FC } from "react"; import classNames from "classnames"; +import { parseMessageLink } from "@/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils"; +import useInternalLink from "@/shared/hooks/useInternalLink"; import { LinkElement } from "../../../../types"; import { ElementAttributes } from "../../types"; import { InlineChromiumBugfix } from "../InlineChromiumBugfix"; @@ -12,6 +14,22 @@ interface LinkProps { const Link: FC = (props) => { const { attributes, element, children } = props; + const { onInternalLinkClick } = useInternalLink(); + const internalLink = parseMessageLink(element.url); + + if (internalLink) { + return ( + onInternalLinkClick(internalLink)} + > + + {children} + + + ); + } return (