react-native-enriched-markdown-scaffold 0.7.4-scaffold.7 → 0.7.4-scaffold.8

package/src/normalizeMarkdownTextInputStyle.ts

@@ -26,6 +26,7 @@ interface MathStyleInternal {
   paddingVertical: number;
   selectedBackgroundColor: ColorValue;
   selectedBorderColor: ColorValue;
+  fontWeight: string;
 }
 
 interface MathBlockStyleInternal extends MathStyleInternal {
@@ -76,6 +77,7 @@ const defaultMathInternal: MathStyleInternal = Object.freeze({
   paddingVertical: 0,
   selectedBackgroundColor: TRANSPARENT,
   selectedBorderColor: TRANSPARENT,
+  fontWeight: 'normal',
 });
 
 const defaultMathBlockInternal: MathBlockStyleInternal = Object.freeze({
@@ -89,6 +91,7 @@ const defaultMathBlockInternal: MathBlockStyleInternal = Object.freeze({
   paddingVertical: 8,
   selectedBackgroundColor: TRANSPARENT,
   selectedBorderColor: TRANSPARENT,
+  fontWeight: 'normal',
   marginTop: 8,
   marginBottom: 8,
   alignment: 'center',
@@ -152,6 +155,7 @@ function normalizeMathStyle(
       normalizeColor(style?.selectedBackgroundColor) ?? backgroundColor,
     selectedBorderColor:
       normalizeColor(style?.selectedBorderColor) ?? borderColor,
+    fontWeight: style?.fontWeight ?? fallback.fontWeight,
   };
 }
 
@@ -171,6 +175,7 @@ function normalizeMathBlockStyle(
     paddingVertical: fallback.paddingVertical,
     selectedBackgroundColor: baseInline.selectedBackgroundColor,
     selectedBorderColor: baseInline.selectedBorderColor,
+    fontWeight: baseInline.fontWeight,
   };
   const inheritedInline = normalizeMathStyle(style, merged);
   let alignment: 'left' | 'center' | 'right' = fallback.alignment;

package/src/types/MarkdownStyle.ts

@@ -155,6 +155,18 @@ interface MathStyle {
   marginTop?: number;
   marginBottom?: number;
   textAlign?: 'left' | 'center' | 'right';
+  /**
+   * Typeset the formula at bold weight.
+   *
+   * The native engine has no weight parameter and its glyph positions are
+   * already laid out when this applies, so `'bold'` is a SYNTHETIC embolden
+   * (a stroke on iOS, the platform's fake-bold on Android) rather than a
+   * switch to the bundled bold faces. That is deliberate: KaTeX's bold faces
+   * are up to 15% wider than the regular advances the layout reserved, so
+   * swapping them in would make glyphs collide.
+   * @default 'normal'
+   */
+  fontWeight?: 'bold' | 'normal';
 }
 
 interface InlineMathStyle {
@@ -167,6 +179,18 @@ interface InlineMathStyle {
    * @default 4
    */
   paddingVertical?: number;
+  /**
+   * Typeset the formula at bold weight.
+   *
+   * The native engine has no weight parameter and its glyph positions are
+   * already laid out when this applies, so `'bold'` is a SYNTHETIC embolden
+   * (a stroke on iOS, the platform's fake-bold on Android) rather than a
+   * switch to the bundled bold faces. That is deliberate: KaTeX's bold faces
+   * are up to 15% wider than the regular advances the layout reserved, so
+   * swapping them in would make glyphs collide.
+   * @default 'normal'
+   */
+  fontWeight?: 'bold' | 'normal';
 }
 
 interface SpoilerParticlesStyle {

package/src/types/MarkdownStyleInternal.ts

@@ -140,11 +140,13 @@ interface MathStyleInternal {
   marginTop: number;
   marginBottom: number;
   textAlign: BlockTextAlign;
+  fontWeight: string;
 }
 
 interface InlineMathStyleInternal {
   color: string;
   paddingVertical: number;
+  fontWeight: string;
 }
 
 interface SpoilerParticlesStyleInternal {

package/src/web/globalStyles.ts

@@ -8,6 +8,13 @@ const RULES: ReadonlyArray<readonly [id: string, css: string]> = [
     'enrm-selection-style',
     `.${ENRM_TEXT_CLASS} ::selection { background-color: var(${ENRM_SELECTION_BG_VAR}); }`,
   ],
+  // `fontWeight` for math is set on the span wrapping KaTeX's output, so the
+  // formula only picks it up by inheritance. `katex.css` opens `.katex` with
+  // the `font` shorthand, which resets `font-weight` — and a rule matching the
+  // element itself always beats a value inherited from an ancestor, inline
+  // style included. We do not load `katex.css` (MathML output needs no CSS),
+  // but a consumer may, so opt `.katex` back into inheriting.
+  ['enrm-katex-font-weight', '.katex { font-weight: inherit; }'],
 ];
 
 for (const [id, css] of RULES) {

package/src/web/styles.ts

@@ -333,7 +333,10 @@ function highlightStyle(style: MarkdownStyleInternal): CSSProperties {
 }
 
 function mathInlineStyle(style: MarkdownStyleInternal): CSSProperties {
-  return { color: style.inlineMath.color };
+  return {
+    color: style.inlineMath.color,
+    fontWeight: normalizeFontWeight(style.inlineMath.fontWeight),
+  };
 }
 
 function mathDisplayStyle(style: MarkdownStyleInternal): CSSProperties {
@@ -341,6 +344,7 @@ function mathDisplayStyle(style: MarkdownStyleInternal): CSSProperties {
   return {
     fontSize: math.fontSize,
     color: math.color,
+    fontWeight: normalizeFontWeight(math.fontWeight),
     backgroundColor: math.backgroundColor,
     padding: math.padding,
     marginTop: math.marginTop,