From a75e6a44aff57eaa1511a70e53a6762568af6714 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 6 Dec 2023 14:19:05 -0500 Subject: [PATCH 1/7] added hook useOnInternalLinkClick ; use onInternalLinkClick on in --- src/shared/hooks/useOnInternalLinkClick.ts | 45 +++++++++++++++++++ .../components/Leaf/Leaf.module.scss | 6 +++ .../TextEditor/components/Leaf/Leaf.tsx | 15 +++++++ 3 files changed, 66 insertions(+) create mode 100644 src/shared/hooks/useOnInternalLinkClick.ts diff --git a/src/shared/hooks/useOnInternalLinkClick.ts b/src/shared/hooks/useOnInternalLinkClick.ts new file mode 100644 index 0000000000..2683974fc6 --- /dev/null +++ b/src/shared/hooks/useOnInternalLinkClick.ts @@ -0,0 +1,45 @@ +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]; + + // if (itemId) { + // console.log("ITEM ID!") + // // handleFeedItemClick(itemId, { + // // commonId: feedPageParams.id, + // // messageId, + // // }); + // // return; + // } + + history.push( + getCommonPagePath(feedPageParams.id, { + item: itemId, + message: messageId, + }), + ); + }, []); + + return { onInternalLinkClick }; +}; + +export default useOnInternalLinkClick; diff --git a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.module.scss b/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.module.scss index d5d1284f7b..3c44e12aef 100644 --- a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.module.scss +++ b/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); +} diff --git a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx b/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx index 609d3082f4..393c270630 100644 --- a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx +++ b/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx @@ -1,10 +1,13 @@ 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 = (props) => { const { attributes, leaf, children } = props; + const { onInternalLinkClick } = useOnInternalLinkClick(); const className = classNames(styles.leaf, { [styles.bold]: leaf.bold, [styles.italic]: leaf.italic, @@ -12,6 +15,18 @@ const Leaf: FC = (props) => { }); let finalEl = children; + const internalLink = parseMessageLink(leaf.text); + if (internalLink) { + finalEl = ( + onInternalLinkClick(internalLink)} + className={styles.internalLink} + > + {leaf.text} + + ); + } + if (leaf.code) { finalEl = {children}; } From ebf64e94f6e24b1bde474589fe0c29e87ea9f247 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 7 Dec 2023 11:18:54 -0500 Subject: [PATCH 2/7] . --- src/shared/hooks/useOnInternalLinkClick.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/shared/hooks/useOnInternalLinkClick.ts b/src/shared/hooks/useOnInternalLinkClick.ts index 2683974fc6..b5fbf39383 100644 --- a/src/shared/hooks/useOnInternalLinkClick.ts +++ b/src/shared/hooks/useOnInternalLinkClick.ts @@ -22,15 +22,6 @@ const useOnInternalLinkClick = () => { const itemId = data.params[QueryParamKey.Item]; const messageId = data.params[QueryParamKey.Message]; - // if (itemId) { - // console.log("ITEM ID!") - // // handleFeedItemClick(itemId, { - // // commonId: feedPageParams.id, - // // messageId, - // // }); - // // return; - // } - history.push( getCommonPagePath(feedPageParams.id, { item: itemId, From 52ebecdd0bc302353f7ceea7f0c0ac260e2c9d73 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 11 Dec 2023 22:32:27 -0600 Subject: [PATCH 3/7] fix crash when copy-paste link into editor --- src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx b/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx index 393c270630..909bbec787 100644 --- a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx +++ b/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx @@ -22,7 +22,7 @@ const Leaf: FC = (props) => { onClick={() => onInternalLinkClick(internalLink)} className={styles.internalLink} > - {leaf.text} + {children} ); } From 15bb8ce4e1b9044198913a979d2d3b499fbd7900 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 13 Dec 2023 08:57:51 -0600 Subject: [PATCH 4/7] useOnInternalLinkClick -> useInternalLink --- .../hooks/{useOnInternalLinkClick.ts => useInternalLink.ts} | 4 ++-- src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename src/shared/hooks/{useOnInternalLinkClick.ts => useInternalLink.ts} (92%) diff --git a/src/shared/hooks/useOnInternalLinkClick.ts b/src/shared/hooks/useInternalLink.ts similarity index 92% rename from src/shared/hooks/useOnInternalLinkClick.ts rename to src/shared/hooks/useInternalLink.ts index b5fbf39383..aab763f524 100644 --- a/src/shared/hooks/useOnInternalLinkClick.ts +++ b/src/shared/hooks/useInternalLink.ts @@ -5,7 +5,7 @@ import { QueryParamKey, ROUTE_PATHS } from "../constants"; import { useRoutesContext } from "../contexts"; import { getParamsFromOneOfRoutes } from "../utils"; -const useOnInternalLinkClick = () => { +const useInternalLink = () => { const { getCommonPagePath } = useRoutesContext(); const history = useHistory(); @@ -33,4 +33,4 @@ const useOnInternalLinkClick = () => { return { onInternalLinkClick }; }; -export default useOnInternalLinkClick; +export default useInternalLink; diff --git a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx b/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx index 909bbec787..1a6eb40b0e 100644 --- a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx +++ b/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.tsx @@ -2,12 +2,12 @@ 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 useInternalLink from "@/shared/hooks/useInternalLink"; import styles from "./Leaf.module.scss"; const Leaf: FC = (props) => { const { attributes, leaf, children } = props; - const { onInternalLinkClick } = useOnInternalLinkClick(); + const { onInternalLinkClick } = useInternalLink(); const className = classNames(styles.leaf, { [styles.bold]: leaf.bold, [styles.italic]: leaf.italic, From c2f5b1dee073f844c9c9467b0d2322a79c8a93a7 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 18 Dec 2023 17:52:44 -0600 Subject: [PATCH 5/7] use useInternalLink in --- .../utils/parseMessageLink.ts | 2 +- .../Element/components/Link/Link.tsx | 22 +++++++++++++++++++ .../TextEditor/components/Leaf/Leaf.tsx | 15 ------------- 3 files changed, 23 insertions(+), 16 deletions(-) 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/ui-kit/TextEditor/components/Element/components/Link/Link.tsx b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx index 2a28326665..3662c8a32f 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,26 @@ interface LinkProps { const Link: FC = (props) => { const { attributes, element, children } = props; + const { onInternalLinkClick } = useInternalLink(); + + console.log(element); + const internalLink = parseMessageLink(element.url); + + console.log(element); + if (internalLink) { + console.log("internalLink"); + return ( + onInternalLinkClick(internalLink)} + > + + {children} + + + ); + } return ( = (props) => { const { attributes, leaf, children } = props; - const { onInternalLinkClick } = useInternalLink(); const className = classNames(styles.leaf, { [styles.bold]: leaf.bold, [styles.italic]: leaf.italic, @@ -15,18 +12,6 @@ const Leaf: FC = (props) => { }); let finalEl = children; - const internalLink = parseMessageLink(leaf.text); - if (internalLink) { - finalEl = ( - onInternalLinkClick(internalLink)} - className={styles.internalLink} - > - {children} - - ); - } - if (leaf.code) { finalEl = {children}; } From 99e59321e0d69ddbc1c7acb43887d46f58a0ffa4 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 18 Dec 2023 18:00:36 -0600 Subject: [PATCH 6/7] clean and add styles to links --- .../components/Element/components/Link/Link.module.scss | 2 ++ .../TextEditor/components/Element/components/Link/Link.tsx | 4 ---- 2 files changed, 2 insertions(+), 4 deletions(-) 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 3662c8a32f..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 @@ -15,13 +15,9 @@ interface LinkProps { const Link: FC = (props) => { const { attributes, element, children } = props; const { onInternalLinkClick } = useInternalLink(); - - console.log(element); const internalLink = parseMessageLink(element.url); - console.log(element); if (internalLink) { - console.log("internalLink"); return ( Date: Mon, 18 Dec 2023 18:01:47 -0600 Subject: [PATCH 7/7] clean --- .../ui-kit/TextEditor/components/Leaf/Leaf.module.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.module.scss b/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.module.scss index 3c44e12aef..d5d1284f7b 100644 --- a/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.module.scss +++ b/src/shared/ui-kit/TextEditor/components/Leaf/Leaf.module.scss @@ -15,9 +15,3 @@ .underline { text-decoration: underline; } - -.internalLink { - cursor: pointer; - text-decoration: underline; - color: var(--primary-fill); -}