software-mansion · kacperzolkiewski · Aug 10, 2026 · Aug 10, 2026 · Aug 10, 2026 · Aug 11, 2026
diff --git a/.maestro/enrichedInput/flows/custom_style_fonts_visual.yaml b/.maestro/enrichedInput/flows/custom_style_fonts_visual.yaml
@@ -0,0 +1,116 @@
+appId: swmansion.enriched.example
+---
+# Validates custom font size and font family on plain text, inline styles, and paragraph styles.
+- launchApp
+
+- tapOn:
+    id: 'toggle-screen-button'
+
+- tapOn:
+    id: 'editor-input'
+
+# Section 1: Plain text with custom fonts
+
+- tapOn:
+    id: 'toolbar-font-size'
+- tapOn:
+    id: 'font-size-24'
+- inputText: '24px plain'
+- tapOn:
+    id: 'toolbar-font-size'
+- tapOn:
+    id: 'font-size-clear'
+- inputText: ' '
+
+- tapOn:
+    id: 'toolbar-font-family'
+- tapOn:
+    id: 'font-family-Nunito-Bold'
+- inputText: 'Bold family'
+- tapOn:
+    id: 'toolbar-font-family'
+- tapOn:
+    id: 'font-family-clear'
+- inputText: ' '
+
+- tapOn:
+    id: 'toolbar-font-size'
+- tapOn:
+    id: 'font-size-32'
+- tapOn:
+    id: 'toolbar-font-family'
+- tapOn:
+    id: 'font-family-Courier'
+- inputText: '32 Courier'
+- tapOn:
+    id: 'toolbar-font-size'
+- tapOn:
+    id: 'font-size-clear'
+- tapOn:
+    id: 'toolbar-font-family'
+- tapOn:
+    id: 'font-family-clear'
+- inputText: ' '
+
+# Section 2: Inline styles + custom fonts
+
+- tapOn:
+    id: 'toolbar-bold'
+- tapOn:
+    id: 'toolbar-font-size'
+- tapOn:
+    id: 'font-size-20'
+- inputText: 'Bold 20px'
+- tapOn:
+    id: 'toolbar-bold'
+- tapOn:
+    id: 'toolbar-font-size'
+- tapOn:
+    id: 'font-size-clear'
+- inputText: ' '
+
+- tapOn:
+    id: 'toolbar-italic'
+- tapOn:
+    id: 'toolbar-font-family'
+- tapOn:
+    id: 'font-family-Nunito-Italic'
+- inputText: 'Italic family'
+- tapOn:
+    id: 'toolbar-italic'
+- tapOn:
+    id: 'toolbar-font-family'
+- tapOn:
+    id: 'font-family-clear'
+- inputText: ' '
+
+- tapOn:
+    id: 'toolbar-inline-code'
+- tapOn:
+    id: 'toolbar-font-family'
+- tapOn:
+    id: 'font-family-CascadiaCode-Bold'
+- inputText: 'Code bold'
+- tapOn:
+    id: 'toolbar-inline-code'
+- tapOn:
+    id: 'toolbar-font-family'
+- tapOn:
+    id: 'font-family-clear'
+- inputText: ' '
+- pressKey: Enter
+
+# Section 3: Paragraph styles + custom fonts
+
+- tapOn:
+    id: 'toolbar-quote'
+- tapOn:
+    id: 'toolbar-font-family'
+- tapOn:
+    id: 'font-family-CascadiaCode-Regular'
+- inputText: 'Quote code family'
+
+- runFlow:
+    file: '../subflows/capture_or_assert_screenshot.yaml'
+    env:
+      SCREENSHOT_NAME: 'custom_style_fonts'
diff --git a/.maestro/enrichedInput/screenshots/ios/custom_style_fonts.png b/.maestro/enrichedInput/screenshots/ios/custom_style_fonts.png
diff --git a/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_1.png b/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_1.png
diff --git a/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_2.png b/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_2.png
diff --git a/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_3.png b/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_3.png
diff --git a/.maestro/enrichedText/flows/custom_style_fonts_visual.yaml b/.maestro/enrichedText/flows/custom_style_fonts_visual.yaml
@@ -0,0 +1,29 @@
+appId: swmansion.enriched.example
+---
+# Validates that custom style fonts are displayed correctly
+- launchApp
+
+- tapOn:
+    id: 'toggle-screen-button'
+
+- tapOn:
+    id: 'toggle-enriched-text-screen-button'
+
+- runFlow:
+    file: '../subflows/set_enriched_text_value.yaml'
+    env:
+      VALUE: >
+        <html>
+          <p>Regular family</p>
+          <p><span style="font-size: 24px;">24px plain</span></p>
+          <p><span style="font-family: Nunito-Bold;">Bold family</span></p>
+          <p><span style="font-size: 32px; font-family: Courier;">32 Courier</span></p>
+          <p><b><span style="font-size: 20px;">Bold 20px</span></b> <i><span style="font-family: Nunito-Italic;">Italic family</span></i> <code><span style="font-family: CascadiaCode-Bold;">Code bold</span></code></p>
+          <h5><span style="font-size: 40px;">H5 40px</span></h5>
+          <blockquote><p><span style="font-family: CascadiaCode-Regular;">Quote code family</span></p></blockquote>
+        </html>
+
+- runFlow:
+    file: '../subflows/capture_or_assert_screenshot.yaml'
+    env:
+      SCREENSHOT_NAME: 'custom_style_fonts_visual'
diff --git a/.maestro/enrichedText/screenshots/ios/custom_style_fonts_visual.png b/.maestro/enrichedText/screenshots/ios/custom_style_fonts_visual.png
diff --git a/apps/example/src/components/FontFamilyPickerRow.tsx b/apps/example/src/components/FontFamilyPickerRow.tsx
@@ -0,0 +1,100 @@
+import { type FC } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text } from 'react-native';
+
+export interface FontFamilyOption {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  families: FontFamilyOption[];
+  activeFamily: string;
+  onSelectFamily: (family: string) => void;
+  onClear: () => void;
+}
+
+export const FontFamilyPickerRow: FC<Props> = ({
+  families,
+  activeFamily,
+  onSelectFamily,
+  onClear,
+}) => {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={styles.container}
+      contentContainerStyle={styles.content}
+    >
+      <Pressable
+        testID="font-family-clear"
+        style={styles.clearButton}
+        onPress={onClear}
+      >
+        <Text style={styles.clearText}>✕</Text>
+      </Pressable>
+      {families.map(({ label, value }) => {
+        const isActive = value === activeFamily;
+        return (
+          <Pressable
+            key={value}
+            testID={`font-family-${value}`}
+            onPress={() => onSelectFamily(value)}
+            style={[styles.familyButton, isActive && styles.familyButtonActive]}
+          >
+            <Text style={[styles.familyText, { fontFamily: value }]}>
+              {label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: 'rgba(0, 26, 114, 0.9)',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    gap: 8,
+  },
+  clearButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  clearText: {
+    color: 'white',
+    fontSize: 14,
+    lineHeight: 16,
+  },
+  familyButton: {
+    minWidth: 36,
+    height: 28,
+    paddingHorizontal: 8,
+    borderRadius: 14,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  familyButtonActive: {
+    backgroundColor: 'rgb(0, 26, 114)',
+    borderWidth: 2,
+    borderColor: 'white',
+  },
+  familyText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '600',
+    lineHeight: 16,
+  },
+});
diff --git a/apps/example/src/components/FontSizePickerRow.tsx b/apps/example/src/components/FontSizePickerRow.tsx
@@ -0,0 +1,93 @@
+import { type FC } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text } from 'react-native';
+
+interface Props {
+  sizes: number[];
+  activeSize: number;
+  onSelectSize: (size: number) => void;
+  onClear: () => void;
+}
+
+export const FontSizePickerRow: FC<Props> = ({
+  sizes,
+  activeSize,
+  onSelectSize,
+  onClear,
+}) => {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={styles.container}
+      contentContainerStyle={styles.content}
+    >
+      <Pressable
+        testID="font-size-clear"
+        style={styles.clearButton}
+        onPress={onClear}
+      >
+        <Text style={styles.clearText}>✕</Text>
+      </Pressable>
+      {sizes.map((size) => {
+        const isActive = size === activeSize;
+        return (
+          <Pressable
+            key={size}
+            testID={`font-size-${size}`}
+            onPress={() => onSelectSize(size)}
+            style={[styles.sizeButton, isActive && styles.sizeButtonActive]}
+          >
+            <Text style={styles.sizeText}>{size}</Text>
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: 'rgba(0, 26, 114, 0.9)',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    gap: 8,
+  },
+  clearButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  clearText: {
+    color: 'white',
+    fontSize: 14,
+    lineHeight: 16,
+  },
+  sizeButton: {
+    minWidth: 36,
+    height: 28,
+    paddingHorizontal: 8,
+    borderRadius: 14,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sizeButtonActive: {
+    backgroundColor: 'rgb(0, 26, 114)',
+    borderWidth: 2,
+    borderColor: 'white',
+  },
+  sizeText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '600',
+    lineHeight: 16,
+  },
+});