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

ts/RootContainer.tsx

@@ -2,8 +2,10 @@ import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { PureComponent } from "react";
 import {
+  AccessibilityInfo,
   AppState,
   AppStateStatus,
+  EmitterSubscription,
   NativeEventSubscription,
   StatusBar
 } from "react-native";
@@ -27,6 +29,7 @@ import {
 import { GlobalState } from "./store/reducers/types";
 import customVariables from "./theme/variables";
 import { ReactNavigationInstrumentation } from "./App";
+import { setScreenReaderEnabled } from "./store/actions/preferences";
 
 type Props = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {
@@ -43,6 +46,7 @@ type Props = ReturnType<typeof mapStateToProps> &
  */
 class RootContainer extends PureComponent<Props> {
   private subscription: NativeEventSubscription | undefined;
+  private accessibilitySubscription: EmitterSubscription | undefined;
   constructor(props: Props) {
     super(props);
     /* Configure the application to receive push notifications */
@@ -52,6 +56,11 @@ class RootContainer extends PureComponent<Props> {
   private handleApplicationActivity = (activity: AppStateStatus) =>
     this.props.applicationChangeState(activity);
 
+  private handleScreenReaderEnabled = (isScreenReaderEnabled: boolean) =>
+    this.props.setScreenReaderEnabled({
+      screenReaderEnabled: isScreenReaderEnabled
+    });
+
   public componentDidMount() {
     // boot: send the status of the application
     this.handleApplicationActivity(AppState.currentState);
@@ -60,6 +69,14 @@ class RootContainer extends PureComponent<Props> {
       "change",
       this.handleApplicationActivity
     );
+    // eslint-disable-next-line functional/immutable-data
+    this.accessibilitySubscription = AccessibilityInfo.addEventListener(
+      "screenReaderChanged",
+      this.handleScreenReaderEnabled
+    );
+    AccessibilityInfo.isScreenReaderEnabled()
+      .then(this.handleScreenReaderEnabled)
+      .catch(() => undefined);
 
     this.updateLocale();
     // Hide splash screen
@@ -80,6 +97,7 @@ class RootContainer extends PureComponent<Props> {
 
   public componentWillUnmount() {
     this.subscription?.remove();
+    this.accessibilitySubscription?.remove();
   }
 
   public componentDidUpdate() {
@@ -134,7 +152,8 @@ const mapStateToProps = (state: GlobalState) => ({
 const mapDispatchToProps = {
   applicationChangeState,
   navigateBack,
-  setDebugCurrentRouteName
+  setDebugCurrentRouteName,
+  setScreenReaderEnabled
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(RootContainer);

ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap

@@ -84,6 +84,7 @@ exports[`Check the addition for new fields to the persisted store. If one of thi
   },
   "isDesignSystemEnabled": false,
   "isFingerprintEnabled": undefined,
+  "isIOMarkdownEnabledOnMessagesAndServices": false,
   "isIdPayTestEnabled": false,
   "isMixpanelEnabled": null,
   "isPagoPATestEnabled": false,

ts/boot/configureStoreAndPersistor.ts

@@ -54,7 +54,7 @@ import { configureReactotron } from "./configureRectotron";
 /**
  * Redux persist will migrate the store to the current version
  */
-const CURRENT_REDUX_STORE_VERSION = 38;
+const CURRENT_REDUX_STORE_VERSION = 39;
 
 // see redux-persist documentation:
 // https://github.com/rt2zz/redux-persist/blob/master/docs/migrations.md
@@ -455,7 +455,18 @@ const migrations: MigrationManifest = {
     };
   },
   // Remove old wallets&payments feature and persisted state
-  "38": (state: PersistedState) => omit(state, "payments")
+  "38": (state: PersistedState) => omit(state, "payments"),
+  // Add 'isIOMarkdownEnabledOnMessagesAndServices' to 'persistedPreferences'
+  "39": (state: PersistedState) => {
+    const typedState = state as GlobalState;
+    return {
+      ...state,
+      persistedPreferences: {
+        ...typedState.persistedPreferences,
+        isIOMarkdownEnabledOnMessagesAndServices: false
+      }
+    };
+  }
 };
 
 const isDebuggingInChrome = isDevEnv && !!window.navigator.userAgent;

ts/components/IOMarkdown/customRules.tsx

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

ts/components/IOMarkdown/index.tsx

@@ -1,7 +1,13 @@
 import { memo } from "react";
 import { View } from "react-native";
+import { useIOSelector } from "../../store/hooks";
+import { isScreenReaderEnabledSelector } from "../../store/reducers/preferences";
 import { IOMarkdownRenderRules } from "./types";
-import { getRenderMarkdown, parse } from "./markdownRenderer";
+import {
+  getRenderMarkdown,
+  parse,
+  sanitizeMarkdownForImages
+} from "./markdownRenderer";
 import { DEFAULT_RULES } from "./renderRules";
 
 type Props = {
@@ -21,11 +27,16 @@ type Props = {
  * It's possible to override every single rule by passing a custom `rules` object.
  */
 const IOMarkdown = ({ content, rules }: Props) => {
-  const parsedContent = parse(content);
-  const renderMarkdown = getRenderMarkdown({
-    ...DEFAULT_RULES,
-    ...(rules || {})
-  });
+  const screenReaderEnabled = useIOSelector(isScreenReaderEnabledSelector);
+  const sanitizedMarkdown = sanitizeMarkdownForImages(content);
+  const parsedContent = parse(sanitizedMarkdown);
+  const renderMarkdown = getRenderMarkdown(
+    {
+      ...DEFAULT_RULES,
+      ...(rules || {})
+    },
+    screenReaderEnabled
+  );
 
   return <View>{parsedContent.map(renderMarkdown)}</View>;
 };

ts/components/IOMarkdown/markdownRenderer.ts

@@ -1,18 +1,35 @@
 import { parse as textLintParse } from "@textlint/markdown-to-ast";
-import { AnyTxtNode, TxtParentNode } from "@textlint/ast-node-types";
+import {
+  AnyTxtNode,
+  TxtHeaderNode,
+  TxtLinkNode,
+  TxtListNode,
+  TxtNode,
+  TxtParagraphNode,
+  TxtParentNode,
+  TxtStrNode
+} from "@textlint/ast-node-types";
 import { omit } from "lodash";
+import { isIos } from "../../utils/platform";
 import { AnyTxtNodeWithSpacer, IOMarkdownRenderRules, Renderer } from "./types";
 
 /**
  *
  * @param rules The `markdown` render rules.
  * @returns A render function for the individual node that applies the provided rendering rules.
  */
-export function getRenderMarkdown(rules: IOMarkdownRenderRules): Renderer {
+export function getRenderMarkdown(
+  rules: IOMarkdownRenderRules,
+  screenReaderEnabled: boolean
+): Renderer {
   return (content: AnyTxtNodeWithSpacer) =>
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    rules[content.type]?.(content, getRenderMarkdown(rules)) ?? null;
+    rules[content.type]?.(
+      content,
+      getRenderMarkdown(rules, screenReaderEnabled),
+      screenReaderEnabled
+    ) ?? null;
 }
 
 /**
@@ -63,3 +80,129 @@ function integrateParent<T extends AnyTxtNode>(
       }
     : { ...node, parent: parentLight };
 }
+
+export const sanitizeMarkdownForImages = (
+  inputMarkdownContent: string
+): string => {
+  const markdownImageRegex = /!\[.*?\]\((.*?)\)/g;
+
+  const reversedMatches: Array<RegExpExecArray> = [];
+  // eslint-disable-next-line functional/no-let
+  let match: RegExpExecArray | null;
+  while ((match = markdownImageRegex.exec(inputMarkdownContent)) !== null) {
+    // eslint-disable-next-line functional/immutable-data
+    reversedMatches.push(match);
+  }
+  // eslint-disable-next-line functional/immutable-data
+  reversedMatches.reverse();
+
+  return reversedMatches.reduce(
+    (sanitizedMarkdownContent, innerMatch) =>
+      insertNewLinesIfNeededOnMatch(sanitizedMarkdownContent, innerMatch),
+    inputMarkdownContent
+  );
+};
+
+export const insertNewLinesIfNeededOnMatch = (
+  markdownContent: string,
+  imageMatch: RegExpExecArray
+): string => {
+  const matchStartIndex = imageMatch.index;
+  const matchEndIndex = matchStartIndex + imageMatch[0].length;
+  const sanitizedMarkdownContent = insertNewLineAtIndexIfNeeded(
+    markdownContent,
+    matchEndIndex
+  );
+  return insertNewLineAtIndexIfNeeded(
+    sanitizedMarkdownContent,
+    matchStartIndex - 1,
+    true
+  );
+};
+
+const insertNewLineAtIndexIfNeeded = (
+  markdownContent: string,
+  baseIndex: number,
+  insertAfterIndex: boolean = false
+) => {
+  if (baseIndex >= 0 && baseIndex < markdownContent.length) {
+    const character = markdownContent[baseIndex];
+    if (character !== "\n") {
+      const index = insertAfterIndex ? baseIndex + 1 : baseIndex;
+      return [
+        markdownContent.slice(0, index),
+        "\n\n",
+        markdownContent.slice(index)
+      ].join("");
+    }
+  }
+  return markdownContent;
+};
+
+export const isTxtParentNode = (node: TxtNode): node is TxtParentNode =>
+  node.type === "Paragraph" ||
+  node.type === "Header" ||
+  node.type === "BlockQuote" ||
+  node.type === "List" ||
+  node.type === "ListItem" ||
+  node.type === "Table" ||
+  node.type === "TableRow" ||
+  node.type === "TableCell" ||
+  node.type === "Emphasis" ||
+  node.type === "Strong" ||
+  node.type === "Delete" ||
+  node.type === "Link";
+export const isTxtLinkNode = (node: TxtNode): node is TxtLinkNode =>
+  node.type === "Link";
+export const isTxtStrNode = (node: TxtNode): node is TxtStrNode =>
+  node.type === "Str";
+
+export type LinkData = {
+  text: string;
+  url: string;
+};
+
+export const extractAllLinksFromRootNode = (
+  node: TxtHeaderNode | TxtListNode | TxtParagraphNode,
+  screenReaderEnabled: boolean
+): ReadonlyArray<LinkData> => {
+  const allLinkData: Array<LinkData> = [];
+  if (node.parent?.type === "Document" && isIos && screenReaderEnabled) {
+    extractAllLinksFromNodeWithChildren(node, allLinkData);
+  }
+  return allLinkData;
+};
+
+export const extractAllLinksFromNodeWithChildren = (
+  nodeWithChildren: Readonly<TxtParentNode>,
+  allLinks: Array<LinkData>
+) => {
+  nodeWithChildren.children.forEach(node => {
+    if (isTxtLinkNode(node)) {
+      const composedLink: Array<string> = [];
+      extractLinkDataFromRootNode(node, composedLink);
+      const text = composedLink.join("");
+      const url = node.url;
+      // eslint-disable-next-line functional/immutable-data
+      allLinks.push({
+        text,
+        url
+      });
+    } else if (isTxtParentNode(node)) {
+      extractAllLinksFromNodeWithChildren(node, allLinks);
+    }
+  });
+};
+
+export const extractLinkDataFromRootNode = (
+  inputNode: Readonly<TxtParentNode>,
+  links: Array<string>
+): void =>
+  inputNode.children.forEach(node => {
+    if (isTxtStrNode(node)) {
+      // eslint-disable-next-line functional/immutable-data
+      links.push(node.value);
+    } else if (isTxtParentNode(node)) {
+      extractLinkDataFromRootNode(node, links);
+    }
+  });