From d950c7415d3145296cbab49c27b09a3b552ddb7b Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Tue, 12 Oct 2021 19:23:55 +0300
Subject: [PATCH] Fix rendering markdown links (#18417)
---
frontend/src/metabase/visualizations/visualizations/Text.jsx | 5 +++++
.../test/metabase/scenarios/dashboard/text-box.cy.spec.js | 2 +-
package.json | 1 +
yarn.lock | 2 +-
4 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/frontend/src/metabase/visualizations/visualizations/Text.jsx b/frontend/src/metabase/visualizations/visualizations/Text.jsx
index fa883587db2..780a9f3c764 100644
--- a/frontend/src/metabase/visualizations/visualizations/Text.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Text.jsx
@@ -1,6 +1,7 @@
/* eslint-disable react/prop-types */
import React, { Component } from "react";
import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
import styles from "./Text.css";
import cx from "classnames";
@@ -20,6 +21,8 @@ const getSettingsStyle = settings => ({
"justify-end": settings["text.align_vertical"] === "bottom",
});
+const REMARK_PLUGINS = [remarkGfm];
+
export default class Text extends Component {
props: VisualizationProps;
state: State;
@@ -109,6 +112,7 @@ export default class Text extends Component {
<div className={cx(className, styles.Text)}>
{this.props.isPreviewing ? (
<ReactMarkdown
+ remarkPlugins={REMARK_PLUGINS}
className={cx(
"full flex-full flex flex-column text-card-markdown",
styles["text-card-markdown"],
@@ -145,6 +149,7 @@ export default class Text extends Component {
})}
>
<ReactMarkdown
+ remarkPlugins={REMARK_PLUGINS}
className={cx(
"full flex-full flex flex-column text-card-markdown",
styles["text-card-markdown"],
diff --git a/frontend/test/metabase/scenarios/dashboard/text-box.cy.spec.js b/frontend/test/metabase/scenarios/dashboard/text-box.cy.spec.js
index c592b1d2ca7..2e71b360163 100644
--- a/frontend/test/metabase/scenarios/dashboard/text-box.cy.spec.js
+++ b/frontend/test/metabase/scenarios/dashboard/text-box.cy.spec.js
@@ -95,7 +95,7 @@ describe("scenarios > dashboard > text-box", () => {
.scrollTo("bottom");
});
- it.skip("should literal links, and not just the markdown flavor of it (metabse#18114)", () => {
+ it("should render html links, and not just the markdown flavor of them (metabase#18114)", () => {
addTextBox(
"- Visit https://www.metabase.com{enter}- Or go to [Metabase](https://www.metabase.com)",
);
diff --git a/package.json b/package.json
index 90fc5db1f1d..52b3c8451e9 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
"redux-router": "^2.1.2",
"regenerator": "^0.14.1",
"regexp.escape": "^1.1.0",
+ "remark-gfm": "1.0.0",
"reselect": "^3.0.0",
"resize-observer-polyfill": "^1.5.1",
"screenfull": "^4.2.1",
diff --git a/yarn.lock b/yarn.lock
index a277ed951fd..5477d5bee17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13442,7 +13442,7 @@ relateurl@^0.2.7:
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
-remark-gfm@^1.0.0:
+remark-gfm@1.0.0, remark-gfm@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-1.0.0.tgz#9213643001be3f277da6256464d56fd28c3b3c0d"
integrity sha512-KfexHJCiqvrdBZVbQ6RopMZGwaXz6wFJEfByIuEwGf0arvITHjiKKZ1dpXujjH9KZdm1//XJQwgfnJ3lmXaDPA==
--
GitLab