react-native-enriched-markdown-scaffold 0.7.4-scaffold.9 → 1.0.2-scaffold.2

package/src/normalizeMarkdownStyle.web.ts

@@ -7,6 +7,10 @@ import type {
 } from './types/MarkdownStyleInternal';
 import { isStyleEqual, mergeSubStyle } from './styleUtils';
 import { normalizeLinkVariantEntries } from './linkVariantUtils';
+import {
+  DEFAULT_HEADING_FONT_WEIGHT,
+  HEADING_DEFAULTS,
+} from './headingDefaults';
 
 const SYSTEM_FONT =
   'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
@@ -14,7 +18,6 @@ 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;
@@ -24,7 +27,7 @@ const baseHeader: {
   textAlign: BlockTextAlign;
 } = {
   fontFamily: SYSTEM_FONT,
-  fontWeight: '',
+  fontWeight: DEFAULT_HEADING_FONT_WEIGHT,
   marginTop: 0,
   marginBottom: 8,
   textAlign: 'auto',
@@ -43,38 +46,38 @@ const DEFAULT_NORMALIZED_STYLE: MarkdownStyleInternal = Object.freeze({
   },
   h1: {
     ...baseHeader,
-    fontSize: 30,
-    color: defaultHeadingColor,
+    fontSize: HEADING_DEFAULTS.h1.fontSize,
+    color: HEADING_DEFAULTS.h1.color,
     lineHeight: 38,
   },
   h2: {
     ...baseHeader,
-    fontSize: 24,
-    color: defaultHeadingColor,
+    fontSize: HEADING_DEFAULTS.h2.fontSize,
+    color: HEADING_DEFAULTS.h2.color,
     lineHeight: 32,
   },
   h3: {
     ...baseHeader,
-    fontSize: 20,
-    color: defaultHeadingColor,
+    fontSize: HEADING_DEFAULTS.h3.fontSize,
+    color: HEADING_DEFAULTS.h3.color,
     lineHeight: 28,
   },
   h4: {
     ...baseHeader,
-    fontSize: 18,
-    color: defaultHeadingColor,
+    fontSize: HEADING_DEFAULTS.h4.fontSize,
+    color: HEADING_DEFAULTS.h4.color,
     lineHeight: 26,
   },
   h5: {
     ...baseHeader,
-    fontSize: 16,
-    color: '#374151',
+    fontSize: HEADING_DEFAULTS.h5.fontSize,
+    color: HEADING_DEFAULTS.h5.color,
     lineHeight: 24,
   },
   h6: {
     ...baseHeader,
-    fontSize: 14,
-    color: '#4B5563',
+    fontSize: HEADING_DEFAULTS.h6.fontSize,
+    color: HEADING_DEFAULTS.h6.color,
     lineHeight: 22,
   },
   blockquote: {
@@ -89,6 +92,8 @@ const DEFAULT_NORMALIZED_STYLE: MarkdownStyleInternal = Object.freeze({
     borderWidth: 3,
     gapWidth: 16,
     backgroundColor: '#F9FAFB',
+    borderRadius: 0,
+    padding: 0,
   },
   list: {
     fontSize: 16,
@@ -105,6 +110,7 @@ const DEFAULT_NORMALIZED_STYLE: MarkdownStyleInternal = Object.freeze({
     markerFontWeight: '500',
     gapWidth: 12,
     marginLeft: 24,
+    itemSpacing: 0,
   },
   codeBlock: {
     fontSize: 14,
@@ -119,6 +125,22 @@ const DEFAULT_NORMALIZED_STYLE: MarkdownStyleInternal = Object.freeze({
     borderRadius: 8,
     borderWidth: 1,
     padding: 16,
+    syntaxColors: {
+      keyword: '#FF7B72',
+      operatorColor: '#F3F4F6',
+      punctuation: '#F3F4F6',
+      string: '#A5D6FF',
+      number: '#79C0FF',
+      constant: '#79C0FF',
+      comment: '#8B949E',
+      function: '#D2A8FF',
+      type: '#FFA657',
+      variable: '#F3F4F6',
+      property: '#79C0FF',
+      tag: '#7EE787',
+      attribute: '#79C0FF',
+      embedded: '#F3F4F6',
+    },
   },
   link: {
     fontFamily: '',
@@ -142,7 +164,15 @@ const DEFAULT_NORMALIZED_STYLE: MarkdownStyleInternal = Object.freeze({
     backgroundColor: '#FDF2F4',
     borderColor: '#F8D7DA',
   },
-  image: { height: 200, borderRadius: 8, marginTop: 0, marginBottom: 16 },
+  image: {
+    height: 200,
+    maxHeight: 0,
+    aspectRatio: 0,
+    resizeMode: '' as const,
+    borderRadius: 8,
+    marginTop: 0,
+    marginBottom: 16,
+  },
   inlineImage: { size: 20 },
   thematicBreak: {
     color: '#E5E7EB',
@@ -168,6 +198,8 @@ const DEFAULT_NORMALIZED_STYLE: MarkdownStyleInternal = Object.freeze({
     borderRadius: 6,
     cellPaddingHorizontal: 12,
     cellPaddingVertical: 8,
+    horizontalOverflow: 0,
+    align: '' as const,
   },
   math: {
     fontSize: 20,
@@ -269,6 +301,12 @@ export const normalizeMarkdownStyle = (
     );
   }
 
+  // maxHeight/aspectRatio sizing is resize-mode driven; default to 'cover'.
+  const image = result.image as MarkdownStyleInternal['image'];
+  if (!image.resizeMode && (image.maxHeight > 0 || image.aspectRatio > 0)) {
+    (result.image as { resizeMode: string }).resizeMode = 'cover';
+  }
+
   if (!style.highlight?.color) {
     const paragraphColor = (
       result.paragraph as MarkdownStyleInternal['paragraph']
@@ -277,6 +315,16 @@ export const normalizeMarkdownStyle = (
       paragraphColor;
   }
 
+  // The public API exposes `operator`, but the internal token is `operatorColor`
+  // (`operator` is reserved in the generated C++ struct). Remap it after merge.
+  const syntaxColors = (
+    result.codeBlock as { syntaxColors?: Record<string, unknown> }
+  ).syntaxColors;
+  if (syntaxColors && 'operator' in syntaxColors) {
+    syntaxColors.operatorColor = syntaxColors.operator;
+    delete syntaxColors.operator;
+  }
+
   const finalResult = Object.freeze(result) as unknown as MarkdownStyleInternal;
   refCache.set(style, finalResult);
   structuralCache.unshift({ style, result: finalResult });

package/src/normalizeMarkdownTextInputStyle.ts

@@ -1,12 +1,18 @@
 import { processColor, type ColorValue } from 'react-native';
 import type {
+  HeadingStyle,
   LinkStyle,
   MarkdownTextInputStyle,
-  MathStyle,
-  MathBlockStyle,
+  InputInlineMathStyle,
+  InputMathStyle,
 } from './EnrichedMarkdownTextInput';
 import { normalizeLinkVariantEntries } from './linkVariantUtils';
 import { normalizeColor } from './styleUtils';
+import {
+  DEFAULT_HEADING_FONT_WEIGHT,
+  HEADING_DEFAULTS,
+  type HeadingLevelKey,
+} from './headingDefaults';
 
 interface LinkVariantEntryInternal {
   pattern: string;
@@ -15,7 +21,7 @@ interface LinkVariantEntryInternal {
   backgroundColor: ColorValue;
 }
 
-interface MathStyleInternal {
+interface InputInlineMathStyleInternal {
   color: ColorValue;
   fontSize: number;
   backgroundColor: ColorValue;
@@ -29,10 +35,16 @@ interface MathStyleInternal {
   fontWeight: string;
 }
 
-interface MathBlockStyleInternal extends MathStyleInternal {
+interface InputMathStyleInternal extends InputInlineMathStyleInternal {
   marginTop: number;
   marginBottom: number;
-  alignment: 'left' | 'center' | 'right';
+  textAlign: 'left' | 'center' | 'right';
+}
+
+interface HeadingStyleInternal {
+  fontSize: number;
+  fontWeight: string;
+  color: ColorValue;
 }
 
 interface MarkdownTextInputStyleInternal {
@@ -52,8 +64,17 @@ interface MarkdownTextInputStyleInternal {
     color: ColorValue;
     backgroundColor: ColorValue;
   };
-  math: MathStyleInternal;
-  mathBlock: MathBlockStyleInternal;
+  inlineMath: InputInlineMathStyleInternal;
+  math: InputMathStyleInternal;
+  h1: HeadingStyleInternal;
+  h2: HeadingStyleInternal;
+  h3: HeadingStyleInternal;
+  h4: HeadingStyleInternal;
+  h5: HeadingStyleInternal;
+  h6: HeadingStyleInternal;
+  list: {
+    itemSpacing: number;
+  };
 }
 
 const DEFAULT_LINK_COLOR = '#2563EB';
@@ -66,7 +87,7 @@ const DEFAULT_MATH_BORDER_COLOR = 'transparent';
 
 const TRANSPARENT = processColor('transparent')!;
 
-const defaultMathInternal: MathStyleInternal = Object.freeze({
+const defaultInlineMathInternal: InputInlineMathStyleInternal = Object.freeze({
   color: processColor(DEFAULT_MATH_COLOR)!,
   fontSize: 16,
   backgroundColor: processColor(DEFAULT_MATH_BG_COLOR)!,
@@ -80,7 +101,7 @@ const defaultMathInternal: MathStyleInternal = Object.freeze({
   fontWeight: 'normal',
 });
 
-const defaultMathBlockInternal: MathBlockStyleInternal = Object.freeze({
+const defaultBlockMathInternal: InputMathStyleInternal = Object.freeze({
   color: processColor(DEFAULT_MATH_COLOR)!,
   fontSize: 20,
   backgroundColor: processColor(DEFAULT_MATH_BG_COLOR)!,
@@ -94,9 +115,20 @@ const defaultMathBlockInternal: MathBlockStyleInternal = Object.freeze({
   fontWeight: 'normal',
   marginTop: 8,
   marginBottom: 8,
-  alignment: 'center',
+  textAlign: 'center',
 });
 
+// Defaults shared with the read-only renderer via headingDefaults; consumers
+// override per level via markdownStyle h1..h6.
+const defaultHeadingInternal = (key: HeadingLevelKey): HeadingStyleInternal => {
+  const d = HEADING_DEFAULTS[key];
+  return {
+    fontSize: d.fontSize,
+    fontWeight: DEFAULT_HEADING_FONT_WEIGHT,
+    color: processColor(d.color)!,
+  };
+};
+
 const defaultInternal: MarkdownTextInputStyleInternal = Object.freeze({
   strong: {
     color: undefined,
@@ -114,10 +146,31 @@ const defaultInternal: MarkdownTextInputStyleInternal = Object.freeze({
     color: processColor(DEFAULT_SPOILER_COLOR)!,
     backgroundColor: processColor(DEFAULT_SPOILER_BG_COLOR)!,
   },
-  math: defaultMathInternal,
-  mathBlock: defaultMathBlockInternal,
+  inlineMath: defaultInlineMathInternal,
+  math: defaultBlockMathInternal,
+  h1: defaultHeadingInternal('h1'),
+  h2: defaultHeadingInternal('h2'),
+  h3: defaultHeadingInternal('h3'),
+  h4: defaultHeadingInternal('h4'),
+  h5: defaultHeadingInternal('h5'),
+  h6: defaultHeadingInternal('h6'),
+  list: {
+    itemSpacing: 0,
+  },
 });
 
+const normalizeHeadingStyle = (
+  key: HeadingLevelKey,
+  style: HeadingStyle | undefined
+): HeadingStyleInternal => {
+  const fallback = defaultInternal[key];
+  return {
+    fontSize: style?.fontSize ?? fallback.fontSize,
+    fontWeight: style?.fontWeight ?? fallback.fontWeight,
+    color: normalizeColor(style?.color) ?? fallback.color,
+  };
+};
+
 let cachedInput: MarkdownTextInputStyle | undefined;
 let cachedResult: MarkdownTextInputStyleInternal | undefined;
 
@@ -133,10 +186,10 @@ function normalizeInputLinkStyle(
   };
 }
 
-function normalizeMathStyle(
-  style: MathStyle | undefined,
-  fallback: MathStyleInternal
-): MathStyleInternal {
+function normalizeInlineMathStyle(
+  style: InputInlineMathStyle | undefined,
+  fallback: InputInlineMathStyleInternal
+): InputInlineMathStyleInternal {
   const color = normalizeColor(style?.color) ?? fallback.color;
   const backgroundColor =
     normalizeColor(style?.backgroundColor) ?? fallback.backgroundColor;
@@ -159,12 +212,14 @@ function normalizeMathStyle(
   };
 }
 
-function normalizeMathBlockStyle(
-  style: MathBlockStyle | undefined,
-  baseInline: MathStyleInternal,
-  fallback: MathBlockStyleInternal
-): MathBlockStyleInternal {
-  const merged: MathStyleInternal = {
+// Block math (`markdownStyle.math`). Inherits the chip look from the inline
+// key so a single override styles both, then applies its own block-only fields.
+function normalizeBlockMathStyle(
+  style: InputMathStyle | undefined,
+  baseInline: InputInlineMathStyleInternal,
+  fallback: InputMathStyleInternal
+): InputMathStyleInternal {
+  const merged: InputInlineMathStyleInternal = {
     color: baseInline.color,
     fontSize: fallback.fontSize,
     backgroundColor: baseInline.backgroundColor,
@@ -177,20 +232,28 @@ function normalizeMathBlockStyle(
     selectedBorderColor: baseInline.selectedBorderColor,
     fontWeight: baseInline.fontWeight,
   };
-  const inheritedInline = normalizeMathStyle(style, merged);
-  let alignment: 'left' | 'center' | 'right' = fallback.alignment;
+  const inheritedInline = normalizeInlineMathStyle(style, merged);
+  let textAlign: 'left' | 'center' | 'right' = fallback.textAlign;
   if (
-    style?.alignment === 'left' ||
-    style?.alignment === 'center' ||
-    style?.alignment === 'right'
+    style?.textAlign === 'left' ||
+    style?.textAlign === 'center' ||
+    style?.textAlign === 'right'
   ) {
-    alignment = style.alignment;
+    textAlign = style.textAlign;
   }
+  // `padding` is the renderer-compatible shorthand; the per-axis fields win
+  // when both are given. Resolved here so the bridge only ever carries the
+  // two axes and no native side has to know about the shorthand.
+  const padding = style?.padding;
   return {
     ...inheritedInline,
+    paddingHorizontal:
+      style?.paddingHorizontal ?? padding ?? inheritedInline.paddingHorizontal,
+    paddingVertical:
+      style?.paddingVertical ?? padding ?? inheritedInline.paddingVertical,
     marginTop: style?.marginTop ?? fallback.marginTop,
     marginBottom: style?.marginBottom ?? fallback.marginBottom,
-    alignment,
+    textAlign,
   };
 }
 
@@ -231,14 +294,26 @@ export const normalizeMarkdownTextInputStyle = (
         normalizeColor(style.spoiler?.backgroundColor) ??
         defaultInternal.spoiler.backgroundColor,
     },
-    math: normalizeMathStyle(style.math, defaultInternal.math),
-    mathBlock: defaultInternal.mathBlock,
+    inlineMath: normalizeInlineMathStyle(
+      style.inlineMath,
+      defaultInternal.inlineMath
+    ),
+    math: defaultInternal.math,
+    h1: normalizeHeadingStyle('h1', style.h1),
+    h2: normalizeHeadingStyle('h2', style.h2),
+    h3: normalizeHeadingStyle('h3', style.h3),
+    h4: normalizeHeadingStyle('h4', style.h4),
+    h5: normalizeHeadingStyle('h5', style.h5),
+    h6: normalizeHeadingStyle('h6', style.h6),
+    list: {
+      itemSpacing: style.list?.itemSpacing ?? defaultInternal.list.itemSpacing,
+    },
   };
 
-  result.mathBlock = normalizeMathBlockStyle(
-    style.mathBlock,
-    result.math,
-    defaultInternal.mathBlock
+  result.math = normalizeBlockMathStyle(
+    style.math,
+    result.inlineMath,
+    defaultInternal.math
   );
 
   cachedInput = style;

package/src/normalizeMenuItem.ts

@@ -43,7 +43,7 @@ export const normalizeLegacyBooleanMenuItem = (
   if (typeof raw === 'boolean') {
     warnOnce(
       `${parentProp}.${field}`,
-      `[react-native-enriched-markdown] ${parentProp}.${field} as a boolean is ` +
+      `[react-native-enriched-markdown-scaffold] ${parentProp}.${field} as a boolean is ` +
         `deprecated; use { enabled: ${raw} }. The boolean form will be removed in 0.8.`
     );
     return { enabled: raw, label: defaultLabel };

package/src/types/MarkdownStyle.ts

@@ -1,5 +1,7 @@
 type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
 
+type ImageResizeMode = 'contain' | 'cover' | 'stretch' | 'center' | 'none';
+
 interface BaseBlockStyle {
   fontSize?: number;
   fontFamily?: string;
@@ -23,6 +25,8 @@ interface BlockquoteStyle extends BaseBlockStyle {
   borderWidth?: number;
   gapWidth?: number;
   backgroundColor?: string;
+  borderRadius?: number;
+  padding?: number;
 }
 
 interface ListStyle extends BaseBlockStyle {
@@ -37,6 +41,38 @@ interface ListStyle extends BaseBlockStyle {
   markerFontWeight?: string;
   gapWidth?: number;
   marginLeft?: number;
+  /**
+   * Vertical spacing between consecutive list items, including nested ones.
+   * Adds no space above the first item or below the last one — the outer
+   * edges are still controlled by `marginTop`/`marginBottom`.
+   * @default 0
+   */
+  itemSpacing?: number;
+}
+
+/**
+ * Per-token syntax highlight colors for fenced code blocks, keyed on the
+ * tree-sitter highlight token types. Any key omitted falls back to the default
+ * palette (Operator/Punctuation/Variable/Embedded inherit the code block's
+ * base `color`). Colors only take visible effect when the optional syntax
+ * highlighting module is compiled in; otherwise code blocks render uncolored.
+ */
+interface CodeBlockSyntaxColors {
+  keyword?: string;
+  /** Color for operator tokens (e.g. `+`, `=>`). */
+  operator?: string;
+  punctuation?: string;
+  string?: string;
+  number?: string;
+  constant?: string;
+  comment?: string;
+  function?: string;
+  type?: string;
+  variable?: string;
+  property?: string;
+  tag?: string;
+  attribute?: string;
+  embedded?: string;
 }
 
 interface CodeBlockStyle extends BaseBlockStyle {
@@ -45,6 +81,7 @@ interface CodeBlockStyle extends BaseBlockStyle {
   borderRadius?: number;
   borderWidth?: number;
   padding?: number;
+  syntaxColors?: CodeBlockSyntaxColors;
 }
 
 export interface LinkStyle {
@@ -108,6 +145,26 @@ interface CodeStyle {
 
 interface ImageStyle {
   height?: number;
+  /**
+   * Maximum height the image is fitted into, preserving aspect ratio. When set,
+   * this replaces `height` as the primary sizing knob. Ignored when `aspectRatio`
+   * is set. Sizing precedence: `aspectRatio` > `maxHeight` > `height`.
+   */
+  maxHeight?: number;
+  /**
+   * Width / height ratio (e.g. `16 / 9`). The image fills the available width and
+   * its height is derived from this ratio, ignoring `height`/`maxHeight`.
+   * Sizing precedence: `aspectRatio` > `maxHeight` > `height`.
+   */
+  aspectRatio?: number;
+  /**
+   * How the image fills its box, analogous to React Native `resizeMode` / CSS
+   * `object-fit`. Applies whenever set explicitly, including with a fixed
+   * `height` box. When omitted, block images keep the legacy fill-width
+   * behavior, unless `maxHeight` or `aspectRatio` is set — then it defaults
+   * to `'cover'`.
+   */
+  resizeMode?: ImageResizeMode;
   borderRadius?: number;
   marginTop?: number;
   marginBottom?: number;
@@ -135,6 +192,16 @@ interface TableStyle extends BaseBlockStyle {
   borderRadius?: number;
   cellPaddingHorizontal?: number;
   cellPaddingVertical?: number;
+  horizontalOverflow?: number;
+  /**
+   * Horizontal alignment of the whole table within the container. Only applies
+   * when the table is narrower than the container; tables that overflow and
+   * scroll always start at the table's beginning. When unset, tables keep the
+   * legacy start-aligned placement. On web, setting any value (including
+   * 'left') also makes the table shrink to fit its content instead of filling
+   * the container width.
+   */
+  align?: 'left' | 'center' | 'right';
 }
 
 interface TaskListStyle {
@@ -355,4 +422,11 @@ export interface Md4cFlags {
    * @default false
    */
   highlight?: boolean;
+  /**
+   * Treat soft breaks (single newlines) as hard breaks (visible line breaks).
+   * When enabled, a single newline in the source renders as a line break
+   * instead of being collapsed to a space (CommonMark default).
+   * @default false
+   */
+  hardSoftBreaks?: boolean;
 }

package/src/types/MarkdownStyleInternal.ts

@@ -6,6 +6,19 @@ export type BlockTextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
 // Mirrors the public fontStyle values; empty string means "inherit / no override".
 export type EmphasisFontStyle = 'normal' | 'italic' | 'oblique' | '';
 
+// empty string means "no table alignment set" (legacy start-aligned placement).
+export type TableAlign = 'left' | 'center' | 'right' | '';
+
+// empty string means "legacy sizing" (fill width, no resize-mode handling).
+// resolves to 'cover' when maxHeight/aspectRatio is present.
+export type ImageResizeMode =
+  | 'contain'
+  | 'cover'
+  | 'stretch'
+  | 'center'
+  | 'none'
+  | '';
+
 interface BaseBlockStyleInternal {
   fontSize: number;
   fontFamily: string;
@@ -29,6 +42,8 @@ interface BlockquoteStyleInternal extends BaseBlockStyleInternal {
   borderWidth: number;
   gapWidth: number;
   backgroundColor: string;
+  borderRadius: number;
+  padding: number;
 }
 
 interface ListStyleInternal extends BaseBlockStyleInternal {
@@ -39,6 +54,24 @@ interface ListStyleInternal extends BaseBlockStyleInternal {
   markerFontWeight: string;
   gapWidth: number;
   marginLeft: number;
+  itemSpacing: number;
+}
+
+export interface CodeBlockSyntaxColorsInternal {
+  keyword: string;
+  operatorColor: string;
+  punctuation: string;
+  string: string;
+  number: string;
+  constant: string;
+  comment: string;
+  function: string;
+  type: string;
+  variable: string;
+  property: string;
+  tag: string;
+  attribute: string;
+  embedded: string;
 }
 
 interface CodeBlockStyleInternal extends BaseBlockStyleInternal {
@@ -47,6 +80,7 @@ interface CodeBlockStyleInternal extends BaseBlockStyleInternal {
   borderRadius: number;
   borderWidth: number;
   padding: number;
+  syntaxColors: CodeBlockSyntaxColorsInternal;
 }
 
 interface LinkStyleInternal {
@@ -93,6 +127,9 @@ interface CodeStyleInternal {
 
 interface ImageStyleInternal {
   height: number;
+  maxHeight: number;
+  aspectRatio: number;
+  resizeMode: ImageResizeMode;
   borderRadius: number;
   marginTop: number;
   marginBottom: number;
@@ -120,6 +157,8 @@ interface TableStyleInternal extends BaseBlockStyleInternal {
   borderRadius: number;
   cellPaddingHorizontal: number;
   cellPaddingVertical: number;
+  horizontalOverflow: number;
+  align: TableAlign;
 }
 
 interface TaskListStyleInternal {