docs: htmlStyle for interactive examples components

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 you want to learn more, see
+[Styling the input](/core-functionalities/styling-the-input).
+
+:::
+
 <InteractiveExample src={FirstEditorSrc} component={FirstEditor} />

docs/src/css/typography.css

@@ -171,6 +171,10 @@ code {
   border-bottom: 1px solid var(--ifm-font-color-base);
 }
 
+.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,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)}
       />
@@ -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)

docs/src/examples/htmlStyle.ts

@@ -0,0 +1,78 @@
+import type {
+  HtmlStyle,
+  EnrichedTextHtmlStyle,
+} from 'react-native-enriched-html';
+
+// Shared htmlStyle for the interactive docs examples.
+//
+// The colors are tuned to read well in Docusaurus' light and dark modes. They
+// exist purely to make the rendered rich text match the docs' visual language
+//
+// It lives in its own file so the example sources stay focused on the API
+// being demonstrated.
+
+const TEXT = '#232736'; // body text inside code blocks
+const MUTED = '#5b6bb0'; // list markers, quote text
+const GREEN = '#57b495'; // checkboxes
+const LINK = '#2f6fd0'; // link / mention accent
+
+export const htmlStyle: HtmlStyle = {
+  h1: { fontSize: 30, bold: true },
+  h2: { fontSize: 26, bold: true },
+  h3: { fontSize: 22, bold: true },
+  h4: { fontSize: 19, bold: true },
+  h5: { fontSize: 17, bold: true },
+  h6: { fontSize: 15, bold: true },
+  blockquote: {
+    borderColor: '#919fcf',
+    borderWidth: 4,
+    gapWidth: 12,
+    color: MUTED,
+  },
+  codeblock: {
+    color: TEXT,
+    backgroundColor: '#e2e5ff',
+    borderRadius: 8,
+  },
+  code: {
+    color: '#782aeb',
+    backgroundColor: '#e8dafc',
+  },
+  a: {
+    color: '#38acdd',
+    textDecorationLine: 'underline',
+  },
+  mention: {
+    color: LINK,
+    backgroundColor: '#dbe7fb',
+    textDecorationLine: 'none',
+  },
+  ol: {
+    gapWidth: 8,
+    markerFontWeight: '600',
+    markerColor: MUTED,
+  },
+  ul: {
+    bulletColor: MUTED,
+    bulletSize: 5,
+    marginLeft: 4,
+    gapWidth: 8,
+  },
+  ulCheckbox: {
+    boxSize: 16,
+    boxColor: GREEN,
+  },
+};
+
+export const enrichedTextHtmlStyle: EnrichedTextHtmlStyle = {
+  ...htmlStyle,
+  a: {
+    ...htmlStyle.a,
+    pressColor: '#3b82f6',
+  },
+  mention: {
+    ...htmlStyle.mention,
+    pressColor: '#1d4fa0',
+    pressBackgroundColor: '#c2d8f7',
+  },
+};