docs: htmlStyle for interactive examples components (#719)

# Summary

Provided an `htmlStyle` for the `EnrichedTextInput` and `EnrichedText`
components in the interactive examples. The internal default values
didn't look too well, so this `htmlStyle` provides colorings that match
the docs' style both in dark and light mode.

That makes the interactive examples' code not directly copiable, as
`htmlStyle` is not present there to reduce noise. Added a note
explaining that in the `your-first-editor` section.

Author: hejsztynx

docs/src/css/typography.css

@@ -171,6 +171,10 @@ code {
   border-bottom: 1px solid currentColor;
 }
 
+.eti-editor a {
+  border-bottom: none;
+}
+
 /* Sidebar */
 [class*='menu__list-item-collapsible'] a {
   font-family: var(--swm-title-font);

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);
@@ -73,6 +74,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,11 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        // The `htmlStyle` here is only there to make the rendered
+        // input match these docs' color palette, so don't worry
+        // about it here. If you want to learn more, see the
+        // "Styling the input" section.
+        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';
 
 // Detect "enriched://" URLs as links.
 const linkRegex = /enriched:\/\/\S+/g;
@@ -33,6 +34,7 @@ export default function App() {
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
+        htmlStyle={htmlStyle}
         placeholder="Type enriched://home, 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)}
       />
@@ -74,7 +76,10 @@ export default function App() {
         </Pressable>
       </View>
 
-      <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)