react-native-enriched-html 0.0.0 → 1.0.1

package/src/utils/EnrichedTextInputDefaultProps.ts

@@ -0,0 +1,16 @@
+import type { TextShortcut } from '../types';
+
+export const ENRICHED_TEXT_INPUT_DEFAULT_PROPS = {
+  mentionIndicators: ['@'],
+  editable: true,
+  htmlStyle: {},
+  autoCapitalize: 'sentences',
+  scrollEnabled: true,
+  androidExperimentalSynchronousEvents: false,
+  useHtmlNormalizer: false,
+  allowFontScaling: true,
+  textShortcuts: [
+    { trigger: '- ', style: 'unordered_list' },
+    { trigger: '1. ', style: 'ordered_list' },
+  ] as TextShortcut[],
+} as const;

package/src/utils/defaultHtmlStyle.ts

@@ -0,0 +1,83 @@
+import type { HtmlStyle, EnrichedTextHtmlStyle } from '../types';
+
+export const DEFAULT_HTML_STYLE: Required<HtmlStyle> = {
+  h1: {
+    fontSize: 32,
+    bold: false,
+  },
+  h2: {
+    fontSize: 24,
+    bold: false,
+  },
+  h3: {
+    fontSize: 20,
+    bold: false,
+  },
+  h4: {
+    fontSize: 16,
+    bold: false,
+  },
+  h5: {
+    fontSize: 14,
+    bold: false,
+  },
+  h6: {
+    fontSize: 12,
+    bold: false,
+  },
+  blockquote: {
+    borderColor: 'darkgray',
+    borderWidth: 4,
+    gapWidth: 16,
+    color: undefined,
+  },
+  codeblock: {
+    color: 'black',
+    borderRadius: 8,
+    backgroundColor: 'darkgray',
+  },
+  code: {
+    color: 'red',
+    backgroundColor: 'darkgray',
+  },
+  a: {
+    color: 'blue',
+    textDecorationLine: 'underline',
+  },
+  mention: {
+    color: 'blue',
+    backgroundColor: 'yellow',
+    textDecorationLine: 'underline',
+  },
+  ol: {
+    gapWidth: 16,
+    marginLeft: 16,
+    markerFontWeight: undefined,
+    markerColor: undefined,
+  },
+  ul: {
+    bulletColor: 'black',
+    bulletSize: 8,
+    marginLeft: 16,
+    gapWidth: 16,
+  },
+  ulCheckbox: {
+    boxSize: 24,
+    gapWidth: 16,
+    marginLeft: 16,
+    boxColor: 'blue',
+  },
+};
+
+export const DEFAULT_ENRICHED_TEXT_STYLE: Required<EnrichedTextHtmlStyle> = {
+  ...DEFAULT_HTML_STYLE,
+  a: {
+    ...DEFAULT_HTML_STYLE.a,
+    pressColor: 'darkblue',
+  },
+  mention: {
+    ...DEFAULT_HTML_STYLE.mention,
+    pressColor: 'darkblue',
+    pressBackgroundColor: 'yellow',
+  },
+};

package/src/utils/expandMentionStylesForIndicators.ts

@@ -0,0 +1,19 @@
+import type { HtmlStyle, MentionStyleProperties } from '../types';
+import { isMentionStyleRecord } from './isMentionStyleRecord';
+
+export function expandMentionStylesForIndicators(
+  mention: HtmlStyle['mention'] | undefined,
+  indicators: string[],
+  htmlStyleToMergeWith: HtmlStyle
+): Record<string, MentionStyleProperties> {
+  const out: Record<string, MentionStyleProperties> = {};
+  for (const indicator of indicators) {
+    out[indicator] = {
+      ...htmlStyleToMergeWith.mention,
+      ...(isMentionStyleRecord(mention)
+        ? (mention[indicator] ?? mention.default ?? {})
+        : mention),
+    };
+  }
+  return out;
+}

package/src/utils/isMentionStyleRecord.ts

@@ -0,0 +1,22 @@
+import type { HtmlStyle, MentionStyleProperties } from '../types';
+
+export function isMentionStyleRecord(
+  mentionStyle: HtmlStyle['mention']
+): mentionStyle is Record<string, MentionStyleProperties> {
+  if (
+    mentionStyle &&
+    typeof mentionStyle === 'object' &&
+    !Array.isArray(mentionStyle)
+  ) {
+    const keys = Object.keys(mentionStyle);
+    return (
+      keys.length > 0 &&
+      keys.every(
+        (key) =>
+          typeof (mentionStyle as Record<string, unknown>)[key] === 'object' &&
+          (mentionStyle as Record<string, unknown>)[key] !== null
+      )
+    );
+  }
+  return false;
+}

package/src/utils/normalizeHtmlStyle.ts

@@ -0,0 +1,182 @@
+import { type ColorValue, processColor } from 'react-native';
+import type { HtmlStyleInternal } from '../spec/EnrichedTextInputNativeComponent';
+import type {
+  EnrichedTextHtmlStyle,
+  HtmlStyle,
+  MentionStyleProperties,
+} from '../types';
+import type { EnrichedTextHtmlStyleInternal } from '../spec/EnrichedTextNativeComponent';
+import {
+  DEFAULT_HTML_STYLE,
+  DEFAULT_ENRICHED_TEXT_STYLE,
+} from './defaultHtmlStyle';
+import { expandMentionStylesForIndicators } from './expandMentionStylesForIndicators';
+
+const MENTION_DEFAULT_KEY = '_default';
+
+const parseOlStyles = (style: HtmlStyle) => {
+  let markerFontWeight: string | undefined;
+  if (style.ol?.markerFontWeight) {
+    if (typeof style.ol?.markerFontWeight === 'number') {
+      markerFontWeight = String(style.ol?.markerFontWeight);
+    } else if (typeof style.ol?.markerFontWeight === 'string') {
+      markerFontWeight = style.ol?.markerFontWeight;
+    }
+  }
+
+  return {
+    ...style.ol,
+    markerFontWeight: markerFontWeight,
+  };
+};
+
+const convertToHtmlStyleInternal = (
+  style: HtmlStyle,
+  mentionIndicators: string[]
+): HtmlStyleInternal => {
+  const mentionStyles = expandMentionStylesForIndicators(
+    style.mention,
+    mentionIndicators,
+    DEFAULT_HTML_STYLE
+  );
+
+  let markerFontWeight: string | undefined;
+  if (style.ol?.markerFontWeight) {
+    if (typeof style.ol?.markerFontWeight === 'number') {
+      markerFontWeight = String(style.ol?.markerFontWeight);
+    } else if (typeof style.ol?.markerFontWeight === 'string') {
+      markerFontWeight = style.ol?.markerFontWeight;
+    }
+  }
+
+  const olStyles = {
+    ...style.ol,
+    markerFontWeight: markerFontWeight,
+  };
+
+  return {
+    ...style,
+    mention: mentionStyles,
+    ol: olStyles,
+  };
+};
+
+const convertToEnrichedTextHtmlStyleInternal = (
+  style: EnrichedTextHtmlStyle
+): EnrichedTextHtmlStyleInternal => {
+  const mentionStyles: Record<string, MentionStyleProperties> = {};
+
+  const mention = style.mention;
+  if (mention && typeof mention === 'object' && !Array.isArray(mention)) {
+    for (const key of Object.keys(mention)) {
+      const value = (mention as Record<string, unknown>)[key];
+
+      if (typeof value === 'object' && value !== null) {
+        mentionStyles[key] = {
+          ...DEFAULT_ENRICHED_TEXT_STYLE.mention,
+          ...(value as MentionStyleProperties),
+        };
+      } else {
+        mentionStyles[MENTION_DEFAULT_KEY] = {
+          ...DEFAULT_ENRICHED_TEXT_STYLE.mention,
+          ...(mention as MentionStyleProperties),
+        };
+      }
+    }
+  }
+
+  if (mentionStyles[MENTION_DEFAULT_KEY] === undefined) {
+    mentionStyles[MENTION_DEFAULT_KEY] = {
+      ...DEFAULT_ENRICHED_TEXT_STYLE.mention,
+    };
+  }
+
+  return {
+    ...style,
+    mention: mentionStyles,
+    ol: parseOlStyles(style),
+  };
+};
+
+const assignDefaultValues = <T extends Record<string, any>>(
+  style: T,
+  base: Record<string, any>
+): HtmlStyleInternal => {
+  const merged: Record<string, any> = { ...base };
+
+  for (const key in style) {
+    if (key === 'mention') {
+      merged[key] = {
+        ...(style.mention as object),
+      };
+
+      continue;
+    }
+
+    merged[key] = {
+      ...(base[key] ?? {}),
+      ...(style[key as keyof typeof style] as object),
+    };
+  }
+
+  return merged as HtmlStyleInternal;
+};
+
+const parseStyle = (name: string, value: unknown) => {
+  if (name !== 'color' && !name.endsWith('Color')) {
+    return value;
+  }
+
+  return processColor(value as ColorValue);
+};
+
+const parseColors = (style: HtmlStyleInternal): HtmlStyleInternal => {
+  const finalStyle: Record<string, any> = {};
+
+  for (const [tagName, tagStyle] of Object.entries(style)) {
+    const tagStyles: Record<string, any> = {};
+
+    if (tagName === 'mention') {
+      for (const [indicator, mentionStyle] of Object.entries(tagStyle)) {
+        tagStyles[indicator] = {};
+
+        for (const [styleName, styleValue] of Object.entries(
+          mentionStyle as MentionStyleProperties
+        )) {
+          tagStyles[indicator][styleName] = parseStyle(styleName, styleValue);
+        }
+      }
+
+      finalStyle[tagName] = tagStyles;
+      continue;
+    }
+
+    for (const [styleName, styleValue] of Object.entries(tagStyle)) {
+      tagStyles[styleName] = parseStyle(styleName, styleValue);
+    }
+
+    finalStyle[tagName] = tagStyles;
+  }
+
+  return finalStyle;
+};
+
+export const normalizeHtmlStyle = (
+  style: HtmlStyle,
+  mentionIndicators: string[]
+): HtmlStyleInternal => {
+  const converted = convertToHtmlStyleInternal(style, mentionIndicators);
+  const withDefaults = assignDefaultValues(converted, DEFAULT_HTML_STYLE);
+  return parseColors(withDefaults);
+};
+
+export const normalizeEnrichedTextHtmlStyle = (
+  style: EnrichedTextHtmlStyle
+): EnrichedTextHtmlStyleInternal => {
+  const converted = convertToEnrichedTextHtmlStyleInternal(style);
+  const withDefaults = assignDefaultValues(
+    converted,
+    DEFAULT_ENRICHED_TEXT_STYLE
+  );
+  return parseColors(withDefaults);
+};

package/src/utils/nullthrows.ts

@@ -0,0 +1,7 @@
+export const nullthrows = <T>(value: T | null | undefined): T => {
+  if (value == null) {
+    throw new Error('Unexpected null or undefined value');
+  }
+
+  return value;
+};

package/src/utils/regexParser.ts

@@ -0,0 +1,56 @@
+import type { LinkNativeRegex } from '../spec/EnrichedTextInputNativeComponent';
+
+const DISABLED_REGEX: LinkNativeRegex = {
+  pattern: '',
+  caseInsensitive: false,
+  dotAll: false,
+  isDisabled: true,
+  isDefault: false,
+};
+
+const DEFAULT_REGEX: LinkNativeRegex = {
+  pattern: '',
+  caseInsensitive: false,
+  dotAll: false,
+  isDisabled: false,
+  isDefault: true,
+};
+
+export const toNativeRegexConfig = (
+  regex: RegExp | undefined | null
+): LinkNativeRegex => {
+  if (regex === null) {
+    return DISABLED_REGEX;
+  }
+
+  if (regex === undefined) {
+    return DEFAULT_REGEX;
+  }
+
+  const source = regex.source;
+
+  // iOS fails on variable-width lookbehinds like (?<=a+)
+  const hasLookbehind = source.includes('(?<=') || source.includes('(?<!');
+
+  if (hasLookbehind) {
+    // Basic detection for quantifiers inside a group
+    const lookbehindContent = source.match(/\(\?<[=!](.*?)\)/)?.[1] || '';
+    if (/[*+{]/.test(lookbehindContent)) {
+      if (__DEV__) {
+        console.error(
+          'Variable-width lookbehinds are not supported. Using default link regex.'
+        );
+      }
+
+      return DEFAULT_REGEX;
+    }
+  }
+
+  return {
+    pattern: source,
+    caseInsensitive: regex.ignoreCase,
+    dotAll: regex.dotAll,
+    isDisabled: false,
+    isDefault: false,
+  };
+};