react-native-enriched-markdown-scaffold 0.6.0-scaffold.4

package/src/normalizeMarkdownTextInputStyle.ts

@@ -0,0 +1,242 @@
+import { processColor, type ColorValue } from 'react-native';
+import type {
+  LinkStyle,
+  MarkdownTextInputStyle,
+  MathStyle,
+  MathBlockStyle,
+} from './EnrichedMarkdownTextInput';
+import { normalizeLinkVariantEntries } from './linkVariantUtils';
+import { normalizeColor } from './styleUtils';
+
+interface LinkVariantEntryInternal {
+  pattern: string;
+  color: ColorValue;
+  underline: boolean;
+  backgroundColor: ColorValue;
+}
+
+interface MathStyleInternal {
+  color: ColorValue;
+  fontSize: number;
+  backgroundColor: ColorValue;
+  borderColor: ColorValue;
+  borderWidth: number;
+  borderRadius: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  selectedBackgroundColor: ColorValue;
+  selectedBorderColor: ColorValue;
+}
+
+interface MathBlockStyleInternal extends MathStyleInternal {
+  marginTop: number;
+  marginBottom: number;
+  alignment: 'left' | 'center' | 'right';
+}
+
+interface MarkdownTextInputStyleInternal {
+  strong: {
+    color?: ColorValue;
+  };
+  em: {
+    color?: ColorValue;
+  };
+  link: {
+    color: ColorValue;
+    underline: boolean;
+    backgroundColor: ColorValue;
+  };
+  linkVariants: LinkVariantEntryInternal[];
+  spoiler: {
+    color: ColorValue;
+    backgroundColor: ColorValue;
+  };
+  math: MathStyleInternal;
+  mathBlock: MathBlockStyleInternal;
+}
+
+const DEFAULT_LINK_COLOR = '#2563EB';
+const DEFAULT_LINK_BG_COLOR = 'transparent';
+const DEFAULT_SPOILER_COLOR = '#374151';
+const DEFAULT_SPOILER_BG_COLOR = '#E5E7EB';
+const DEFAULT_MATH_COLOR = '#111827';
+const DEFAULT_MATH_BG_COLOR = 'transparent';
+const DEFAULT_MATH_BORDER_COLOR = 'transparent';
+
+const TRANSPARENT = processColor('transparent')!;
+
+const defaultMathInternal: MathStyleInternal = Object.freeze({
+  color: processColor(DEFAULT_MATH_COLOR)!,
+  fontSize: 16,
+  backgroundColor: processColor(DEFAULT_MATH_BG_COLOR)!,
+  borderColor: processColor(DEFAULT_MATH_BORDER_COLOR)!,
+  borderWidth: 0,
+  borderRadius: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
+  selectedBackgroundColor: TRANSPARENT,
+  selectedBorderColor: TRANSPARENT,
+});
+
+const defaultMathBlockInternal: MathBlockStyleInternal = Object.freeze({
+  color: processColor(DEFAULT_MATH_COLOR)!,
+  fontSize: 20,
+  backgroundColor: processColor(DEFAULT_MATH_BG_COLOR)!,
+  borderColor: processColor(DEFAULT_MATH_BORDER_COLOR)!,
+  borderWidth: 0,
+  borderRadius: 0,
+  paddingHorizontal: 12,
+  paddingVertical: 8,
+  selectedBackgroundColor: TRANSPARENT,
+  selectedBorderColor: TRANSPARENT,
+  marginTop: 8,
+  marginBottom: 8,
+  alignment: 'center',
+});
+
+const defaultInternal: MarkdownTextInputStyleInternal = Object.freeze({
+  strong: {
+    color: undefined,
+  },
+  em: {
+    color: undefined,
+  },
+  link: {
+    color: processColor(DEFAULT_LINK_COLOR)!,
+    underline: true,
+    backgroundColor: processColor(DEFAULT_LINK_BG_COLOR)!,
+  },
+  linkVariants: [],
+  spoiler: {
+    color: processColor(DEFAULT_SPOILER_COLOR)!,
+    backgroundColor: processColor(DEFAULT_SPOILER_BG_COLOR)!,
+  },
+  math: defaultMathInternal,
+  mathBlock: defaultMathBlockInternal,
+});
+
+let cachedInput: MarkdownTextInputStyle | undefined;
+let cachedResult: MarkdownTextInputStyleInternal | undefined;
+
+function normalizeInputLinkStyle(
+  style: LinkStyle | undefined,
+  fallback: MarkdownTextInputStyleInternal['link']
+): MarkdownTextInputStyleInternal['link'] {
+  return {
+    color: normalizeColor(style?.color) ?? fallback.color,
+    underline: style?.underline ?? fallback.underline,
+    backgroundColor:
+      normalizeColor(style?.backgroundColor) ?? fallback.backgroundColor,
+  };
+}
+
+function normalizeMathStyle(
+  style: MathStyle | undefined,
+  fallback: MathStyleInternal
+): MathStyleInternal {
+  const color = normalizeColor(style?.color) ?? fallback.color;
+  const backgroundColor =
+    normalizeColor(style?.backgroundColor) ?? fallback.backgroundColor;
+  const borderColor =
+    normalizeColor(style?.borderColor) ?? fallback.borderColor;
+  return {
+    color,
+    fontSize: style?.fontSize ?? fallback.fontSize,
+    backgroundColor,
+    borderColor,
+    borderWidth: style?.borderWidth ?? fallback.borderWidth,
+    borderRadius: style?.borderRadius ?? fallback.borderRadius,
+    paddingHorizontal: style?.paddingHorizontal ?? fallback.paddingHorizontal,
+    paddingVertical: style?.paddingVertical ?? fallback.paddingVertical,
+    selectedBackgroundColor:
+      normalizeColor(style?.selectedBackgroundColor) ?? backgroundColor,
+    selectedBorderColor:
+      normalizeColor(style?.selectedBorderColor) ?? borderColor,
+  };
+}
+
+function normalizeMathBlockStyle(
+  style: MathBlockStyle | undefined,
+  baseInline: MathStyleInternal,
+  fallback: MathBlockStyleInternal
+): MathBlockStyleInternal {
+  const merged: MathStyleInternal = {
+    color: baseInline.color,
+    fontSize: fallback.fontSize,
+    backgroundColor: baseInline.backgroundColor,
+    borderColor: baseInline.borderColor,
+    borderWidth: baseInline.borderWidth,
+    borderRadius: baseInline.borderRadius,
+    paddingHorizontal: fallback.paddingHorizontal,
+    paddingVertical: fallback.paddingVertical,
+    selectedBackgroundColor: baseInline.selectedBackgroundColor,
+    selectedBorderColor: baseInline.selectedBorderColor,
+  };
+  const inheritedInline = normalizeMathStyle(style, merged);
+  let alignment: 'left' | 'center' | 'right' = fallback.alignment;
+  if (
+    style?.alignment === 'left' ||
+    style?.alignment === 'center' ||
+    style?.alignment === 'right'
+  ) {
+    alignment = style.alignment;
+  }
+  return {
+    ...inheritedInline,
+    marginTop: style?.marginTop ?? fallback.marginTop,
+    marginBottom: style?.marginBottom ?? fallback.marginBottom,
+    alignment,
+  };
+}
+
+export const normalizeMarkdownTextInputStyle = (
+  style?: MarkdownTextInputStyle
+): MarkdownTextInputStyleInternal => {
+  if (!style || Object.keys(style).length === 0) {
+    return defaultInternal;
+  }
+
+  if (style === cachedInput && cachedResult) {
+    return cachedResult;
+  }
+
+  const linkBase = normalizeInputLinkStyle(style.link, defaultInternal.link);
+  const result: MarkdownTextInputStyleInternal = {
+    strong: {
+      color: normalizeColor(style.strong?.color),
+    },
+    em: {
+      color: normalizeColor(style.em?.color),
+    },
+    link: linkBase,
+    linkVariants: normalizeLinkVariantEntries(style.linkVariants).map(
+      ([pattern, override]) => ({
+        pattern,
+        color: normalizeColor(override.color) ?? linkBase.color,
+        underline: override.underline ?? linkBase.underline,
+        backgroundColor:
+          normalizeColor(override.backgroundColor) ??
+          defaultInternal.link.backgroundColor,
+      })
+    ),
+    spoiler: {
+      color:
+        normalizeColor(style.spoiler?.color) ?? defaultInternal.spoiler.color,
+      backgroundColor:
+        normalizeColor(style.spoiler?.backgroundColor) ??
+        defaultInternal.spoiler.backgroundColor,
+    },
+    math: normalizeMathStyle(style.math, defaultInternal.math),
+    mathBlock: defaultInternal.mathBlock,
+  };
+
+  result.mathBlock = normalizeMathBlockStyle(
+    style.mathBlock,
+    result.math,
+    defaultInternal.mathBlock
+  );
+
+  cachedInput = style;
+  cachedResult = result;
+  return result;
+};

package/src/plugin/withAndroidMath.ts

@@ -0,0 +1,24 @@
+import { withGradleProperties, type ConfigPlugin } from '@expo/config-plugins';
+
+export const withAndroidMath: ConfigPlugin<{ enableMath?: boolean }> = (
+  config,
+  { enableMath = true }
+) => {
+  if (enableMath) {
+    return config;
+  }
+  return withGradleProperties(config, (gradleConfig) => {
+    gradleConfig.modResults = gradleConfig.modResults.filter(
+      (prop) =>
+        prop.type !== 'property' || prop.key !== 'enrichedMarkdown.enableMath'
+    );
+
+    gradleConfig.modResults.push({
+      type: 'property',
+      key: 'enrichedMarkdown.enableMath',
+      value: 'false',
+    });
+
+    return gradleConfig;
+  });
+};

package/src/plugin/withIosMath.ts

@@ -0,0 +1,35 @@
+import { withDangerousMod, type ConfigPlugin } from '@expo/config-plugins';
+import fs from 'fs';
+import path from 'path';
+
+const IOS_MATH_OPTION = "ENV['ENRICHED_MARKDOWN_ENABLE_MATH'] = '0'";
+
+export const withIosMath: ConfigPlugin<{ enableMath?: boolean }> = (
+  config,
+  { enableMath = true }
+) => {
+  if (enableMath) {
+    return config;
+  }
+  return withDangerousMod(config, [
+    'ios',
+    async (modConfig) => {
+      const file = path.join(
+        modConfig.modRequest.platformProjectRoot,
+        'Podfile'
+      );
+      const contents = fs.readFileSync(file, 'utf8');
+
+      const lines = contents.split('\n');
+      const filteredLines = lines.filter(
+        (line: string) => !line.includes('ENRICHED_MARKDOWN_ENABLE_MATH')
+      );
+
+      filteredLines.unshift(IOS_MATH_OPTION);
+
+      fs.writeFileSync(file, filteredLines.join('\n'));
+
+      return modConfig;
+    },
+  ]);
+};

package/src/plugin/withReactNativeEnrichedMarkdown.ts

@@ -0,0 +1,17 @@
+import { type ConfigPlugin } from '@expo/config-plugins';
+import { withIosMath } from './withIosMath';
+import { withAndroidMath } from './withAndroidMath';
+
+const withEnrichedMarkdown: ConfigPlugin<{ enableMath?: boolean } | void> = (
+  config,
+  props
+) => {
+  const enableMath = props?.enableMath !== false;
+
+  config = withAndroidMath(config, { enableMath });
+  config = withIosMath(config, { enableMath });
+
+  return config;
+};
+
+export default withEnrichedMarkdown;

package/src/styleUtils.ts

@@ -0,0 +1,98 @@
+import { Platform, processColor, type ColorValue } from 'react-native';
+import type { MarkdownStyle } from './types/MarkdownStyle';
+
+export const normalizeColor = (
+  color: string | undefined
+): ColorValue | undefined => {
+  if (!color) return undefined;
+  if (Platform.OS === 'web') return color;
+  return processColor(color) ?? undefined;
+};
+
+export function mergeSubStyle<T extends Record<string, unknown>>(
+  defaultStyle: T,
+  userStyle?: Partial<T>
+): T {
+  if (!userStyle) return defaultStyle;
+  const result: Record<string, unknown> = { ...defaultStyle, ...userStyle };
+  for (const key in result) {
+    const defaultValue = defaultStyle[key];
+    const userValue = userStyle[key];
+    if (
+      typeof defaultValue === 'object' &&
+      defaultValue !== null &&
+      !Array.isArray(defaultValue) &&
+      typeof userValue === 'object' &&
+      userValue !== null &&
+      !Array.isArray(userValue)
+    ) {
+      result[key] = {
+        ...(defaultValue as Record<string, unknown>),
+        ...(userValue as Record<string, unknown>),
+      };
+    }
+    if (
+      key.toLowerCase().includes('color') &&
+      typeof result[key] === 'string'
+    ) {
+      result[key] = normalizeColor(result[key] as string);
+    }
+  }
+  return result as T;
+}
+
+function isSubStyleEqual(
+  a: Record<string, unknown>,
+  b: Record<string, unknown>
+): boolean {
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) return false;
+  for (const key of keys) {
+    const valueA = a[key];
+    const valueB = b[key];
+    if (valueA === valueB) continue;
+    if (
+      typeof valueA === 'object' &&
+      valueA !== null &&
+      typeof valueB === 'object' &&
+      valueB !== null
+    ) {
+      const nestedKeysA = Object.keys(valueA);
+      const nestedKeysB = Object.keys(valueB);
+      if (nestedKeysA.length !== nestedKeysB.length) return false;
+      for (const nestedKey of nestedKeysA) {
+        if (
+          (valueA as Record<string, unknown>)[nestedKey] !==
+          (valueB as Record<string, unknown>)[nestedKey]
+        ) {
+          return false;
+        }
+      }
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+
+export function isStyleEqual(
+  a: MarkdownStyle,
+  b: MarkdownStyle,
+  referenceKeys: readonly string[]
+): boolean {
+  for (const key of referenceKeys) {
+    const subA = a[key as keyof MarkdownStyle];
+    const subB = b[key as keyof MarkdownStyle];
+    if (subA === subB) continue;
+    if (!subA || !subB) return false;
+    if (
+      !isSubStyleEqual(
+        subA as Record<string, unknown>,
+        subB as Record<string, unknown>
+      )
+    ) {
+      return false;
+    }
+  }
+  return true;
+}