@pagopa/io-app-design-system 6.0.6 → 6.1.0

package/src/components/markdown/parser.ts

@@ -0,0 +1,334 @@
+import MarkdownIt, { Token } from "markdown-it";
+import { pipe } from "../../utils/pipe";
+import { MarkdownNode, MarkdownNodeType } from "./types";
+
+/* Two markdown-it instances: lite (no HTML) and full (HTML enabled) */
+const mdLite = MarkdownIt({ html: false, typographer: false, linkify: false });
+const mdFull = MarkdownIt({ html: true, typographer: false, linkify: false });
+
+/**
+ * Creates a zero-dependency key generator for the markdown AST.
+ *
+ * These keys are only used as local React render keys, so they do not need
+ * cryptographic randomness or an external package: a per-parse incrementing
+ * counter is sufficient for our needs.
+ */
+const createKeyFactory = () => {
+  // eslint-disable-next-line functional/no-let
+  let keyCounter = 0;
+
+  return (prefix: string) => `md_${prefix}_${keyCounter++}`;
+};
+
+/**
+ * Complete set of all supported node types.
+ */
+const ALL_TYPES = new Set<string>([
+  /* lite types */
+  "heading1",
+  "heading2",
+  "heading3",
+  "heading4",
+  "heading5",
+  "heading6",
+  "paragraph",
+  "text",
+  "strong",
+  "em",
+  "link",
+  "softbreak",
+  "hardbreak",
+  /* full types */
+  "bullet_list",
+  "ordered_list",
+  "list_item",
+  "blockquote",
+  "image",
+  "code_inline",
+  "fence",
+  "hr",
+  "html_block",
+  "html_inline"
+]);
+
+/**
+ * The types disabled when using IOMarkdownLite.
+ */
+export const LITE_DISABLED_TYPES: ReadonlyArray<MarkdownNodeType> = [
+  "heading1",
+  "heading2",
+  "heading3",
+  "heading4",
+  "heading5",
+  "heading6",
+  "bullet_list",
+  "ordered_list",
+  "list_item",
+  "blockquote",
+  "image",
+  "code_inline",
+  "fence",
+  "hr",
+  "html_block",
+  "html_inline"
+];
+
+/**
+ * Maps a markdown-it token type to a MarkdownNodeType.
+ * Normalizes `*_open` / `*_close` suffixes and heading tags.
+ * Returns undefined for unsupported or disabled types.
+ */
+const getNodeType = (
+  token: Token,
+  enabledTypes: Set<string>
+): MarkdownNodeType | undefined => {
+  const cleanedType = token.type.replace(/_open|_close/g, "");
+
+  const type =
+    cleanedType === "heading"
+      ? `${cleanedType}${token.tag.slice(1)}`
+      : cleanedType;
+
+  return enabledTypes.has(type) ? (type as MarkdownNodeType) : undefined;
+};
+
+/**
+ * Flattens nested inline tokens into the parent token stream.
+ * markdown-it wraps inline content in `inline` tokens with children.
+ */
+const flattenInline = (tokens: ReadonlyArray<Token>): ReadonlyArray<Token> =>
+  tokens.reduce<ReadonlyArray<Token>>((acc, token) => {
+    if (
+      token.type === "inline" &&
+      token.children &&
+      token.children.length > 0
+    ) {
+      return [...acc, ...flattenInline(token.children)];
+    }
+    return [...acc, token];
+  }, []);
+
+/**
+ * Converts a flat array of tokens into a hierarchical AST,
+ * skipping disabled/unsupported token types entirely.
+ */
+const tokensToAST = (
+  tokens: ReadonlyArray<Token>,
+  enabledTypes: Set<string>,
+  getKey: (prefix: string) => string
+): Array<MarkdownNode> => {
+  if (!tokens || tokens.length === 0) {
+    return [];
+  }
+
+  const parseFrom = (index: number): [Array<MarkdownNode>, number] => {
+    if (index >= tokens.length) {
+      return [[], index];
+    }
+
+    const token = tokens[index];
+    const nodeType = getNodeType(token, enabledTypes);
+
+    // Closing token — stop and return to caller
+    if (token.nesting === -1) {
+      return [[], index + 1];
+    }
+
+    // Unsupported / disabled type — skip it
+    if (nodeType === undefined) {
+      if (token.nesting === 1) {
+        // Opening token: skip ahead to matching close
+        const findMatchingClose = (pos: number, depth: number): number =>
+          pos >= tokens.length || depth === 0
+            ? pos
+            : findMatchingClose(pos + 1, depth + tokens[pos].nesting);
+        return parseFrom(findMatchingClose(index + 1, 1));
+      }
+      // Self-closing / inline token: skip single token
+      return parseFrom(index + 1);
+    }
+
+    // Skip empty text nodes
+    if (nodeType === "text" && token.content === "") {
+      return parseFrom(index + 1);
+    }
+
+    const attributes = token.attrs?.reduce<Record<string, string>>(
+      (prev, [name, value]) => ({ ...prev, [name]: value }),
+      {}
+    );
+
+    const node: MarkdownNode = {
+      type: nodeType,
+      key: getKey(nodeType),
+      content: token.content || undefined,
+      attributes: attributes || undefined,
+      children: [],
+      // Preserve ordered flag for lists
+      ...(nodeType === "ordered_list" ? { ordered: true } : {}),
+      ...(nodeType === "bullet_list" ? { ordered: false } : {}),
+      // Preserve image src and alt via attributes
+      ...(nodeType === "image"
+        ? {
+            attributes: {
+              ...attributes,
+              src: token.attrGet?.("src") ?? attributes?.src ?? "",
+              alt: token.content ?? ""
+            }
+          }
+        : {})
+    };
+
+    if (token.nesting === 1) {
+      // Opening token — parse children
+      const [childNodes, nextIndex] = parseFrom(index + 1);
+
+      const nodeWithChildren: MarkdownNode = {
+        ...node,
+        children: childNodes
+      };
+      const [restNodes, finalIndex] = parseFrom(nextIndex);
+      return [[nodeWithChildren, ...restNodes], finalIndex];
+    }
+
+    // Self-closing / inline token (nesting === 0)
+    const [restNodes, finalIndex] = parseFrom(index + 1);
+    return [[node, ...restNodes], finalIndex];
+  };
+
+  const [nodes] = parseFrom(0);
+  return nodes;
+};
+
+/**
+ * Lifts image nodes out of paragraph containers so they become
+ * top-level siblings.  markdown-it always wraps images inside
+ * paragraphs; this post-processing step ensures the existing
+ * `imageRule` is actually invoked during rendering.
+ *
+ * - Paragraph with **only** image children → replaced by the images.
+ * - Paragraph with a **mix** of text and images → split into
+ *   alternating paragraph (text run) and standalone image nodes.
+ * - Paragraphs without images → unchanged.
+ */
+const liftImages = (
+  nodes: ReadonlyArray<MarkdownNode>,
+  getKey: (prefix: string) => string
+): Array<MarkdownNode> =>
+  nodes.flatMap(node => {
+    if (node.type !== "paragraph") {
+      return [node];
+    }
+
+    const hasImage = node.children.some(c => c.type === "image");
+    if (!hasImage) {
+      return [node];
+    }
+
+    // Every child is an image → lift them all out
+    const allImages = node.children.every(c => c.type === "image");
+    if (allImages) {
+      // Return images as top-level nodes (they keep their own keys)
+      return [...node.children];
+    }
+
+    // Mixed content: split children into text runs and standalone images.
+    // A single reduce accumulates finished nodes and the current text run;
+    // a trailing text run is flushed after the fold.
+    type Acc = {
+      readonly result: ReadonlyArray<MarkdownNode>;
+      readonly textRun: ReadonlyArray<MarkdownNode>;
+    };
+
+    const wrapTextRun = (run: ReadonlyArray<MarkdownNode>): MarkdownNode => ({
+      ...node,
+      key: getKey("paragraph"),
+      children: run
+    });
+
+    const { result, textRun } = node.children.reduce<Acc>(
+      (acc, child) =>
+        child.type === "image"
+          ? {
+              result: [
+                ...acc.result,
+                ...(acc.textRun.length > 0 ? [wrapTextRun(acc.textRun)] : []),
+                child
+              ],
+              textRun: []
+            }
+          : { ...acc, textRun: [...acc.textRun, child] },
+      { result: [], textRun: [] }
+    );
+
+    return textRun.length > 0 ? [...result, wrapTextRun(textRun)] : [...result];
+  });
+
+const annotateListDepth = (
+  nodes: ReadonlyArray<MarkdownNode>,
+  parentListDepth = 0
+): Array<MarkdownNode> =>
+  nodes.map(node => {
+    const listDepth = parentListDepth;
+    const childListDepth =
+      node.type === "bullet_list" || node.type === "ordered_list"
+        ? parentListDepth + 1
+        : parentListDepth;
+
+    return {
+      ...node,
+      listDepth,
+      children: annotateListDepth(node.children, childListDepth)
+    };
+  });
+
+/**
+ * Computes the enabled types set from the full set minus disabled types.
+ */
+const getEnabledTypes = (
+  disabledTypes?: ReadonlyArray<string>
+): Set<string> => {
+  if (!disabledTypes || disabledTypes.length === 0) {
+    return ALL_TYPES;
+  }
+  const disabled = new Set(disabledTypes);
+  return new Set([...ALL_TYPES].filter(t => !disabled.has(t)));
+};
+
+/**
+ * Parses a markdown source string into an AST.
+ * @param source The markdown string.
+ * @param disabledTypes Node types to exclude from parsing.
+ * @returns Array of MarkdownNode.
+ */
+export const parse = (
+  source: string,
+  disabledTypes?: ReadonlyArray<MarkdownNodeType>
+): Array<MarkdownNode> => {
+  const enabledTypes = getEnabledTypes(disabledTypes);
+  const needsHtml =
+    enabledTypes.has("html_block") || enabledTypes.has("html_inline");
+  const md = needsHtml ? mdFull : mdLite;
+  const getKey = createKeyFactory();
+
+  return pipe(
+    // 1. Tokenize the markdown source using markdown-it
+    md.parse(source, {}),
+    // 2. Unwrap nested inline tokens into a flat token stream
+    flattenInline,
+    // 3. Convert the flat token stream into a hierarchical AST
+    tokens => tokensToAST(tokens, enabledTypes, getKey),
+    // 4. Hoist image nodes out of paragraph wrappers so imageRule is invoked
+    nodes => liftImages(nodes, getKey),
+    // 5. Drop empty paragraphs left behind by disabled/lifted node types
+    nodes => nodes.filter(n => n.type !== "paragraph" || n.children.length > 0),
+    // 6. Annotate nodes with their list nesting depth for rendering
+    annotateListDepth
+  );
+};
+
+/**
+ * Parses markdown with the lite subset of rules only.
+ */
+export const parseLite = (source: string): Array<MarkdownNode> =>
+  parse(source, LITE_DISABLED_TYPES);

package/src/components/markdown/rules.tsx

@@ -0,0 +1,366 @@
+import React, { Fragment } from "react";
+import { View } from "react-native";
+import { Banner } from "../banner";
+import { Divider, HSpacer, VSpacer } from "../layout";
+import { Body } from "../typography/Body";
+import { BodyMonospace } from "../typography/BodyMonospace";
+import { H1 } from "../typography/H1";
+import { H2 } from "../typography/H2";
+import { H3 } from "../typography/H3";
+import { H4 } from "../typography/H4";
+import { H5 } from "../typography/H5";
+import { H6 } from "../typography/H6";
+import { IOText } from "../typography/IOText";
+import { CodeBlock } from "./CodeBlock";
+import { ImageRenderer } from "./ImageRenderer";
+import type {
+  MarkdownNode,
+  MarkdownNodeType,
+  RenderContext,
+  RenderRule
+} from "./types";
+import {
+  collectRawText,
+  extractPictogramName,
+  getOrderedListMarker,
+  getUnorderedListBullet,
+  isBrTag,
+  stripPictogramPrefix
+} from "./utils";
+
+/* ─── Inline flattening (shared between heading and paragraph rendering) ─── */
+
+type InlineStyle = {
+  bold: boolean;
+  italic: boolean;
+  link?: string;
+};
+
+type StyledSegment = {
+  key: string;
+  text: string;
+  style: InlineStyle;
+};
+
+/**
+ * Recursively walks inline AST nodes and produces flat styled segments
+ * with accumulated bold/italic/link state.
+ */
+const flattenInlineNodes = (
+  nodes: ReadonlyArray<MarkdownNode>,
+  inherited: InlineStyle
+): Array<StyledSegment> =>
+  nodes.reduce<Array<StyledSegment>>((acc, node) => {
+    switch (node.type) {
+      case "text":
+      case "code_inline":
+        return [
+          ...acc,
+          { key: node.key, text: node.content ?? "", style: inherited }
+        ];
+
+      case "softbreak":
+      case "hardbreak":
+        return [...acc, { key: node.key, text: "\n", style: inherited }];
+
+      case "strong":
+        return [
+          ...acc,
+          ...flattenInlineNodes(node.children, {
+            ...inherited,
+            bold: true
+          })
+        ];
+
+      case "em":
+        return [
+          ...acc,
+          ...flattenInlineNodes(node.children, {
+            ...inherited,
+            italic: true
+          })
+        ];
+
+      case "link": {
+        const href = node.attributes?.href;
+        return [
+          ...acc,
+          ...flattenInlineNodes(node.children, {
+            ...inherited,
+            link: href
+          })
+        ];
+      }
+
+      default:
+        return acc;
+    }
+  }, []);
+
+/**
+ * Renders a single styled segment as either a raw string
+ * or an IOText element with the appropriate props.
+ */
+const renderSegment = (
+  segment: StyledSegment,
+  context: RenderContext,
+  isCode?: boolean
+): React.ReactNode => {
+  if (isCode) {
+    return <BodyMonospace key={segment.key}>{segment.text}</BodyMonospace>;
+  }
+
+  const { bold, italic, link } = segment.style;
+
+  return (
+    <IOText
+      key={segment.key}
+      {...(bold ? { weight: "Semibold" } : {})}
+      {...(italic ? { fontStyle: "italic" } : {})}
+      {...(link
+        ? {
+            color: context.linkColor,
+            onPress: () => context.onLinkPress?.(link),
+            accessibilityRole: "link" as const,
+            textStyle: { textDecorationLine: "underline" as const }
+          }
+        : {})}
+      size={context.fontSize}
+      lineHeight={context.lineHeight}
+    >
+      {segment.text}
+    </IOText>
+  );
+};
+
+/* ─── Heading component map ─── */
+
+type HeadingComponent = typeof H1;
+
+const headingComponentMap: Record<string, HeadingComponent> = {
+  heading1: H1,
+  heading2: H2,
+  heading3: H3,
+  heading4: H4,
+  heading5: H5,
+  heading6: H6
+};
+
+/* ─── Block rendering helpers ─── */
+
+/**
+ * Renders a paragraph block by flattening inline children
+ * into styled segments.
+ */
+const renderParagraph = (
+  node: MarkdownNode,
+  context: RenderContext
+): React.ReactNode => {
+  const segments = flattenInlineNodes(node.children, {
+    bold: false,
+    italic: false
+  });
+
+  return (
+    <Body key={node.key} style={{ textAlign: context.textAlign }}>
+      {segments.map(seg => {
+        const matchingNode = node.children.find(c => c.key === seg.key);
+        const isCode = matchingNode?.type === "code_inline";
+        return renderSegment(seg, context, isCode);
+      })}
+    </Body>
+  );
+};
+
+/**
+ * Creates a render rule for a heading level using the corresponding
+ * DS heading component (H1-H6). This ensures headings inherit
+ * dynamicTypeRamp, uppercase/letterSpacing (H5), legacy typeface (H6),
+ * and theme colors automatically.
+ */
+const makeHeadingRule =
+  (Heading: HeadingComponent): RenderRule =>
+  (node, _renderChildren, context) => {
+    const segments = flattenInlineNodes(node.children, {
+      bold: false,
+      italic: false
+    });
+
+    return (
+      <View key={node.key} accessibilityRole="header">
+        <Heading style={{ textAlign: context.textAlign }}>
+          {segments.map(seg => seg.text)}
+        </Heading>
+      </View>
+    );
+  };
+
+/* ─── Default render rules ─── */
+
+const paragraphRule: RenderRule = (node, _renderChildren, context) =>
+  renderParagraph(node, context);
+
+const textRule: RenderRule = node => (
+  <Fragment key={node.key}>{node.content ?? ""}</Fragment>
+);
+
+const strongRule: RenderRule = (node, renderChildren) => (
+  <IOText key={node.key} weight="Semibold">
+    {renderChildren(node.children)}
+  </IOText>
+);
+
+const emRule: RenderRule = (node, renderChildren) => (
+  <IOText key={node.key} fontStyle="italic">
+    {renderChildren(node.children)}
+  </IOText>
+);
+
+const linkRule: RenderRule = (node, renderChildren, context) => {
+  const href = node.attributes?.href;
+  return (
+    <IOText
+      key={node.key}
+      color={context.linkColor}
+      onPress={href ? () => context.onLinkPress?.(href) : undefined}
+      accessibilityRole="link"
+      textStyle={{ textDecorationLine: "underline" }}
+    >
+      {renderChildren(node.children)}
+    </IOText>
+  );
+};
+
+const softbreakRule: RenderRule = node => (
+  <Fragment key={node.key}>{"\n"}</Fragment>
+);
+
+const hardbreakRule: RenderRule = node => (
+  <Fragment key={node.key}>{"\n"}</Fragment>
+);
+
+const bulletListRule: RenderRule = (node, renderChildren) => (
+  <View
+    key={node.key}
+    accessible={true}
+    accessibilityRole="list"
+    style={{ paddingLeft: 12 }}
+  >
+    <VSpacer size={8} />
+    {node.children.map(child => (
+      <View key={child.key} style={{ flexDirection: "row" }}>
+        <Body>{getUnorderedListBullet(node.listDepth ?? 0)}</Body>
+        <HSpacer size={8} />
+        <View style={{ flex: 1, flexShrink: 1 }}>
+          {renderChildren(child.children)}
+        </View>
+      </View>
+    ))}
+    <VSpacer size={8} />
+  </View>
+);
+
+const orderedListRule: RenderRule = (node, renderChildren) => (
+  <View
+    key={node.key}
+    accessible={true}
+    accessibilityRole="list"
+    style={{ paddingLeft: 12 }}
+  >
+    <VSpacer size={8} />
+    {node.children.map((child, i) => (
+      <View key={child.key} style={{ flexDirection: "row" }}>
+        <Body>{getOrderedListMarker(i + 1, node.listDepth ?? 0)}</Body>
+        <HSpacer size={8} />
+        <View style={{ flex: 1, flexShrink: 1 }}>
+          {renderChildren(child.children)}
+        </View>
+      </View>
+    ))}
+    <VSpacer size={8} />
+  </View>
+);
+
+const listItemRule: RenderRule = (node, renderChildren) => (
+  <View key={node.key} style={{ flex: 1, flexShrink: 1 }}>
+    {renderChildren(node.children)}
+  </View>
+);
+
+const blockquoteRule: RenderRule = node => {
+  const allText = collectRawText(node);
+  const pictogramName = extractPictogramName(allText);
+
+  // Find the first heading child for the banner title
+  const headingNode = node.children.find(c => c.type.startsWith("heading"));
+  const title = headingNode ? collectRawText(headingNode).trim() : undefined;
+
+  // Collect content from paragraph children, stripping the pictogram pattern
+  const content = node.children
+    .filter(c => c.type === "paragraph")
+    .map(c => stripPictogramPrefix(collectRawText(c)).trim())
+    .filter(Boolean)
+    .join("\n");
+
+  return (
+    <Banner
+      key={node.key}
+      pictogramName={pictogramName}
+      color="neutral"
+      title={title}
+      content={content || undefined}
+    />
+  );
+};
+
+const imageRule: RenderRule = node => (
+  <View key={node.key} style={{ marginVertical: 16 }}>
+    <ImageRenderer node={node} />
+  </View>
+);
+
+const codeInlineRule: RenderRule = node => (
+  <BodyMonospace key={node.key}>{node.content ?? ""}</BodyMonospace>
+);
+
+const fenceRule: RenderRule = node => (
+  <CodeBlock key={node.key} content={(node.content ?? "").trimEnd()} />
+);
+
+const hrRule: RenderRule = node => <Divider key={node.key} />;
+
+const htmlRule: RenderRule = node => {
+  if (node.content && isBrTag(node.content)) {
+    return <Fragment key={node.key}>{"\n"}</Fragment>;
+  }
+  return null;
+};
+
+/**
+ * The complete set of default render rules for all supported node types.
+ */
+export const DEFAULT_RULES: Record<MarkdownNodeType, RenderRule> = {
+  heading1: makeHeadingRule(headingComponentMap.heading1),
+  heading2: makeHeadingRule(headingComponentMap.heading2),
+  heading3: makeHeadingRule(headingComponentMap.heading3),
+  heading4: makeHeadingRule(headingComponentMap.heading4),
+  heading5: makeHeadingRule(headingComponentMap.heading5),
+  heading6: makeHeadingRule(headingComponentMap.heading6),
+  paragraph: paragraphRule,
+  text: textRule,
+  strong: strongRule,
+  em: emRule,
+  link: linkRule,
+  softbreak: softbreakRule,
+  hardbreak: hardbreakRule,
+  bullet_list: bulletListRule,
+  ordered_list: orderedListRule,
+  list_item: listItemRule,
+  blockquote: blockquoteRule,
+  image: imageRule,
+  code_inline: codeInlineRule,
+  fence: fenceRule,
+  hr: hrRule,
+  html_block: htmlRule,
+  html_inline: htmlRule
+};