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

package/src/native/EnrichedMarkdownText.tsx

@@ -1,38 +1,76 @@
-import { useMemo, useCallback, useRef, useEffect } from 'react';
-import EnrichedMarkdownTextNativeComponent from '../EnrichedMarkdownTextNativeComponent';
-import type { MarkdownStyleInternal } from '../EnrichedMarkdownTextNativeComponent';
-import EnrichedMarkdownNativeComponent from '../EnrichedMarkdownNativeComponent';
+import {
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react';
+import EnrichedMarkdownTextNativeComponent, {
+  Commands as TextCommands,
+} from '../EnrichedMarkdownTextNativeComponent';
+import type {
+  LinkLayoutEvent,
+  MarkdownStyleInternal,
+  SelectionChangeEvent as NativeSelectionChangeEvent,
+} from '../EnrichedMarkdownTextNativeComponent';
+import EnrichedMarkdownNativeComponent, {
+  Commands as MarkdownCommands,
+} from '../EnrichedMarkdownNativeComponent';
 import { normalizeMarkdownStyle } from '../normalizeMarkdownStyle';
 import { resolveAccessibilityLabels } from '../accessibilityLabelDefaults';
 import {
   normalizeMenuItem,
   normalizeLegacyBooleanMenuItem,
 } from '../normalizeMenuItem';
-import type { NativeSyntheticEvent } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type {
+  HostInstance,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
 import type { MarkdownStyle, Md4cFlags } from '../types/MarkdownStyle';
 import type {
   EnrichedMarkdownTextProps,
+  EnrichedMarkdownTextInstance,
   StreamingConfig,
   ContextMenuItem,
   SelectionMenuConfig,
   SelectionMenuPluralLabels,
+  LinkDecorationInfo,
+  LinkRect,
 } from '../types/MarkdownTextProps';
 import type {
   LinkPressEvent,
   LinkLongPressEvent,
   TaskListItemPressEvent,
+  CopyPressEvent,
+  CopyEvent,
   OnContextMenuItemPressEvent,
+  SelectionChangeEvent,
+  SelectionRect,
 } from '../types/events';
 
 export type { MarkdownStyle, Md4cFlags };
 export type {
   EnrichedMarkdownTextProps,
+  EnrichedMarkdownTextInstance,
   StreamingConfig,
   ContextMenuItem,
   SelectionMenuConfig,
   SelectionMenuPluralLabels,
+  LinkDecorationInfo,
+  LinkRect,
+};
+export type {
+  LinkPressEvent,
+  LinkLongPressEvent,
+  TaskListItemPressEvent,
+  CopyPressEvent,
+  CopyEvent,
+  SelectionChangeEvent,
+  SelectionRect,
 };
-export type { LinkPressEvent, LinkLongPressEvent, TaskListItemPressEvent };
 
 // 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.
@@ -95,22 +133,57 @@ const buildPluralTemplates = (
   return templates;
 };
 
+type LinkLayoutFragment = LinkLayoutEvent['fragments'][number];
+
+/** Groups the flat per-line fragments native reports into one entry per link. */
+const groupLinkFragments = (
+  fragments: ReadonlyArray<LinkLayoutFragment>
+): LinkDecorationInfo[] => {
+  const byIndex = new Map<number, LinkDecorationInfo>();
+  for (const { linkIndex, url, text, x, y, width, height } of fragments) {
+    const rect: LinkRect = { x, y, width, height };
+    const info = byIndex.get(linkIndex);
+    if (info) {
+      info.rects.push(rect);
+      info.rect = rect;
+    } else {
+      byIndex.set(linkIndex, {
+        index: linkIndex,
+        url,
+        text,
+        rect,
+        rects: [rect],
+      });
+    }
+  }
+  return [...byIndex.values()];
+};
+
+const ZERO_OFFSET = { x: 0, y: 0 };
+
 const defaultMd4cFlags: Md4cFlags = {
   underline: false,
   superscript: false,
   subscript: false,
   latexMath: true,
   highlight: false,
+  hardSoftBreaks: false,
 };
 
 export const EnrichedMarkdownText = ({
+  ref,
   markdown,
   markdownStyle = {},
   containerStyle,
   onLinkPress,
   onLinkLongPress,
   onTaskListItemPress,
+  enableTaskListItemToggle = true,
+  onCopyPress,
+  onCopy,
+  onSelectionChange,
   enableLinkPreview,
+  linkLongPressSelects = false,
   selectable = true,
   md4cFlags = defaultMd4cFlags,
   allowFontScaling = true,
@@ -121,6 +194,8 @@ export const EnrichedMarkdownText = ({
   streamingConfig,
   spoilerOverlay = 'particles',
   contextMenuItems,
+  imageRequestHeaders,
+  contextMenuHidden = false,
   selectionMenuConfig,
   accessibilityLabels,
   selectionColor,
@@ -128,6 +203,8 @@ export const EnrichedMarkdownText = ({
   textBreakStrategy,
   lineBreakStrategyIOS,
   writingDirection = 'first-strong',
+  renderLinkDecoration,
+  onLayout,
   ...rest
 }: EnrichedMarkdownTextProps) => {
   const normalizedStyleRef = useRef<MarkdownStyleInternal | null>(null);
@@ -146,6 +223,7 @@ export const EnrichedMarkdownText = ({
       subscript: md4cFlags.subscript ?? false,
       latexMath: md4cFlags.latexMath ?? true,
       highlight: md4cFlags.highlight ?? false,
+      hardSoftBreaks: md4cFlags.hardSoftBreaks ?? false,
     }),
     [md4cFlags]
   );
@@ -172,6 +250,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 +297,103 @@ export const EnrichedMarkdownText = ({
     [onTaskListItemPress]
   );
 
+  const handleCopyPress = useCallback(
+    (e: NativeSyntheticEvent<CopyPressEvent>) => {
+      const { code, language } = e.nativeEvent;
+      onCopyPress?.({ code, language });
+    },
+    [onCopyPress]
+  );
+
+  const handleCopyRequest = useCallback(
+    // Codegen types `source` as a plain string; native only sends the four
+    // values of CopyEvent['source'].
+    (
+      e: NativeSyntheticEvent<Omit<CopyEvent, 'source'> & { source: string }>
+    ) => {
+      const { source, markdown: copied, text, whole } = e.nativeEvent;
+      onCopy?.({
+        source: source as CopyEvent['source'],
+        markdown: copied,
+        text,
+        whole,
+      });
+    },
+    [onCopy]
+  );
+  const interceptCopy = onCopy != null;
+
+  const decorated = renderLinkDecoration != null;
+  const [linkLayout, setLinkLayout] = useState<LinkDecorationInfo[]>([]);
+  // Where the native view sits inside the wrapper (the wrapper's padding).
+  const [nativeOffset, setNativeOffset] = useState(ZERO_OFFSET);
+
+  const handleLinkLayout = useCallback(
+    (e: NativeSyntheticEvent<LinkLayoutEvent>) => {
+      setLinkLayout(groupLinkFragments(e.nativeEvent.fragments));
+    },
+    []
+  );
+
+  const handleNativeLayout = useCallback((e: LayoutChangeEvent) => {
+    const { x, y } = e.nativeEvent.layout;
+    setNativeOffset((prev) => (prev.x === x && prev.y === y ? prev : { x, y }));
+  }, []);
+
+  // Rects stay relative to the native view — the view the ref's
+  // `measureInWindow` measures — even when decorations wrap it.
+  const handleSelectionChange = useCallback(
+    // Codegen types `source` as a plain string; native only sends the four
+    // values of SelectionChangeEvent['source'].
+    (e: NativeSyntheticEvent<NativeSelectionChangeEvent>) => {
+      const { source, ...payload } = e.nativeEvent;
+      onSelectionChange?.({
+        ...payload,
+        source: source as SelectionChangeEvent['source'],
+      });
+    },
+    [onSelectionChange]
+  );
+
+  const nativeRef = useRef<HostInstance | null>(null);
+  const isGithubFlavor = flavor === 'github';
+  useImperativeHandle(
+    ref,
+    () => ({
+      clearSelection: () => {
+        const node = nativeRef.current;
+        if (node == null) return;
+        // Codegen's ViewRef resolves to `never` with RN 0.84's function-based
+        // HostComponent type — the cast is safe at runtime.
+        if (isGithubFlavor) {
+          MarkdownCommands.clearSelection(
+            node as Parameters<(typeof MarkdownCommands)['clearSelection']>[0]
+          );
+        } else {
+          TextCommands.clearSelection(
+            node as Parameters<(typeof TextCommands)['clearSelection']>[0]
+          );
+        }
+      },
+      measure: (callback) => nativeRef.current?.measure(callback),
+      measureInWindow: (callback) =>
+        nativeRef.current?.measureInWindow(callback),
+      measureLayout: (relativeToNativeNode, onSuccess, onFail) =>
+        nativeRef.current?.measureLayout(
+          relativeToNativeNode,
+          onSuccess,
+          onFail
+        ),
+    }),
+    [isGithubFlavor]
+  );
+
   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 +402,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,8 +447,13 @@ export const EnrichedMarkdownText = ({
         pluralLabels,
         copyImageUrl.label
       ),
+      copyEnabled: copy.enabled,
+      copyFormatMarkdown: copyFormat === 'markdown',
+      systemItemsNone: config?.systemItems === 'none',
+      codeBlockCopyButton: codeBlockCopyButton.enabled,
+      interceptCopy,
     };
-  }, [selectionMenuConfig]);
+  }, [selectionMenuConfig, interceptCopy]);
 
   const resolvedAccessibilityLabels = useMemo(
     () => resolveAccessibilityLabels(accessibilityLabels),
@@ -269,7 +466,13 @@ export const EnrichedMarkdownText = ({
     onLinkPress: handleLinkPress,
     onLinkLongPress: handleLinkLongPress,
     onTaskListItemPress: handleTaskListItemPress,
+    enableTaskListItemToggle,
+    onCopyPress: handleCopyPress,
+    onCopyRequest: handleCopyRequest,
+    emitSelectionChange: onSelectionChange != null,
+    onSelectionChange: handleSelectionChange,
     enableLinkPreview: onLinkLongPress == null && (enableLinkPreview ?? true),
+    linkLongPressSelects,
     selectable,
     md4cFlags: normalizedMd4cFlags,
     allowFontScaling,
@@ -280,6 +483,8 @@ export const EnrichedMarkdownText = ({
     spoilerOverlay,
     style: containerStyle,
     contextMenuItems: nativeContextMenuItems,
+    imageRequestHeaders: nativeImageRequestHeaders,
+    contextMenuHidden,
     selectionMenuConfig: normalizedSelectionMenuConfig,
     accessibilityLabels: resolvedAccessibilityLabels,
     onContextMenuItemPress: handleContextMenuItemPress,
@@ -291,11 +496,55 @@ export const EnrichedMarkdownText = ({
     ...rest,
   };
 
-  if (flavor === 'github') {
-    return <EnrichedMarkdownNativeComponent {...sharedProps} />;
+  const NativeComponent = isGithubFlavor
+    ? EnrichedMarkdownNativeComponent
+    : EnrichedMarkdownTextNativeComponent;
+
+  // Without decorations the native view is returned as-is (no wrapper, no
+  // layout events) so existing layouts are untouched.
+  if (!decorated) {
+    return (
+      <NativeComponent {...sharedProps} ref={nativeRef} onLayout={onLayout} />
+    );
   }
 
-  return <EnrichedMarkdownTextNativeComponent {...sharedProps} />;
+  return (
+    <View style={containerStyle} onLayout={onLayout}>
+      <NativeComponent
+        {...sharedProps}
+        ref={nativeRef}
+        style={undefined}
+        emitLinkLayout
+        onLinkLayout={handleLinkLayout}
+        onLayout={handleNativeLayout}
+      />
+      {linkLayout.map((info) => {
+        const decoration = renderLinkDecoration(info);
+        if (decoration == null) return null;
+        return (
+          <View
+            key={info.index}
+            pointerEvents="box-none"
+            style={[
+              styles.decoration,
+              {
+                left: nativeOffset.x + info.rect.x,
+                top: nativeOffset.y + info.rect.y,
+                width: info.rect.width,
+                height: info.rect.height,
+              },
+            ]}
+          >
+            {decoration}
+          </View>
+        );
+      })}
+    </View>
+  );
 };
 
+const styles = StyleSheet.create({
+  decoration: { position: 'absolute' },
+});
+
 export default EnrichedMarkdownText;

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,12 +176,18 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     borderRadius: 8,
     borderWidth: 1,
     padding: 16,
+    syntaxColors: { ...DEFAULT_CODE_BLOCK_SYNTAX_COLORS },
   },
   link: {
     fontFamily: '',
     color: normalizeColor('#2563EB')!,
     underline: true,
     backgroundColor: normalizeColor('transparent')!,
+    borderRadius: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    borderColor: normalizeColor('transparent')!,
+    borderWidth: 0,
   },
   linkVariants: [],
   strong: { fontFamily: '', fontWeight: 'bold', color: undefined },
@@ -158,7 +207,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 +241,8 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     borderRadius: 6,
     cellPaddingHorizontal: 12,
     cellPaddingVertical: 8,
+    horizontalOverflow: 0,
+    align: '' as const,
   },
   math: {
     fontSize: 20,
@@ -194,11 +253,13 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     marginBottom: 16,
     textAlign: 'center' as BlockTextAlign,
     fontWeight: 'normal',
+    glyphOverflow: 0,
   },
   inlineMath: {
     color: defaultTextColor,
     paddingVertical: 4,
     fontWeight: 'normal',
+    glyphOverflow: 0,
   },
   taskList: {
     checkedColor: Platform.select({
@@ -284,9 +345,17 @@ export const normalizeMarkdownStyle = (
         color: ((override.color ? normalizeColor(override.color) : null) ??
           linkBase.color) as string,
         underline: override.underline ?? linkBase.underline,
+        // Chip ("box") properties never inherit from the base link style.
         backgroundColor: (override.backgroundColor
           ? (normalizeColor(override.backgroundColor) ?? transparent)
           : transparent) as string,
+        borderRadius: override.borderRadius ?? 0,
+        paddingHorizontal: override.paddingHorizontal ?? 0,
+        paddingVertical: override.paddingVertical ?? 0,
+        borderColor: (override.borderColor
+          ? (normalizeColor(override.borderColor) ?? transparent)
+          : transparent) as string,
+        borderWidth: override.borderWidth ?? 0,
       };
     }
   );
@@ -298,6 +367,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 +381,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 });