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

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

@@ -12,6 +12,8 @@ export type {
   LinkPressEvent,
   LinkLongPressEvent,
   TaskListItemPressEvent,
+  CopyPressEvent,
+  OnPasteEvent,
 } from './types/events';
 export type {
   AccessibilityLabels,
@@ -31,9 +33,16 @@ export type {
   ContextMenuItem,
   InputSelectionMenuConfig,
   FormatMenuConfig,
+  OnKeyPressEvent,
   OnLinkDetected,
   OnStartMentionEvent,
   OnChangeMentionEvent,
   OnEndMentionEvent,
   CaretRect,
+  HeadingLevel,
+  HeadingStyle,
+  InputInlineMathStyle,
+  InputMathStyle,
+  OnMathPressEvent,
+  InsertMathOptions,
 } from './EnrichedMarkdownTextInput';

package/src/index.web.tsx

@@ -5,4 +5,5 @@ export type {
   LinkPressEvent,
   LinkLongPressEvent,
   TaskListItemPressEvent,
+  CopyPressEvent,
 } from './types/events';

package/src/jest/index.tsx

@@ -0,0 +1,215 @@
+/**
+ * Jest mock for `react-native-enriched-markdown-scaffold`, wired up via
+ * `jest.mock('react-native-enriched-markdown-scaffold', () => require('react-native-enriched-markdown-scaffold/jest'))`.
+ * See docs/TESTING.md for setup and the behavior it mirrors.
+ *
+ * The two components are Fabric/codegen native views: under Jest there is no
+ * native view manager, so rendering them or calling any imperative ref method
+ * (each dispatches a native command) throws. These replacements render plain RN
+ * primitives and expose every imperative method as a spy.
+ *
+ * Behavior mirrored from the native component: typing fires `onChangeText` and,
+ * when set, `onChangeMarkdown` (the raw text stands in for parsed markdown);
+ * `setValue()` updates the rendered text but emits no change events, matching
+ * the native suppression of emits for programmatic updates.
+ *
+ * The mock is typed against the real public types, so `yarn typecheck` fails if
+ * the API gains a prop or ref method the mock does not cover -- it cannot
+ * silently drift from the real component.
+ */
+import { useImperativeHandle, useRef, useState } from 'react';
+import type { ComponentRef } from 'react';
+import { Text, TextInput } from 'react-native';
+import type {
+  CaretRect,
+  EnrichedMarkdownTextInputInstance,
+  EnrichedMarkdownTextInputProps,
+  InsertMathOptions,
+} from '../EnrichedMarkdownTextInput';
+import type { EnrichedMarkdownTextProps } from '../native/EnrichedMarkdownText';
+
+export {
+  DEFAULT_ACCESSIBILITY_LABELS,
+  resolveAccessibilityLabels,
+} from '../accessibilityLabelDefaults';
+
+type AnyFn = (...args: any[]) => any;
+declare const jest: { fn: <T extends AnyFn>(impl?: T) => T };
+
+const spy = <T extends AnyFn>(impl?: T): T => jest.fn(impl);
+
+const EMPTY_CARET_RECT: CaretRect = { x: 0, y: 0, width: 0, height: 0 };
+
+export const EnrichedMarkdownTextInput = ({
+  ref,
+  defaultValue,
+  onChangeText,
+  onChangeMarkdown,
+  onFocus,
+  onBlur,
+  editable = true,
+  placeholder,
+  placeholderTextColor,
+  autoFocus = false,
+  multiline = true,
+  scrollEnabled = true,
+  style,
+  testID,
+  accessible,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityState,
+  nativeID,
+  markdownStyle: _markdownStyle,
+  cursorColor: _cursorColor,
+  selectionColor: _selectionColor,
+  autoCapitalize: _autoCapitalize,
+  onChangeSelection: _onChangeSelection,
+  onChangeState: _onChangeState,
+  onKeyPress: _onKeyPress,
+  onCaretRectChange: _onCaretRectChange,
+  onLinkDetected: _onLinkDetected,
+  mentionIndicators: _mentionIndicators,
+  onStartMention: _onStartMention,
+  onChangeMention: _onChangeMention,
+  onEndMention: _onEndMention,
+  contextMenuItems: _contextMenuItems,
+  selectionMenuConfig: _selectionMenuConfig,
+  formatMenuConfig: _formatMenuConfig,
+  linkRegex: _linkRegex,
+  writingDirection: _writingDirection,
+}: EnrichedMarkdownTextInputProps) => {
+  const [text, setText] = useState(defaultValue ?? '');
+  const textRef = useRef(text);
+  const inputRef = useRef<ComponentRef<typeof TextInput> | null>(null);
+
+  const applyText = (next: string) => {
+    textRef.current = next;
+    setText(next);
+  };
+
+  const handleChangeText = (next: string) => {
+    applyText(next);
+    onChangeText?.(next);
+    onChangeMarkdown?.(next);
+  };
+
+  const instanceRef = useRef<EnrichedMarkdownTextInputInstance | null>(null);
+  if (instanceRef.current === null) {
+    instanceRef.current = {
+      focus: spy(() => inputRef.current?.focus()),
+      blur: spy(() => inputRef.current?.blur()),
+      measure: spy((callback) => callback(0, 0, 0, 0, 0, 0)),
+      measureInWindow: spy((callback) => callback(0, 0, 0, 0)),
+      measureLayout: spy((_relativeToNativeNode, onSuccess) =>
+        onSuccess(0, 0, 0, 0)
+      ),
+      setValue: spy((markdown: string) => applyText(markdown)),
+      setSelection: spy((_start: number, _end: number) => {}),
+      toggleBold: spy(() => {}),
+      toggleItalic: spy(() => {}),
+      toggleUnderline: spy(() => {}),
+      toggleStrikethrough: spy(() => {}),
+      toggleSpoiler: spy(() => {}),
+      toggleHeading: spy((_level) => {}),
+      toggleUnorderedList: spy(() => {}),
+      toggleOrderedList: spy(() => {}),
+      indentList: spy(() => {}),
+      outdentList: spy(() => {}),
+      setLink: spy((_url: string) => {}),
+      insertLink: spy((_text: string, _url: string) => {}),
+      insertText: spy((_text: string) => {}),
+      insertMention: spy((_displayText: string, _url: string) => {}),
+      startMention: spy((_indicator: string) => {}),
+      removeLink: spy(() => {}),
+      copyToClipboard: spy(() => {}),
+      resolvePaste: spy((_text: string, _markdown?: string) => {}),
+      // Math chip commands are native-only; the mock records the call so tests can
+      // assert the API surface without a native chip implementation.
+      insertMath: spy((_latex: string, _options?: InsertMathOptions) => {}),
+      updateMath: spy(
+        (_start: number, _latex: string, _options?: InsertMathOptions) => {}
+      ),
+      removeMath: spy((_start: number) => {}),
+      getMarkdown: spy(() => Promise.resolve(textRef.current)),
+      getCaretRect: spy(() => Promise.resolve(EMPTY_CARET_RECT)),
+    };
+  }
+
+  useImperativeHandle(ref, () => instanceRef.current!);
+
+  return (
+    <TextInput
+      ref={inputRef}
+      value={text}
+      onChangeText={handleChangeText}
+      onFocus={() => onFocus?.()}
+      onBlur={() => onBlur?.()}
+      editable={editable}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderTextColor}
+      autoFocus={autoFocus}
+      multiline={multiline}
+      scrollEnabled={scrollEnabled}
+      style={style}
+      testID={testID}
+      accessible={accessible}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState}
+      nativeID={nativeID}
+    />
+  );
+};
+
+export const EnrichedMarkdownText = ({
+  markdown,
+  containerStyle,
+  testID,
+  accessible,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityState,
+  nativeID,
+  markdownStyle: _markdownStyle,
+  onLinkPress: _onLinkPress,
+  onLinkLongPress: _onLinkLongPress,
+  onTaskListItemPress: _onTaskListItemPress,
+  enableLinkPreview: _enableLinkPreview,
+  selectable: _selectable,
+  md4cFlags: _md4cFlags,
+  allowFontScaling: _allowFontScaling,
+  maxFontSizeMultiplier: _maxFontSizeMultiplier,
+  allowTrailingMargin: _allowTrailingMargin,
+  flavor: _flavor,
+  streamingAnimation: _streamingAnimation,
+  streamingConfig: _streamingConfig,
+  spoilerOverlay: _spoilerOverlay,
+  contextMenuItems: _contextMenuItems,
+  imageRequestHeaders: _imageRequestHeaders,
+  selectionMenuConfig: _selectionMenuConfig,
+  accessibilityLabels: _accessibilityLabels,
+  selectionColor: _selectionColor,
+  selectionHandleColor: _selectionHandleColor,
+  textBreakStrategy: _textBreakStrategy,
+  lineBreakStrategyIOS: _lineBreakStrategyIOS,
+  writingDirection: _writingDirection,
+}: EnrichedMarkdownTextProps) => {
+  return (
+    <Text
+      style={containerStyle}
+      testID={testID}
+      accessible={accessible}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState}
+      nativeID={nativeID}
+    >
+      {markdown}
+    </Text>
+  );
+};

package/src/native/EnrichedMarkdownText.tsx

@@ -21,6 +21,7 @@ import type {
   LinkPressEvent,
   LinkLongPressEvent,
   TaskListItemPressEvent,
+  CopyPressEvent,
   OnContextMenuItemPressEvent,
 } from '../types/events';
 
@@ -32,7 +33,12 @@ export type {
   SelectionMenuConfig,
   SelectionMenuPluralLabels,
 };
-export type { LinkPressEvent, LinkLongPressEvent, TaskListItemPressEvent };
+export type {
+  LinkPressEvent,
+  LinkLongPressEvent,
+  TaskListItemPressEvent,
+  CopyPressEvent,
+};
 
 // Default English labels for the built-in selection menu actions. Defaults are
 // resolved here (JS-side) so the native code always receives a concrete string.
@@ -101,6 +107,7 @@ const defaultMd4cFlags: Md4cFlags = {
   subscript: false,
   latexMath: true,
   highlight: false,
+  hardSoftBreaks: false,
 };
 
 export const EnrichedMarkdownText = ({
@@ -110,6 +117,8 @@ export const EnrichedMarkdownText = ({
   onLinkPress,
   onLinkLongPress,
   onTaskListItemPress,
+  enableTaskListItemToggle = true,
+  onCopyPress,
   enableLinkPreview,
   selectable = true,
   md4cFlags = defaultMd4cFlags,
@@ -121,6 +130,8 @@ export const EnrichedMarkdownText = ({
   streamingConfig,
   spoilerOverlay = 'particles',
   contextMenuItems,
+  imageRequestHeaders,
+  contextMenuHidden = false,
   selectionMenuConfig,
   accessibilityLabels,
   selectionColor,
@@ -146,6 +157,7 @@ export const EnrichedMarkdownText = ({
       subscript: md4cFlags.subscript ?? false,
       latexMath: md4cFlags.latexMath ?? true,
       highlight: md4cFlags.highlight ?? false,
+      hardSoftBreaks: md4cFlags.hardSoftBreaks ?? false,
     }),
     [md4cFlags]
   );
@@ -172,6 +184,16 @@ export const EnrichedMarkdownText = ({
     [contextMenuItems]
   );
 
+  const nativeImageRequestHeaders = useMemo(
+    () =>
+      imageRequestHeaders
+        ? Object.entries(imageRequestHeaders)
+            .map(([name, value]) => ({ name, value }))
+            .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
+        : undefined,
+    [imageRequestHeaders]
+  );
+
   const handleContextMenuItemPress = useCallback(
     (e: NativeSyntheticEvent<OnContextMenuItemPressEvent>) => {
       const { itemText, selectedText, selectionStart, selectionEnd } =
@@ -209,8 +231,20 @@ export const EnrichedMarkdownText = ({
     [onTaskListItemPress]
   );
 
+  const handleCopyPress = useCallback(
+    (e: NativeSyntheticEvent<CopyPressEvent>) => {
+      const { code, language } = e.nativeEvent;
+      onCopyPress?.({ code, language });
+    },
+    [onCopyPress]
+  );
+
   const tableMode = streamingConfig?.tableMode ?? 'progressive';
-  const normalizedStreamingConfig = useMemo(() => ({ tableMode }), [tableMode]);
+  const codeBlockMode = streamingConfig?.codeBlockMode ?? 'progressive';
+  const normalizedStreamingConfig = useMemo(
+    () => ({ tableMode, codeBlockMode }),
+    [tableMode, codeBlockMode]
+  );
   const normalizedSelectionMenuConfig = useMemo(() => {
     // The boolean acceptance is confined to this wrapper boundary via a single
     // `as unknown` cast; the public type only exposes the object shape.
@@ -219,10 +253,19 @@ export const EnrichedMarkdownText = ({
           copy?: unknown;
           copyAsMarkdown?: unknown;
           copyImageUrl?: unknown;
+          systemItems?: unknown;
+          codeBlockCopyButton?: unknown;
         }
       | undefined;
 
     const copy = normalizeMenuItem(config?.copy, true, DEFAULT_COPY_LABEL);
+    const copyFormat = (config?.copy as { format?: unknown } | undefined)
+      ?.format;
+    const codeBlockCopyButton = normalizeMenuItem(
+      config?.codeBlockCopyButton,
+      true,
+      ''
+    );
     const copyAsMarkdown = normalizeLegacyBooleanMenuItem(
       config?.copyAsMarkdown,
       'selectionMenuConfig',
@@ -255,6 +298,10 @@ export const EnrichedMarkdownText = ({
         pluralLabels,
         copyImageUrl.label
       ),
+      copyEnabled: copy.enabled,
+      copyFormatMarkdown: copyFormat === 'markdown',
+      systemItemsNone: config?.systemItems === 'none',
+      codeBlockCopyButton: codeBlockCopyButton.enabled,
     };
   }, [selectionMenuConfig]);
 
@@ -269,6 +316,8 @@ export const EnrichedMarkdownText = ({
     onLinkPress: handleLinkPress,
     onLinkLongPress: handleLinkLongPress,
     onTaskListItemPress: handleTaskListItemPress,
+    enableTaskListItemToggle,
+    onCopyPress: handleCopyPress,
     enableLinkPreview: onLinkLongPress == null && (enableLinkPreview ?? true),
     selectable,
     md4cFlags: normalizedMd4cFlags,
@@ -280,6 +329,8 @@ export const EnrichedMarkdownText = ({
     spoilerOverlay,
     style: containerStyle,
     contextMenuItems: nativeContextMenuItems,
+    imageRequestHeaders: nativeImageRequestHeaders,
+    contextMenuHidden,
     selectionMenuConfig: normalizedSelectionMenuConfig,
     accessibilityLabels: resolvedAccessibilityLabels,
     onContextMenuItemPress: handleContextMenuItemPress,

package/src/normalizeMarkdownStyle.ts

@@ -8,6 +8,10 @@ import type {
 } from './types/MarkdownStyleInternal';
 import { isStyleEqual, normalizeColor, mergeSubStyle } from './styleUtils';
 import { normalizeLinkVariantEntries } from './linkVariantUtils';
+import {
+  DEFAULT_HEADING_FONT_WEIGHT,
+  HEADING_DEFAULTS,
+} from './headingDefaults';
 
 const getSystemFont = (): string =>
   Platform.select({
@@ -26,7 +30,43 @@ const getMonospaceFont = (): string =>
   })!;
 
 const defaultTextColor = normalizeColor('#1F2937')!;
-const defaultHeadingColor = normalizeColor('#111827')!;
+
+const codeBlockTextColor = normalizeColor('#F3F4F6')!;
+
+// GitHub-dark syntax palette (Primer prettylights), tuned for the dark code
+// block background (#1F2937). It is the single source of truth for per-token
+// code colors: native reads these resolved values and holds no default of its
+// own. The four inheriting tokens resolve to the code block base color.
+const DEFAULT_CODE_BLOCK_SYNTAX_COLORS = {
+  keyword: normalizeColor('#FF7B72')!,
+  operatorColor: codeBlockTextColor,
+  punctuation: codeBlockTextColor,
+  string: normalizeColor('#A5D6FF')!,
+  number: normalizeColor('#79C0FF')!,
+  constant: normalizeColor('#79C0FF')!,
+  comment: normalizeColor('#8B949E')!,
+  function: normalizeColor('#D2A8FF')!,
+  type: normalizeColor('#FFA657')!,
+  variable: codeBlockTextColor,
+  property: normalizeColor('#79C0FF')!,
+  tag: normalizeColor('#7EE787')!,
+  attribute: normalizeColor('#79C0FF')!,
+  embedded: codeBlockTextColor,
+};
+
+const INHERIT_SYNTAX_TOKENS = new Set([
+  'operatorColor',
+  'punctuation',
+  'variable',
+  'embedded',
+]);
+
+// The public API exposes `operator`, but the internal/native token is named
+// `operatorColor` because `operator` is a reserved word in the generated C++
+// struct. Map the public key onto the internal token when reading user input.
+const PUBLIC_SYNTAX_TOKEN_KEYS: Record<string, string> = {
+  operatorColor: 'operator',
+};
 
 // Explicit type annotation needed: Object.freeze breaks contextual typing, so
 // TypeScript widens literal 'auto' to `string` instead of `BlockTextAlign`.
@@ -38,7 +78,7 @@ const baseHeader: {
   textAlign: BlockTextAlign;
 } = {
   fontFamily: getSystemFont(),
-  fontWeight: '',
+  fontWeight: DEFAULT_HEADING_FONT_WEIGHT,
   marginTop: 0,
   marginBottom: 8,
   textAlign: 'auto',
@@ -57,38 +97,38 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
   },
   h1: {
     ...baseHeader,
-    fontSize: 30,
-    color: defaultHeadingColor,
+    fontSize: HEADING_DEFAULTS.h1.fontSize,
+    color: normalizeColor(HEADING_DEFAULTS.h1.color)!,
     lineHeight: Platform.select({ ios: 36, android: 38, default: 38 })!,
   },
   h2: {
     ...baseHeader,
-    fontSize: 24,
-    color: defaultHeadingColor,
+    fontSize: HEADING_DEFAULTS.h2.fontSize,
+    color: normalizeColor(HEADING_DEFAULTS.h2.color)!,
     lineHeight: Platform.select({ ios: 30, android: 32, default: 32 })!,
   },
   h3: {
     ...baseHeader,
-    fontSize: 20,
-    color: defaultHeadingColor,
+    fontSize: HEADING_DEFAULTS.h3.fontSize,
+    color: normalizeColor(HEADING_DEFAULTS.h3.color)!,
     lineHeight: Platform.select({ ios: 26, android: 28, default: 28 })!,
   },
   h4: {
     ...baseHeader,
-    fontSize: 18,
-    color: defaultHeadingColor,
+    fontSize: HEADING_DEFAULTS.h4.fontSize,
+    color: normalizeColor(HEADING_DEFAULTS.h4.color)!,
     lineHeight: Platform.select({ ios: 24, android: 26, default: 26 })!,
   },
   h5: {
     ...baseHeader,
-    fontSize: 16,
-    color: normalizeColor('#374151')!,
+    fontSize: HEADING_DEFAULTS.h5.fontSize,
+    color: normalizeColor(HEADING_DEFAULTS.h5.color)!,
     lineHeight: Platform.select({ ios: 22, android: 24, default: 24 })!,
   },
   h6: {
     ...baseHeader,
-    fontSize: 14,
-    color: normalizeColor('#4B5563')!,
+    fontSize: HEADING_DEFAULTS.h6.fontSize,
+    color: normalizeColor(HEADING_DEFAULTS.h6.color)!,
     lineHeight: Platform.select({ ios: 20, android: 22, default: 22 })!,
   },
   blockquote: {
@@ -103,6 +143,8 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     borderWidth: 3,
     gapWidth: 16,
     backgroundColor: normalizeColor('#F9FAFB')!,
+    borderRadius: 0,
+    padding: 0,
   },
   list: {
     fontSize: 16,
@@ -119,12 +161,13 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     markerFontWeight: '500',
     gapWidth: 12,
     marginLeft: 24,
+    itemSpacing: 0,
   },
   codeBlock: {
     fontSize: 14,
     fontFamily: getMonospaceFont(),
     fontWeight: '',
-    color: normalizeColor('#F3F4F6')!,
+    color: codeBlockTextColor,
     lineHeight: Platform.select({ ios: 20, android: 22, default: 22 })!,
     marginTop: 0,
     marginBottom: 16,
@@ -133,6 +176,7 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     borderRadius: 8,
     borderWidth: 1,
     padding: 16,
+    syntaxColors: { ...DEFAULT_CODE_BLOCK_SYNTAX_COLORS },
   },
   link: {
     fontFamily: '',
@@ -158,7 +202,15 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     backgroundColor: normalizeColor('#FDF2F4')!,
     borderColor: normalizeColor('#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: normalizeColor('#E5E7EB')!,
@@ -184,6 +236,8 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     borderRadius: 6,
     cellPaddingHorizontal: 12,
     cellPaddingVertical: 8,
+    horizontalOverflow: 0,
+    align: '' as const,
   },
   math: {
     fontSize: 20,
@@ -298,6 +352,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']
@@ -306,6 +366,32 @@ export const normalizeMarkdownStyle = (
       paragraphColor;
   }
 
+  const codeBlock = result.codeBlock as MarkdownStyleInternal['codeBlock'];
+  const userSyntaxColors = style.codeBlock?.syntaxColors as
+    | Record<string, unknown>
+    | undefined;
+  const resolvedSyntaxColors: Record<string, unknown> = {};
+  for (const token in DEFAULT_CODE_BLOCK_SYNTAX_COLORS) {
+    const publicKey = PUBLIC_SYNTAX_TOKEN_KEYS[token] ?? token;
+    const userValue = userSyntaxColors?.[publicKey];
+    if (typeof userValue === 'string') {
+      resolvedSyntaxColors[token] =
+        normalizeColor(userValue) ??
+        DEFAULT_CODE_BLOCK_SYNTAX_COLORS[
+          token as keyof typeof DEFAULT_CODE_BLOCK_SYNTAX_COLORS
+        ];
+    } else if (INHERIT_SYNTAX_TOKENS.has(token)) {
+      resolvedSyntaxColors[token] = codeBlock.color;
+    } else {
+      resolvedSyntaxColors[token] =
+        DEFAULT_CODE_BLOCK_SYNTAX_COLORS[
+          token as keyof typeof DEFAULT_CODE_BLOCK_SYNTAX_COLORS
+        ];
+    }
+  }
+  (codeBlock as unknown as Record<string, unknown>).syntaxColors =
+    resolvedSyntaxColors;
+
   const finalResult = Object.freeze(result) as unknown as MarkdownStyleInternal;
   refCache.set(style, finalResult);
   structuralCache.unshift({ style, result: finalResult });