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

package/src/normalizeMarkdownStyle.ts

@@ -0,0 +1,310 @@
+import { Platform } from 'react-native';
+import type { MarkdownStyle } from './types/MarkdownStyle';
+import type {
+  BlockTextAlign,
+  EmphasisFontStyle,
+  LinkVariantEntryInternal,
+  MarkdownStyleInternal,
+} from './types/MarkdownStyleInternal';
+import { isStyleEqual, normalizeColor, mergeSubStyle } from './styleUtils';
+import { normalizeLinkVariantEntries } from './linkVariantUtils';
+
+const getSystemFont = (): string =>
+  Platform.select({
+    ios: 'System',
+    android: 'sans-serif',
+    web: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    default: 'sans-serif',
+  })!;
+
+const getMonospaceFont = (): string =>
+  Platform.select({
+    ios: 'Menlo',
+    android: 'monospace',
+    web: 'ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+    default: 'monospace',
+  })!;
+
+const defaultTextColor = normalizeColor('#1F2937')!;
+const defaultHeadingColor = normalizeColor('#111827')!;
+
+// Explicit type annotation needed: Object.freeze breaks contextual typing, so
+// TypeScript widens literal 'auto' to `string` instead of `BlockTextAlign`.
+const baseHeader: {
+  fontFamily: string;
+  fontWeight: string;
+  marginTop: number;
+  marginBottom: number;
+  textAlign: BlockTextAlign;
+} = {
+  fontFamily: getSystemFont(),
+  fontWeight: '',
+  marginTop: 0,
+  marginBottom: 8,
+  textAlign: 'auto',
+};
+
+const DEFAULT_NORMALIZED_STYLE = Object.freeze({
+  paragraph: {
+    fontSize: 16,
+    fontFamily: getSystemFont(),
+    fontWeight: '',
+    color: defaultTextColor,
+    lineHeight: Platform.select({ ios: 24, android: 26, default: 26 })!,
+    marginTop: 0,
+    marginBottom: 16,
+    textAlign: 'auto' as BlockTextAlign,
+  },
+  h1: {
+    ...baseHeader,
+    fontSize: 30,
+    color: defaultHeadingColor,
+    lineHeight: Platform.select({ ios: 36, android: 38, default: 38 })!,
+  },
+  h2: {
+    ...baseHeader,
+    fontSize: 24,
+    color: defaultHeadingColor,
+    lineHeight: Platform.select({ ios: 30, android: 32, default: 32 })!,
+  },
+  h3: {
+    ...baseHeader,
+    fontSize: 20,
+    color: defaultHeadingColor,
+    lineHeight: Platform.select({ ios: 26, android: 28, default: 28 })!,
+  },
+  h4: {
+    ...baseHeader,
+    fontSize: 18,
+    color: defaultHeadingColor,
+    lineHeight: Platform.select({ ios: 24, android: 26, default: 26 })!,
+  },
+  h5: {
+    ...baseHeader,
+    fontSize: 16,
+    color: normalizeColor('#374151')!,
+    lineHeight: Platform.select({ ios: 22, android: 24, default: 24 })!,
+  },
+  h6: {
+    ...baseHeader,
+    fontSize: 14,
+    color: normalizeColor('#4B5563')!,
+    lineHeight: Platform.select({ ios: 20, android: 22, default: 22 })!,
+  },
+  blockquote: {
+    fontSize: 16,
+    fontFamily: getSystemFont(),
+    fontWeight: '',
+    color: normalizeColor('#4B5563')!,
+    lineHeight: Platform.select({ ios: 24, android: 26, default: 26 })!,
+    marginTop: 0,
+    marginBottom: 16,
+    borderColor: normalizeColor('#D1D5DB')!,
+    borderWidth: 3,
+    gapWidth: 16,
+    backgroundColor: normalizeColor('#F9FAFB')!,
+  },
+  list: {
+    fontSize: 16,
+    fontFamily: getSystemFont(),
+    fontWeight: '',
+    color: defaultTextColor,
+    lineHeight: Platform.select({ ios: 22, android: 26, default: 26 })!,
+    marginTop: 0,
+    marginBottom: 16,
+    bulletColor: normalizeColor('#6B7280')!,
+    bulletSize: 6,
+    markerMinWidth: 0,
+    markerColor: normalizeColor('#6B7280')!,
+    markerFontWeight: '500',
+    gapWidth: 12,
+    marginLeft: 24,
+  },
+  codeBlock: {
+    fontSize: 14,
+    fontFamily: getMonospaceFont(),
+    fontWeight: '',
+    color: normalizeColor('#F3F4F6')!,
+    lineHeight: Platform.select({ ios: 20, android: 22, default: 22 })!,
+    marginTop: 0,
+    marginBottom: 16,
+    backgroundColor: normalizeColor('#1F2937')!,
+    borderColor: normalizeColor('#374151')!,
+    borderRadius: 8,
+    borderWidth: 1,
+    padding: 16,
+  },
+  link: {
+    fontFamily: '',
+    color: normalizeColor('#2563EB')!,
+    underline: true,
+    backgroundColor: normalizeColor('transparent')!,
+  },
+  linkVariants: [],
+  strong: { fontFamily: '', fontWeight: 'bold', color: undefined },
+  em: {
+    fontFamily: '',
+    fontStyle: 'italic' as EmphasisFontStyle,
+    color: undefined,
+  },
+  strikethrough: { color: normalizeColor('#9CA3AF')! },
+  underline: { color: defaultTextColor },
+  code: {
+    // Native uses '' (inherit); web needs an explicit monospace stack so inline
+    // code doesn't fall back to the browser's default proportional font.
+    fontFamily: Platform.select({ web: getMonospaceFont(), default: '' })!,
+    fontSize: 0,
+    color: normalizeColor('#E01E5A')!,
+    backgroundColor: normalizeColor('#FDF2F4')!,
+    borderColor: normalizeColor('#F8D7DA')!,
+  },
+  image: { height: 200, borderRadius: 8, marginTop: 0, marginBottom: 16 },
+  inlineImage: { size: 20 },
+  thematicBreak: {
+    color: normalizeColor('#E5E7EB')!,
+    height: 1,
+    marginTop: 24,
+    marginBottom: 24,
+  },
+  table: {
+    fontSize: 14,
+    fontFamily: getSystemFont(),
+    fontWeight: '',
+    color: defaultTextColor,
+    marginTop: 0,
+    marginBottom: 16,
+    lineHeight: Platform.select({ ios: 20, android: 22, default: 22 })!,
+    headerFontFamily: '',
+    headerBackgroundColor: normalizeColor('#F3F4F6')!,
+    headerTextColor: normalizeColor('#111827')!,
+    rowEvenBackgroundColor: normalizeColor('#FFFFFF')!,
+    rowOddBackgroundColor: normalizeColor('#F9FAFB')!,
+    borderColor: normalizeColor('#E5E7EB')!,
+    borderWidth: 1,
+    borderRadius: 6,
+    cellPaddingHorizontal: 12,
+    cellPaddingVertical: 8,
+  },
+  math: {
+    fontSize: 20,
+    color: defaultTextColor,
+    backgroundColor: normalizeColor('#F3F4F6')!,
+    padding: 12,
+    marginTop: 0,
+    marginBottom: 16,
+    textAlign: 'center' as BlockTextAlign,
+  },
+  inlineMath: { color: defaultTextColor },
+  taskList: {
+    checkedColor: Platform.select({
+      ios: normalizeColor('#007AFF')!,
+      android: normalizeColor('#2196F3')!,
+      default: normalizeColor('#007AFF')!,
+    })!,
+    borderColor: normalizeColor('#9E9E9E')!,
+    checkboxSize: 14,
+    checkboxBorderRadius: 3,
+    checkmarkColor: normalizeColor('#FFFFFF')!,
+    checkedTextColor: normalizeColor('#000000')!,
+    checkedStrikethrough: false,
+  },
+  spoiler: {
+    color: normalizeColor('#374151')!,
+    particles: { density: 8, speed: 20 },
+    solid: { borderRadius: 4 },
+  },
+  superscript: {
+    fontScale: Platform.select({ android: 0.65, default: 0.75 }),
+    baselineOffsetScale: 0.35,
+  },
+  subscript: {
+    fontScale: Platform.select({ android: 0.65, default: 0.75 }),
+    baselineOffsetScale: 0.2,
+  },
+  highlight: {
+    color: defaultTextColor,
+    backgroundColor: normalizeColor('#FEF08A')!,
+  },
+}) as MarkdownStyleInternal;
+
+const refCache = new WeakMap<MarkdownStyle, MarkdownStyleInternal>();
+const structuralCache: {
+  style: MarkdownStyle;
+  result: MarkdownStyleInternal;
+}[] = [];
+const LRU_MAX = 8;
+
+const styleReferenceKeys = Object.keys(DEFAULT_NORMALIZED_STYLE);
+
+export const normalizeMarkdownStyle = (
+  style: MarkdownStyle
+): MarkdownStyleInternal => {
+  if (!style || Object.keys(style).length === 0)
+    return DEFAULT_NORMALIZED_STYLE;
+
+  const refHit = refCache.get(style);
+  if (refHit) return refHit;
+
+  const structIdx = structuralCache.findIndex((e) =>
+    isStyleEqual(e.style, style, styleReferenceKeys)
+  );
+  if (structIdx !== -1) {
+    const entry = structuralCache.splice(structIdx, 1)[0]!;
+    structuralCache.unshift(entry);
+    refCache.set(style, entry.result);
+    return entry.result;
+  }
+
+  const result: Record<string, unknown> = {};
+  (
+    Object.keys(DEFAULT_NORMALIZED_STYLE) as (keyof MarkdownStyleInternal)[]
+  ).forEach((key) => {
+    if (Array.isArray(DEFAULT_NORMALIZED_STYLE[key])) return;
+    const userValue = style[key] as unknown as
+      | Record<string, unknown>
+      | undefined;
+    result[key] = mergeSubStyle(
+      DEFAULT_NORMALIZED_STYLE[key] as unknown as Record<string, unknown>,
+      userValue as Record<string, unknown> | undefined
+    );
+  });
+
+  // Normalize variants longest-pattern-first so specific patterns win.
+  const transparent = normalizeColor('transparent')!;
+  const linkBase = result.link as MarkdownStyleInternal['link'];
+  result.linkVariants = normalizeLinkVariantEntries(style.linkVariants).map(
+    ([pattern, override]): LinkVariantEntryInternal => {
+      return {
+        pattern,
+        color: ((override.color ? normalizeColor(override.color) : null) ??
+          linkBase.color) as string,
+        underline: override.underline ?? linkBase.underline,
+        backgroundColor: (override.backgroundColor
+          ? (normalizeColor(override.backgroundColor) ?? transparent)
+          : transparent) as string,
+      };
+    }
+  );
+
+  if (style.taskList?.checkboxSize === undefined) {
+    const listSize = (result.list as { fontSize: number }).fontSize;
+    (result.taskList as { checkboxSize: number }).checkboxSize = Math.round(
+      listSize * 0.9
+    );
+  }
+
+  if (!style.highlight?.color) {
+    const paragraphColor = (
+      result.paragraph as MarkdownStyleInternal['paragraph']
+    ).color;
+    (result.highlight as MarkdownStyleInternal['highlight']).color =
+      paragraphColor;
+  }
+
+  const finalResult = Object.freeze(result) as unknown as MarkdownStyleInternal;
+  refCache.set(style, finalResult);
+  structuralCache.unshift({ style, result: finalResult });
+  if (structuralCache.length > LRU_MAX) structuralCache.pop();
+
+  return finalResult;
+};

package/src/normalizeMarkdownStyle.web.ts

@@ -0,0 +1,281 @@
+import type { MarkdownStyle } from './types/MarkdownStyle';
+import type {
+  BlockTextAlign,
+  EmphasisFontStyle,
+  LinkVariantEntryInternal,
+  MarkdownStyleInternal,
+} from './types/MarkdownStyleInternal';
+import { isStyleEqual, mergeSubStyle } from './styleUtils';
+import { normalizeLinkVariantEntries } from './linkVariantUtils';
+
+const SYSTEM_FONT =
+  'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+const MONOSPACE_FONT =
+  'ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace';
+
+const defaultTextColor = '#1F2937';
+const defaultHeadingColor = '#111827';
+
+const baseHeader: {
+  fontFamily: string;
+  fontWeight: string;
+  marginTop: number;
+  marginBottom: number;
+  textAlign: BlockTextAlign;
+} = {
+  fontFamily: SYSTEM_FONT,
+  fontWeight: '',
+  marginTop: 0,
+  marginBottom: 8,
+  textAlign: 'auto',
+};
+
+const DEFAULT_NORMALIZED_STYLE: MarkdownStyleInternal = Object.freeze({
+  paragraph: {
+    fontSize: 16,
+    fontFamily: SYSTEM_FONT,
+    fontWeight: '',
+    color: defaultTextColor,
+    lineHeight: 26,
+    marginTop: 0,
+    marginBottom: 16,
+    textAlign: 'auto' as BlockTextAlign,
+  },
+  h1: {
+    ...baseHeader,
+    fontSize: 30,
+    color: defaultHeadingColor,
+    lineHeight: 38,
+  },
+  h2: {
+    ...baseHeader,
+    fontSize: 24,
+    color: defaultHeadingColor,
+    lineHeight: 32,
+  },
+  h3: {
+    ...baseHeader,
+    fontSize: 20,
+    color: defaultHeadingColor,
+    lineHeight: 28,
+  },
+  h4: {
+    ...baseHeader,
+    fontSize: 18,
+    color: defaultHeadingColor,
+    lineHeight: 26,
+  },
+  h5: {
+    ...baseHeader,
+    fontSize: 16,
+    color: '#374151',
+    lineHeight: 24,
+  },
+  h6: {
+    ...baseHeader,
+    fontSize: 14,
+    color: '#4B5563',
+    lineHeight: 22,
+  },
+  blockquote: {
+    fontSize: 16,
+    fontFamily: SYSTEM_FONT,
+    fontWeight: '',
+    color: '#4B5563',
+    lineHeight: 26,
+    marginTop: 0,
+    marginBottom: 16,
+    borderColor: '#D1D5DB',
+    borderWidth: 3,
+    gapWidth: 16,
+    backgroundColor: '#F9FAFB',
+  },
+  list: {
+    fontSize: 16,
+    fontFamily: SYSTEM_FONT,
+    fontWeight: '',
+    color: defaultTextColor,
+    lineHeight: 26,
+    marginTop: 0,
+    marginBottom: 16,
+    bulletColor: '#6B7280',
+    bulletSize: 6,
+    markerMinWidth: 0,
+    markerColor: '#6B7280',
+    markerFontWeight: '500',
+    gapWidth: 12,
+    marginLeft: 24,
+  },
+  codeBlock: {
+    fontSize: 14,
+    fontFamily: MONOSPACE_FONT,
+    fontWeight: '',
+    color: '#F3F4F6',
+    lineHeight: 22,
+    marginTop: 0,
+    marginBottom: 16,
+    backgroundColor: '#1F2937',
+    borderColor: '#374151',
+    borderRadius: 8,
+    borderWidth: 1,
+    padding: 16,
+  },
+  link: {
+    fontFamily: '',
+    color: '#2563EB',
+    underline: true,
+    backgroundColor: 'transparent',
+  },
+  linkVariants: [],
+  strong: { fontFamily: '', fontWeight: 'bold', color: undefined },
+  em: {
+    fontFamily: '',
+    fontStyle: 'italic' as EmphasisFontStyle,
+    color: undefined,
+  },
+  strikethrough: { color: '#9CA3AF' },
+  underline: { color: defaultTextColor },
+  code: {
+    fontFamily: MONOSPACE_FONT,
+    fontSize: 0,
+    color: '#E01E5A',
+    backgroundColor: '#FDF2F4',
+    borderColor: '#F8D7DA',
+  },
+  image: { height: 200, borderRadius: 8, marginTop: 0, marginBottom: 16 },
+  inlineImage: { size: 20 },
+  thematicBreak: {
+    color: '#E5E7EB',
+    height: 1,
+    marginTop: 24,
+    marginBottom: 24,
+  },
+  table: {
+    fontSize: 14,
+    fontFamily: SYSTEM_FONT,
+    fontWeight: '',
+    color: defaultTextColor,
+    marginTop: 0,
+    marginBottom: 16,
+    lineHeight: 22,
+    headerFontFamily: '',
+    headerBackgroundColor: '#F3F4F6',
+    headerTextColor: '#111827',
+    rowEvenBackgroundColor: '#FFFFFF',
+    rowOddBackgroundColor: '#F9FAFB',
+    borderColor: '#E5E7EB',
+    borderWidth: 1,
+    borderRadius: 6,
+    cellPaddingHorizontal: 12,
+    cellPaddingVertical: 8,
+  },
+  math: {
+    fontSize: 20,
+    color: defaultTextColor,
+    backgroundColor: '#F3F4F6',
+    padding: 12,
+    marginTop: 0,
+    marginBottom: 16,
+    textAlign: 'center' as BlockTextAlign,
+  },
+  inlineMath: { color: defaultTextColor },
+  taskList: {
+    checkedColor: '#007AFF',
+    borderColor: '#9E9E9E',
+    checkboxSize: 14,
+    checkboxBorderRadius: 3,
+    checkmarkColor: '#FFFFFF',
+    checkedTextColor: '#000000',
+    checkedStrikethrough: false,
+  },
+  // Spoiler rendering is not supported on web yet — defaults kept for type compatibility.
+  spoiler: {
+    color: '#374151',
+    particles: { density: 8, speed: 20 },
+    solid: { borderRadius: 4 },
+  },
+  superscript: { fontScale: 0.75, baselineOffsetScale: 0.35 },
+  subscript: { fontScale: 0.75, baselineOffsetScale: 0.2 },
+  highlight: {
+    color: defaultTextColor,
+    backgroundColor: '#FEF08A',
+  },
+});
+
+const refCache = new WeakMap<MarkdownStyle, MarkdownStyleInternal>();
+const structuralCache: {
+  style: MarkdownStyle;
+  result: MarkdownStyleInternal;
+}[] = [];
+const LRU_MAX = 8;
+
+const styleReferenceKeys = Object.keys(DEFAULT_NORMALIZED_STYLE);
+
+export const normalizeMarkdownStyle = (
+  style: MarkdownStyle
+): MarkdownStyleInternal => {
+  if (!style || Object.keys(style).length === 0)
+    return DEFAULT_NORMALIZED_STYLE;
+
+  const refHit = refCache.get(style);
+  if (refHit) return refHit;
+
+  const structIdx = structuralCache.findIndex((e) =>
+    isStyleEqual(e.style, style, styleReferenceKeys)
+  );
+  if (structIdx !== -1) {
+    const entry = structuralCache.splice(structIdx, 1)[0]!;
+    structuralCache.unshift(entry);
+    refCache.set(style, entry.result);
+    return entry.result;
+  }
+
+  const result: Record<string, unknown> = {};
+  (
+    Object.keys(DEFAULT_NORMALIZED_STYLE) as (keyof MarkdownStyleInternal)[]
+  ).forEach((key) => {
+    if (Array.isArray(DEFAULT_NORMALIZED_STYLE[key])) return;
+    const userValue = style[key] as unknown as
+      | Record<string, unknown>
+      | undefined;
+    result[key] = mergeSubStyle(
+      DEFAULT_NORMALIZED_STYLE[key] as unknown as Record<string, unknown>,
+      userValue as Record<string, unknown> | undefined
+    );
+  });
+
+  // Normalize variants longest-pattern-first so specific patterns win.
+  const linkBase = result.link as MarkdownStyleInternal['link'];
+  result.linkVariants = normalizeLinkVariantEntries(style.linkVariants).map(
+    ([pattern, override]): LinkVariantEntryInternal => {
+      return {
+        pattern,
+        color: override.color ?? linkBase.color,
+        underline: override.underline ?? linkBase.underline,
+        backgroundColor: override.backgroundColor ?? 'transparent',
+      };
+    }
+  );
+
+  if (style.taskList?.checkboxSize === undefined) {
+    const listSize = (result.list as { fontSize: number }).fontSize;
+    (result.taskList as { checkboxSize: number }).checkboxSize = Math.round(
+      listSize * 0.9
+    );
+  }
+
+  if (!style.highlight?.color) {
+    const paragraphColor = (
+      result.paragraph as MarkdownStyleInternal['paragraph']
+    ).color;
+    (result.highlight as MarkdownStyleInternal['highlight']).color =
+      paragraphColor;
+  }
+
+  const finalResult = Object.freeze(result) as unknown as MarkdownStyleInternal;
+  refCache.set(style, finalResult);
+  structuralCache.unshift({ style, result: finalResult });
+  if (structuralCache.length > LRU_MAX) structuralCache.pop();
+
+  return finalResult;
+};