@mathers101/react-native-render-rich-text 0.0.0-stage → 0.1.9

package/src/RichText.tsx

@@ -0,0 +1,164 @@
+import { useMemo } from 'react';
+import { type NativeSyntheticEvent, type StyleProp, type ViewStyle } from 'react-native';
+import NativeRichText, {
+  type FactoidPressEvent,
+  type LinkPressEvent,
+  type MentionPressEvent,
+  type Md4cFlagsInternal,
+  type SelectionMenuConfig,
+  type AccessibilityLabelsProps,
+} from './EnrichedTiptapTextNativeComponent';
+import { normalizeTiptapStyle } from './normalizeTiptapStyle';
+import type { TiptapStyle } from './types/TiptapStyle';
+
+export type TiptapMark = {
+  type: string;
+  attrs?: Record<string, unknown>;
+};
+
+export type TiptapNode = {
+  type: string;
+  text?: string;
+  attrs?: Record<string, unknown>;
+  marks?: TiptapMark[];
+  content?: TiptapNode[];
+};
+
+const IGNORED_PARSER_FLAGS: Md4cFlagsInternal = {
+  underline: false,
+  superscript: false,
+  subscript: false,
+  latexMath: false,
+  highlight: false,
+  hardSoftBreaks: false,
+  preserveBlankLines: false,
+  admonitions: false,
+};
+
+const SELECTION_MENU: SelectionMenuConfig = {
+  copyAsTiptap: false,
+  copyImageUrl: false,
+  copyLabel: 'Copy',
+  copyAsTiptapLabel: 'Copy as Tiptap',
+  copyImageUrlLabel: 'Copy Image URL',
+  copyImageUrlsLabel: 'Copy {count} Image URLs',
+  copyImageUrlPluralTemplates: [],
+};
+
+const ACCESSIBILITY_LABELS: AccessibilityLabelsProps = {
+  list: {
+    bulletPoint: 'bullet',
+    nestedBulletPoint: 'nested bullet',
+    orderedItem: 'item {index}',
+    nestedOrderedItem: 'nested item {index}',
+  },
+  blockquote: {
+    quote: 'quote',
+    nestedQuote: 'nested quote',
+  },
+  table: { row: 'row' },
+  math: { equation: 'equation' },
+  codeBlock: { wrap: 'wrap', unwrap: 'unwrap' },
+  rotor: { headings: 'headings', links: 'links', images: 'images' },
+};
+
+export type MentionTarget = {
+  id: string;
+  label: string;
+};
+
+export type RichTextProps = {
+  /** Tiptap document, or the same document already encoded as JSON. */
+  document: TiptapNode | string;
+  /** Partial style for the nodes this library renders. Missing keys use defaults. */
+  textStyle?: TiptapStyle;
+  onLinkPress?: (url: string) => void;
+  /** Called with the factoid's `id`. A factoid that contains a link emits `onLinkPress` instead. */
+  onFactoidPress?: (factoidId: string) => void;
+  /** Called with the mention node's `id` and `label`. */
+  onMentionPress?: (mention: MentionTarget) => void;
+  /** Called with the mention node's `id` and `label`. */
+  onMentionLongPress?: (mention: MentionTarget) => void;
+  selectable?: boolean;
+  allowFontScaling?: boolean;
+  maxFontSizeMultiplier?: number;
+  numberOfLines?: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  style?: StyleProp<ViewStyle>;
+};
+
+export function RichText({
+  document,
+  textStyle,
+  onLinkPress,
+  selectable = true,
+  allowFontScaling = true,
+  onFactoidPress,
+  onMentionPress,
+  onMentionLongPress,
+  maxFontSizeMultiplier,
+  numberOfLines,
+  ellipsizeMode,
+  style,
+}: RichTextProps) {
+  const documentJson = typeof document === 'string' ? document : JSON.stringify(document);
+  const tiptapStyle = useMemo(() => normalizeTiptapStyle(textStyle ?? {}), [textStyle]);
+  const handleLinkPress = useMemo(() => {
+    if (!onLinkPress) {
+      return undefined;
+    }
+    return (event: NativeSyntheticEvent<LinkPressEvent>) => {
+      onLinkPress(event.nativeEvent.url);
+    };
+  }, [onLinkPress]);
+  const handleFactoidPress = useMemo(() => {
+    if (!onFactoidPress) {
+      return undefined;
+    }
+    return (event: NativeSyntheticEvent<FactoidPressEvent>) => {
+      onFactoidPress(event.nativeEvent.factoidId);
+    };
+  }, [onFactoidPress]);
+  const handleMentionPress = useMemo(() => {
+    if (!onMentionPress) {
+      return undefined;
+    }
+    return (event: NativeSyntheticEvent<MentionPressEvent>) => {
+      onMentionPress({
+        id: event.nativeEvent.mentionId,
+        label: event.nativeEvent.label,
+      });
+    };
+  }, [onMentionPress]);
+  const handleMentionLongPress = useMemo(() => {
+    if (!onMentionLongPress) {
+      return undefined;
+    }
+    return (event: NativeSyntheticEvent<MentionPressEvent>) => {
+      onMentionLongPress({
+        id: event.nativeEvent.mentionId,
+        label: event.nativeEvent.label,
+      });
+    };
+  }, [onMentionLongPress]);
+
+  return (
+    <NativeRichText
+      document={documentJson}
+      tiptapStyle={tiptapStyle}
+      md4cFlags={IGNORED_PARSER_FLAGS}
+      selectionMenuConfig={SELECTION_MENU}
+      accessibilityLabels={ACCESSIBILITY_LABELS}
+      onLinkPress={handleLinkPress}
+      selectable={selectable}
+      allowFontScaling={allowFontScaling}
+      onFactoidPress={handleFactoidPress}
+      onMentionPress={handleMentionPress}
+      onMentionLongPress={handleMentionLongPress}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={style}
+    />
+  );
+}

package/src/admonitionDefaults.ts

@@ -0,0 +1,58 @@
+import { normalizeColor } from './styleUtils';
+import type { AdmonitionsStyle } from './types/TiptapStyle';
+
+// The five GitHub-flavored admonition/alert types, in the order md4c reports
+// them (see MD_ADMONITION_TAGS). The `admonitionType` attribute emitted by the
+// parser is always one of these lowercase strings.
+export const ADMONITION_TYPES = [
+  'note',
+  'tip',
+  'important',
+  'warning',
+  'caution',
+] as const;
+
+export type AdmonitionType = (typeof ADMONITION_TYPES)[number];
+
+// GitHub alert palette. Each `color` tints the left accent bar, the title label
+// and the icon for that type. Backgrounds default to transparent (no fill) per
+// the issue; users opt into a tint via tiptapStyle.blockquote.admonitions.
+const ADMONITION_COLOR_DEFAULTS: Record<AdmonitionType, string> = {
+  note: '#0969DA',
+  tip: '#1A7F37',
+  important: '#8250DF',
+  warning: '#9A6700',
+  caution: '#CF222E',
+};
+
+export interface ResolvedAdmonitionColors {
+  color: string;
+  backgroundColor: string;
+}
+
+export type ResolvedAdmonitions = Record<
+  AdmonitionType,
+  ResolvedAdmonitionColors
+>;
+
+// Merge user overrides over the GitHub defaults and normalize every color, so
+// native/web receive a complete, concrete per-type palette. Mirrors the
+// linkVariants resolution: `color` falls back to the type default, and an empty
+// or omitted `backgroundColor` resolves to transparent (drawn as no fill).
+export function resolveAdmonitionColors(
+  user: AdmonitionsStyle | undefined
+): ResolvedAdmonitions {
+  const transparent = normalizeColor('transparent')! as string;
+  const result = {} as ResolvedAdmonitions;
+  for (const type of ADMONITION_TYPES) {
+    const override = user?.[type];
+    result[type] = {
+      color: ((override?.color ? normalizeColor(override.color) : undefined) ??
+        normalizeColor(ADMONITION_COLOR_DEFAULTS[type])!) as string,
+      backgroundColor: (override?.backgroundColor
+        ? (normalizeColor(override.backgroundColor) ?? transparent)
+        : transparent) as string,
+    };
+  }
+  return result;
+}

package/src/darkModeTextStyle.ts

@@ -0,0 +1,99 @@
+import type { TiptapStyle } from './types/TiptapStyle';
+
+const text = '#E6EDF3';
+const textStrong = '#F0F6FC';
+const textMuted = '#C9D1D9';
+const textFaint = '#8B949E';
+const border = '#30363D';
+const surface = '#161B22';
+const canvas = '#0D1117';
+
+/**
+ * Optional dark palette for `RichText`'s `textStyle`.
+ * Colors only: font sizes, spacing, and other geometry stay on the built-in defaults.
+ * Bold and italic are omitted so they keep inheriting the surrounding text color.
+ */
+export const darkModeTextStyle: TiptapStyle = {
+  paragraph: { color: text },
+  h1: { color: textStrong },
+  h2: { color: textStrong },
+  h3: { color: textStrong },
+  h4: { color: textStrong },
+  h5: { color: text },
+  h6: { color: textMuted },
+  blockquote: {
+    color: textMuted,
+    borderColor: border,
+    backgroundColor: surface,
+    admonitions: {
+      note: { color: '#58A6FF', backgroundColor: '#0D1C2E' },
+      tip: { color: '#3FB950', backgroundColor: '#0F2419' },
+      important: { color: '#AB7DF8', backgroundColor: '#1C1428' },
+      warning: { color: '#D29922', backgroundColor: '#2A2108' },
+      caution: { color: '#F85149', backgroundColor: '#2D1214' },
+    },
+  },
+  list: {
+    color: text,
+    bulletColor: textFaint,
+    markerColor: textFaint,
+  },
+  codeBlock: {
+    color: text,
+    backgroundColor: canvas,
+    borderColor: border,
+    syntaxColors: {
+      keyword: '#FF7B72',
+      operator: text,
+      punctuation: text,
+      string: '#A5D6FF',
+      number: '#79C0FF',
+      constant: '#79C0FF',
+      comment: textFaint,
+      function: '#D2A8FF',
+      type: '#FFA657',
+      variable: text,
+      property: '#79C0FF',
+      tag: '#7EE787',
+      attribute: '#79C0FF',
+      embedded: text,
+    },
+  },
+  link: { color: '#58A6FF', backgroundColor: 'transparent' },
+  strikethrough: { color: textFaint },
+  underline: { color: text },
+  code: {
+    color: '#FF7B72',
+    backgroundColor: '#3D1F24',
+    borderColor: '#6E3036',
+  },
+  mention: {
+    color: '#93C5FD',
+    backgroundColor: '#1E3A5F',
+  },
+  factoid: {
+    color: '#9BFC6E',
+    backgroundColor: '#132E0F',
+    borderColor: '#3FB950',
+  },
+  video: { backgroundColor: '#000000' },
+  thematicBreak: { color: border },
+  table: {
+    color: text,
+    headerBackgroundColor: surface,
+    headerTextColor: textStrong,
+    rowEvenBackgroundColor: canvas,
+    rowOddBackgroundColor: surface,
+    borderColor: border,
+  },
+  taskList: {
+    checkedColor: '#58A6FF',
+    borderColor: '#6E7681',
+    checkmarkColor: '#FFFFFF',
+    checkedTextColor: textFaint,
+  },
+  math: { color: text, backgroundColor: surface },
+  inlineMath: { color: text },
+  spoiler: { color: '#6E7681' },
+  highlight: { color: '#1C1917', backgroundColor: '#FACC15' },
+};

package/src/headingDefaults.ts

@@ -0,0 +1,21 @@
+// Single source of truth for default heading appearance, shared by the
+// read-only renderer and the editable input so headings match across views.
+
+export type HeadingLevelKey = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface HeadingDefault {
+  fontSize: number;
+  color: string;
+}
+
+/** Default font weight applied to every heading level. */
+export const DEFAULT_HEADING_FONT_WEIGHT = 'bold';
+
+export const HEADING_DEFAULTS: Record<HeadingLevelKey, HeadingDefault> = {
+  h1: { fontSize: 30, color: '#111827' },
+  h2: { fontSize: 24, color: '#111827' },
+  h3: { fontSize: 20, color: '#111827' },
+  h4: { fontSize: 18, color: '#111827' },
+  h5: { fontSize: 16, color: '#374151' },
+  h6: { fontSize: 14, color: '#4B5563' },
+};

package/src/index.tsx

@@ -0,0 +1,4 @@
+export { RichText } from './RichText';
+export { darkModeTextStyle } from './darkModeTextStyle';
+export type { MentionTarget, RichTextProps, TiptapMark, TiptapNode } from './RichText';
+export type { TiptapStyle } from './types/TiptapStyle';

package/src/linkVariantUtils.ts

@@ -0,0 +1,120 @@
+import type { LinkPillContentInternal } from './EnrichedTiptapTextNativeComponent';
+import type { LinkVariantStyle } from './types/TiptapStyle';
+import type { LinkPillContent } from './types/linkPill';
+import { normalizeColor } from './styleUtils';
+import { isDev } from './utils/isDev';
+
+type LinkPatternEntry<T> = [pattern: string, value: T];
+
+// Lookbehind assertions (?<=...) and (?<!...) are not supported by
+// NSRegularExpression on iOS. Warn early so the issue surfaces in JS tests
+// before it silently misfires on device.
+const UNSAFE_LOOKBEHIND_RE = /\(\?<[=!]/;
+
+function warnAboutUnsafePattern(owner: string, pattern: string): void {
+  if (UNSAFE_LOOKBEHIND_RE.test(pattern)) {
+    console.warn(
+      `${owner} pattern "${pattern}" contains a lookbehind assertion (?<= or ?<!). ` +
+        'Lookbehinds are not supported by NSRegularExpression on iOS and will never match. ' +
+        'Use a lookahead or restructure the pattern to avoid them.'
+    );
+  }
+}
+
+/**
+ * Orders URL patterns the way native tries them: longest first, so the most
+ * specific pattern wins. Patterns that are not valid regexes are dropped.
+ * `owner` names the prop in warnings.
+ */
+export function normalizeLinkPatternEntries<T>(
+  entries: Record<string, T> | undefined,
+  owner: string
+): LinkPatternEntry<T>[] {
+  return Object.entries(entries ?? {})
+    .sort(([a], [b]) => b.length - a.length)
+    .filter(([pattern]) => {
+      try {
+        RegExp(pattern);
+      } catch {
+        if (isDev) {
+          console.warn(
+            `${owner} pattern "${pattern}" is not a valid regex and will be ignored.`
+          );
+        }
+        return false;
+      }
+
+      if (isDev) {
+        warnAboutUnsafePattern(owner, pattern);
+      }
+      return true;
+    });
+}
+
+export function normalizeLinkVariantEntries(
+  linkVariants?: Record<string, LinkVariantStyle>
+): LinkPatternEntry<LinkVariantStyle>[] {
+  return normalizeLinkPatternEntries(
+    linkVariants,
+    '[TiptapStyle] linkVariants'
+  );
+}
+
+/** Native pill geometry is finite and nonnegative before crossing codegen. */
+export function normalizeLinkPillStyle(style: LinkVariantStyle) {
+  const hasConfig = typeof style.pill === 'object' && style.pill !== null;
+  const config =
+    typeof style.pill === 'object' && style.pill !== null ? style.pill : {};
+  const dimension = (value: number | undefined, fallback: number) =>
+    value === undefined || !Number.isFinite(value)
+      ? fallback
+      : Math.max(0, value);
+  return {
+    enabled: style.pill === true || hasConfig,
+    borderColor: config.borderColor ?? 'transparent',
+    label: config.label ?? '',
+    iconUri: config.iconUri ?? '',
+    iconTintColor: config.iconTintColor,
+    borderRadius: dimension(config.borderRadius, 8),
+    paddingHorizontal: dimension(config.paddingHorizontal, 6),
+    paddingVertical: dimension(config.paddingVertical, 2),
+    lineHeight: dimension(config.lineHeight, 0),
+    borderWidth: dimension(config.borderWidth, 0),
+    maxWidth: dimension(config.maxWidth, 0),
+  };
+}
+
+/** Flattens `linkPillContent` for native; sorted so equal maps produce the same array. */
+export function normalizeLinkPillContent(
+  content: Record<string, LinkPillContent> | undefined
+): LinkPillContentInternal[] | undefined {
+  if (!content) return undefined;
+  return Object.entries(content)
+    .map(([url, { label, iconUri, iconTintColor }]) => ({
+      url,
+      label: label ?? '',
+      iconUri: iconUri ?? '',
+      iconTintColor: normalizeColor(iconTintColor),
+    }))
+    .sort((a, b) => (a.url < b.url ? -1 : a.url > b.url ? 1 : 0));
+}
+
+type NativeLinkPillContent = ReturnType<typeof normalizeLinkPillContent>;
+
+/** Whether two flattened `linkPillContent` arrays hold the same entries. */
+export function isLinkPillContentEqual(
+  a: NativeLinkPillContent,
+  b: NativeLinkPillContent
+): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  return a.every((entry, index) => {
+    const other = b[index]!;
+    return (
+      entry.url === other.url &&
+      entry.label === other.label &&
+      entry.iconUri === other.iconUri &&
+      entry.iconTintColor === other.iconTintColor
+    );
+  });
+}