@pagopa/io-app-design-system 6.0.7 → 7.0.0

package/lib/typescript/utils/pipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipe.d.ts","sourceRoot":"","sources":["../../../src/utils/pipe.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;AACrC,wBAAgB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;AAC/D,wBAAgB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAC5B,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,EACnB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,GACnB,EAAE,CAAC;AACN,wBAAgB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAChC,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,EACnB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EACpB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,GACnB,EAAE,CAAC;AACN,wBAAgB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EACpC,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,EACnB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EACpB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EACpB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,GACnB,EAAE,CAAC;AACN,wBAAgB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EACxC,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,EACnB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EACpB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EACpB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EACpB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,GACnB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "6.0.7",
+  "version": "7.0.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -63,12 +63,14 @@
     "@react-native-community/eslint-config": "^3.0.2",
     "@react-native/babel-preset": "^0.82.1",
     "@release-it/conventional-changelog": "^5.0.0",
+    "@stylistic/eslint-plugin": "^2.12.1",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
     "@testing-library/react-native": "^13.2.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.1.0",
+    "@types/markdown-it": "^14.1.2",
+    "@types/react": "^19.2.0",
     "@types/react-test-renderer": "19.1.0",
     "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -85,10 +87,10 @@
     "jest": "^29.6.3",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
+    "react": "19.2.0",
+    "react-native": "0.83.4",
     "react-native-builder-bob": "^0.38.0",
-    "react-test-renderer": "19.1.0",
+    "react-test-renderer": "19.2.0",
     "release-it": "^15.0.0",
     "svgo": "^3.0.2",
     "typescript": "^5.8.3"
@@ -164,6 +166,7 @@
   },
   "dependencies": {
     "auto-changelog": "^2.4.0",
+    "markdown-it": "^14.1.0",
     "react-native-easing-gradient": "^1.1.1",
     "react-native-gesture-handler": "^2.25.0",
     "react-native-haptic-feedback": "^2.3.3",

package/src/components/badge/Badge.tsx

@@ -40,6 +40,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
+    overflow: "hidden",
     borderCurve: "continuous",
     ...Platform.select({
       android: {
@@ -219,8 +220,7 @@ export const Badge = ({
         style={{
           alignSelf: "center",
           textTransform: "uppercase",
-          letterSpacing: 0.5,
-          flexShrink: 1
+          letterSpacing: 0.5
         }}
       >
         {text}

package/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
         "borderCurve": "continuous",
         "flexDirection": "row",
         "justifyContent": "center",
+        "overflow": "hidden",
       },
       {
         "borderRadius": 24,
@@ -40,7 +41,6 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
         },
         {
           "alignSelf": "center",
-          "flexShrink": 1,
           "letterSpacing": 0.5,
           "textTransform": "uppercase",
         },
@@ -62,6 +62,7 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
         "borderCurve": "continuous",
         "flexDirection": "row",
         "justifyContent": "center",
+        "overflow": "hidden",
       },
       {
         "borderRadius": 24,
@@ -92,7 +93,6 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
         },
         {
           "alignSelf": "center",
-          "flexShrink": 1,
           "letterSpacing": 0.5,
           "textTransform": "uppercase",
         },

package/src/components/index.tsx

@@ -8,13 +8,14 @@ export * from "./checkbox";
 export * from "./claimsSelector";
 export * from "./codeInput";
 export * from "./featureInfo";
+export * from "./headers";
 export * from "./icons";
 export * from "./image";
 export * from "./layout";
-export * from "./headers";
 export * from "./listitems";
 export * from "./loadingSpinner";
 export * from "./logos";
+export * from "./markdown";
 export * from "./modules";
 export * from "./numberpad";
 export * from "./otpInput";
@@ -27,8 +28,8 @@ export * from "./stepper";
 export * from "./switch";
 export * from "./tabs";
 export * from "./tag";
-export * from "./textInput";
 export * from "./templates";
+export * from "./textInput";
 export * from "./toast";
 export * from "./tooltip";
 export * from "./typography";

package/src/components/markdown/CodeBlock.tsx

@@ -0,0 +1,32 @@
+import { View } from "react-native";
+import { useIOTheme } from "../../context";
+import { IOColors } from "../../core";
+import { BodyMonospace } from "../typography/BodyMonospace";
+
+type CodeBlockProps = {
+  content: string;
+};
+
+/**
+ * Theme-aware code block with a subtle background and border,
+ * similar to GitHub's fenced code block styling.
+ */
+export const CodeBlock = ({ content }: CodeBlockProps) => {
+  const theme = useIOTheme();
+
+  return (
+    <View
+      style={{
+        backgroundColor: IOColors[theme["appBackground-secondary"]],
+        borderColor: IOColors[theme["cardBorder-default"]],
+        borderWidth: 1,
+        borderRadius: 4,
+        borderCurve: "continuous",
+        paddingHorizontal: 16,
+        paddingVertical: 12
+      }}
+    >
+      <BodyMonospace>{content}</BodyMonospace>
+    </View>
+  );
+};

package/src/components/markdown/IOMarkdown.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useMemo } from "react";
+import { Linking, type TextStyle, View } from "react-native";
+import { useIOTheme } from "../../context";
+import {
+  bodyFontSize,
+  bodyLineHeight,
+  bodySmallFontSize,
+  bodySmallLineHeight
+} from "../typography";
+import { parse } from "./parser";
+import { DEFAULT_RULES } from "./rules";
+import type {
+  IOMarkdownRenderRules,
+  MarkdownNode,
+  MarkdownNodeType,
+  RenderContext,
+  RenderRule
+} from "./types";
+
+export type IOMarkdownProps = {
+  /** The markdown string to render */
+  content: string;
+  /** Override default link press behavior. Default: Linking.openURL(url) */
+  onLinkPress?: (url: string) => void;
+  /** Paragraph alignment. Default: "auto" */
+  textAlign?: TextStyle["textAlign"];
+  /** Override default text size */
+  small?: boolean;
+  /** Test ID for the container View */
+  testID?: string;
+  /** Node types to disable (parser will skip them entirely) */
+  disabledRules?: ReadonlyArray<MarkdownNodeType>;
+  /** Override individual render rules */
+  rules?: IOMarkdownRenderRules;
+};
+
+/**
+ * Full-featured markdown component that renders markdown content
+ * using design system primitives.
+ *
+ * @remarks
+ * This component is still experimental. Check that it is correctly
+ * formatting your text before proceeding to use it.
+ *
+ * Supports headings, paragraphs, bold, italic, links, lists,
+ * blockquotes (as Banner), images, code, horizontal rules, and HTML breaks.
+ *
+ * Individual node types can be disabled via `disabledRules`, and
+ * render rules can be overridden via the `rules` prop.
+ */
+export const IOMarkdown = ({
+  content,
+  onLinkPress,
+  textAlign,
+  small,
+  testID,
+  disabledRules,
+  rules = {}
+}: IOMarkdownProps) => {
+  const theme = useIOTheme();
+
+  const ast = useMemo(
+    () => parse(content, disabledRules),
+    [content, disabledRules]
+  );
+
+  const handleLinkPress = useCallback(
+    (url: string) => {
+      if (onLinkPress) {
+        onLinkPress(url);
+      } else {
+        Linking.openURL(url).catch(() => null);
+      }
+    },
+    [onLinkPress]
+  );
+
+  const context = useMemo<RenderContext>(
+    () => ({
+      onLinkPress: handleLinkPress,
+      linkColor: theme["interactiveElem-default"],
+      textAlign: textAlign ?? "auto",
+      fontSize: small ? bodySmallFontSize : bodyFontSize,
+      lineHeight: small ? bodySmallLineHeight : bodyLineHeight
+    }),
+    [handleLinkPress, textAlign, small, theme]
+  );
+
+  const mergedRules = useMemo<Record<MarkdownNodeType, RenderRule>>(
+    () => ({ ...DEFAULT_RULES, ...rules }),
+    [rules]
+  );
+
+  const renderChildren = useCallback(
+    (nodes: ReadonlyArray<MarkdownNode>) =>
+      nodes.map(node => {
+        const rule = mergedRules[node.type];
+        return rule ? rule(node, renderChildren, context) : null;
+      }),
+    [mergedRules, context]
+  );
+
+  const rendered = renderChildren(ast);
+
+  return (
+    <View style={{ gap: 8 }} testID={testID}>
+      {rendered}
+    </View>
+  );
+};

package/src/components/markdown/IOMarkdownLite.tsx

@@ -0,0 +1,27 @@
+import type { TextStyle } from "react-native";
+import { IOMarkdown } from "./IOMarkdown";
+import { LITE_DISABLED_TYPES } from "./parser";
+
+export type IOMarkdownLiteProps = {
+  /** The markdown string to render */
+  content: string;
+  /** Override default link press behavior. Default: Linking.openURL(url) */
+  onLinkPress?: (url: string) => void;
+  /** Paragraph alignment. Default: "auto" */
+  textAlign?: TextStyle["textAlign"];
+  /** Override default text size */
+  small?: boolean;
+  /** Test ID for the container View */
+  testID?: string;
+};
+
+/**
+ * Lightweight markdown component supporting only paragraphs, bold, italic,
+ * links, and line breaks.
+ *
+ * This is a thin wrapper around `IOMarkdown` with extra node types (headings,
+ * lists, blockquotes, images, code, horizontal rules, and HTML) disabled.
+ */
+export const IOMarkdownLite = (props: IOMarkdownLiteProps) => (
+  <IOMarkdown {...props} disabledRules={LITE_DISABLED_TYPES} />
+);

package/src/components/markdown/ImageRenderer.tsx

@@ -0,0 +1,52 @@
+import { useLayoutEffect, useState } from "react";
+import { Dimensions, Image } from "react-native";
+import { IOVisualCostants } from "../../core";
+import type { MarkdownNode } from "./types";
+
+type ImageRendererProps = {
+  node: MarkdownNode;
+};
+
+/**
+ * Stateful component that renders a remote image with auto-sizing.
+ * Uses `Image.getSize()` to determine intrinsic dimensions, then
+ * constrains width to the available screen width.
+ */
+export const ImageRenderer = ({ node }: ImageRendererProps) => {
+  const src = node.attributes?.src ?? "";
+  const alt = node.attributes?.alt ?? "";
+
+  const [imageSize, setImageSize] = useState({
+    width: 0,
+    aspectRatio: 1
+  });
+
+  const screenWidth =
+    Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2;
+
+  useLayoutEffect(() => {
+    if (!src) {
+      return;
+    }
+    Image.getSize(src, (width, height) => {
+      const aspectRatio = width / height;
+      const constrainedWidth = Math.min(width, screenWidth);
+      setImageSize({ width: constrainedWidth, aspectRatio });
+    });
+  }, [screenWidth, src]);
+
+  if (!src) {
+    return null;
+  }
+
+  return (
+    <Image
+      key={node.key}
+      accessibilityIgnoresInvertColors
+      style={imageSize}
+      resizeMode="contain"
+      accessibilityLabel={alt}
+      source={{ uri: src }}
+    />
+  );
+};

package/src/components/markdown/index.ts

@@ -0,0 +1,7 @@
+export type { IOMarkdownRenderRules, MarkdownNodeType } from "./types";
+
+export { IOMarkdown } from "./IOMarkdown";
+export type { IOMarkdownProps } from "./IOMarkdown";
+
+export { IOMarkdownLite } from "./IOMarkdownLite";
+export type { IOMarkdownLiteProps } from "./IOMarkdownLite";

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);