@nanogiants/react-native-render-html 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1068 @@
+// src/RenderHTML.tsx
+import { parseDocument } from "htmlparser2";
+import { useMemo as useMemo2 } from "react";
+import {
+  View as View6
+} from "react-native";
+
+// src/context/HtmlProvider.tsx
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { Image, Text } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var HtmlContext = createContext(null);
+var HtmlProvider = (options) => {
+  const baseStyle = useMemo(() => {
+    return {
+      ...options.baseStyle
+    };
+  }, [options.baseStyle]);
+  const tagsStyles = useMemo(() => {
+    return {
+      // BLOCK RENDERER TAGS
+      thead: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.thead?.text
+        },
+        block: {
+          ...options.tagStyles?.thead?.block
+        }
+      },
+      tbody: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.tbody?.text
+        },
+        block: {
+          ...options.tagStyles?.tbody?.block
+        }
+      },
+      tfoot: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.tfoot?.text
+        },
+        block: {
+          ...options.tagStyles?.tfoot?.block
+        }
+      },
+      blockquote: {
+        text: {
+          ...baseStyle,
+          fontStyle: "italic",
+          ...options.tagStyles?.blockquote?.text
+        },
+        block: {
+          borderLeftWidth: 4,
+          borderLeftColor: "black",
+          marginLeft: 8,
+          paddingLeft: 12,
+          backgroundColor: "#cccccc",
+          ...options.tagStyles?.blockquote?.block
+        }
+      },
+      ul: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.ul?.text
+        },
+        block: {
+          paddingLeft: 12,
+          paddingVertical: 0,
+          gap: options.listGap ?? 0,
+          ...options.tagStyles?.ul?.block
+        }
+      },
+      ol: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.ol?.text
+        },
+        block: {
+          paddingLeft: 12,
+          paddingVertical: 0,
+          gap: options.listGap ?? 0,
+          ...options.tagStyles?.ol?.block
+        }
+      },
+      dl: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.dl?.text
+        },
+        block: {
+          ...options.tagStyles?.dl?.block
+        }
+      },
+      div: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.div?.text
+        },
+        block: {
+          ...options.tagStyles?.div?.block
+        }
+      },
+      main: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.main?.text
+        },
+        block: {
+          ...options.tagStyles?.main?.block
+        }
+      },
+      section: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.section?.text
+        },
+        block: {
+          marginVertical: 8,
+          ...options.tagStyles?.section?.block
+        }
+      },
+      article: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.article?.text
+        },
+        block: {
+          marginVertical: 8,
+          ...options.tagStyles?.article?.block
+        }
+      },
+      aside: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.aside?.text
+        },
+        block: {
+          ...options.tagStyles?.aside?.block
+        }
+      },
+      nav: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.nav?.text
+        },
+        block: {
+          ...options.tagStyles?.nav?.block
+        }
+      },
+      header: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.header?.text
+        },
+        block: {
+          marginBottom: 8,
+          ...options.tagStyles?.header?.block
+        }
+      },
+      footer: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.footer?.text
+        },
+        block: {
+          marginTop: 8,
+          ...options.tagStyles?.footer?.block
+        }
+      },
+      hr: {
+        text: {
+          ...options.tagStyles?.hr?.text
+        },
+        block: {
+          borderBottomWidth: 1,
+          borderBottomColor: "black",
+          marginVertical: 12,
+          ...options.tagStyles?.hr?.block
+        }
+      },
+      br: {
+        text: {
+          ...options.tagStyles?.br?.text
+        },
+        block: {
+          height: 16,
+          ...options.tagStyles?.br?.block
+        }
+      },
+      img: {
+        text: {
+          ...options.tagStyles?.img?.text
+        },
+        block: {
+          marginVertical: 8,
+          flex: 1,
+          width: void 0,
+          height: 100,
+          ...options.tagStyles?.img?.block
+        }
+      },
+      table: {
+        text: {
+          ...options.tagStyles?.table?.text
+        },
+        block: {
+          marginVertical: 8,
+          ...options.tagStyles?.table?.block
+        }
+      },
+      tr: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.tr?.text
+        },
+        block: {
+          ...options.tagStyles?.tr?.block
+        }
+      },
+      // TEXT RENDERER TAGS
+      h1: {
+        text: {
+          ...baseStyle,
+          fontSize: 32,
+          lineHeight: 38.4,
+          ...options.tagStyles?.h1?.text
+        },
+        block: {
+          marginTop: 12,
+          marginBottom: 8,
+          ...options.tagStyles?.h1?.block
+        }
+      },
+      h2: {
+        text: {
+          ...baseStyle,
+          fontSize: 24,
+          lineHeight: 28.8,
+          ...options.tagStyles?.h2?.text
+        },
+        block: {
+          marginTop: 10,
+          marginBottom: 6,
+          ...options.tagStyles?.h2?.block
+        }
+      },
+      h3: {
+        text: {
+          ...baseStyle,
+          fontSize: 18.72,
+          lineHeight: 22.46,
+          ...options.tagStyles?.h3?.text
+        },
+        block: {
+          marginTop: 8,
+          marginBottom: 6,
+          ...options.tagStyles?.h3?.block
+        }
+      },
+      h4: {
+        text: {
+          ...baseStyle,
+          fontSize: 16,
+          lineHeight: 19.2,
+          ...options.tagStyles?.h4?.text
+        },
+        block: {
+          marginTop: 8,
+          marginBottom: 4,
+          ...options.tagStyles?.h4?.block
+        }
+      },
+      h5: {
+        text: {
+          ...baseStyle,
+          fontSize: 13.28,
+          lineHeight: 15.94,
+          ...options.tagStyles?.h5?.text
+        },
+        block: {
+          marginTop: 6,
+          marginBottom: 4,
+          ...options.tagStyles?.h5?.block
+        }
+      },
+      h6: {
+        text: {
+          ...baseStyle,
+          fontSize: 10.72,
+          lineHeight: 12.86,
+          ...options.tagStyles?.h6?.text
+        },
+        block: {
+          marginTop: 6,
+          marginBottom: 4,
+          ...options.tagStyles?.h6?.block
+        }
+      },
+      p: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.p?.text
+        },
+        block: {
+          marginTop: 8,
+          marginBottom: 8,
+          ...options.tagStyles?.p?.block
+        }
+      },
+      a: {
+        text: {
+          ...baseStyle,
+          textDecorationLine: "underline",
+          ...options.tagStyles?.a?.text
+        }
+      },
+      li: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.li?.text
+        },
+        block: {
+          paddingLeft: 0,
+          ...options.tagStyles?.li?.block
+        }
+      },
+      pre: {
+        text: {
+          ...baseStyle,
+          fontFamily: "monospace",
+          backgroundColor: "#bbbbbb",
+          ...options.tagStyles?.pre?.text
+        }
+      },
+      code: {
+        text: {
+          ...baseStyle,
+          fontFamily: "monospace",
+          backgroundColor: "#bbbbbb",
+          ...options.tagStyles?.code?.text
+        }
+      },
+      // inline text styles
+      b: {
+        text: {
+          fontWeight: "bold",
+          ...options.tagStyles?.b?.text
+        }
+      },
+      strong: {
+        text: {
+          fontWeight: "bold",
+          ...options.tagStyles?.strong?.text
+        }
+      },
+      i: {
+        text: {
+          fontStyle: "italic",
+          ...options.tagStyles?.i?.text
+        }
+      },
+      em: {
+        text: {
+          fontStyle: "italic",
+          ...options.tagStyles?.em?.text
+        }
+      },
+      u: {
+        text: {
+          textDecorationLine: "underline",
+          ...options.tagStyles?.u?.text
+        }
+      },
+      mark: {
+        text: {
+          ...baseStyle,
+          backgroundColor: "#fff59d",
+          ...options.tagStyles?.mark?.text
+        }
+      },
+      small: {
+        text: {
+          ...baseStyle,
+          fontSize: Math.max(baseStyle.fontSize - 2, 12),
+          ...options.tagStyles?.small?.text
+        }
+      },
+      s: {
+        text: {
+          ...baseStyle,
+          textDecorationLine: "line-through",
+          ...options.tagStyles?.s?.text
+        }
+      },
+      del: {
+        text: {
+          ...baseStyle,
+          textDecorationLine: "line-through",
+          ...options.tagStyles?.del?.text
+        }
+      },
+      sup: {
+        text: {
+          ...baseStyle,
+          textAlignVertical: "top",
+          fontSize: Math.max(baseStyle.fontSize - 4, 10),
+          ...options.tagStyles?.sup?.text
+        }
+      },
+      sub: {
+        text: {
+          ...baseStyle,
+          textAlignVertical: "bottom",
+          fontSize: Math.max(baseStyle.fontSize - 4, 10),
+          ...options.tagStyles?.sub?.text
+        }
+      },
+      th: {
+        text: {
+          ...baseStyle,
+          fontWeight: "bold",
+          padding: 8,
+          borderWidth: 1,
+          borderColor: "black",
+          ...options.tagStyles?.th?.text
+        }
+      },
+      td: {
+        text: {
+          ...baseStyle,
+          padding: 8,
+          ...options.tagStyles?.td?.text
+        }
+      },
+      dt: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.dt?.text
+        }
+      },
+      dd: {
+        text: {
+          ...baseStyle,
+          marginLeft: 20,
+          ...options.tagStyles?.dd?.text
+        }
+      },
+      span: {
+        text: {
+          ...baseStyle,
+          ...options.tagStyles?.span?.text
+        }
+      }
+    };
+  }, [baseStyle, options.tagStyles, options.listGap]);
+  const getStyle = useCallback(
+    (node) => {
+      if (node.type === "tag") {
+        const classStyle = node.attribs.class ? options.classesStyles?.[node.attribs.class] || {} : {};
+        return {
+          text: {
+            ...tagsStyles[node.tagName].text,
+            ...classStyle.text
+          },
+          block: {
+            ...tagsStyles[node.tagName].block ?? {},
+            ...classStyle.block
+          }
+        };
+      }
+      return {
+        text: {},
+        block: {}
+      };
+    },
+    [tagsStyles, options.classesStyles]
+  );
+  const renderImage = useMemo(() => {
+    if (options.renderImage) {
+      return options.renderImage;
+    }
+    return (props) => /* @__PURE__ */ jsx(Image, { ...props });
+  }, [options.renderImage]);
+  const renderText = useMemo(() => {
+    if (options.renderTextComponent) {
+      return options.renderTextComponent;
+    }
+    return (props) => /* @__PURE__ */ jsx(Text, { ...props });
+  }, [options.renderTextComponent]);
+  const providerValue = useMemo(
+    () => ({
+      getStyle,
+      baseStyle,
+      tagsStyles,
+      overrideExternalLinkTintColor: options.overrideExternalLinkTintColor,
+      onLinkPress: options.onLinkPress,
+      markerColor: options.markerColor,
+      renderImage,
+      renderText
+    }),
+    [
+      getStyle,
+      baseStyle,
+      tagsStyles,
+      options.overrideExternalLinkTintColor,
+      options.onLinkPress,
+      options.markerColor,
+      renderImage,
+      renderText
+    ]
+  );
+  return /* @__PURE__ */ jsx(HtmlContext.Provider, { value: providerValue, children: options.children });
+};
+var useHtmlContext = () => {
+  const context = useContext(HtmlContext);
+  if (!context) {
+    throw new Error("useHtml must be used within a HtmlProvider");
+  }
+  return context;
+};
+
+// src/HTMLValidator.ts
+var cleanUlNodesUtil = (nodes) => {
+  return nodes.map((node) => {
+    if (node.type !== "tag") {
+      return node;
+    }
+    if (node.name === "ul" || node.name === "ol") {
+      if (!node.children) {
+        return node;
+      }
+      node.children = node.children.filter((child) => {
+        return child.type !== "text" || child.type === "text" && child.data.trim() !== "";
+      });
+    }
+    if (node.children) {
+      node.children = cleanUlNodesUtil(node.children);
+      return node;
+    }
+    return node;
+  });
+};
+var HTMLValidator = class {
+  constructor(nodes) {
+    this.nodes = nodes;
+  }
+  cleanup() {
+    this.nodes = cleanUlNodesUtil(this.nodes);
+    return this.nodes;
+  }
+};
+
+// src/renderers/_NodeRenderer.tsx
+import { Text as Text3, View as View5 } from "react-native";
+
+// src/context/AlignedWidthItem.tsx
+import { View } from "react-native";
+
+// src/context/AlignedWidthProvider.tsx
+import { createContext as createContext2, useContext as useContext2, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AlignedWidthContext = createContext2(void 0);
+var AlignedWidthProvider = ({ children }) => {
+  const [colWidths, setColWidths] = useState({});
+  const getLayoutHandlerForIndex = (colIdx) => {
+    return (event) => {
+      const { width } = event.nativeEvent.layout;
+      setColWidths((prev) => {
+        const previousWidth = prev[colIdx] || 0;
+        return {
+          ...prev,
+          [colIdx]: Math.max(previousWidth, width)
+        };
+      });
+    };
+  };
+  const getWidthStyle = (colIdx) => {
+    return {
+      minWidth: colWidths[colIdx] || void 0,
+      width: colWidths[colIdx] || void 0
+    };
+  };
+  return /* @__PURE__ */ jsx2(
+    AlignedWidthContext.Provider,
+    {
+      value: {
+        getLayoutHandlerForIndex,
+        getWidthStyle
+      },
+      children
+    }
+  );
+};
+var useAlignedWidth = () => {
+  const context = useContext2(AlignedWidthContext);
+  if (!context) {
+    throw new Error("useAlignedWidth must be used within a AlignedWidthProvider");
+  }
+  return context;
+};
+
+// src/context/AlignedWidthItem.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var AlignedWidthItem = ({ children, index, style }) => {
+  const { getLayoutHandlerForIndex, getWidthStyle } = useAlignedWidth();
+  return /* @__PURE__ */ jsx3(View, { style: [getWidthStyle(index), style], onLayout: getLayoutHandlerForIndex(index), children });
+};
+
+// src/types.ts
+var rendererTypeMap = {
+  // Elements rendered with a View (block)
+  thead: "block",
+  tbody: "block",
+  tfoot: "block",
+  blockquote: "block",
+  ul: "block",
+  ol: "block",
+  dl: "block",
+  li: "block",
+  div: "block",
+  hr: "block",
+  br: "block",
+  pre: "block",
+  code: "block",
+  img: "block",
+  table: "block",
+  tr: "block",
+  dt: "block",
+  dd: "block",
+  p: "block",
+  h1: "block",
+  h2: "block",
+  h3: "block",
+  h4: "block",
+  h5: "block",
+  h6: "block",
+  main: "block",
+  section: "block",
+  article: "block",
+  aside: "block",
+  nav: "block",
+  header: "block",
+  footer: "block",
+  // All other elements are text
+  b: "text",
+  strong: "text",
+  i: "text",
+  em: "text",
+  u: "text",
+  mark: "text",
+  small: "text",
+  s: "text",
+  del: "text",
+  sup: "text",
+  sub: "text",
+  span: "text",
+  a: "text",
+  th: "text",
+  td: "text"
+};
+
+// src/utils.ts
+var isTextRenderer = (node) => {
+  if (!node) {
+    return false;
+  }
+  if (node.type === "tag") {
+    return rendererTypeMap[node.tagName] === "text";
+  }
+  return node.type === "text";
+};
+var concatTextNodes = (children) => {
+  let result = "";
+  for (const child of children) {
+    if (child.type === "text") {
+      result += child.data;
+    }
+    if (child.type === "tag" && Array.isArray(child.children)) {
+      result += concatTextNodes(child.children);
+    }
+  }
+  return result;
+};
+var isList = (child) => {
+  return child.type === "tag" && (child.tagName === "ol" || child.tagName === "ul");
+};
+var isExternalURL = (url) => {
+  if (!url) {
+    return false;
+  }
+  return url.startsWith("https://") || url.startsWith("http://");
+};
+
+// src/renderers/_DefaultBlockRenderer.tsx
+import { Text as Text2, View as View2 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+import { createElement } from "react";
+var DefaultBlockRenderer = ({
+  node,
+  viewProps = {},
+  textProps = {}
+}) => {
+  const { getStyle } = useHtmlContext();
+  const { style: viewStyle, ...restViewProps } = viewProps;
+  const { style: textStyle, ...restTextProps } = textProps;
+  const groupedChildren = groupByInlineBlock(node.children);
+  return /* @__PURE__ */ jsx4(View2, { ...restViewProps, style: [getStyle(node).block, viewStyle], children: groupedChildren.map((childrenGroup, index) => {
+    if (childrenGroup.type === "text") {
+      return /* @__PURE__ */ createElement(
+        Text2,
+        {
+          ...restTextProps,
+          key: `${node.type}-${index}`,
+          style: [getStyle(node).text, textStyle]
+        },
+        /* @__PURE__ */ jsx4(NodesRenderer, { nodes: childrenGroup.nodes })
+      );
+    }
+    return /* @__PURE__ */ jsx4(NodesRenderer, { nodes: childrenGroup.nodes }, `${node.type}-${index}`);
+  }) });
+};
+function groupByInlineBlock(arr) {
+  const result = [];
+  let currentGroup = [];
+  for (const item of arr) {
+    const isTextNode = item.type === "text";
+    const isTextTag = item.type === "tag" && rendererTypeMap[item.name] === "text";
+    if (isTextNode || isTextTag) {
+      currentGroup.push(item);
+    } else {
+      if (currentGroup.length) {
+        result.push({
+          type: "text",
+          nodes: currentGroup
+        });
+        currentGroup = [];
+      }
+      result.push({
+        type: "block",
+        nodes: [item]
+      });
+    }
+  }
+  if (currentGroup.length) {
+    result.push({
+      type: "text",
+      nodes: currentGroup
+    });
+  }
+  return result;
+}
+
+// src/renderers/_DefaultTextRenderer.tsx
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+var DefaultTextRenderer = ({ node, textProps = {} }) => {
+  const { style, ...restProps } = textProps;
+  const { getStyle, renderText } = useHtmlContext();
+  return /* @__PURE__ */ jsx5(Fragment, { children: renderText({
+    ...restProps,
+    style: [getStyle(node).text, style],
+    children: /* @__PURE__ */ jsx5(NodesRenderer, { nodes: node.children })
+  }) });
+};
+
+// src/assets.ts
+var EXTERNAL_LINK_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IB2cksfwAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+kJCwwjMljq2h8AAAD4SURBVEjH7dY9SgNBGMbxn7vpIngXwc5SbG39KjxCLDyCnY0nUFGIH0Uu4CU8gXZ2iYU2IsRmiiCz+u4sBpQ8sLwMDPPf53mWYVnoP2sH44bn8evmXgfQM+5n1jW20lz6LXc9DDHFByYRR2foBw4/xkM64xLbuMYy1iNvN8H7N/mPMcg4Gab1KOeoCTQK7KuTkyluZ9LJgqrCTmqcYx932E3dtNJPjnJxwWqamzjoCqpxlYlrEIw7BGqChHqtWnRygb3STqKgkwS5KS0+egWdpnlUAmkDesJhlzuqMifNDdQU3Vr6hKPql4BesIKNFqBXvC3+Bf62PgFLzkKE8ZczlwAAAABJRU5ErkJggg==";
+var UL_MARKER_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAwCAYAAAAsJjtLAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACKADAAQAAAABAAAAMAAAAAAE1YgVAAAAZklEQVQ4EWNgGAWjITC4QoDxiYRE/H9GxgkM//8LIDuNkYHhAZDfAFJw/z8DgwKyJJzNyPiBCackSBXQVCa4ahwMaigAOgSH6QwgnzD9//+/EOolVHVAjf8YGBpRBUd5oyEw8CEAAGO5FkZ9+flOAAAAAElFTkSuQmCC";
+
+// src/renderers/ATagRenderer.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs } from "react/jsx-runtime";
+var ATagRenderer = ({ node }) => {
+  const { overrideExternalLinkTintColor, onLinkPress, getStyle, renderImage, renderText } = useHtmlContext();
+  const text = concatTextNodes(node.children);
+  if (!text) {
+    return null;
+  }
+  const style = getStyle(node);
+  const fontSize = style.text?.fontSize ?? 18;
+  const isExternal = node.attribs.href ? isExternalURL(node.attribs.href) : false;
+  return /* @__PURE__ */ jsx6(Fragment2, { children: renderText({
+    accessible: true,
+    onPress: () => {
+      onLinkPress?.({
+        url: node.attribs.href,
+        title: text
+      });
+    },
+    accessibilityRole: "link",
+    accessibilityHint: isExternal ? "External link" : void 0,
+    importantForAccessibility: "yes",
+    accessibilityElementsHidden: false,
+    style: style.text,
+    children: /* @__PURE__ */ jsxs(Fragment2, { children: [
+      text,
+      isExternal ? renderImage({
+        source: { uri: EXTERNAL_LINK_URI },
+        style: {
+          tintColor: overrideExternalLinkTintColor ?? style.text.color ?? "black",
+          height: fontSize,
+          width: fontSize,
+          paddingTop: 5
+        }
+      }) : null
+    ] })
+  }) });
+};
+
+// src/renderers/ImgTagRenderer.tsx
+import { useEffect, useState as useState2 } from "react";
+import { Image as Image2, View as View3 } from "react-native";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ImgTagRenderer = ({ node }) => {
+  const { getStyle, renderImage } = useHtmlContext();
+  const [size, setSize] = useState2(null);
+  const [containerWidth, setContainerWidth] = useState2(0);
+  const { src, alt } = node.attribs || {};
+  useEffect(() => {
+    if (!src) {
+      return;
+    }
+    Image2.getSize(
+      src,
+      (width, height) => {
+        setSize({ w: width, h: height });
+      },
+      () => {
+      }
+    );
+  }, [src]);
+  if (!size) return null;
+  const { w, h } = size;
+  const finalWidth = Math.min(w, containerWidth);
+  const ratio = h / w;
+  const imageStyle = {
+    ...getStyle(node).block,
+    width: finalWidth,
+    height: finalWidth * ratio
+  };
+  return /* @__PURE__ */ jsx7(
+    View3,
+    {
+      onLayout: (e) => {
+        const width = e.nativeEvent.layout.width;
+        setContainerWidth(width);
+      },
+      style: { width: "100%" },
+      children: renderImage({
+        source: { uri: src },
+        style: imageStyle,
+        alt
+      })
+    }
+  );
+};
+
+// src/renderers/LiTagRenderer.tsx
+import { View as View4 } from "react-native";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var LiTagRenderer = ({ node }) => {
+  const { getStyle, markerColor, renderImage, renderText } = useHtmlContext();
+  const isParentOl = node.parent?.type === "tag" && node.parent?.tagName === "ol";
+  const parentLiTags = node.parent?.children || [];
+  const currentIndex = parentLiTags.indexOf(node) + 1;
+  const items = node.children;
+  const style = getStyle(node);
+  const { lineHeight = 20, fontSize = 16 } = style.text;
+  const markerHeight = 5;
+  const markerColorResult = markerColor ?? style.text.color ?? "pink";
+  const renderMarker = () => {
+    if (isParentOl) {
+      return renderText({ style: [style.text], children: `${currentIndex}.` });
+    } else {
+      return renderImage({
+        source: { uri: UL_MARKER_URI },
+        style: {
+          width: markerHeight,
+          height: lineHeight,
+          tintColor: markerColorResult
+        }
+      });
+    }
+  };
+  const nestedLists = items.filter((child) => isList(child));
+  const mainContent = items.filter((child) => !isList(child));
+  return /* @__PURE__ */ jsxs2(View4, { children: [
+    /* @__PURE__ */ jsxs2(
+      View4,
+      {
+        style: {
+          flexDirection: "row"
+        },
+        children: [
+          /* @__PURE__ */ jsx8(
+            View4,
+            {
+              style: {
+                marginRight: 8,
+                marginBottom: lineHeight - fontSize
+              },
+              children: renderMarker()
+            }
+          ),
+          renderText({
+            accessible: true,
+            accessibilityLabel: `List item ${currentIndex} of ${parentLiTags.length}: ${concatTextNodes(mainContent)}`,
+            style: [style.text, { flex: 1 }],
+            children: /* @__PURE__ */ jsx8(NodesRenderer, { nodes: mainContent })
+          })
+        ]
+      }
+    ),
+    nestedLists.length > 0 && /* @__PURE__ */ jsx8(View4, { style: { width: "100%" }, children: /* @__PURE__ */ jsx8(NodesRenderer, { nodes: nestedLists }) })
+  ] });
+};
+
+// src/renderers/PTagRenderer.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var PTagRenderer = ({ node }) => {
+  const { getStyle } = useHtmlContext();
+  const isFirstChild = !node.previousSibling;
+  const isLastChild = !node.nextSibling;
+  const style = getStyle(node);
+  const marginTop = isFirstChild ? 0 : style.block.marginTop;
+  const marginBottom = isLastChild ? 0 : style.block.marginBottom;
+  return /* @__PURE__ */ jsx9(
+    DefaultBlockRenderer,
+    {
+      node,
+      viewProps: {
+        style: {
+          marginTop,
+          marginBottom
+        }
+      }
+    }
+  );
+};
+
+// src/renderers/_NodeRenderer.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var NodeRenderer = ({ node }) => {
+  const { getStyle } = useHtmlContext();
+  if (node.type === "tag") {
+    switch (node.tagName) {
+      case "thead":
+      case "tbody":
+      case "tfoot":
+      case "blockquote":
+      case "ul":
+      case "ol":
+      case "dl":
+      case "dt":
+      case "dd":
+      case "div":
+      case "main":
+      case "section":
+      case "article":
+      case "aside":
+      case "nav":
+      case "header":
+      case "footer":
+      case "tr":
+        return /* @__PURE__ */ jsx10(DefaultBlockRenderer, { node });
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "h5":
+      case "h6":
+        return /* @__PURE__ */ jsx10(
+          DefaultBlockRenderer,
+          {
+            node,
+            textProps: {
+              accessible: true,
+              accessibilityRole: "header"
+            }
+          }
+        );
+      case "p":
+        return /* @__PURE__ */ jsx10(PTagRenderer, { node });
+      case "li":
+        return /* @__PURE__ */ jsx10(LiTagRenderer, { node });
+      case "hr":
+        return /* @__PURE__ */ jsx10(View5, { style: [getStyle(node).block] });
+      case "br":
+        if (isTextRenderer(node.prev)) {
+          return null;
+        }
+        return /* @__PURE__ */ jsx10(View5, { style: [getStyle(node).block] });
+      case "table":
+        return /* @__PURE__ */ jsx10(AlignedWidthProvider, { children: /* @__PURE__ */ jsx10(DefaultBlockRenderer, { node }) });
+      case "img":
+        return /* @__PURE__ */ jsx10(ImgTagRenderer, { node });
+      // text renderers
+      case "b":
+      case "strong":
+      case "i":
+      case "em":
+      case "u":
+      case "mark":
+      case "small":
+      case "s":
+      case "del":
+      case "sup":
+      case "sub":
+      case "span":
+      case "pre":
+      case "code":
+        return /* @__PURE__ */ jsx10(DefaultTextRenderer, { node });
+      case "a":
+        return /* @__PURE__ */ jsx10(ATagRenderer, { node });
+      case "th":
+      case "td": {
+        const currentIndex = node.parent?.children.indexOf(node) || 0;
+        return /* @__PURE__ */ jsx10(AlignedWidthItem, { index: currentIndex, children: /* @__PURE__ */ jsx10(DefaultTextRenderer, { node }) });
+      }
+      default:
+        return null;
+    }
+  }
+  if (node.type === "text") {
+    const text = node.data.replace(/\s+/g, " ").replace(/ /g, " ");
+    return /* @__PURE__ */ jsx10(Text3, { children: text });
+  }
+  return null;
+};
+
+// src/renderers/_NodesRenderer.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var NodesRenderer = ({ nodes }) => {
+  return nodes.map((node, index) => /* @__PURE__ */ jsx11(NodeRenderer, { node }, `${node.type}-${index}`));
+};
+
+// src/RenderHTML.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var RenderHTML = (props) => {
+  const nodes = useMemo2(() => {
+    if (!props.html) {
+      return [];
+    }
+    const cleaned = props.html.replace(/\n/g, "");
+    const n = parseDocument(cleaned);
+    return new HTMLValidator(n.children).cleanup();
+  }, [props.html]);
+  return /* @__PURE__ */ jsx12(View6, { children: /* @__PURE__ */ jsx12(
+    HtmlProvider,
+    {
+      tagStyles: props.tagStyles,
+      baseStyle: props.baseStyle,
+      classesStyles: props.classesStyles,
+      listGap: props.listGap,
+      overrideExternalLinkTintColor: props.overrideExternalLinkTintColor,
+      markerColor: props.markerColor,
+      onLinkPress: props.onLinkPress,
+      renderImage: props.renderImage,
+      renderTextComponent: props.renderTextComponent,
+      children: /* @__PURE__ */ jsx12(NodesRenderer, { nodes })
+    }
+  ) });
+};
+export {
+  RenderHTML
+};
+//# sourceMappingURL=index.mjs.map