enriched-text-input 1.0.3 → 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

@@ -2,6 +2,7 @@ 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';
 
 function Comment({ children }) {
   return (
@@ -17,6 +18,9 @@ function Comment({ children }) {
 
 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 = [
@@ -29,42 +33,64 @@ export default function App() {
   }
 
   const handleGetRichText = () => {
-    const richText = richTextInputRef.current?.getRichText();
-    console.log(richText);
+    const richText = richTextInputRef.current?.getRichTextString();
+
+    setRichTextStringValue(richText);
+  }
+
+  const handleCopyToClipboard = async (text: string) => {
+    await Clipboard.setStringAsync(text);
   }
 
   return (
     <KeyboardAvoidingView style={styles.container} behavior="padding">
       <View style={{ flex: 1 }}>
-        {/* <TextInput
+        <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}/>
+          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='Get rich text string (check console)'
-            onPress={handleGetRichText}
-            />
+            title='Clear'
+            onPress={() => setRichTextStringValue("")}
+          />
+          <Button
+            title='Copy'
+            onPress={() => handleCopyToClipboard(richTextStringValue)}
+          />
+        </View>
       </View>
       <View style={{ alignSelf: "end"}}>
         <Toolbar richTextInputRef={richTextInputRef}>
-          <Toolbar.Bold />
+          <Toolbar.Bold/>
           <Toolbar.Italic />
           <Toolbar.Underline />
           <Toolbar.Strikethrough />
           <Toolbar.Code />
-          <TouchableOpacity style={styles.toolbarButton} onPress={handleComment}>
+          {/* <TouchableOpacity style={styles.toolbarButton} onPress={handleComment}>
             <FontAwesome6 name="comment-alt" size={16} color="black" />
-          </TouchableOpacity>
-
+          </TouchableOpacity> */}
           <Toolbar.Keyboard />
         </Toolbar>
       </View>

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/package.json

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

package/src/RichTextInput.tsx

@@ -1,6 +1,5 @@
-import { useState, useImperativeHandle, useRef, useEffect, ReactElement, JSX } from "react";
-import { TextInput, Text, StyleSheet, View, Linking } from "react-native";
-import { get } from "react-native/Libraries/TurboModule/TurboModuleRegistry";
+import { useState, useImperativeHandle, useRef, useEffect, JSX } from "react";
+import { TextInput, Text, StyleSheet, View, TextInputProps } from "react-native";
 
 interface Token {
     text: string;
@@ -14,12 +13,7 @@ interface Diff {
 }
 
 interface Annotations {
-    bold: boolean;
-    italic: boolean;
-    lineThrough: boolean;
-    underline: boolean;
-    underlineLineThrough: boolean;
-    code: boolean;
+    [key: string]: boolean | string | null
 }
 
 interface RichTextMatch {
@@ -27,29 +21,39 @@ interface RichTextMatch {
     content: string;
     start: number;
     end: number;
+    pattern: Pattern;
+    /** @deprecated */
     expression: string;
 }
 
 interface Pattern {
     regex: string;
     style: string;
-    render: any
+    render: any;
+    opening?: string;
+    closing?: string;
 }
 
 interface RichTextInputProps {
     ref: any;
     patterns?: Pattern[]
 }
-                        
+
+/**
+ * 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 },
-  { style: "italic", regex: "_([^_]+)_", render: Italic },
-  { style: "lineThrough", regex: "~([^~]+)~", render: Strikethrough },
-  { style: "code", regex: "`([^`]+)`", render: Code },
-  { style: "underline", regex: "__([^_]+)__", render: Underline },
-  { style: "heading", regex: null, render: Heading },
-  { style: "subHeading", regex: null, render: SubHeading },
-  { style: "subSubHeading", regex: null, render: SubSubHeading }
+  { 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) {
@@ -68,55 +72,73 @@ 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 };
     }
-    : null;
-}
 
-function getRequiredLiterals(regexString: string) {
-  // Strip leading/trailing slashes and flags (if user passed /.../ form)
-  regexString = regexString.replace(/^\/|\/[a-z]*$/g, "");
+    let startIndex = start;
+    let startToken;
+    for (const token of tokens) {
+        if (startIndex <= token.text.length) {
+            startToken = token;
+            break;
+        }
+        startIndex -= token.text.length;
+    }
+
+    const startTokenIndex = tokens.indexOf(startToken);
+
+    return { result: [startToken] };
+}
 
-  // Remove ^ and $ anchors
-  regexString = regexString.replace(/^\^|\$$/g, "");
+/**
+ * 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;
 
-  // 1. Find the first literal before any group or operator
-  const beforeGroup = regexString.match(/^((?:\\.|[^[(])+)/);
-  let openLiteral = null;
+    for (const pattern of patterns) {
+        let evenCount = 0;
 
-  if (beforeGroup) {
-    const part = beforeGroup[1];
-    const litMatch = part.match(/\\(.)|([^\\])/); // first literal
-    if (litMatch) {
-      openLiteral = litMatch[1] ?? litMatch[2];
-    }
-  }
+        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;
 }
 
 /**
@@ -157,58 +179,65 @@ 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,
+            text: copyOfString,
             annotations: {}
         }
     ];
-    let plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
 
     for (const pattern of patterns) {
-        let match = pattern.regex ? findMatch(plain_text, pattern.regex) : null;
-        
-        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
+/**
+ * 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 = [];
 
-        Object.keys(annotations).forEach(key => {
+        patterns.forEach(pattern => {
             // If annotation has a truthy value, add the corresponding wrapper.
-            if (annotations[key]) wrappers.push(getRequiredLiterals(patterns.find(p => p.style === key).regex));
+            if (annotations[pattern.style]) wrappers.push(pattern.opening);
         });
 
         return wrappers.reduce(
-            (children, Wrapper) => `${Wrapper.opening}${children}${Wrapper.closing}`,
+            (children, wrapper) => `${wrapper}${children}${wrapper}`,
             text
         );
     }).join("");
@@ -268,7 +297,6 @@ function insertToken(tokens: Token[], index: number, annotations: Annotations, t
 
 /**
  * Updates token content (add, remove, replace)
- * Note: need to support cross-token updates.
  * 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.
@@ -436,7 +464,6 @@ const updateTokens = (tokens: Token[], diff: Diff) => {
 
 /**
  * Updates annotations and splits tokens if necessary. Only when start !== end.
- * To-do: Add support for multiple annotations. [done].
  * To-do: Separate the logic of finding the corresponding token into another function.
  */
 const splitTokens = (
@@ -514,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
@@ -573,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 = [];
 
@@ -593,7 +626,8 @@ const concatTokens = (tokens: Token[]) => {
          * 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.
          */
-        if (Object.keys(prevToken.annotations).every(key => prevToken.annotations[key] === token.annotations[key])) {
+        const prevTokenAnnotations = Object.keys(prevToken.annotations);
+        if (prevTokenAnnotations.length > 0 && prevTokenAnnotations.every(key => prevToken.annotations[key] === token.annotations[key])) {
             prevToken.text += token.text;
             continue;
         }
@@ -614,11 +648,10 @@ function Token(props: TokenProps) : JSX.Element {
     const { text, annotations } = token;
     const wrappers = [];
 
-    Object.keys(annotations).forEach(key => {
+    patterns.forEach(pattern => {
         // If annotation has a truthy value, add the corresponding wrapper.
-        if (annotations[key]) wrappers.push(patterns.find(p => p.style === key).render);
+        if (annotations[pattern.style]) wrappers.push(pattern.render);
     });
-
     return wrappers.reduce(
         (children, Wrapper) => <Wrapper>{children}</Wrapper>,
         text
@@ -682,7 +715,14 @@ function SubSubHeading({ children }) {
 export default function RichTextInput(props: RichTextInputProps) {
     const {
         ref,
-        patterns = PATTERNS
+        patterns = PATTERNS,
+        
+        /** TextInput props */
+        value,
+        defaultValue,
+        onChangeText,
+        onSelectionChange,
+        ...rest
     } = props;
 
     const inputRef = useRef<TextInput>(null);
@@ -697,7 +737,6 @@ export default function RichTextInput(props: RichTextInputProps) {
             code: false
         }
     }]);
-
     useEffect(() => {
         if (tokens.length === 0) {
             setTokens([{
@@ -719,41 +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: {}
     });
-
+    /* 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;
@@ -761,6 +802,7 @@ export default function RichTextInput(props: RichTextInputProps) {
             return;
         }
 
+
         if (Object.values(toSplit.annotations).some(Boolean) && diff.start === toSplit.start && diff.start === toSplit.end) {
             const { result } = insertToken(
                 tokens,
@@ -789,17 +831,53 @@ 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)]);
+            setTokens(tokens);
             prevTextRef.current = plain_text;
         },
-        getRichText() {
+        /**
+         * Sets the TextInput's selection.
+         */
+        setSelection(start: number, end: number) {
+            inputRef.current.setSelection(start, end);
+        },
+        /**
+         * Focuses the TextInput.
+         */
+        focus() {
+            inputRef.current.focus();
+        },
+        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);
         },
-        toggleStyle(style: string) {
+        /**
+         * Returns the TextInput's value as an array of tokens with annotations.
+         */
+        getTokenizedString() : Token[] {
+            return tokens;
+        },
+        /** 
+         * 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) {
@@ -811,35 +889,35 @@ export default function RichTextInput(props: RichTextInputProps) {
                 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: concileAnnotations(toSplit.annotations, { [style]: true })
-                })
-            }
-
             const { result } = splitTokens(tokens, start, end, { [style]: true });
             setTokens([...concatTokens(result)]);
             requestAnimationFrame(() => {
                 inputRef.current.setSelection(start, end);
-            })
+            });
+        },
+        /**
+         * 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]);
+            }
+
+            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} patterns={patterns}/>)}

package/src/Toolbar.tsx

@@ -45,49 +45,50 @@ export default function Toolbar({
     );
 }
 
-Toolbar.Bold = () => {
+Toolbar.Bold = ({ color = "black" }) => {
+    console.log("COLOR:", color);
     const richTextInputRef = useToolbarContext();
 
     const handleBold = () => {
-        richTextInputRef.current.toggleStyle("bold");
+        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.toggleStyle("italic");
+        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.toggleStyle("lineThrough");
+        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 = () => {
@@ -96,7 +97,7 @@ Toolbar.Underline = () => {
 
     return (
         <TouchableOpacity style={styles.toolbarButton} onPress={handleUnderline}>
-            <FontAwesome6 name="underline" size={16} color="black" />
+            <FontAwesome6 name="underline" size={16} color={color} />
         </TouchableOpacity>
     )
 }
@@ -110,8 +111,8 @@ Toolbar.Heading = () => {
 
     return (
         <TouchableOpacity style={[styles.toolbarButton, styles.heading]} onPress={handleHeading}>
-            <FontAwesome6 name="heading" size={16} color="black" />
-            <FontAwesome6 name="1" size={16} color="black" />
+            <FontAwesome6 name="heading" size={16} color={color} />
+            <FontAwesome6 name="1" size={16} color={color} />
         </TouchableOpacity>
     )
 }
@@ -125,8 +126,8 @@ Toolbar.SubHeading = () => {
 
     return (
         <TouchableOpacity style={[styles.toolbarButton, styles.heading]} onPress={handleSubHeading}>
-            <FontAwesome6 name="heading" size={16} color="black" />
-            <FontAwesome6 name="2" size={16} color="black" />
+            <FontAwesome6 name="heading" size={16} color={color} />
+            <FontAwesome6 name="2" size={16} color={color} />
         </TouchableOpacity>
     )
 }
@@ -140,36 +141,36 @@ Toolbar.SubSubHeading = () => {
 
     return (
         <TouchableOpacity style={[styles.toolbarButton, styles.heading]} onPress={handleSubSubHeading}>
-            <FontAwesome6 name="heading" size={16} color="black" />
-            <FontAwesome6 name="3" size={16} color="black" />
+            <FontAwesome6 name="heading" size={16} color={color} />
+            <FontAwesome6 name="3" size={16} color={color} />
         </TouchableOpacity>
     )
 }
 
-Toolbar.Code = () => {
+Toolbar.Code = ({ color = "black" }) => {
     const richTextInputRef = useToolbarContext();
 
     const handleCode = () => {
-        richTextInputRef.current.toggleStyle("code");
+        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>
     )