@neeleshyadav/react-native-html-renderer 1.1.0

package/src/renderer/tags/ImageTag.tsx

@@ -0,0 +1,215 @@
+import { memo, useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  ActivityIndicator,
+  type ViewStyle,
+  type TextStyle,
+  type ImageStyle,
+} from 'react-native';
+import type {
+  DOMElement,
+  HtmlRendererContextValue,
+  RNStyle,
+} from '../../types';
+import {
+  getCachedImageDimensions,
+  setCachedImageDimensions,
+} from '../../utils/cache';
+import { getImageA11yLabel } from '../../utils/accessibility';
+
+interface ImageTagProps {
+  node: DOMElement;
+  style: RNStyle;
+  nodeKey: string;
+  ctx: HtmlRendererContextValue;
+}
+
+interface ImageDimensions {
+  width: number;
+  height: number;
+}
+
+/**
+ * Renders an `<img>` tag with:
+ * - Cached dimension fetching via `Image.getSize()`
+ * - Proportional scaling to fit `contentWidth` / `maxImagesWidth`
+ * - Loading placeholder and error fallback
+ * - Optional `onImagePress` callback
+ * - Accessibility labels from `alt`, `aria-label`, `title`
+ */
+export const ImageTag = memo(function ImageTag({
+  node,
+  style,
+  nodeKey,
+  ctx,
+}: ImageTagProps) {
+  const src = node.attributes.src;
+  if (!src) return null;
+
+  // aria-hidden check
+  if (node.attributes['aria-hidden'] === 'true') return null;
+
+  return (
+    <ImageInner
+      src={src}
+      node={node}
+      style={style}
+      nodeKey={nodeKey}
+      ctx={ctx}
+    />
+  );
+});
+
+const ImageInner = memo(function ImageInner({
+  src,
+  node,
+  style,
+  nodeKey,
+  ctx,
+}: ImageTagProps & { src: string }) {
+  const attrWidth = parseInt(node.attributes.width ?? '0', 10) || 0;
+  const attrHeight = parseInt(node.attributes.height ?? '0', 10) || 0;
+
+  // Check cache first
+  const cached = getCachedImageDimensions(src);
+  const initialDims =
+    attrWidth && attrHeight
+      ? { width: attrWidth, height: attrHeight }
+      : (cached ?? null);
+
+  const [dimensions, setDimensions] = useState<ImageDimensions | null>(
+    initialDims
+  );
+  const [loading, setLoading] = useState(!initialDims);
+  const [errored, setErrored] = useState(false);
+
+  useEffect(() => {
+    if (dimensions) return;
+
+    let cancelled = false;
+
+    Image.getSize(
+      src,
+      (w, h) => {
+        if (!cancelled) {
+          const dims = { width: w, height: h };
+          setDimensions(dims);
+          setCachedImageDimensions(src, dims);
+          setLoading(false);
+        }
+      },
+      () => {
+        if (!cancelled) {
+          setErrored(true);
+          setLoading(false);
+        }
+      }
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  }, [src, dimensions]);
+
+  const handlePress = useCallback(() => {
+    ctx.onImagePress?.(src, node.attributes);
+  }, [ctx, src, node.attributes]);
+
+  // Calculate scaled dimensions
+  const maxWidth = Math.min(
+    ctx.contentWidth,
+    ctx.maxImagesWidth ?? ctx.contentWidth
+  );
+  const placeholder = ctx.imagesInitialDimensions;
+
+  let displayWidth: number;
+  let displayHeight: number;
+
+  if (dimensions) {
+    const ratio = dimensions.height / dimensions.width;
+    displayWidth = Math.min(dimensions.width, maxWidth);
+    displayHeight = displayWidth * ratio;
+  } else {
+    displayWidth = Math.min(placeholder.width, maxWidth);
+    displayHeight = placeholder.height;
+  }
+
+  const a11yLabel = getImageA11yLabel(node);
+
+  if (errored) {
+    return (
+      <View
+        key={nodeKey}
+        style={[errorContainer, { width: displayWidth, height: displayHeight }]}
+        accessibilityRole="image"
+        accessibilityLabel={a11yLabel ?? 'Image failed to load'}
+      >
+        <Text style={errorText}>Image failed to load</Text>
+      </View>
+    );
+  }
+
+  const imageElement = (
+    <View key={nodeKey}>
+      {loading && (
+        <View
+          style={[
+            loadingContainer,
+            { width: displayWidth, height: displayHeight },
+          ]}
+        >
+          <ActivityIndicator size="small" />
+        </View>
+      )}
+      <Image
+        source={{ uri: src }}
+        style={[
+          { width: displayWidth, height: displayHeight } as ImageStyle,
+          style as ImageStyle,
+        ]}
+        accessibilityRole="image"
+        accessibilityLabel={a11yLabel}
+        resizeMode="contain"
+        onLoad={() => setLoading(false)}
+        onError={() => {
+          setErrored(true);
+          setLoading(false);
+        }}
+      />
+    </View>
+  );
+
+  if (ctx.onImagePress) {
+    return (
+      <TouchableOpacity key={nodeKey} onPress={handlePress} activeOpacity={0.8}>
+        {imageElement}
+      </TouchableOpacity>
+    );
+  }
+
+  return imageElement;
+});
+
+const loadingContainer: ViewStyle = {
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#f5f5f5',
+  borderRadius: 4,
+};
+
+const errorContainer: ViewStyle = {
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#f5f5f5',
+  borderRadius: 4,
+  borderWidth: 1,
+  borderColor: '#ddd',
+};
+
+const errorText: TextStyle = {
+  color: '#999',
+  fontSize: 12,
+};

package/src/renderer/tags/LinkTag.tsx

@@ -0,0 +1,76 @@
+import { memo, useCallback, type ReactNode } from 'react';
+import { Text, TouchableOpacity, Linking, type TextStyle } from 'react-native';
+import type { DOMNode, RNStyle, HtmlRendererContextValue } from '../../types';
+import { isInlineContent } from '../../utils';
+import { getLinkA11yLabel } from '../../utils/accessibility';
+import { renderInlineNodes } from './TextTags';
+
+/** Only allow these URL schemes in the default Linking.openURL handler. */
+const SAFE_LINK_SCHEMES = /^(https?:|mailto:|tel:|sms:)/i;
+
+interface LinkTagProps {
+  node: {
+    attributes: Record<string, string>;
+    children: DOMNode[];
+  };
+  style: RNStyle;
+  nodeKey: string;
+  ctx: HtmlRendererContextValue;
+  renderNodes: (
+    nodes: DOMNode[],
+    ctx: HtmlRendererContextValue,
+    keyPrefix: string
+  ) => ReactNode[];
+}
+
+/**
+ * Renders a block-level `<a>` tag as a TouchableOpacity wrapping a Text.
+ * Includes accessibility role, label, and hint.
+ */
+export const LinkTag = memo(function LinkTag({
+  node,
+  style,
+  nodeKey,
+  ctx,
+  renderNodes,
+}: LinkTagProps) {
+  const href = node.attributes.href ?? '';
+
+  const handlePress = useCallback(() => {
+    if (ctx.onLinkPress) {
+      ctx.onLinkPress(href, node.attributes);
+    } else if (SAFE_LINK_SCHEMES.test(href)) {
+      Linking.openURL(href).catch(() => {
+        // silently ignore if URL can't be opened
+      });
+    }
+  }, [ctx, href, node.attributes]);
+
+  const children = isInlineContent(node.children)
+    ? renderInlineNodes(node.children, ctx, nodeKey, renderNodes)
+    : renderNodes(node.children, ctx, nodeKey);
+
+  const a11yLabel =
+    node.attributes['aria-label'] ??
+    getLinkA11yLabel(node as Parameters<typeof getLinkA11yLabel>[0]);
+
+  return (
+    <TouchableOpacity
+      key={nodeKey}
+      onPress={handlePress}
+      accessibilityRole="link"
+      accessibilityLabel={a11yLabel}
+      accessibilityHint={href ? `Opens ${href}` : undefined}
+      activeOpacity={0.7}
+    >
+      <Text
+        style={style as TextStyle}
+        allowFontScaling={ctx.allowFontScaling}
+        maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+        {...ctx.defaultTextProps}
+      >
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+});

package/src/renderer/tags/ListTags.tsx

@@ -0,0 +1,148 @@
+import { memo, type ReactNode } from 'react';
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native';
+import type {
+  DOMNode,
+  DOMElement,
+  RNStyle,
+  HtmlRendererContextValue,
+} from '../../types';
+import { isInlineContent, isDOMElement } from '../../utils';
+import { mergeStylesForElement } from '../../styles';
+import { getDefaultTagStyles } from '../../styles/defaultStyles';
+import { getAccessibilityProps } from '../../utils/accessibility';
+import { renderInlineNodes } from './TextTags';
+
+interface ListTagProps {
+  node: DOMElement;
+  style: RNStyle;
+  nodeKey: string;
+  ctx: HtmlRendererContextValue;
+  renderNodes: (
+    nodes: DOMNode[],
+    ctx: HtmlRendererContextValue,
+    keyPrefix: string
+  ) => ReactNode[];
+}
+
+/**
+ * Renders `<ul>` and `<ol>` lists with proper bullets/numbers and nesting.
+ */
+export const ListTag = memo(function ListTag({
+  node,
+  style,
+  nodeKey,
+  ctx,
+  renderNodes,
+}: ListTagProps) {
+  const isOrdered = node.tag === 'ol';
+  const defaults = getDefaultTagStyles(ctx.emSize);
+  const nestedCtx = { ...ctx, nestLevel: ctx.nestLevel + 1 };
+  const a11y = getAccessibilityProps(node);
+
+  const listItems = node.children.filter(
+    (child): child is DOMElement => isDOMElement(child) && child.tag === 'li'
+  );
+
+  return (
+    <View
+      key={nodeKey}
+      style={style as ViewStyle}
+      accessibilityRole="list"
+      {...a11y}
+      {...ctx.defaultViewProps}
+    >
+      {listItems.map((li, liIndex) => {
+        const liKey = `${nodeKey}_li_${liIndex}`;
+        const liStyle = mergeStylesForElement(
+          li,
+          defaults,
+          ctx.tagsStyles,
+          ctx.classesStyles,
+          ctx.idsStyles,
+          ctx.ignoredStyles.size > 0 ? ctx.ignoredStyles : undefined,
+          ctx.allowedStyles
+        );
+
+        const prefixRenderer = isOrdered
+          ? ctx.listsPrefixesRenderers?.ol
+          : ctx.listsPrefixesRenderers?.ul;
+
+        const prefix = prefixRenderer ? (
+          prefixRenderer({ index: liIndex, nestLevel: ctx.nestLevel })
+        ) : (
+          <Text style={bulletStyle}>
+            {isOrdered ? `${liIndex + 1}. ` : '\u2022 '}
+          </Text>
+        );
+
+        const hasNestedList = li.children.some(
+          (c) => isDOMElement(c) && (c.tag === 'ul' || c.tag === 'ol')
+        );
+
+        if (hasNestedList) {
+          const inlineChildren: DOMNode[] = [];
+          const blockChildren: DOMNode[] = [];
+
+          for (const child of li.children) {
+            if (
+              isDOMElement(child) &&
+              (child.tag === 'ul' || child.tag === 'ol')
+            ) {
+              blockChildren.push(child);
+            } else {
+              inlineChildren.push(child);
+            }
+          }
+
+          return (
+            <View key={liKey}>
+              <View style={liRowStyle}>
+                {prefix}
+                <Text
+                  style={[liStyle as TextStyle, { flex: 1 }]}
+                  allowFontScaling={ctx.allowFontScaling}
+                  maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+                  {...ctx.defaultTextProps}
+                >
+                  {isInlineContent(inlineChildren)
+                    ? renderInlineNodes(inlineChildren, ctx, liKey, renderNodes)
+                    : renderNodes(inlineChildren, ctx, liKey)}
+                </Text>
+              </View>
+              {renderNodes(blockChildren, nestedCtx, `${liKey}_nested`)}
+            </View>
+          );
+        }
+
+        const liChildren = isInlineContent(li.children)
+          ? renderInlineNodes(li.children, ctx, liKey, renderNodes)
+          : renderNodes(li.children, ctx, liKey);
+
+        return (
+          <View key={liKey} style={liRowStyle}>
+            {prefix}
+            <Text
+              style={[liStyle as TextStyle, { flex: 1 }]}
+              allowFontScaling={ctx.allowFontScaling}
+              maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+              {...ctx.defaultTextProps}
+            >
+              {liChildren}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+});
+
+const liRowStyle: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+};
+
+const bulletStyle: TextStyle = {
+  width: 20,
+  textAlign: 'right',
+  marginRight: 4,
+};

package/src/renderer/tags/MediaTags.tsx

@@ -0,0 +1,81 @@
+import { memo } from 'react';
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native';
+import type {
+  DOMElement,
+  RNStyle,
+  HtmlRendererContextValue,
+} from '../../types';
+
+interface MediaTagProps {
+  node: DOMElement;
+  style: RNStyle;
+  nodeKey: string;
+  ctx: HtmlRendererContextValue;
+}
+
+/**
+ * Placeholder renderers for `<video>` and `<audio>` tags.
+ */
+export const VideoTag = memo(function VideoTag({
+  node,
+  style,
+  nodeKey,
+  ctx,
+}: MediaTagProps) {
+  const width = Math.min(ctx.contentWidth, 320);
+  const label = node.attributes['aria-label'] ?? 'Video content';
+
+  return (
+    <View
+      key={nodeKey}
+      style={[
+        placeholderStyle,
+        style as ViewStyle,
+        { width, height: width * 0.5625 },
+      ]}
+      accessibilityLabel={label}
+    >
+      <Text style={iconStyle}>{'\u25B6'}</Text>
+      <Text style={labelStyle}>Video</Text>
+    </View>
+  );
+});
+
+export const AudioTag = memo(function AudioTag({
+  node,
+  style,
+  nodeKey,
+}: MediaTagProps) {
+  const label = node.attributes['aria-label'] ?? 'Audio content';
+
+  return (
+    <View
+      key={nodeKey}
+      style={[placeholderStyle, style as ViewStyle, { height: 48 }]}
+      accessibilityLabel={label}
+    >
+      <Text style={iconStyle}>{'\u266B'}</Text>
+      <Text style={labelStyle}>Audio</Text>
+    </View>
+  );
+});
+
+const placeholderStyle: ViewStyle = {
+  backgroundColor: '#f0f0f0',
+  borderRadius: 6,
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginVertical: 4,
+  flexDirection: 'row',
+  gap: 6,
+};
+
+const iconStyle: TextStyle = {
+  fontSize: 20,
+  color: '#999',
+};
+
+const labelStyle: TextStyle = {
+  fontSize: 13,
+  color: '#999',
+};

package/src/renderer/tags/TableTags.tsx

@@ -0,0 +1,94 @@
+import { memo, type ReactNode } from 'react';
+import { View, ScrollView, type ViewStyle } from 'react-native';
+import type {
+  DOMNode,
+  DOMElement,
+  RNStyle,
+  HtmlRendererContextValue,
+} from '../../types';
+import { isDOMElement } from '../../utils';
+
+interface TableTagProps {
+  node: DOMElement;
+  style: RNStyle;
+  nodeKey: string;
+  ctx: HtmlRendererContextValue;
+  renderNodes: (
+    nodes: DOMNode[],
+    ctx: HtmlRendererContextValue,
+    keyPrefix: string
+  ) => ReactNode[];
+}
+
+/**
+ * Renders a `<table>` wrapped in a horizontal ScrollView for overflow.
+ */
+export const TableTag = memo(function TableTag({
+  node,
+  style,
+  nodeKey,
+  ctx,
+  renderNodes,
+}: TableTagProps) {
+  return (
+    <ScrollView
+      key={nodeKey}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={style as ViewStyle}
+    >
+      <View>
+        {renderTableContent(
+          node.children,
+          ctx,
+          keyPrefix(nodeKey),
+          renderNodes
+        )}
+      </View>
+    </ScrollView>
+  );
+});
+
+function keyPrefix(k: string): string {
+  return `${k}_tbl`;
+}
+
+function renderTableContent(
+  nodes: DOMNode[],
+  ctx: HtmlRendererContextValue,
+  prefix: string,
+  renderNodes: (
+    nodes: DOMNode[],
+    ctx: HtmlRendererContextValue,
+    keyPrefix: string
+  ) => ReactNode[]
+): ReactNode[] {
+  const results: ReactNode[] = [];
+
+  for (const [i, node] of nodes.entries()) {
+    if (!isDOMElement(node)) continue;
+    const key = `${prefix}_${i}`;
+
+    if (
+      node.tag === 'thead' ||
+      node.tag === 'tbody' ||
+      node.tag === 'tfoot' ||
+      node.tag === 'colgroup' ||
+      node.tag === 'caption'
+    ) {
+      results.push(...renderTableContent(node.children, ctx, key, renderNodes));
+    } else if (node.tag === 'tr') {
+      results.push(
+        <View key={key} style={trStyle}>
+          {renderNodes(node.children, ctx, key)}
+        </View>
+      );
+    }
+  }
+
+  return results;
+}
+
+const trStyle: ViewStyle = {
+  flexDirection: 'row',
+};