diff --git a/package.json b/package.json index 134efdd..4b4352d 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,6 @@ "react-file-drop": "^3.1.2", "react-hotkeys": "^2.0.0", "react-i18next": "^11.8.10", - "react-linkify": "^1.0.0-alpha", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-timeago": "^5.2.0", @@ -99,7 +98,6 @@ "@types/node": "^14.14.34", "@types/react": "^17.0.3", "@types/react-dom": "^17.0.2", - "@types/react-linkify": "^1.0.0", "@types/react-redux": "^7.1.16", "@types/react-router-dom": "^5.1.7", "@types/react-timeago": "^4.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 03cd1b9..94d3144 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,7 +27,6 @@ react-file-drop: 3.1.2_react-dom@17.0.1+react@17.0.1 react-hotkeys: 2.0.0_react@17.0.1 react-i18next: 11.8.10_i18next@19.9.2+react@17.0.1 - react-linkify: 1.0.0-alpha react-redux: 7.2.2_380dc38591053d98779d1f25fc7202b9 react-router-dom: 5.2.0_react@17.0.1 react-timeago: 5.2.0_react@17.0.1 @@ -58,7 +57,6 @@ '@types/node': 14.14.34 '@types/react': 17.0.3 '@types/react-dom': 17.0.2 - '@types/react-linkify': 1.0.0 '@types/react-redux': 7.1.16 '@types/react-router-dom': 5.1.7 '@types/react-timeago': 4.1.2 @@ -2230,12 +2228,6 @@ dev: true resolution: integrity: sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg== - /@types/react-linkify/1.0.0: - dependencies: - '@types/react': 17.0.3 - dev: true - resolution: - integrity: sha512-2NKXPQGaHNfh/dCqkVC55k1tAhQyNoNZa31J50nIneMVwHqUI00FAP+Lyp8e0BarPf84kn4GRVAhtWX9XJBzSQ== /@types/react-redux/7.1.16: dependencies: '@types/hoist-non-react-statics': 3.3.1 @@ -8204,12 +8196,6 @@ dev: true resolution: integrity: sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= - /linkify-it/2.2.0: - dependencies: - uc.micro: 1.0.6 - dev: false - resolution: - integrity: sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw== /load-json-file/2.0.0: dependencies: graceful-fs: 4.2.6 @@ -11132,13 +11118,6 @@ /react-is/17.0.1: resolution: integrity: sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== - /react-linkify/1.0.0-alpha: - dependencies: - linkify-it: 2.2.0 - tlds: 1.218.0 - dev: false - resolution: - integrity: sha512-7gcIUvJkAXXttt1fmBK9cwn+1jTa4hbKLGCZ9J1U6EOkyb2/+LKL1Z28d9rtDLMnpvImlNlLPdTPooorl5cpmg== /react-redux/7.2.2_380dc38591053d98779d1f25fc7202b9: dependencies: '@babel/runtime': 7.13.10 @@ -12852,11 +12831,6 @@ dev: false resolution: integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== - /tlds/1.218.0: - dev: false - hasBin: true - resolution: - integrity: sha512-JpD3eSrYaIFlU/OvtI5WTEK+v5qXZSeUifz4hT2bJsJKx5ykjZvg6i5yXVBJNjoN3XbTCtryc7H5v8B16yHfMg== /tmpl/1.0.4: dev: true resolution: @@ -13106,10 +13080,6 @@ hasBin: true resolution: integrity: sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA== - /uc.micro/1.0.6: - dev: false - resolution: - integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== /unbox-primitive/1.0.0: dependencies: function-bind: 1.1.1 @@ -14056,7 +14026,6 @@ '@types/node': ^14.14.34 '@types/react': ^17.0.3 '@types/react-dom': ^17.0.2 - '@types/react-linkify': ^1.0.0 '@types/react-redux': ^7.1.16 '@types/react-router-dom': ^5.1.7 '@types/react-timeago': ^4.1.2 @@ -14101,7 +14070,6 @@ react-file-drop: ^3.1.2 react-hotkeys: ^2.0.0 react-i18next: ^11.8.10 - react-linkify: ^1.0.0-alpha react-redux: ^7.2.2 react-refresh: ^0.9.0 react-router-dom: ^5.2.0 diff --git a/src/components/krist/MarkdownLink.tsx b/src/components/krist/MarkdownLink.tsx new file mode 100644 index 0000000..00ae822 --- /dev/null +++ b/src/components/krist/MarkdownLink.tsx @@ -0,0 +1,29 @@ +// Copyright (c) 2020-2021 Drew Lemmy +// This file is part of KristWeb 2 under GPL-3.0. +// Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt +import { FC } from "react"; + +import { useSyncNode } from "@api"; + +// Allow overriding a link to make it open in a new tab and start with baseURL. +// This is usually used by the markdown renderers. +export function useMarkdownLink(baseURL?: string): FC { + // Default for baseURL if not specified + const syncNode = useSyncNode(); + const base = baseURL || syncNode; + + return ({ title, href, children }) => { + // Force the link to start with baseURL/syncNode if it's relative + const absLink = href.startsWith("/") + ? base + href + : href; + + return + {children} + ; + }; +} diff --git a/src/pages/dashboard/MOTDCard.tsx b/src/pages/dashboard/MOTDCard.tsx index dedabc9..3968a3e 100644 --- a/src/pages/dashboard/MOTDCard.tsx +++ b/src/pages/dashboard/MOTDCard.tsx @@ -8,22 +8,29 @@ import { useTranslation } from "react-i18next"; -import Linkify from "react-linkify"; +import Markdown from "markdown-to-jsx"; +import { useMarkdownLink } from "@comp/krist/MarkdownLink"; import { DateTime } from "@comp/DateTime"; export function MOTDCard(): JSX.Element { const { t } = useTranslation(); - const { motd, motdSet, debugMode } = useSelector((s: RootState) => s.node.motd); + const { motd, motdSet, debugMode } + = useSelector((s: RootState) => s.node.motd); + + // Make relative links start with the sync node, and override all links to + // open in a new tab + const MarkdownLink = useMarkdownLink(); return {debugMode && }

- ( - {text} - )}> + {motd} - +

diff --git a/src/pages/whatsnew/WhatsNewCard.tsx b/src/pages/whatsnew/WhatsNewCard.tsx index 2874a75..b2c791d 100644 --- a/src/pages/whatsnew/WhatsNewCard.tsx +++ b/src/pages/whatsnew/WhatsNewCard.tsx @@ -1,7 +1,6 @@ // Copyright (c) 2020-2021 Drew Lemmy // This file is part of KristWeb 2 under GPL-3.0. // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt -import { FC } from "react"; import classNames from "classnames"; import { Card, Skeleton, Tag } from "antd"; @@ -10,6 +9,7 @@ import { WhatsNewItem } from "./types"; import Markdown from "markdown-to-jsx"; +import { useMarkdownLink } from "@comp/krist/MarkdownLink"; import { DateTime } from "@comp/DateTime"; import { slice } from "lodash-es"; @@ -54,22 +54,7 @@ function WhatsNew({ whatsNew, baseURL, repoURL }: WhatsNewProps): JSX.Element { const { t } = useTranslation(); - - // Allow overriding a link to make it open in a new tab and start with baseURL - const OverrideLink: FC = ({ title, href, children }) => { - // Force the link to start with baseURL if it's relative - const absLink = href.startsWith("/") - ? baseURL + href - : href; - - return - {children} - ; - }; + const MarkdownLink = useMarkdownLink(baseURL); return
@@ -81,9 +66,7 @@ {/* What's new item body */} {whatsNew.body}