chore(Cross): [IOAPPX-422] Replace the legacy markdown renderer with IOMarkdown

.eslintignore

@@ -1,4 +1,3 @@
 locales/locales.ts
-ts/utils/__tests__/xss.test.ts
 definitions/*
 **/*.typegen.ts

jest-e2e.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: "react-native",
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@shopify/react-native-skia|lottie-react-native|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|@sentry/react-native)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@shopify/react-native-skia|lottie-react-native|@codler|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|@sentry/react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: "react-native",
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@shopify/react-native-skia|lottie-react-native|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|uuid|@sentry/react-native|decode-named-character-reference|mdast-util-phrasing|unist-util-is)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@shopify/react-native-skia|lottie-react-native|@codler|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|uuid|@sentry/react-native|decode-named-character-reference|mdast-util-phrasing|unist-util-is)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"

jest.config.no.timezone.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: "react-native",
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@shopify/react-native-skia|lottie-react-native|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|uuid|@sentry/react-native)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@shopify/react-native-skia|lottie-react-native|@codler|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|uuid|@sentry/react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"

jestSetup.js

@@ -56,13 +56,6 @@ global.fetch = nodeFetch;
 // eslint-disable-next-line functional/immutable-data
 global.AbortController = AbortController;
 
-jest.mock("remark-directive", () => jest.fn());
-jest.mock("remark-rehype", () => jest.fn());
-jest.mock("rehype-stringify", () => jest.fn());
-jest.mock("rehype-format", () => jest.fn());
-jest.mock("unist-util-visit", () => jest.fn());
-jest.mock("hastscript", () => jest.fn());
-
 jest.mock("react-native-device-info", () => mockRNDeviceInfo);
 
 // eslint-disable-next-line no-underscore-dangle, functional/immutable-data

package.json

@@ -92,7 +92,6 @@
     "eslint-plugin-react-native": "^4.0.0",
     "fp-ts": "^2.12.1",
     "front-matter": "^4.0.2",
-    "hastscript": "^7.0.2",
     "hoist-non-react-statics": "^3.0.1",
     "io-ts": "^2.2.16",
     "jail-monkey": "^2.8.0",
@@ -156,11 +155,6 @@
     "redux-logger": "3.0.6",
     "redux-persist": "5.10.0",
     "redux-saga": "1.1.3",
-    "rehype-format": "^4.0.0",
-    "rehype-stringify": "^9.0.2",
-    "remark": "^14.0.1",
-    "remark-directive": "^2.0.0",
-    "remark-rehype": "^9.1.0",
     "reselect": "4.0.0",
     "rn-placeholder": "^1.3.3",
     "rn-qr-generator": "^1.4.0",
@@ -169,12 +163,10 @@
     "tslib": "^1.9.3",
     "typed-redux-saga": "^1.4.0",
     "typesafe-actions": "4.4.2",
-    "unist-util-visit": "^4.1.0",
     "url-parse": "^1.5.9",
     "uuid": "^8.3.2",
     "validator": "^13.7.0",
     "xml2js": "^0.5.0",
-    "xss": "1.0.10",
     "xstate": "^5"
   },
   "devDependencies": {

ts/components/IOMarkdown/customRules.tsx

@@ -0,0 +1,54 @@
+import { TxtHeaderNode, TxtLinkNode } from "@textlint/ast-node-types";
+import { Body, IOToast, MdH1, MdH2, MdH3 } from "@pagopa/io-app-design-system";
+import React from "react";
+import { isIoInternalLink } from "../ui/Markdown/handlers/link";
+import { handleInternalLink } from "../../utils/internalLink";
+import { openWebUrl } from "../../utils/url";
+import I18n from "../../i18n";
+import { getTxtNodeKey } from "./renderRules";
+import { IOMarkdownRenderRules, Renderer } from "./types";
+
+const HEADINGS_MAP = {
+  1: MdH1,
+  2: MdH2,
+  3: MdH3,
+  4: Body,
+  5: Body,
+  6: Body
+};
+
+export const generateMessagesAndServicesRules = (
+  linkTo: (path: string) => void
+): Partial<IOMarkdownRenderRules> => ({
+  Header(header: TxtHeaderNode, render: Renderer) {
+    const Heading = HEADINGS_MAP[header.depth];
+
+    return (
+      <Heading key={getTxtNodeKey(header)}>
+        {header.children.map(render)}
+      </Heading>
+    );
+  },
+  Link(link: TxtLinkNode, render: Renderer) {
+    const handlePress = () => {
+      if (isIoInternalLink(link.url)) {
+        handleInternalLink(linkTo, link.url);
+      } else {
+        openWebUrl(link.url, () => {
+          IOToast.error(I18n.t("global.jserror.title"));
+        });
+      }
+    };
+
+    return (
+      <Body
+        weight="Semibold"
+        asLink
+        key={getTxtNodeKey(link)}
+        onPress={handlePress}
+      >
+        {link.children.map(render)}
+      </Body>
+    );
+  }
+});

ts/components/ui/Markdown/LoadingSkeleton.tsx → ts/components/ui/LoadingSkeleton.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import Placeholder from "rn-placeholder";
 import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
-import I18n from "../../../i18n";
+import I18n from "../../i18n";
 
 type LoadingSkeletonProps = {
   lines?: number;