enriched-text-input 1.0.2 → 1.0.4

package/API_REFERENCE.md

@@ -0,0 +1 @@
+# API Reference

package/README.md

@@ -14,21 +14,6 @@ The field for rich-text in react native is still a bit green. Current libraries
 
 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.
 
-## Features
-
-- [x] Basic text formatting (__bold__, _italic_, underline, ~~strikethrough~~ and `codeblocks`).
-- [x] Rich text format parsing.
-- [ ] Links and mentions.
-- [ ] Custom styling.
-- [ ] Custom rich text patterns.
-- [ ] Exposed event handlers (onSubmit, onChange, onBlur, onFocus, etc).
-- [ ] Custom methods and event handlers (setValue, onStartMention, onStyleChange, etc).
-- [ ] Headings.
-
-## Known limitations
-- Inline images.
-- Only `Text`component styles are supported.
-
 ## Installation
 ```
 npm install enriched-text-input
@@ -66,9 +51,27 @@ const styles = StyleSheet.create({
     paddingTop: 120
   },
 });
+```
 
+## 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).
+
+## 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.
+
+## Known limitations
+- Inline images.
+- Only `Text`component styles are supported.
 
 ## Contributing
 

package/example/App.tsx

@@ -1,23 +1,100 @@
-import { useRef } from 'react';
-import { StyleSheet, View } from 'react-native';
+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 * as Clipboard from 'expo-clipboard';
 
-import { RichTextInput, Toolbar } from 'enriched-text-input';
+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("");
+  const [activeStyles, setActiveStyles] = useState([]);
+  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();
+
+    setRichTextStringValue(richText);
+  }
+
+  const handleCopyToClipboard = async (text: string) => {
+    await Clipboard.setStringAsync(text);
+  }
+
   return (
-    <View style={styles.container}>
-      <RichTextInput ref={richTextInputRef}/>
-      <Toolbar richTextInputRef={richTextInputRef}>
-        <Toolbar.Bold />
-        <Toolbar.Italic />
-        <Toolbar.Underline />
-        <Toolbar.Strikethrough />
-        <Toolbar.Code />
-        <Toolbar.Keyboard />
-      </Toolbar>
-    </View>
+    <KeyboardAvoidingView style={styles.container} behavior="padding">
+      <View style={{ flex: 1 }}>
+        <TextInput
+          multiline
+          style={{ fontSize: 20, padding: 16 }}
+          value={rawValue}
+          onChangeText={(text) => setRawValue(text)}
+          placeholder='Raw text'
+        />
+        <Button
+          title='Set rich text string'
+          onPress={() => richTextInputRef.current?.setValue(rawValue)}
+        />
+
+        <RichTextInput
+          ref={richTextInputRef}
+          patterns={customPatterns}
+          autoComplete="off"
+          placeholder="Rich text"
+          multiline={true}
+        />
+        <Button
+          title='Get rich text string'
+          onPress={handleGetRichText}
+        />
+        <Text style={{ padding: 16, fontSize: 20, color: richTextStringValue ? "black" : "#b3b3b3" }}>{richTextStringValue ? richTextStringValue : "Get rich text output will appear here!"}</Text>
+
+        <View style={{ flexDirection: "row", justifyContent: "center"}}>
+          <Button
+            title='Clear'
+            onPress={() => setRichTextStringValue("")}
+          />
+          <Button
+            title='Copy'
+            onPress={() => handleCopyToClipboard(richTextStringValue)}
+          />
+        </View>
+      </View>
+      <View style={{ alignSelf: "end"}}>
+        <Toolbar richTextInputRef={richTextInputRef}>
+          <Toolbar.Bold/>
+          <Toolbar.Italic />
+          <Toolbar.Underline />
+          <Toolbar.Strikethrough />
+          <Toolbar.Code />
+          {/* <TouchableOpacity style={styles.toolbarButton} onPress={handleComment}>
+            <FontAwesome6 name="comment-alt" size={16} color="black" />
+          </TouchableOpacity> */}
+          <Toolbar.Keyboard />
+        </Toolbar>
+      </View>
+    </KeyboardAvoidingView>
   );
 }
 
@@ -27,4 +104,11 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     paddingTop: 120
   },
+  toolbarButton: {
+      height: 50,
+      width: 50,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+  }
 });

package/example/package.json

@@ -10,11 +10,12 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "enriched-text-input": "file:../",
     "expo": "~54.0.25",
+    "expo-clipboard": "~8.0.8",
     "expo-status-bar": "~3.0.8",
     "react": "19.1.0",
-    "react-native": "0.81.5",
-    "enriched-text-input": "file:../"
+    "react-native": "0.81.5"
   },
   "private": true,
   "devDependencies": {

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "enriched-text-input",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "JavaScript only rich text input component for React Native. Compatible with Expo Go.",
   "keywords": [
     "rich-text",
@@ -28,7 +28,8 @@
     "example"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "release": "release-it"
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
@@ -37,6 +38,7 @@
     "react-native": "0.81.5"
   },
   "devDependencies": {
-    "metro-react-native-babel-preset": "^0.77.0"
+    "metro-react-native-babel-preset": "^0.77.0",
+    "release-it": "^19.0.6"
   }
 }

package/src/RichTextInput.tsx

@@ -1,5 +1,5 @@
-import { useState, useImperativeHandle, useRef, useEffect } from "react";
-import { TextInput, Text, StyleSheet, View, Linking } from "react-native";
+import { useState, useImperativeHandle, useRef, useEffect, JSX } from "react";
+import { TextInput, Text, StyleSheet, View, TextInputProps } from "react-native";
 
 interface Token {
     text: string;
@@ -13,11 +13,7 @@ interface Diff {
 }
 
 interface Annotations {
-    bold: boolean;
-    italic: boolean;
-    lineThrough: boolean;
-    underline: boolean;
-    code: boolean;
+    [key: string]: boolean | string | null
 }
 
 interface RichTextMatch {
@@ -25,18 +21,39 @@ interface RichTextMatch {
     content: string;
     start: number;
     end: number;
+    pattern: Pattern;
+    /** @deprecated */
     expression: string;
 }
 
+interface Pattern {
+    regex: string;
+    style: string;
+    render: any;
+    opening?: string;
+    closing?: string;
+}
+
 interface RichTextInputProps {
-    ref: any
+    ref: any;
+    patterns?: Pattern[]
 }
-                        
-const PATTERNS = [
-  { style: "bold", regex: "\\*([^*]+)\\*", render: <Text style={{ fontWeight: "bold" }} /> },
-  { style: "italic", regex: "_([^_]+)_", render: <Text style={{ fontStyle: "italic" }} /> },
-  { style: "lineThrough", regex: "~([^~]+)~", render: <Text style={{ textDecorationLine: "line-through" }} /> },
-  { style: "code", regex: "`([^`]+)`", render: <Text style={{ fontFamily: "ui-monospace", backgroundColor: "lightgray", color: "red", paddingHorizontal: 6 }} /> },
+
+/**
+ * Note: maybe instead of using regex we could just define an "opening" and "closing" char.
+ * If both are defined we look for a match that looks like {opening}{content}{closing}.
+ * 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 }
 ];
 
 function insertAt(str, index, substring) {
@@ -55,66 +72,88 @@ function replaceAt(str, index, substring, length) {
   return str.slice(0, i) + substring + str.slice(i + length);
 }
 
-function findMatch(str: string, regexExpression: string) : RichTextMatch | null {
-  const regex = new RegExp(regexExpression);
-  const match = regex.exec(str);
-  return match
-    ? {
-        raw: match[0],
-        content: match[1],
-        start: match.index,
-        end: match.index + match[0].length,
-        expression: regexExpression
+function findTokens(
+    /** The tokens to search over. */
+    tokens: Token[],
+    /** start position of selection.*/
+    start: number,
+    /** end position of selection.*/
+    end?: number
+) {
+    
+    if (end) {
+        // Search for all tokens between start and end
+        return { result: null };
+    }
+
+    let startIndex = start;
+    let startToken;
+    for (const token of tokens) {
+        if (startIndex <= token.text.length) {
+            startToken = token;
+            break;
+        }
+        startIndex -= token.text.length;
     }
-    : null;
-}
 
-function getRequiredLiterals(regexString) {
-  // Strip leading/trailing slashes and flags (if user passed /.../ form)
-  regexString = regexString.replace(/^\/|\/[a-z]*$/g, "");
+    const startTokenIndex = tokens.indexOf(startToken);
 
-  // Remove ^ and $ anchors
-  regexString = regexString.replace(/^\^|\$$/g, "");
+    return { result: [startToken] };
+}
 
-  // 1. Find the first literal before any group or operator
-  const beforeGroup = regexString.match(/^((?:\\.|[^[(])+)/);
-  let openLiteral = null;
+/**
+ * To-do: Add support for openings and closings that are conformed by two or more chars (e.g. **, __, <b>, etc.)
+ */
+function findMatchV2(str: string, patterns: Pattern[]) : RichTextMatch | null {
+    let match = null;
+    let copyOfString = str;
 
-  if (beforeGroup) {
-    const part = beforeGroup[1];
-    const litMatch = part.match(/\\(.)|([^\\])/); // first literal
-    if (litMatch) {
-      openLiteral = litMatch[1] ?? litMatch[2];
-    }
-  }
+    for (const pattern of patterns) {
+        let evenCount = 0;
+
+        for (const char of copyOfString) {
+            /** Cases where both opening and closing chars are defined (*...*, _..._, etc.)*/
+            if (pattern.opening && pattern.closing) {
+                if (evenCount < 2 && char === pattern.opening) {
+                    evenCount++;
+                }
+                if (evenCount === 2 && char === pattern.closing) {
+                    const openingIndex = copyOfString.indexOf(pattern.opening);
+                    const closingIndex = copyOfString.indexOf(pattern.closing, openingIndex + 1);
+
+                    match = {
+                        raw: copyOfString.slice(openingIndex, closingIndex + 1),
+                        content: copyOfString.slice(openingIndex + 1, closingIndex),
+                        start: openingIndex,
+                        end: closingIndex,
+                        pattern,
+                        /** @deprecated */
+                        expression: pattern.regex
+                    };
+                    break;
+                }
+            }
 
-  // 2. Detect a closing literal after a capturing group (optional)
-  let closeLiteral = null;
-  const afterGroup = regexString.match(/\)([^).]+)/);
-  if (afterGroup) {
-    const part = afterGroup[1];
-    const litMatch = part.match(/\\(.)|([^\\])/);
-    if (litMatch) {
-      closeLiteral = litMatch[1] ?? litMatch[2];
+            /** Cases where only opening char is defined (@, #, etc.) */
+        }
     }
-  }
 
-  // Return both if available, otherwise just the opening literal
-  return {
-    opening: openLiteral,
-    closing: closeLiteral,
-  };
+    return match;
 }
 
-function concileAnnotations(prevAnnotations, nextAnnotations) {
-  return {
-    bold: nextAnnotations.bold ? !prevAnnotations.bold : prevAnnotations.bold,
-    italic: nextAnnotations.italic ? !prevAnnotations.italic : prevAnnotations.italic,
-    lineThrough: nextAnnotations.lineThrough ? !prevAnnotations.lineThrough : prevAnnotations.lineThrough,
-    underline: nextAnnotations.underline ? !prevAnnotations.underline : prevAnnotations.underline,
-    code: nextAnnotations.code ? !prevAnnotations.code : prevAnnotations.code,
-    /* color: nextAnnotations.color */
-  };
+/**
+ * If prev token contains new annotation, negate prev. Else, use new annotation.
+ */
+function concileAnnotations(prevAnnotations, newAnnotations) {
+  let updatedAnnotations = { ...prevAnnotations };
+
+  for (const key of Object.keys(newAnnotations)) {
+    newAnnotations[key]
+    ? updatedAnnotations[key] = !updatedAnnotations[key]
+    : updatedAnnotations[key] = newAnnotations[key];
+  }
+
+  return updatedAnnotations;
 }
 
 // Returns string modifications
@@ -140,58 +179,73 @@ function diffStrings(prev, next) : Diff {
   };
 }
 
-// Returns an array of tokens
-const parseRichTextString = (richTextString: string, patterns: { regex: string, style: string }[], initalTokens = null) => {
-    let tokens = initalTokens || [
+/** 
+ * Parse rich text string into tokens.
+ */
+const parseRichTextString = (richTextString: string, patterns: Pattern[], initialTokens?: Token[])
+: { tokens: Token[], plain_text: string } => {
+    let copyOfString = richTextString;
+    let tokens : Token[] = initialTokens || [
         {
-            text: richTextString,
-            annotations: {
-                bold: false,
-                italic: false,
-                lineThrough: false,
-                underline: false,
-                code: false
-            }
+            text: copyOfString,
+            annotations: {}
         }
     ];
-    let plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
 
     for (const pattern of patterns) {
-        let match = findMatch(plain_text, pattern.regex);
-        
-        if (match) {
-            const { result: splittedTokens } = splitTokens(
-                tokens,
-                match.start,
-                match.end - 1,
-                { [pattern.style]: true },
-                getRequiredLiterals(match.expression).opening
-            );
-            tokens = splittedTokens;
-            plain_text = splittedTokens.reduce((acc, curr) => acc + curr.text, "");
-            
-            const parsed = parseRichTextString(tokens, patterns, tokens);
-            
-            return {
-                tokens: parsed.tokens,
-                plain_text: parsed.plain_text
+        let evenCount = 0;
+
+        for (const char of copyOfString) {
+            /** Cases where both opening and closing chars are defined (*...*, _..._, etc.)*/
+            if (pattern.opening && pattern.closing) {
+                if (evenCount < 2 && char === pattern.opening) {
+                    evenCount++;
+                }
+                if (evenCount === 2 && char === pattern.closing) {
+                    const openingIndex = copyOfString.indexOf(pattern.opening);
+                    const closingIndex = copyOfString.indexOf(pattern.closing, openingIndex + 1);
+
+                    copyOfString = copyOfString.slice(0, openingIndex) + copyOfString.slice(closingIndex);
+                    const { result, plain_text } = splitTokens(tokens, openingIndex, closingIndex, { [pattern.style]: true }, pattern.opening);
+                    tokens = result;
+                    copyOfString = plain_text;
+                }
             }
+
+            /** Cases where only opening char is defined (@, #, etc.) */
         }
     }
 
     return {
-        tokens: tokens.filter(token => token.text.length > 0),
-        plain_text: plain_text
-    }
+        tokens,
+        plain_text: copyOfString
+    };
 }
 
-// Returns a rich text string
-const parseTokens = (tokens) => {
-    
+/**
+ * Parse tokens into rich text string.
+ */
+const parseTokens = (tokens: Token[], patterns: Pattern[]) => {
+    return tokens.map(token => {
+        const { text, annotations } = token;
+        // Rich text wrappers (opening and closing chars)
+        const wrappers = [];
+
+        patterns.forEach(pattern => {
+            // If annotation has a truthy value, add the corresponding wrapper.
+            if (annotations[pattern.style]) wrappers.push(pattern.opening);
+        });
+
+        return wrappers.reduce(
+            (children, wrapper) => `${wrapper}${children}${wrapper}`,
+            text
+        );
+    }).join("");
 }
 
 // Inserts a token at the given index
 // Only when start === end
+// To-do: Instead of recieving annotations and text it could recieve a token.
 function insertToken(tokens: Token[], index: number, annotations: Annotations, text = "" ) {
     const updatedTokens = [...tokens];
 
@@ -227,30 +281,26 @@ function insertToken(tokens: Token[], index: number, annotations: Annotations, t
     // Middle token is the selected text
     let middleToken = {
         text: text,
-        annotations: concileAnnotations(startToken.annotations, annotations)
+        annotations: concileAnnotations(startToken.annotations, annotations) // prevAnnotations + newAnnotations
     }
 
     let lastToken = {
         text: startToken.text.slice(startIndex , startToken.text.length),
         annotations: startToken.annotations
     }
-
-    /**
-     * Note: the following conditionals are to prevent empty tokens.
-     * It would be ideal if instead of catching empty tokens we could write the correct insert logic to prevent them.
-     * Maybe use a filter instead?
-     */
     
     updatedTokens.splice(startTokenIndex, 1, firstToken, middleToken, lastToken);
-    
     return {
         result: updatedTokens.filter(token => token.text.length > 0)
     };
 }
 
-// Updates token content (add, remove, replace)
-// Note: need to support cross-token updates.
-// It's actually updating just the text of tokens
+/**
+ * Updates token content (add, remove, replace)
+ * It's actually updating just the text of tokens
+ * To-do: Separate the logic of finding the corresponding token into another function.
+ * Instead of recieving a diff it could recieve an array of tokens to update.
+ */
 const updateTokens = (tokens: Token[], diff: Diff) => {
     let updatedTokens = [...tokens];
     const plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
@@ -412,9 +462,10 @@ const updateTokens = (tokens: Token[], diff: Diff) => {
     }
 }
 
-// Updates annotations and splits tokens if necessary
-// Only when start !== end
-// To-do: Add support for multiple annotations
+/**
+ * Updates annotations and splits tokens if necessary. Only when start !== end.
+ * To-do: Separate the logic of finding the corresponding token into another function.
+ */
 const splitTokens = (
     tokens: Token[],
     start: number,
@@ -475,6 +526,11 @@ const splitTokens = (
         let middleToken = {
             // The replace method is used to remove the opening and closing rich text literal chars when parsing.
             text: startToken.text.slice(startIndex, endIndex).replace(withReplacement, ""),
+            /** 
+             * We need to concile previous annotations with new ones.
+             * Eg. If we are applying bold to middle token but start token already has bold, we need to toggle bold off.
+             * But if we are applying bold to middle token but start token does not have bold, we need to toggle bold on.
+             */
             annotations: concileAnnotations(startToken.annotations, annotations)
         }
 
@@ -485,7 +541,10 @@ const splitTokens = (
         }
 
         updatedTokens.splice(startTokenIndex, 1, firstToken, middleToken, lastToken)
-        return { result: updatedTokens.filter(token => token.text.length > 0) };
+        return {
+            result: updatedTokens.filter(token => token.text.length > 0),
+            plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, "")
+        };
     }
 
     // Cross-token selection
@@ -544,11 +603,14 @@ const splitTokens = (
         }
 
         updatedTokens = updatedTokens.slice(0, startTokenIndex).concat([firstToken, secondToken, ...updatedMiddleTokens, secondToLastToken, lastToken]).concat(updatedTokens.slice(endTokenIndex + 1));
-        return { result: updatedTokens.filter(token => token.text.length > 0) };
+        return {
+            result: updatedTokens.filter(token => token.text.length > 0),
+            plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, "")
+        };
     }
 }
 
-// Concats tokens containing similar annotations
+// Concats tokens containing same annotations
 const concatTokens = (tokens: Token[]) => {
     let concatenedTokens = [];
 
@@ -560,11 +622,12 @@ const concatTokens = (tokens: Token[]) => {
 
         const prevToken = concatenedTokens[concatenedTokens.length - 1];
 
-        if (prevToken.annotations.bold === token.annotations.bold &&
-            prevToken.annotations.italic === token.annotations.italic &&
-            prevToken.annotations.lineThrough === token.annotations.lineThrough &&
-            prevToken.annotations.underline === token.annotations.underline &&
-            prevToken.annotations.code === token.annotations.code) {
+        /**
+         * If prev token has all the same annotations as current token, we add curent token text to prev token
+         * and continue looping without adding current token to concatened tokens array.
+         */
+        const prevTokenAnnotations = Object.keys(prevToken.annotations);
+        if (prevTokenAnnotations.length > 0 && prevTokenAnnotations.every(key => prevToken.annotations[key] === token.annotations[key])) {
             prevToken.text += token.text;
             continue;
         }
@@ -575,17 +638,20 @@ const concatTokens = (tokens: Token[]) => {
     return concatenedTokens;
 }
 
-function Token({ token }) {
+interface TokenProps {
+    token: Token;
+    patterns: Pattern[]
+}
+
+function Token(props: TokenProps) : JSX.Element {
+    const { token, patterns } = props;
     const { text, annotations } = token;
     const wrappers = [];
 
-    if (annotations.bold) wrappers.push(Bold);
-    if (annotations.italic) wrappers.push(Italic);
-    if (annotations.underline && annotations.lineThrough) wrappers.push(UnderlineStrikethrough);
-    if (annotations.underline) wrappers.push(Underline);
-    if (annotations.lineThrough) wrappers.push(Strikethrough);
-    if (annotations.code) wrappers.push(Code);
-
+    patterns.forEach(pattern => {
+        // If annotation has a truthy value, add the corresponding wrapper.
+        if (annotations[pattern.style]) wrappers.push(pattern.render);
+    });
     return wrappers.reduce(
         (children, Wrapper) => <Wrapper>{children}</Wrapper>,
         text
@@ -628,9 +694,35 @@ function UnderlineStrikethrough({ children }) {
     )
 }
 
+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) {
     const {
-        ref
+        ref,
+        patterns = PATTERNS,
+        
+        /** TextInput props */
+        value,
+        defaultValue,
+        onChangeText,
+        onSelectionChange,
+        ...rest
     } = props;
 
     const inputRef = useRef<TextInput>(null);
@@ -645,7 +737,6 @@ export default function RichTextInput(props: RichTextInputProps) {
             code: false
         }
     }]);
-    console.log(tokens);
     useEffect(() => {
         if (tokens.length === 0) {
             setTokens([{
@@ -667,47 +758,43 @@ export default function RichTextInput(props: RichTextInputProps) {
      */
     const prevTextRef = useRef(tokens.map(t => t.text).join(""));
 
-    // Find a better name
-    // To-do: Allow for multiple styles at once.
+    /**
+     * To-do: Find a better name.
+     * toSplit state is used to toggle styles when selection length === 0 (start === end).
+     * Eg, if user is typing with no styles applied and then presses the "bold" button with no text selected,
+     * the text to be inserted after that press should be styled as bold.
+     * The same happens to toggle of a style. If user is typing in "bold" and presses the "bold" button again,
+     * the text to be inserted after that press should not be styled as bold.
+     */
     const [toSplit, setToSplit] = useState({
         start: 0,
         end: 0,
-        annotations: {
-            bold: false,
-            italic: false,
-            lineThrough: false,
-            underline: false,
-            code: false
-        }
+        annotations: {}
     });
-
+    /* console.log("toSplit", toSplit); */
     const handleSelectionChange = ({ nativeEvent }) => {
         selectionRef.current = nativeEvent.selection;
+        onSelectionChange && onSelectionChange(nativeEvent);
     }
 
     const handleOnChangeText = (nextText: string) => {
         const diff = diffStrings(prevTextRef.current, nextText);
 
-        let match : RichTextMatch | null = null;
-
-        for (const pattern of PATTERNS) {
-            match = findMatch(nextText, pattern.regex);
-            if (match) break;
-        }
+       const match = findMatchV2(nextText, patterns);
+       /* console.log("MATCH:", match); */
 
+        // Note: refactor to use new parseRichText function instead of regex
         if (match) {
             // Check token containing match
             // If token already haves this annotation, do not format and perform a simple updateToken.
-            const annotation = PATTERNS.find(p => p.regex === match.expression);
-            const { result } = splitTokens(
+            const { result, plain_text } = splitTokens(
                 tokens,
                 match.start,
-                match.end - 1,
-                { [annotation.style]: true },
+                match.end/*  - 1 */, // I don't remember why the -1
+                { [match.pattern.style]: true },
                 // Get the rich text opening char to replace it
-                getRequiredLiterals(match.expression).opening
+                match.pattern.opening
             );
-            const plain_text = result.reduce((acc, curr) => acc + curr.text, "");
 
             setTokens([...concatTokens(result)]);
             prevTextRef.current = plain_text;
@@ -715,10 +802,8 @@ export default function RichTextInput(props: RichTextInputProps) {
             return;
         }
 
-        if (diff.start === toSplit.start
-            && diff.start === toSplit.end
-            && diff.added.length > 0
-            && Object.values(toSplit.annotations).includes(true)) {
+
+        if (Object.values(toSplit.annotations).some(Boolean) && diff.start === toSplit.start && diff.start === toSplit.end) {
             const { result } = insertToken(
                 tokens,
                 diff.start,
@@ -726,24 +811,19 @@ export default function RichTextInput(props: RichTextInputProps) {
                 diff.added
             );
             const plain_text = result.map(t => t.text).join("");
-            setTokens([...concatTokens(result)]);
+            setTokens(concatTokens(result));
 
             // Reset
             setToSplit({
                 start: 0,
                 end: 0,
-                annotations: {
-                    bold: false,
-                    italic: false,
-                    lineThrough: false,
-                    underline: false,
-                    code: false
-                }
+                annotations: {}
             });
             prevTextRef.current = plain_text;
             return;
         }
 
+        // Default update
         const { updatedTokens, plain_text} = updateTokens(tokens, diff);
         
         setTokens([...concatTokens(updatedTokens)]); 
@@ -751,241 +831,96 @@ export default function RichTextInput(props: RichTextInputProps) {
     }
 
     useImperativeHandle(ref, () => ({
-
-        setValue(value: string) {
+        /**
+         * Sets the TextInput's value as a rich text string or an array of tokens.
+         */
+        setValue(value: string | Token[]) {
+            if (Array.isArray(value)) {
+                // Maybe check if tokens structure is valid before setting.
+                setTokens(value);
+                return;
+            }
             // To keep styles, parsing should be done before setting value
-            const { tokens, plain_text } = parseRichTextString(value, PATTERNS);
-            setTokens([...concatTokens(tokens)]);
+            const { tokens, plain_text } = parseRichTextString(value, patterns);
+            setTokens(tokens);
             prevTextRef.current = plain_text;
         },
-        toggleBold() {
-            const { start, end } = selectionRef.current;
-
-            if (start === end && toSplit.annotations.bold) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        bold: false
-                    }
-                });
-                return;
-            }
-
-            if (start === end) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        bold: true
-                    }
-                });
-                return;
-            }
-
-            /**
-             * This prevents that when a portion of text is set to bold, the next text inserted after it is not bold.
-             */
-            if (start < end) {
-                setToSplit({
-                    start: end,
-                    end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        bold: true
-                    }
-                })
-            }
-
-            const { result } = splitTokens(tokens, start, end, { bold: true });
-            setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+        /**
+         * Sets the TextInput's selection.
+         */
+        setSelection(start: number, end: number) {
+            inputRef.current.setSelection(start, end);
         },
-        toggleItalic() {
-            const { start, end } = selectionRef.current;
-
-            if (start === end && toSplit.annotations.italic ) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        italic: false
-                    }
-                });
-                return;
-            }
-
-            if (start === end) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        italic: true
-                    }
-                });
-                return;
-            }
-
-            if (start < end) {
-                setToSplit({
-                    start: end,
-                    end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        italic: true
-                    }
-                });
-            }
-
-            const { result } = splitTokens(tokens, start, end, { italic: true });
-            setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+        /**
+         * Focuses the TextInput.
+         */
+        focus() {
+            inputRef.current.focus();
         },
-        toggleLineThrough() {
-            const { start, end } = selectionRef.current;
-
-            if (start === end && toSplit.annotations.lineThrough) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        lineThrough: false
-                    }
-                });
-                return;
-            }
-
-            if (start === end) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        lineThrough: true
-                    }
-                });
-                return;
-            }
-
-            if (start < end) {
-                setToSplit({
-                    start: end,
-                    end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        lineThrough: true
-                    }
-                })
-            }
-
-            const { result } = splitTokens(tokens, start, end, { lineThrough: true });
-            setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+        blur() {
+            inputRef.current.blur();
+        },
+        /**
+         * Returns the TextInput'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.
+         */
+        getRichTextString() {
+            return parseTokens(tokens, patterns);
+        },
+        /**
+         * Returns the TextInput's value as an array of tokens with annotations.
+         */
+        getTokenizedString() : Token[] {
+            return tokens;
         },
-        toggleUnderline() {
+        /** 
+         * Toggles a given style. The style prop must match the name of a pattern.
+         */
+        toggleStyle(style: keyof Token["annotations"]) {
             const { start, end } = selectionRef.current;
 
-            if (start === end && toSplit.annotations.underline) {
-                setToSplit({
-                    start: 0,
-                    end: 0,
-                    annotations: {
-                        ...toSplit.annotations,
-                        underline: false
-                    }
-                });
-                return;
-            }
-
             if (start === end) {
                 setToSplit({
                     start,
                     end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        underline: true
-                    }
+                    annotations: concileAnnotations(toSplit.annotations, { [style]: true })
                 });
                 return;
             }
 
-            if (start < end) {
-                setToSplit({
-                    start: end,
-                    end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        underline: true
-                    }
-                })
-            }
-
-            const { result } = splitTokens(tokens, start, end, { underline: true });
+            const { result } = splitTokens(tokens, start, end, { [style]: true });
             setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+            requestAnimationFrame(() => {
+                inputRef.current.setSelection(start, end);
+            });
         },
-        toggleCode() {
-            const { start, end } = selectionRef.current;
-
-            if (start === end && toSplit.annotations.code ) {
-                setToSplit({
-                    start: 0,
-                    end: 0,
-                    annotations: {
-                        ...toSplit.annotations,
-                        code: false
-                    }
-                });
-                return;
-            }
-
-            if (start === end) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        code: true
-                    }
-                });
-                return;
-            }
-
-            if (start < end) {
-                setToSplit({
-                    start: end,
-                    end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        code: true
-                    }
-                });
+        /**
+         * Returns the active styles for the current selection.
+         */
+        getActiveStyles() {
+            // Check for styles of the token at the current cursor position.
+            const { result } = findTokens(tokens, selectionRef.current.start);
+            
+            if (result[0].annotations) {
+                return Object.keys(result[0].annotations).filter(key => result[0].annotations[key]);
             }
 
-            const { result } = splitTokens(tokens, start, end, { code: true });
-            setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+            return [];
         }
     }));
 
     return (
        <View style={{ position: "relative" }}>
             <TextInput
-                multiline={true}
                 ref={inputRef}
-                autoComplete="off"
                 style={styles.textInput}
-                placeholder="Rich text input"
                 onSelectionChange={handleSelectionChange}
                 onChangeText={handleOnChangeText}
+                {...rest}
             >
                 <Text style={styles.text}>
-                    {tokens.map((token, i) => <Token key={i} token={token} />)}
+                    {tokens.map((token, i) => <Token key={i} token={token} patterns={patterns}/>)}
                 </Text>
             </TextInput>
        </View>
@@ -1037,5 +972,17 @@ const styles = StyleSheet.create({
         padding: 20,
         height: 24,
         backgroundColor: "blue"
+    },
+    heading: {
+        fontSize: 32,
+        fontWeight: "bold"
+    },
+    subHeading: {
+        fontSize: 28,
+        fontWeight: "bold"
+    },
+    subSubHeading: {
+        fontSize: 24,
+        fontWeight: "bold"
     }
 });

package/src/Toolbar.tsx

@@ -45,86 +45,132 @@ export default function Toolbar({
     );
 }
 
-Toolbar.Bold = () => {
+Toolbar.Bold = ({ color = "black" }) => {
+    console.log("COLOR:", color);
     const richTextInputRef = useToolbarContext();
 
     const handleBold = () => {
-        richTextInputRef.current.toggleBold();
+        richTextInputRef?.current?.toggleStyle("bold");
     }
 
     return (
         <TouchableOpacity style={styles.toolbarButton} onPress={handleBold}>
-            <FontAwesome6 name="bold" size={16} color="black" />
+            <FontAwesome6 name="bold" size={16} color={color} />
         </TouchableOpacity>
     )
 }
 
-Toolbar.Italic = () => {
+Toolbar.Italic = ({ color = "black" }) => {
     const richTextInputRef = useToolbarContext();
 
     const handleItalic = () => {
-        richTextInputRef.current.toggleItalic();
+        richTextInputRef?.current?.toggleStyle("italic");
     }
 
     return (
         <TouchableOpacity style={styles.toolbarButton} onPress={handleItalic}>
-            <FontAwesome6 name="italic" size={16} color="black" />
+            <FontAwesome6 name="italic" size={16} color={color} />
         </TouchableOpacity>
     )
 }
 
-Toolbar.Strikethrough = () => {
+Toolbar.Strikethrough = ({ color = "black" }) => {
     const richTextInputRef = useToolbarContext();
 
     const handleLineThrough = () => {
-        richTextInputRef.current.toggleLineThrough();
+        richTextInputRef?.current?.toggleStyle("lineThrough");
     }
 
     return (
         <TouchableOpacity style={styles.toolbarButton} onPress={handleLineThrough}>
-            <FontAwesome6 name="strikethrough" size={16} color="black" />
+            <FontAwesome6 name="strikethrough" size={16} color={color} />
         </TouchableOpacity>
     )
 }
 
-Toolbar.Underline = () => {
+Toolbar.Underline = ({ color = "black" }) => {
     const richTextInputRef = useToolbarContext();
 
     const handleUnderline = () => {
-        richTextInputRef.current.toggleUnderline();
+        richTextInputRef.current.toggleStyle("underline");
     }
 
     return (
         <TouchableOpacity style={styles.toolbarButton} onPress={handleUnderline}>
-            <FontAwesome6 name="underline" size={16} color="black" />
+            <FontAwesome6 name="underline" size={16} color={color} />
         </TouchableOpacity>
     )
 }
 
-Toolbar.Code = () => {
+Toolbar.Heading = () => {
+    const richTextInputRef = useToolbarContext();
+
+    const handleHeading = () => {
+        richTextInputRef.current.toggleStyle("heading");
+    }
+
+    return (
+        <TouchableOpacity style={[styles.toolbarButton, styles.heading]} onPress={handleHeading}>
+            <FontAwesome6 name="heading" size={16} color={color} />
+            <FontAwesome6 name="1" size={16} color={color} />
+        </TouchableOpacity>
+    )
+}
+
+Toolbar.SubHeading = () => {
+    const richTextInputRef = useToolbarContext();
+
+    const handleSubHeading = () => {
+        richTextInputRef.current.toggleStyle("subHeading");
+    }
+
+    return (
+        <TouchableOpacity style={[styles.toolbarButton, styles.heading]} onPress={handleSubHeading}>
+            <FontAwesome6 name="heading" size={16} color={color} />
+            <FontAwesome6 name="2" size={16} color={color} />
+        </TouchableOpacity>
+    )
+}
+
+Toolbar.SubSubHeading = () => {
+    const richTextInputRef = useToolbarContext();
+
+    const handleSubSubHeading = () => {
+        richTextInputRef.current.toggleStyle("subSubHeading");
+    }
+
+    return (
+        <TouchableOpacity style={[styles.toolbarButton, styles.heading]} onPress={handleSubSubHeading}>
+            <FontAwesome6 name="heading" size={16} color={color} />
+            <FontAwesome6 name="3" size={16} color={color} />
+        </TouchableOpacity>
+    )
+}
+
+Toolbar.Code = ({ color = "black" }) => {
     const richTextInputRef = useToolbarContext();
 
     const handleCode = () => {
-        richTextInputRef.current.toggleCode();
+        richTextInputRef?.current?.toggleStyle("code");
     }
 
     return (
         <TouchableOpacity style={styles.toolbarButton} onPress={handleCode}>
-            <FontAwesome6 name="code" size={16} color="black" />
+            <FontAwesome6 name="code" size={16} color={color} />
         </TouchableOpacity>
     )
 }
 
-Toolbar.Keyboard = () => {
+Toolbar.Keyboard = ({ color = "black" }) => {
     const handleKeyboardDismiss = () => {
         Keyboard.dismiss();
     }
 
     return (
        <TouchableOpacity style={[styles.toolbarButton, styles.keyboardDown]} onPress={handleKeyboardDismiss}>
-            <FontAwesome6 name="keyboard" size={16} color="black" />
+            <FontAwesome6 name="keyboard" size={16} color={color} />
             <View style={styles.keyboardArrowContainer}>
-                <FontAwesome6 name="chevron-down" size={8} color="black"/>
+                <FontAwesome6 name="chevron-down" size={8} color={color}/>
             </View>
         </TouchableOpacity>
     )
@@ -156,5 +202,9 @@ const styles = StyleSheet.create({
     keyboardArrowContainer: {
         position: "absolute",
         bottom: 13
+    },
+    heading: {
+        flexDirection: "row",
+        gap: 4
     }
 });