diff --git a/web/src/components/config_render/ConfigCheckbox.tsx b/web/src/components/config_render/ConfigCheckbox.tsx
index e31635a3e7..14913fcc91 100644
--- a/web/src/components/config_render/ConfigCheckbox.tsx
+++ b/web/src/components/config_render/ConfigCheckbox.tsx
@@ -1,7 +1,5 @@
import { ChangeEvent, Component, createRef } from "react";
-// TODO: add type checking support for react-remarkable or add a global ignore
-// @ts-ignore
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
import { setOrder } from "./ConfigUtil";
import { ConfigWrapper } from "./ConfigComponents";
diff --git a/web/src/components/config_render/ConfigDropdown.tsx b/web/src/components/config_render/ConfigDropdown.tsx
index 60da313d29..109ed25f2f 100644
--- a/web/src/components/config_render/ConfigDropdown.tsx
+++ b/web/src/components/config_render/ConfigDropdown.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
import { ConfigWrapper } from "./ConfigComponents";
import ConfigItemTitle from "./ConfigItemTitle";
import Icon from "@components/Icon";
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
import { isEmpty } from "lodash";
const ConfigDropdown = (props) => {
diff --git a/web/src/components/config_render/ConfigFileInput.jsx b/web/src/components/config_render/ConfigFileInput.jsx
index dffa86219f..0f16e82d50 100644
--- a/web/src/components/config_render/ConfigFileInput.jsx
+++ b/web/src/components/config_render/ConfigFileInput.jsx
@@ -2,7 +2,7 @@ import { Component } from "react";
import FileInput from "./FileInput";
import ConfigItemTitle from "./ConfigItemTitle";
import map from "lodash/map";
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
export default class ConfigFileInput extends Component {
handleOnChange = (files) => {
diff --git a/web/src/components/config_render/ConfigGroup.jsx b/web/src/components/config_render/ConfigGroup.jsx
index 09029f5692..51acc0864e 100644
--- a/web/src/components/config_render/ConfigGroup.jsx
+++ b/web/src/components/config_render/ConfigGroup.jsx
@@ -1,5 +1,5 @@
-import { createRef } from "react";
-import Markdown from "react-remarkable";
+import React from "react";
+import Markdown from "../shared/Markdown";
import some from "lodash/some";
import isEmpty from "lodash/isEmpty";
import { ConfigService } from "../../services/ConfigService";
@@ -16,7 +16,6 @@ import Icon from "../Icon";
import ConfigDropdown from "./ConfigDropdown";
const ConfigGroup = (props) => {
- const markdownNode = createRef();
const handleItemChange = (itemName, value, data) => {
if (props.handleChange) {
@@ -272,7 +271,6 @@ const ConfigGroup = (props) => {
{item.description !== "" ? (
= ({ children, options = {} }) => {
+ const { linkTarget = "_blank", linkify = true } = options;
+
+ const md = new MarkdownIt({
+ linkify,
+ html: true,
+ breaks: true,
+ });
+
+ // Configure link attributes if linkTarget is specified
+ if (linkTarget) {
+ md.renderer.rules.link_open = function (tokens, idx, opts, _env, renderer) {
+ const token = tokens[idx];
+ const hrefIndex = token.attrIndex('href');
+
+ if (hrefIndex >= 0) {
+ const href = token.attrGet('href');
+ // Only add target="_blank" for external links
+ if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
+ token.attrSet('target', linkTarget);
+ token.attrSet('rel', 'noopener noreferrer');
+ }
+ }
+
+ return renderer.renderToken(tokens, idx, opts);
+ };
+ }
+
+ const html = md.render(children || "");
+
+ return ;
+};
+
+export default Markdown;
\ No newline at end of file
diff --git a/web/src/components/upgrade_service/ConfirmAndDeploy.tsx b/web/src/components/upgrade_service/ConfirmAndDeploy.tsx
index b18a529f47..c1b0691639 100644
--- a/web/src/components/upgrade_service/ConfirmAndDeploy.tsx
+++ b/web/src/components/upgrade_service/ConfirmAndDeploy.tsx
@@ -1,8 +1,6 @@
import { useEffect, useState } from "react";
import Modal from "react-modal";
-// TODO: add type checking support for react-remarkable or add a global ignore
-// @ts-ignore
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { KotsPageTitle } from "@components/Head";
@@ -165,7 +163,7 @@ const ConfirmAndDeploy = ({
{error.title}
-
+ {error.message}
{error.showCannotFail && (
@@ -198,7 +196,7 @@ const ConfirmAndDeploy = ({
{warning.title}
-
+ {warning.message}