@nanogiants/react-native-render-html 1.0.0

package/src/assets.ts

@@ -0,0 +1,5 @@
+export const EXTERNAL_LINK_URI =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IB2cksfwAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+kJCwwjMljq2h8AAAD4SURBVEjH7dY9SgNBGMbxn7vpIngXwc5SbG39KjxCLDyCnY0nUFGIH0Uu4CU8gXZ2iYU2IsRmiiCz+u4sBpQ8sLwMDPPf53mWYVnoP2sH44bn8evmXgfQM+5n1jW20lz6LXc9DDHFByYRR2foBw4/xkM64xLbuMYy1iNvN8H7N/mPMcg4Gab1KOeoCTQK7KuTkyluZ9LJgqrCTmqcYx932E3dtNJPjnJxwWqamzjoCqpxlYlrEIw7BGqChHqtWnRygb3STqKgkwS5KS0+egWdpnlUAmkDesJhlzuqMifNDdQU3Vr6hKPql4BesIKNFqBXvC3+Bf62PgFLzkKE8ZczlwAAAABJRU5ErkJggg==';
+
+export const UL_MARKER_URI =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAwCAYAAAAsJjtLAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACKADAAQAAAABAAAAMAAAAAAE1YgVAAAAZklEQVQ4EWNgGAWjITC4QoDxiYRE/H9GxgkM//8LIDuNkYHhAZDfAFJw/z8DgwKyJJzNyPiBCackSBXQVCa4ahwMaigAOgSH6QwgnzD9//+/EOolVHVAjf8YGBpRBUd5oyEw8CEAAGO5FkZ9+flOAAAAAElFTkSuQmCC';

package/src/context/AlignedWidthItem.tsx

@@ -0,0 +1,25 @@
+import type { FunctionComponent, PropsWithChildren } from 'react';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+
+import { useAlignedWidth } from './AlignedWidthProvider';
+
+interface Props extends PropsWithChildren {
+  index: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * This component is used to wrap items that need to have aligned widths.
+ * It uses the AlignedWidthProvider context to measure and set the width
+ * of each item based on the widest item in the same index position.
+ * For example, in a table column.
+ */
+export const AlignedWidthItem: FunctionComponent<Props> = ({ children, index, style }) => {
+  const { getLayoutHandlerForIndex, getWidthStyle } = useAlignedWidth();
+
+  return (
+    <View style={[getWidthStyle(index), style]} onLayout={getLayoutHandlerForIndex(index)}>
+      {children}
+    </View>
+  );
+};

package/src/context/AlignedWidthProvider.tsx

@@ -0,0 +1,52 @@
+import { createContext, type ReactNode, useContext, useState } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+
+interface AlignedWidthContextProps {
+  getLayoutHandlerForIndex: (colIdx: number) => (event: LayoutChangeEvent) => void;
+  getWidthStyle: (colIdx: number) => { minWidth?: number; width?: number };
+}
+
+const AlignedWidthContext = createContext<AlignedWidthContextProps | undefined>(undefined);
+
+export const AlignedWidthProvider = ({ children }: { children: ReactNode }) => {
+  const [colWidths, setColWidths] = useState<{ [colIdx: number]: number }>({});
+
+  const getLayoutHandlerForIndex = (colIdx: number) => {
+    return (event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      setColWidths((prev) => {
+        const previousWidth = prev[colIdx] || 0;
+        return {
+          ...prev,
+          [colIdx]: Math.max(previousWidth, width),
+        };
+      });
+    };
+  };
+
+  const getWidthStyle = (colIdx: number) => {
+    return {
+      minWidth: colWidths[colIdx] || undefined,
+      width: colWidths[colIdx] || undefined,
+    };
+  };
+
+  return (
+    <AlignedWidthContext.Provider
+      value={{
+        getLayoutHandlerForIndex,
+        getWidthStyle,
+      }}
+    >
+      {children}
+    </AlignedWidthContext.Provider>
+  );
+};
+
+export const useAlignedWidth = () => {
+  const context = useContext(AlignedWidthContext);
+  if (!context) {
+    throw new Error('useAlignedWidth must be used within a AlignedWidthProvider');
+  }
+  return context;
+};

package/src/context/HtmlProvider.tsx

@@ -0,0 +1,564 @@
+import type { AnyNode, ChildNode } from 'domhandler';
+import type { FunctionComponent } from 'react';
+import { createContext, type ReactNode, useCallback, useContext, useMemo } from 'react';
+import type { ColorValue, ImageProps, TextProps, TextStyle, ViewStyle } from 'react-native';
+import { Image, Text } from 'react-native';
+
+import type { CommonProps, HTMLTag, TagStyles } from '../types';
+
+export interface OnHTMLLinkPress {
+  url: string;
+  title: string;
+}
+
+interface ContextValue {
+  getStyle: (node: AnyNode | ChildNode) => {
+    text: TextStyle;
+    block: ViewStyle;
+  };
+  baseStyle: TextStyle;
+  tagsStyles: TagStyles;
+  overrideExternalLinkTintColor?: ColorValue;
+  onLinkPress?: (options: OnHTMLLinkPress) => void;
+  markerColor?: string;
+  renderImage: (props: ImageProps) => ReactNode;
+  renderText: (props: TextProps) => ReactNode;
+}
+
+const HtmlContext = createContext<ContextValue | null>(null);
+
+interface ProviderProps extends CommonProps {
+  children: ReactNode;
+}
+
+export const HtmlProvider: FunctionComponent<ProviderProps> = (options) => {
+  const baseStyle = useMemo<TextStyle>(() => {
+    return {
+      ...options.baseStyle,
+    };
+  }, [options.baseStyle]);
+
+  const tagsStyles = useMemo<TagStyles>(() => {
+    // Sorted by renderer type: block first, then text
+    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: undefined,
+          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 as number) - 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 as number) - 4, 10),
+          ...options.tagStyles?.sup?.text,
+        },
+      },
+      sub: {
+        text: {
+          ...baseStyle,
+          textAlignVertical: 'bottom',
+          fontSize: Math.max((baseStyle.fontSize as number) - 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: AnyNode | ChildNode,
+    ): {
+      text: TextStyle;
+      block: ViewStyle;
+    } => {
+      if (node.type === 'tag') {
+        const classStyle = node.attribs.class
+          ? options.classesStyles?.[node.attribs.class] || {}
+          : {};
+        return {
+          text: {
+            ...tagsStyles[node.tagName as HTMLTag].text,
+            ...classStyle.text,
+          },
+          block: {
+            ...(tagsStyles[node.tagName as HTMLTag].block ?? {}),
+            ...classStyle.block,
+          },
+        };
+      }
+      return {
+        text: {},
+        block: {},
+      };
+    },
+    [tagsStyles, options.classesStyles],
+  );
+
+  const renderImage = useMemo<(props: ImageProps) => ReactNode>(() => {
+    if (options.renderImage) {
+      return options.renderImage;
+    }
+    return (props: ImageProps) => <Image {...props} />;
+  }, [options.renderImage]);
+
+  const renderText = useMemo<(props: TextProps) => ReactNode>(() => {
+    if (options.renderTextComponent) {
+      return options.renderTextComponent;
+    }
+    return (props: TextProps) => <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 <HtmlContext.Provider value={providerValue}>{options.children}</HtmlContext.Provider>;
+};
+
+export const useHtmlContext = () => {
+  const context = useContext(HtmlContext);
+  if (!context) {
+    throw new Error('useHtml must be used within a HtmlProvider');
+  }
+  return context;
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export type { OnHTMLLinkPress } from './context/HtmlProvider';
+export type { RenderHTMLProps } from './RenderHTML';
+export { RenderHTML } from './RenderHTML';
+export type { HTMLTag, HtmlStyle, TagStyles } from './types';

package/src/renderers/ATagRenderer.tsx

@@ -0,0 +1,60 @@
+import type { Element } from 'domhandler';
+import type { FunctionComponent } from 'react';
+
+import { EXTERNAL_LINK_URI } from '../assets';
+import { useHtmlContext } from '../context/HtmlProvider';
+import { concatTextNodes, isExternalURL } from '../utils';
+
+interface Props {
+  node: Element;
+}
+
+export const ATagRenderer: FunctionComponent<Props> = ({ 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 (
+    <>
+      {renderText({
+        accessible: true,
+        onPress: () => {
+          onLinkPress?.({
+            url: node.attribs.href,
+            title: text,
+          });
+        },
+        accessibilityRole: 'link',
+        accessibilityHint: isExternal ? 'External link' : undefined,
+        importantForAccessibility: 'yes',
+        accessibilityElementsHidden: false,
+        style: style.text,
+        children: (
+          <>
+            {text}
+            {isExternal
+              ? renderImage({
+                  source: { uri: EXTERNAL_LINK_URI },
+                  style: {
+                    tintColor: overrideExternalLinkTintColor ?? style.text.color ?? 'black',
+                    height: fontSize,
+                    width: fontSize,
+                    paddingTop: 5,
+                  },
+                })
+              : null}
+          </>
+        ),
+      })}
+    </>
+  );
+};