enriched-text-input 1.0.4 → 1.0.5

package/API_REFERENCE.md

@@ -1 +1,119 @@
-# API Reference
+# API Reference
+
+## Props
+
+### `ref`
+
+A React ref that lets you call any ref methods on the input.
+
+### `patterns`
+
+An array of style patterns for the input. Use this prop to define which styles should be available for the input to use. 
+
+```jsx
+interface Pattern {
+    name: string;
+    render: React.Component;
+    opening: string | null;
+    closing: string | null;
+}
+```
+
+A pattern can have either both opening and closing enclosures defined or just the opening enclosure, but cannot have only the closing enclosure defined. 
+
+### `defaultValue`
+
+Provides an initial value for the input. Can be a string or an array of tokens. If it’s a string and it matches any style defined in the `patterns` prop, proper styles will be applied. 
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+### `onValueChange`
+
+Callback that is called when the text input's value changes. You can use this callback to call ref methods such as `.getRawValue()`, `.getRichTextValue()` or `.getTokenizedValue()` to get the text input’s value in your preferred 
+
+### `onDebounceValueChange`
+
+Same as `onValueChange` but with an applied debouncing effect.
+
+## Ref methods
+
+### `.setValue()`
+
+```jsx
+setValue: (value: string | Tokens[]) => void;
+```
+
+Sets the value of the input.
+
+- `value: string | Tokens[]` - the value to set the input. If it’s a valid rich text string, the corresponding styling will be applied.
+
+### `.setSelection()`
+
+```jsx
+setSelection: (start: number, end: number) => void;
+```
+
+Sets the selection of the input.
+
+- `start: number` - the start index of the input’s selection.
+- `end: number` - the end index of the input’s selection.
+
+### `.focus()`
+
+```jsx
+focus: () => void;
+```
+
+Focuses the input;
+
+### `.blur()`
+
+```jsx
+blur: () => void;
+```
+
+Blurs the input.
+
+### `.toggleStyle()`
+
+```jsx
+toggleStyle: (style: string) => void;
+```
+
+Toggles a style at the cursor’s position.
+
+- `style: string` - the name of a pattern to toggle.
+
+### `.getActiveStyle()`
+
+```jsx
+getActiveStyle: () => string[] | [];
+```
+
+Returns the active styles for the current selection.
+
+### `.getRawValue()`
+
+```jsx
+getRawValue: () => string;
+```
+
+Returns the input’s value as a raw string without rich text enclosures.
+
+### `.getRichTextValue()`
+
+```jsx
+getRichTextValue: () => string;
+```
+
+Returns the text input’s value as a rich text string matching the patterns for each style defined in the patterns prop. If a style does not define an opening and closing char, it is ignored.
+
+### `.getTokenizedValue()`
+
+```jsx
+getTokenizedValue: () => Tokens[];
+```
+
+Returns the text input's value as an array of tokens.

package/CONTRIBUTING.md

@@ -0,0 +1,33 @@
+# Contributing
+
+## Clone this repo
+
+1. Fork and clone your Github froked repo:
+```
+git clone https://github.com/<github_username>/enriched-text-input.git
+```
+
+2. Go to cloned repo directory:
+```
+cd enriched-text-input
+```
+
+## Install dependencies
+
+1. Install the dependencies in the root of the repo:
+```
+npm install
+```
+
+2. Go to the example project and install dependencies:
+```
+cd example && npm install
+```
+
+3. After that you can start the project with:
+```
+cd example && npm start
+```
+
+## Create a pull request
+After making any changes, open a pull request. Once you submit your pull request, it will get reviewed.

package/README.md

@@ -1,37 +1,36 @@
-[![plastic](https://dcbadge.limes.pink/api/server/https://discord.gg/DRmNp34bFE?bot=true&style=plastic)](https://discord.gg/DRmNp34bFE)
-
 # enriched-text-input
 
 > [!Note]
-> This library is still a work in progress. Expect breaking changes.
+This library is still a work in progress. Expect breaking changes.
+> 
 
-Proof of concept for a JavaScript only rich-text TextInput component for React Native.
-The main idea is to render `<Text>` views as children of `<TextInput>`.
-It will only support text styling since it's not possible to render images inside `Text` views in React Native. [Try it on Expo Snack](https://snack.expo.dev/@patosala/enriched-text-input).
+Proof of concept for a JavaScript only rich-text TextInput component for React Native. The main idea is to render `<Text>` views as children of `<TextInput>`. It will only support text styling since it's not possible to render images inside `Text` views in React Native. [Try it on Expo Snack](https://snack.expo.dev/@patosala/enriched-text-input).
 
 ## Motivation
+
 The field for rich-text in react native is still a bit green. Current libraries that add support for rich-text in react native applications are either WebViews wrapping libraries for the web, limiting customization, or require native code which drops support for Expo Go and react-native-web.
 
-In theory, by only using JavaScript we are able to provide better cross-platform compatibility and the possibility to style elements however you want as long as they follow react-native's `Text` supported styles.
+In theory, by only using JavaScript we are able to provide better cross-platform compatibility and the possibility to style elements however you want as long as they follow react-native's `Text` supported styles.
 
 ## Installation
-```
+
+```bash
 npm install enriched-text-input
 ```
 
 ## Usage
-```js
+
+```jsx
 import { useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
-
-import { RichTextInput, Toolbar } from 'enriched-text-input';
+import { EnrichedTextInput, Toolbar } from 'enriched-text-input';
 
 export default function App() {
   const richTextInputRef = useRef(null);
 
   return (
     <View style={styles.container}>
-      <RichTextInput ref={richTextInputRef}/>
+      <EnrichedTextInput ref={richTextInputRef}/>
       <Toolbar richTextInputRef={richTextInputRef}>
         <Toolbar.Bold />
         <Toolbar.Italic />
@@ -54,50 +53,58 @@ const styles = StyleSheet.create({
 ```
 
 ## Current state
-At the moment [1/1/2026] `enriched-text-input` works great for things such as small rich-text inputs (Eg. an input for a messaging app with rich-text support) but not for creating whole rich-text editors. This is because inline styles that do not break line are working as expected (Eg. bold, italic or underline work great but styles such as headings break line so they are currently not supported).
 
-Live parsing of rich text symbols (such as wrapping words in asterisks `*`) is still a work in progress an not working correctly but you can toggle styles through the ref api of the `EnrichedTextInput` (or use the provided `Toolbar` component as shown in the example usage).
+At the moment [1/1/2026] `enriched-text-input` works great for things such as small rich-text inputs (Eg. an input for a messaging app with rich-text support) but not for creating whole rich-text editors. This is because inline styles that do not break line are working as expected (Eg. bold, italic or underline work great but styles such as headings break line so they are currently not yet supported).
+
+Live parsing of rich text symbols (such as wrapping words in asterisks `*`) is still a work in progress an not working correctly but you can toggle styles through the ref api of the `EnrichedTextInput` (or use the provided `Toolbar`component as shown in the example usage).
 
 ## Features
 
-- [x] Basic text formatting (__bold__, _italic_, underline, ~~strikethrough~~ and `inline code`).
-- [ ] Rich text format parsing.
-- [ ] Links and mentions.
-- [x] Custom styling.
-- [x] Custom rich text patterns.
-- [ ] Exposed event handlers (onSubmit, onChange, onBlur, onFocus, etc).
-- [ ] Custom methods and event handlers (setValue, onStartMention, onStyleChange, etc).
-- [ ] Headings.
+- [x]  Inline markdown styles (**bold**, *italic*, underline, ~~strikethrough~~ and `inline code`).
+- [ ]  Paragraph styles (headings, lists, quotes, etc).
+- [ ]  Live rich-text parsing.
+- [ ]  Links and mentions.
+- [x]  Custom inline styles.
+- [x]  Custom methods and event handlers (setValue, onStartMention, onStyleChange, etc).
 
-## Known limitations
-- Inline images.
-- Only `Text`component styles are supported.
+## API Reference
 
-## Contributing
+[API Reference](https://github.com/PatoSala/enriched-text-input/blob/main/API_REFERENCE.md)
 
-### Clone this repo
+## Style patterns
 
-1. Fork and clone your Github froked repo:
-```
-git clone https://github.com/<github_username>/react-native-rich-text.git
-```
+Style patterns are the styles that you provide the input with for it to know how it should display certain portions of the text. You can check their structure in the [API reference](https://github.com/PatoSala/enriched-text-input/blob/main/API_REFERENCE.md#stylePatterns). 
 
-2. Go to cloned repo directory:
-```
-cd react-native-rich-text
-```
+By default `enriched-text-input` uses a set of markdown styles (such as **bold**, *italic*, underline, ~~strikethrough~~ and `inline code`) for you to use out of the box, but you can provide your own custom styles through the `stylePatterns` prop. Keep in mind that when using this prop `enriched-text-input` will ignore any default style patterns so that only the ones you provided will be valid.
 
-### Install dependencies
+If you want you can provide `enriched-text-input` with both default style patterns and any additional style patterns you define:
 
-1. Install the dependencies in the root of the repo:
-```
-npm install
-```
+```bash
+import { EnrichedTextInput, markdownStyles } from "enriched-text-input";
 
-3. After that you can start the project with:
-```
-npm start
+const customStyles = [
+	{
+		name: "comment",
+		opening: null,
+		closing: null,
+		render: Comment
+	}
+];
+
+<EnrichedTextInput
+	stylePattrns={[...markdownStyles, ...customStyles]}
+/>
 ```
 
-## Create a pull request
-After making any changes, open a pull request. Once you submit your pull request, it will get reviewed.
+## Applying styles
+
+To apply styles you can either toggle them using the `ref` method `.toggleStyle()` which accepts as a parameter the name of a style pattern, or you can use rich-text enclosures while typing. This enclosures are defined within the `stylePatterns` prop and corresponding styles will get applied when a matching pattern is found inside the input. 
+
+## Known limitations
+
+- Inline images.
+- Only `Text` component styles are supported.
+
+## Contributing
+
+[Contributing guide](https://github.com/PatoSala/enriched-text-input/blob/main/CONTRIBUTING.md)

package/example/App.tsx

@@ -1,21 +1,8 @@
 import { useRef, useState } from 'react';
-import { StyleSheet, View, KeyboardAvoidingView, Text, TouchableOpacity, Button, TextInput } from 'react-native';
-import { FontAwesome6 } from '@expo/vector-icons';
-import { RichTextInput, Toolbar, PATTERNS } from 'enriched-text-input';
+import { StyleSheet, View, KeyboardAvoidingView, Text, Button, TextInput } from 'react-native';
+import { EnrichedTextInput, Toolbar, markdownStyles } from 'enriched-text-input';
 import * as Clipboard from 'expo-clipboard';
 
-function Comment({ children }) {
-  return (
-    <Text style={{
-      backgroundColor: "rgba(255, 203, 0, .12)",
-      textDecorationLine: "underline",
-      textDecorationColor: "rgba(255, 203, 0, .35)",
-    }}>
-      {children}
-    </Text>
-  )
-}
-
 export default function App() {
   const [rawValue, setRawValue] = useState("");
   const [richTextStringValue, setRichTextStringValue] = useState("");
@@ -23,17 +10,8 @@ export default function App() {
   console.log("ACTIVE STYLES:", activeStyles);
   const richTextInputRef = useRef(null);
 
-  const customPatterns = [
-    ...PATTERNS,
-    { style: "comment", regex: null, render: Comment }
-  ];
-
-  const handleComment = () => {
-    richTextInputRef.current?.toggleStyle("comment");
-  }
-
   const handleGetRichText = () => {
-    const richText = richTextInputRef.current?.getRichTextString();
+    const richText = richTextInputRef.current?.getRichTextValue();
 
     setRichTextStringValue(richText);
   }
@@ -57,11 +35,10 @@ export default function App() {
           onPress={() => richTextInputRef.current?.setValue(rawValue)}
         />
 
-        <RichTextInput
+        <EnrichedTextInput
           ref={richTextInputRef}
-          patterns={customPatterns}
-          autoComplete="off"
           placeholder="Rich text"
+          onValueChange={() => console.log("VALUE CHANGE", richTextInputRef.current?.getRichTextValue())}
           multiline={true}
         />
         <Button

package/index.ts

@@ -1,4 +1,5 @@
-import RichTextInput, { PATTERNS } from "./src/RichTextInput";
+import EnrichedTextInput from "./src/EnrichedTextInput";
+import { markdownStyles } from "./src/markdownStyles";
 import Toolbar from "./src/Toolbar";
 
-export { RichTextInput, PATTERNS, Toolbar };
+export { EnrichedTextInput, markdownStyles, Toolbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "enriched-text-input",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "JavaScript only rich text input component for React Native. Compatible with Expo Go.",
   "keywords": [
     "rich-text",

package/src/{RichTextInput.tsx → EnrichedTextInput.tsx}

@@ -1,5 +1,6 @@
 import { useState, useImperativeHandle, useRef, useEffect, JSX } from "react";
 import { TextInput, Text, StyleSheet, View, TextInputProps } from "react-native";
+import { markdownStyles } from "./markdownStyles";
 
 interface Token {
     text: string;
@@ -34,9 +35,14 @@ interface Pattern {
     closing?: string;
 }
 
-interface RichTextInputProps {
+interface EnrichedTextInputProps {
     ref: any;
-    patterns?: Pattern[]
+    stylePatterns?: Pattern[];
+    placeholder?: string;
+    multiline?: boolean;
+    defaultValue?: string | Token[];
+    onValueChange?: () => void;
+    onSelectionChange?: () => void;
 }
 
 /**
@@ -45,16 +51,7 @@ interface RichTextInputProps {
  * If just opening is defined, we look for a match that looks like {opening}{content}.
  * Closing can not be defined if opening is not defined.
  */
-export const PATTERNS : Pattern[] = [
-  { style: "bold", regex: "\\*([^*]+)\\*", render: Bold, opening: "*", closing: "*" },
-  { style: "italic", regex: "_([^_]+)_", render: Italic, opening: "_", closing: "_" },
-  { style: "lineThrough", regex: "~([^~]+)~", render: Strikethrough, opening: "~", closing: "~" },
-  { style: "code", regex: "`([^`]+)`", render: Code, opening: "`", closing: "`" },
-  { style: "underline", regex: "__([^_]+)__", render: Underline, opening: "__", closing: "__" },
-  { style: "heading", regex: null, render: Heading, opening: "#", closing: null },
-  { style: "subHeading", regex: null, render: SubHeading, opening: "##", closing: null },
-  { style: "subSubHeading", regex: null, render: SubSubHeading, opening: "###", closing: null }
-];
+export const defaultStylePatterns : Pattern[] = markdownStyles;
 
 function insertAt(str, index, substring) {
   // Clamp index into valid boundaries
@@ -82,7 +79,7 @@ function findTokens(
 ) {
     
     if (end) {
-        // Search for all tokens between start and end
+        // To-do: search for all tokens between start and end
         return { result: null };
     }
 
@@ -143,6 +140,11 @@ function findMatchV2(str: string, patterns: Pattern[]) : RichTextMatch | null {
 
 /**
  * If prev token contains new annotation, negate prev. Else, use new annotation.
+ * 
+ * @example
+ * prev: { bold: true }
+ * new: { bold: false }
+ * result: { bold: false }
  */
 function concileAnnotations(prevAnnotations, newAnnotations) {
   let updatedAnnotations = { ...prevAnnotations };
@@ -180,6 +182,7 @@ function diffStrings(prev, next) : Diff {
 }
 
 /** 
+ * [Needs refactoring]
  * Parse rich text string into tokens.
  */
 const parseRichTextString = (richTextString: string, patterns: Pattern[], initialTokens?: Token[])
@@ -224,6 +227,13 @@ const parseRichTextString = (richTextString: string, patterns: Pattern[], initia
 
 /**
  * Parse tokens into rich text string.
+ * To-do: Find a way to group consequitive tokens with a same annotation inside one single
+ * wrapper.
+ * 
+ * @example
+ * Tokens: [{ text: "Hello", annotations: { bold: true } }, { text: "World", annotations: { bold: true, italic: true } }]
+ * Current output: *Hello* *_World_*
+ * Desired output: *Hello _World_*
  */
 const parseTokens = (tokens: Token[], patterns: Pattern[]) => {
     return tokens.map(token => {
@@ -430,6 +440,7 @@ const updateTokens = (tokens: Token[], diff: Diff) => {
          * Remove:
          * - For more than two tokens, works.
          * - For two tokens, does not work properly.
+         * (right now remove for more than two tokens works properly. Anyway, it might need better testing).
          */
         if (diff.removed.length > 0) {
             const firstToken = selectedTokens[0];
@@ -658,71 +669,15 @@ function Token(props: TokenProps) : JSX.Element {
     );
 }
 
-function Code({ children }) {
-    return (
-        <Text style={styles.code}>{children}</Text>
-    )
-}
-
-function Bold({ children }) {
-    return (
-        <Text style={styles.bold}>{children}</Text>
-    )
-}
-
-function Italic({ children }) {
-    return (
-        <Text style={styles.italic}>{children}</Text>
-    )
-}
-
-function Underline({ children }) {
-    return (
-        <Text style={styles.underline}>{children}</Text>
-    )
-}
-
-function Strikethrough({ children }) {
-    return (
-        <Text style={styles.lineThrough}>{children}</Text>
-    )
-}
-
-function UnderlineStrikethrough({ children }) {
-    return (
-        <Text style={styles.underlineLineThrough}>{children}</Text>
-    )
-}
-
-function Heading({ children }) {
-    return (
-        <Text style={styles.heading}>{children}</Text>
-    )
-}
-
-function SubHeading({ children }) {
-    return (
-        <Text style={styles.subHeading}>{children}</Text>
-    )
-}
-
-function SubSubHeading({ children }) {
-    return (
-        <Text style={styles.subSubHeading}>{children}</Text>
-    )
-}
-
-export default function RichTextInput(props: RichTextInputProps) {
+export default function EnrichedTextInput(props: EnrichedTextInputProps) {
     const {
         ref,
-        patterns = PATTERNS,
-        
-        /** TextInput props */
-        value,
+        stylePatterns = defaultStylePatterns,
+        placeholder,
+        multiline = false,
         defaultValue,
-        onChangeText,
         onSelectionChange,
-        ...rest
+        onValueChange,
     } = props;
 
     const inputRef = useRef<TextInput>(null);
@@ -750,8 +705,24 @@ export default function RichTextInput(props: RichTextInputProps) {
                 }
             }])
         }
+
+        onValueChange && onValueChange();
     }, [tokens]);
 
+    useEffect(( ) => {
+        if (defaultValue) {
+            if (Array.isArray(defaultValue)) {
+                // Maybe check if tokens structure is valid before setting.
+                setTokens(defaultValue);
+                return;
+            }
+            // To keep styles, parsing should be done before setting defaultValue
+            const { tokens, plain_text } = parseRichTextString(defaultValue, stylePatterns);
+            setTokens(tokens);
+            prevTextRef.current = plain_text;
+        }
+    }, []);
+
     /**
      * Prev text should not contain matching rich text formats.
      * Those should be spliced once the corresponding tokens are created.
@@ -780,7 +751,7 @@ export default function RichTextInput(props: RichTextInputProps) {
     const handleOnChangeText = (nextText: string) => {
         const diff = diffStrings(prevTextRef.current, nextText);
 
-       const match = findMatchV2(nextText, patterns);
+       const match = findMatchV2(nextText, stylePatterns);
        /* console.log("MATCH:", match); */
 
         // Note: refactor to use new parseRichText function instead of regex
@@ -841,7 +812,7 @@ export default function RichTextInput(props: RichTextInputProps) {
                 return;
             }
             // To keep styles, parsing should be done before setting value
-            const { tokens, plain_text } = parseRichTextString(value, patterns);
+            const { tokens, plain_text } = parseRichTextString(value, stylePatterns);
             setTokens(tokens);
             prevTextRef.current = plain_text;
         },
@@ -865,13 +836,16 @@ export default function RichTextInput(props: RichTextInputProps) {
          * for each style defined in the patterns prop. If a style does not define an
          * opening and closing char, it is ignored.
          */
-        getRichTextString() {
-            return parseTokens(tokens, patterns);
+        getRawValue() {
+            return tokens.map(t => t.text).join("");
+        },
+        getRichTextValue() {
+            return parseTokens(tokens, stylePatterns);
         },
         /**
-         * Returns the TextInput's value as an array of tokens with annotations.
+         * Returns the text input's value as an array of tokens.
          */
-        getTokenizedString() : Token[] {
+        getTokenizedValue() : Token[] {
             return tokens;
         },
         /** 
@@ -915,12 +889,13 @@ export default function RichTextInput(props: RichTextInputProps) {
             <TextInput
                 ref={inputRef}
                 style={styles.textInput}
+                placeholder={placeholder}
+                multiline={multiline}
                 onSelectionChange={handleSelectionChange}
                 onChangeText={handleOnChangeText}
-                {...rest}
             >
                 <Text style={styles.text}>
-                    {tokens.map((token, i) => <Token key={i} token={token} patterns={patterns}/>)}
+                    {tokens.map((token, i) => <Token key={i} token={token} patterns={stylePatterns}/>)}
                 </Text>
             </TextInput>
        </View>
@@ -936,53 +911,5 @@ const styles = StyleSheet.create({
     },
     text: {
         color: "black",
-    },
-    bold: {
-        fontWeight: 'bold',
-    },
-    italic: {
-        fontStyle: "italic"
-    },
-    lineThrough: {
-        textDecorationLine: "line-through"
-    },
-    underline: {
-        textDecorationLine: "underline",
-    },
-    underlineLineThrough: {
-        textDecorationLine: "underline line-through"
-    },
-    codeContainer: {
-        backgroundColor: "lightgray",
-        paddingHorizontal: 4,
-        borderRadius: 4,
-        height: 24,
-        position: "absolute",
-        top: 10
-    },
-    code: {
-        fontFamily: "ui-monospace",
-        color: "#EB5757",
-        fontSize: 20,
-        backgroundColor: "rgba(135, 131, 120, .15)"
-    },
-    highlight: {
-        width: "100%",
-        position: "absolute",
-        padding: 20,
-        height: 24,
-        backgroundColor: "blue"
-    },
-    heading: {
-        fontSize: 32,
-        fontWeight: "bold"
-    },
-    subHeading: {
-        fontSize: 28,
-        fontWeight: "bold"
-    },
-    subSubHeading: {
-        fontSize: 24,
-        fontWeight: "bold"
     }
 });

package/src/components/StyledText.tsx

@@ -0,0 +1,106 @@
+import { Text, StyleSheet } from "react-native";
+
+export function Code({ children }) {
+    return (
+        <Text style={styles.code}>{children}</Text>
+    )
+}
+
+export function Bold({ children }) {
+    return (
+        <Text style={styles.bold}>{children}</Text>
+    )
+}
+
+export function Italic({ children }) {
+    return (
+        <Text style={styles.italic}>{children}</Text>
+    )
+}
+
+export function Underline({ children }) {
+    return (
+        <Text style={styles.underline}>{children}</Text>
+    )
+}
+
+export function Strikethrough({ children }) {
+    return (
+        <Text style={styles.lineThrough}>{children}</Text>
+    )
+}
+
+export function UnderlineStrikethrough({ children }) {
+    return (
+        <Text style={styles.underlineLineThrough}>{children}</Text>
+    )
+}
+
+export function Heading({ children }) {
+    return (
+        <Text style={styles.heading}>{children}</Text>
+    )
+}
+
+export function SubHeading({ children }) {
+    return (
+        <Text style={styles.subHeading}>{children}</Text>
+    )
+}
+
+export function SubSubHeading({ children }) {
+    return (
+        <Text style={styles.subSubHeading}>{children}</Text>
+    )
+}
+
+const styles = StyleSheet.create({
+    bold: {
+        fontWeight: 'bold',
+    },
+    italic: {
+        fontStyle: "italic"
+    },
+    lineThrough: {
+        textDecorationLine: "line-through"
+    },
+    underline: {
+        textDecorationLine: "underline",
+    },
+    underlineLineThrough: {
+        textDecorationLine: "underline line-through"
+    },
+    codeContainer: {
+        backgroundColor: "lightgray",
+        paddingHorizontal: 4,
+        borderRadius: 4,
+        height: 24,
+        position: "absolute",
+        top: 10
+    },
+    code: {
+        fontFamily: "ui-monospace",
+        color: "#EB5757",
+        fontSize: 20,
+        backgroundColor: "rgba(135, 131, 120, .15)"
+    },
+    highlight: {
+        width: "100%",
+        position: "absolute",
+        padding: 20,
+        height: 24,
+        backgroundColor: "blue"
+    },
+    heading: {
+        fontSize: 32,
+        fontWeight: "bold"
+    },
+    subHeading: {
+        fontSize: 28,
+        fontWeight: "bold"
+    },
+    subSubHeading: {
+        fontSize: 24,
+        fontWeight: "bold"
+    }
+});

package/src/markdownStyles.ts

@@ -0,0 +1,12 @@
+import { Bold, Code, Heading, Italic, SubHeading, SubSubHeading, Strikethrough, Underline } from "./components/StyledText";
+
+export const markdownStyles = [
+  { style: "bold", regex: "\\*([^*]+)\\*", render: Bold, opening: "*", closing: "*" },
+  { style: "italic", regex: "_([^_]+)_", render: Italic, opening: "_", closing: "_" },
+  { style: "lineThrough", regex: "~([^~]+)~", render: Strikethrough, opening: "~", closing: "~" },
+  { style: "code", regex: "`([^`]+)`", render: Code, opening: "`", closing: "`" },
+  { style: "underline", regex: "__([^_]+)__", render: Underline, opening: "__", closing: "__" },
+  { style: "heading", regex: null, render: Heading, opening: "#", closing: null },
+  { style: "subHeading", regex: null, render: SubHeading, opening: "##", closing: null },
+  { style: "subSubHeading", regex: null, render: SubSubHeading, opening: "###", closing: null }
+];