feat: htmlStyle for interactive examples components

Author: hejsztynx

docs/docs/fundamentals/your-first-editor.mdx

@@ -198,4 +198,13 @@ Here's that editor running live on this page. Select some text and hit **Bold**
 notice the button turns green whenever the cursor sits on bold text. Switch to
 the **Code** tab to see the exact source.
 
+:::note
+
+The `htmlStyle` you'll spot in the Code tab is only there to make the rendered
+text match these docs' color palette, so
+don't worry about it here. If want to learn more, see
+[Styling the input](/core-functionalities/styling-the-input).
+
+:::
+
 <InteractiveExample src={FirstEditorSrc} component={FirstEditor} />

docs/src/examples/BasicStylesEditor.tsx

@@ -5,6 +5,7 @@ import type {
 } from 'react-native-enriched-html';
 import { useRef, useState } from 'react';
 import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { htmlStyle } from './htmlStyle';
 
 export default function App() {
   const ref = useRef<EnrichedTextInputInstance>(null);
@@ -71,6 +72,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         placeholder="Type something here..."
         onChangeState={e => setState(e.nativeEvent)}
       />

docs/src/examples/FirstEditor.tsx

@@ -5,6 +5,7 @@ import type {
 } from 'react-native-enriched-html';
 import { useRef, useState } from 'react';
 import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { htmlStyle } from './htmlStyle';
 
 export default function App() {
   const ref = useRef<EnrichedTextInputInstance>(null);
@@ -15,6 +16,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         placeholder="Type something here..."
         onChangeState={e => setState(e.nativeEvent)}
       />

docs/src/examples/ImagesEditor.tsx

@@ -2,6 +2,7 @@ import { EnrichedTextInput } from 'react-native-enriched-html';
 import type { EnrichedTextInputInstance } from 'react-native-enriched-html';
 import { useRef } from 'react';
 import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { htmlStyle } from './htmlStyle';
 
 export default function App() {
   const ref = useRef<EnrichedTextInputInstance>(null);
@@ -23,6 +24,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         placeholder="Place the cursor, then insert an image below..."
       />
       <View style={styles.row}>

docs/src/examples/LinksEditor.tsx

@@ -5,6 +5,7 @@ import type {
 } from 'react-native-enriched-html';
 import { useRef, useState } from 'react';
 import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { htmlStyle } from './htmlStyle';
 
 // Autolink any "issue-123" style token.
 const linkRegex = /issue-\d+/g;
@@ -33,6 +34,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         placeholder="Type issue-123, or select text below..."
         linkRegex={linkRegex}
         onChangeSelection={e => setSelection(e.nativeEvent)}

docs/src/examples/ListsEditor.tsx

@@ -5,6 +5,7 @@ import type {
 } from 'react-native-enriched-html';
 import { useRef, useState } from 'react';
 import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { htmlStyle } from './htmlStyle';
 
 export default function App() {
   const ref = useRef<EnrichedTextInputInstance>(null);
@@ -52,6 +53,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         placeholder="Type a few lines, then turn them into a list..."
         onChangeState={e => setState(e.nativeEvent)}
       />

docs/src/examples/MentionEditor.tsx

@@ -2,6 +2,7 @@ import { EnrichedTextInput } from 'react-native-enriched-html';
 import type { EnrichedTextInputInstance } from 'react-native-enriched-html';
 import { useRef } from 'react';
 import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { htmlStyle } from './htmlStyle';
 
 const user = { id: '1', name: 'John' };
 
@@ -18,6 +19,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         placeholder="Type '@', then tap the button below..."
       />
       <Pressable style={styles.button} onPress={insertMention}>

docs/src/examples/RenderingEditor.tsx

@@ -5,6 +5,7 @@ import type {
 } from 'react-native-enriched-html';
 import { useRef, useState } from 'react';
 import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { htmlStyle, enrichedTextHtmlStyle } from './htmlStyle';
 
 export default function App() {
   const ref = useRef<EnrichedTextInputInstance>(null);
@@ -43,6 +44,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         placeholder="Type something here..."
         onChangeState={e => setState(e.nativeEvent)}
       />
@@ -72,7 +74,10 @@ export default function App() {
         <Text style={styles.renderText}>Render ↓</Text>
       </Pressable>
 
-      <EnrichedText style={styles.viewer} selectable>
+      <EnrichedText
+        style={styles.viewer}
+        htmlStyle={enrichedTextHtmlStyle}
+        selectable>
         {html}
       </EnrichedText>
     </View>

docs/src/examples/TextAlignmentEditor.tsx

@@ -5,6 +5,7 @@ import type {
 } from 'react-native-enriched-html';
 import { useRef, useState } from 'react';
 import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { htmlStyle } from './htmlStyle';
 
 const alignments = ['left', 'center', 'right', 'justify'] as const;
 
@@ -32,6 +33,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         placeholder="Type a paragraph, then align it below..."
         onChangeState={e => setState(e.nativeEvent)}
       />

docs/src/examples/TextShortcutsEditor.tsx

@@ -2,6 +2,7 @@ import { EnrichedTextInput } from 'react-native-enriched-html';
 import type { EnrichedTextInputInstance } from 'react-native-enriched-html';
 import { useRef } from 'react';
 import { View, StyleSheet } from 'react-native';
+import { htmlStyle } from './htmlStyle';
 
 export default function App() {
   const ref = useRef<EnrichedTextInputInstance>(null);
@@ -11,6 +12,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         // Two shortcuts, one of each kind:
         // - '# ' at the start of a paragraph turns the line into an H1 (paragraph style)
         // - '**text**' wraps the delimited text in bold (inline style)