@neeleshyadav/react-native-html-renderer 1.1.0

package/src/renderer/tags/TextTags.tsx

@@ -0,0 +1,139 @@
+import { memo, type ReactNode } from 'react';
+import { Text, type TextStyle } from 'react-native';
+import type {
+  DOMNode,
+  DOMElement,
+  RNStyle,
+  HtmlRendererContextValue,
+} from '../../types';
+import { INLINE_TAGS, isInlineContent } from '../../utils';
+import { getAccessibilityProps } from '../../utils/accessibility';
+
+interface TextBlockProps {
+  tag: string;
+  node: DOMElement;
+  style: RNStyle;
+  children: DOMNode[];
+  nodeKey: string;
+  ctx: HtmlRendererContextValue;
+  renderNodes: (
+    nodes: DOMNode[],
+    ctx: HtmlRendererContextValue,
+    keyPrefix: string
+  ) => ReactNode[];
+}
+
+/**
+ * Renders a text-block tag (`<p>`, `<h1>`-`<h6>`, `<pre>`, `<label>`, etc.)
+ * as a single `<Text>` component.
+ */
+export const TextBlock = memo(function TextBlock({
+  node,
+  style,
+  children,
+  nodeKey,
+  ctx,
+  renderNodes,
+}: TextBlockProps) {
+  const content = isInlineContent(children)
+    ? renderInlineNodes(children, ctx, nodeKey, renderNodes)
+    : renderNodes(children, ctx, nodeKey);
+
+  const a11y = getAccessibilityProps(node);
+  const debugStyle: TextStyle | undefined = ctx.debug
+    ? { borderWidth: 1, borderColor: 'red' }
+    : undefined;
+
+  return (
+    <Text
+      key={nodeKey}
+      style={
+        debugStyle ? [style as TextStyle, debugStyle] : (style as TextStyle)
+      }
+      allowFontScaling={ctx.allowFontScaling}
+      maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+      {...a11y}
+      {...ctx.defaultTextProps}
+    >
+      {content}
+    </Text>
+  );
+});
+
+/**
+ * Renders inline content (text nodes + inline tags) as nested `<Text>` elements.
+ */
+export function renderInlineNodes(
+  nodes: DOMNode[],
+  ctx: HtmlRendererContextValue,
+  keyPrefix: string,
+  renderNodes: (
+    nodes: DOMNode[],
+    ctx: HtmlRendererContextValue,
+    keyPrefix: string
+  ) => ReactNode[]
+): ReactNode[] {
+  return nodes
+    .map((node, i) => {
+      const key = `${keyPrefix}_${i}`;
+
+      if (node.type === 'text') {
+        return node.data;
+      }
+
+      if (node.type === 'element' && INLINE_TAGS.has(node.tag)) {
+        if (node.tag === 'br') {
+          return '\n';
+        }
+
+        if (node.tag === 'a') {
+          const href = node.attributes.href ?? '';
+          const linkStyle: TextStyle = {
+            color: '#1a73e8',
+            textDecorationLine: 'underline' as const,
+            ...(ctx.tagsStyles.a as TextStyle),
+          };
+          return (
+            <Text
+              key={key}
+              style={linkStyle}
+              onPress={() => ctx.onLinkPress?.(href, node.attributes)}
+              accessibilityRole="link"
+              accessibilityHint={`Opens ${href}`}
+              accessibilityLabel={node.attributes['aria-label'] ?? undefined}
+              allowFontScaling={ctx.allowFontScaling}
+              maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+            >
+              {renderInlineNodes(node.children, ctx, key, renderNodes)}
+            </Text>
+          );
+        }
+
+        const inlineStyle: RNStyle = {
+          ...(ctx.tagsStyles[node.tag] as TextStyle),
+        };
+
+        // Check aria-hidden
+        const ariaHidden = node.attributes['aria-hidden'] === 'true';
+
+        return (
+          <Text
+            key={key}
+            style={inlineStyle as TextStyle}
+            accessible={ariaHidden ? false : undefined}
+            importantForAccessibility={
+              ariaHidden ? 'no-hide-descendants' : undefined
+            }
+            allowFontScaling={ctx.allowFontScaling}
+            maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+          >
+            {renderInlineNodes(node.children, ctx, key, renderNodes)}
+          </Text>
+        );
+      }
+
+      // Non-inline child — fall back
+      return renderNodes([node], ctx, key);
+    })
+    .filter((n) => n != null);
+}

package/src/renderer/tags/index.ts

@@ -0,0 +1,8 @@
+export { TextBlock, renderInlineNodes } from './TextTags';
+export { ImageTag } from './ImageTag';
+export { LinkTag } from './LinkTag';
+export { ListTag } from './ListTags';
+export { TableTag } from './TableTags';
+export { BlockTag } from './BlockTags';
+export { InputTag, TextareaTag, ButtonTag, SelectTag } from './FormTags';
+export { VideoTag, AudioTag } from './MediaTags';

package/src/styles/cssToRn.ts

@@ -0,0 +1,45 @@
+import transform from 'css-to-react-native';
+import type { RNStyle } from '../types';
+
+/**
+ * Parse an inline CSS `style` attribute string into a React Native style object.
+ *
+ * @param styleString - The raw CSS string (e.g. `"color: red; font-size: 18px"`).
+ * @param ignoredStyles - CSS property names to exclude.
+ * @param allowedStyles - If provided, only these CSS property names are kept.
+ * @returns A React Native compatible style object.
+ */
+export function parseInlineStyle(
+  styleString: string,
+  ignoredStyles?: Set<string>,
+  allowedStyles?: Set<string> | null
+): RNStyle {
+  if (!styleString) return {};
+
+  try {
+    const pairs: [string, string][] = styleString
+      .split(';')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .map((declaration) => {
+        const colonIndex = declaration.indexOf(':');
+        if (colonIndex === -1) return null;
+        const prop = declaration.slice(0, colonIndex).trim();
+        const value = declaration.slice(colonIndex + 1).trim();
+        return [prop, value] as [string, string];
+      })
+      .filter((pair): pair is [string, string] => {
+        if (!pair) return false;
+        const [prop] = pair;
+        if (ignoredStyles?.has(prop)) return false;
+        if (allowedStyles && !allowedStyles.has(prop)) return false;
+        return true;
+      });
+
+    if (pairs.length === 0) return {};
+
+    return transform(pairs) as RNStyle;
+  } catch {
+    return {};
+  }
+}

package/src/styles/darkModeStyles.ts

@@ -0,0 +1,80 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { TagsStyles } from '../types';
+
+/**
+ * Default dark mode style overrides. These are merged on top of the
+ * default light-mode tag styles when the system color scheme is 'dark'.
+ */
+export function getDefaultDarkModeStyles(): TagsStyles {
+  const textColor: TextStyle = { color: '#e0e0e0' };
+
+  return {
+    // Text elements — light text on dark background
+    p: textColor,
+    h1: textColor,
+    h2: textColor,
+    h3: textColor,
+    h4: textColor,
+    h5: textColor,
+    h6: textColor,
+    li: textColor,
+    dt: textColor,
+    dd: textColor,
+    label: textColor,
+
+    // Inline text
+    a: { color: '#8ab4f8', textDecorationLine: 'underline' } as TextStyle,
+    mark: { backgroundColor: '#5c5c00', color: '#e0e0e0' } as TextStyle,
+    code: {
+      backgroundColor: '#2d2d2d',
+      color: '#e0e0e0',
+    } as TextStyle,
+
+    // Preformatted
+    pre: {
+      backgroundColor: '#1e1e1e',
+      color: '#e0e0e0',
+    } as TextStyle,
+
+    // Blockquote
+    blockquote: {
+      borderLeftColor: '#555',
+    } as ViewStyle,
+
+    // Tables
+    th: {
+      ...textColor,
+      backgroundColor: '#2d2d2d',
+      borderColor: '#444',
+    } as TextStyle,
+    td: {
+      ...textColor,
+      borderColor: '#444',
+    } as TextStyle,
+
+    // Horizontal rule
+    hr: {
+      borderBottomColor: '#555',
+    } as ViewStyle,
+
+    // Forms (read-only)
+    input: {
+      ...textColor,
+      borderColor: '#555',
+      backgroundColor: '#2d2d2d',
+    } as TextStyle,
+    textarea: {
+      ...textColor,
+      borderColor: '#555',
+      backgroundColor: '#2d2d2d',
+    } as TextStyle,
+    button: {
+      backgroundColor: '#444',
+    } as ViewStyle,
+    select: {
+      ...textColor,
+      borderColor: '#555',
+      backgroundColor: '#2d2d2d',
+    } as TextStyle,
+  };
+}

package/src/styles/defaultStyles.ts

@@ -0,0 +1,176 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { TagsStyles } from '../types';
+
+/**
+ * Returns the default styles for all supported HTML tags.
+ *
+ * @param emSize - Base em unit in pixels (used for heading sizes etc.).
+ */
+export function getDefaultTagStyles(emSize: number): TagsStyles {
+  const base: TextStyle = { fontSize: emSize };
+
+  return {
+    // Block text
+    p: { ...base, marginVertical: 4 } as TextStyle,
+    h1: {
+      ...base,
+      fontSize: emSize * 2,
+      fontWeight: 'bold',
+      marginVertical: 10,
+    } as TextStyle,
+    h2: {
+      ...base,
+      fontSize: emSize * 1.5,
+      fontWeight: 'bold',
+      marginVertical: 9,
+    } as TextStyle,
+    h3: {
+      ...base,
+      fontSize: emSize * 1.17,
+      fontWeight: 'bold',
+      marginVertical: 8,
+    } as TextStyle,
+    h4: {
+      ...base,
+      fontWeight: 'bold',
+      marginVertical: 6,
+    } as TextStyle,
+    h5: {
+      ...base,
+      fontSize: emSize * 0.83,
+      fontWeight: 'bold',
+      marginVertical: 5,
+    } as TextStyle,
+    h6: {
+      ...base,
+      fontSize: emSize * 0.67,
+      fontWeight: 'bold',
+      marginVertical: 4,
+    } as TextStyle,
+
+    // Inline text
+    strong: { fontWeight: 'bold' } as TextStyle,
+    b: { fontWeight: 'bold' } as TextStyle,
+    em: { fontStyle: 'italic' } as TextStyle,
+    i: { fontStyle: 'italic' } as TextStyle,
+    u: { textDecorationLine: 'underline' } as TextStyle,
+    s: { textDecorationLine: 'line-through' } as TextStyle,
+    strike: { textDecorationLine: 'line-through' } as TextStyle,
+    del: { textDecorationLine: 'line-through' } as TextStyle,
+    ins: { textDecorationLine: 'underline' } as TextStyle,
+    mark: { backgroundColor: '#ff0' } as TextStyle,
+    small: { fontSize: emSize * 0.8 } as TextStyle,
+    sub: { fontSize: emSize * 0.75 } as TextStyle,
+    sup: { fontSize: emSize * 0.75 } as TextStyle,
+    code: {
+      fontFamily: 'monospace',
+      backgroundColor: '#f0f0f0',
+      paddingHorizontal: 3,
+    } as TextStyle,
+
+    // Links
+    a: {
+      color: '#1a73e8',
+      textDecorationLine: 'underline',
+    } as TextStyle,
+
+    // Lists
+    ul: { marginVertical: 4, paddingLeft: 20 } as ViewStyle,
+    ol: { marginVertical: 4, paddingLeft: 20 } as ViewStyle,
+    li: { ...base, marginVertical: 2 } as TextStyle,
+
+    // Separators
+    hr: {
+      marginVertical: 8,
+    } as ViewStyle,
+
+    // Preformatted
+    pre: {
+      ...base,
+      fontFamily: 'monospace',
+      backgroundColor: '#f5f5f5',
+      padding: 10,
+      borderRadius: 4,
+      marginVertical: 6,
+    } as TextStyle,
+
+    // Blockquote
+    blockquote: {
+      borderLeftWidth: 3,
+      borderLeftColor: '#ccc',
+      paddingLeft: 12,
+      marginVertical: 6,
+      marginLeft: 0,
+    } as ViewStyle,
+
+    // Tables
+    table: { marginVertical: 6 } as ViewStyle,
+    th: {
+      ...base,
+      fontWeight: 'bold',
+      padding: 6,
+      borderWidth: 1,
+      borderColor: '#ddd',
+      backgroundColor: '#f9f9f9',
+    } as TextStyle,
+    td: {
+      ...base,
+      padding: 6,
+      borderWidth: 1,
+      borderColor: '#ddd',
+    } as TextStyle,
+    tr: { flexDirection: 'row' } as ViewStyle,
+
+    // Block containers
+    div: {} as ViewStyle,
+    section: {} as ViewStyle,
+    article: {} as ViewStyle,
+    header: {} as ViewStyle,
+    footer: {} as ViewStyle,
+    main: {} as ViewStyle,
+    nav: {} as ViewStyle,
+    aside: {} as ViewStyle,
+
+    // Images
+    img: {} as ViewStyle,
+
+    // Forms (read-only)
+    input: {
+      borderWidth: 1,
+      borderColor: '#ccc',
+      borderRadius: 4,
+      padding: 6,
+      marginVertical: 2,
+      ...base,
+    } as TextStyle,
+    textarea: {
+      borderWidth: 1,
+      borderColor: '#ccc',
+      borderRadius: 4,
+      padding: 6,
+      marginVertical: 2,
+      minHeight: 60,
+      ...base,
+    } as TextStyle,
+    button: {
+      backgroundColor: '#e0e0e0',
+      borderRadius: 4,
+      padding: 8,
+      marginVertical: 2,
+      alignItems: 'center',
+    } as ViewStyle,
+    select: {
+      borderWidth: 1,
+      borderColor: '#ccc',
+      borderRadius: 4,
+      padding: 6,
+      marginVertical: 2,
+      ...base,
+    } as TextStyle,
+
+    // Definition lists
+    dl: { marginVertical: 4 } as ViewStyle,
+    dt: { ...base, fontWeight: 'bold', marginVertical: 2 } as TextStyle,
+    dd: { ...base, marginLeft: 20, marginVertical: 2 } as TextStyle,
+  };
+}

package/src/styles/index.ts

@@ -0,0 +1,4 @@
+export { parseInlineStyle } from './cssToRn';
+export { getDefaultTagStyles } from './defaultStyles';
+export { getDefaultDarkModeStyles } from './darkModeStyles';
+export { mergeStylesForElement } from './mergeStyles';

package/src/styles/mergeStyles.ts

@@ -0,0 +1,59 @@
+import type {
+  RNStyle,
+  TagsStyles,
+  ClassesStyles,
+  IdsStyles,
+  DOMElement,
+} from '../types';
+import { parseInlineStyle } from './cssToRn';
+
+/**
+ * Merge all style layers for a given DOM element in the correct cascade order:
+ *
+ *   defaultTagStyle → tagsStyles → classesStyles → idsStyles → inline style
+ *
+ * Later layers override earlier ones.
+ */
+export function mergeStylesForElement(
+  node: DOMElement,
+  defaultStyles: TagsStyles,
+  tagsStyles: TagsStyles,
+  classesStyles: ClassesStyles,
+  idsStyles: IdsStyles,
+  ignoredStyles?: Set<string>,
+  allowedStyles?: Set<string> | null
+): RNStyle {
+  // 1. Default tag style
+  const base: RNStyle = (defaultStyles[node.tag] as RNStyle) ?? {};
+
+  // 2. User tag override
+  const tagOverride: RNStyle = (tagsStyles[node.tag] as RNStyle) ?? {};
+
+  // 3. Class-based styles
+  let classStyle: RNStyle = {};
+  const className = node.attributes.class;
+  if (className) {
+    const classes = className.split(/\s+/).filter(Boolean);
+    for (const cls of classes) {
+      const s = classesStyles[cls];
+      if (s) classStyle = { ...classStyle, ...s } as RNStyle;
+    }
+  }
+
+  // 4. ID-based style
+  const id = node.attributes.id;
+  const idStyle: RNStyle = id ? ((idsStyles[id] as RNStyle) ?? {}) : {};
+
+  // 5. Inline style
+  const inlineStyle = node.attributes.style
+    ? parseInlineStyle(node.attributes.style, ignoredStyles, allowedStyles)
+    : {};
+
+  return {
+    ...base,
+    ...tagOverride,
+    ...classStyle,
+    ...idStyle,
+    ...inlineStyle,
+  } as RNStyle;
+}