enriched-text-input 1.0.0

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["module:metro-react-native-babel-preset"]
+}

package/README.md

@@ -0,0 +1,58 @@
+[![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.
+
+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.
+
+## 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 however you want elements like links, mentions, bold, italic, unerline text and more.
+
+## Features
+
+- [x] Basic text formatting (*bold*, _italic_, __underline__, ~~strikethrough~~).
+- [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.
+
+## Contributing
+
+### Clone this repo
+
+1. Fork and clone your Github froked repo:
+```
+git clone https://github.com/<github_username>/react-native-rich-text.git
+```
+
+2. Go to cloned repo directory:
+```
+cd react-native-rich-text
+```
+
+### Install dependencies
+
+1. Install the dependencies in the root of the repo:
+```
+npm install
+```
+
+3. After that you can start the project with:
+```
+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/example/App.tsx

@@ -0,0 +1,25 @@
+import { useRef, useState } from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View, Button } from 'react-native';
+
+import { RichTextInput, Toolbar } from 'enriched-text-input';
+
+export default function App() {
+  const richTextInputRef = useRef(null);
+
+  return (
+    <View style={styles.container}>
+      <RichTextInput ref={richTextInputRef}/>
+      <Toolbar richTextInputRef={richTextInputRef} />
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    paddingTop: 120
+  },
+});

package/example/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "enriched-text-input-example",
+    "slug": "enriched-text-input-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "autolinking": {
+      "searchPaths": ["../"]
+    },
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/example/index.ts

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

package/example/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "enriched-text-input-example",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "expo": "~54.0.25",
+    "expo-status-bar": "~3.0.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "enriched-text-input": "file:../"
+  },
+  "private": true,
+  "devDependencies": {
+    "@types/react": "~19.1.10",
+    "typescript": "~5.9.2"
+  }
+}

package/example/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}

package/index.ts

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

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "enriched-text-input",
+  "version": "1.0.0",
+  "description": "JavaScript only rich text input component for React Native. Compatible with Expo Go.",
+  "keywords": [
+    "rich-text",
+    "react-native",
+    "react-native-web",
+    "expo"
+  ],
+  "homepage": "https://github.com/PatoSala/react-native-rich-text#readme",
+  "bugs": {
+    "url": "https://github.com/PatoSala/react-native-rich-text/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PatoSala/react-native-rich-text.git"
+  },
+  "license": "MIT",
+  "author": "Pato Sala",
+  "private": false,
+  "main": "index.ts",
+  "directories": {
+    "example": "example"
+  },
+  "workspaces": [
+    ".",
+    "example"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "expo": "~54.0.25",
+    "react": "19.1.0",
+    "react-native": "0.81.5"
+  },
+  "devDependencies": {
+    "metro-react-native-babel-preset": "^0.77.0"
+  }
+}

package/src/RichTextInput.tsx

@@ -0,0 +1,900 @@
+import { useState, useImperativeHandle, useRef, useEffect } from "react";
+import { TextInput, Text, StyleSheet, View, Linking } from "react-native";
+
+const exampleText = "_None_ *bold* _italic_ ~strikethrough~ none";
+
+interface Token {
+    text: string;
+    annotations: {
+        bold: boolean;
+        italic: boolean;
+        lineThrough: boolean;
+        underline: boolean;
+        color: string;
+    }
+}
+
+interface Diff {
+    start: number;
+    removed: string;
+    added: string;
+}
+
+interface Annotations {
+    bold: boolean;
+    italic: boolean;
+    lineThrough: boolean;
+    underline: boolean;
+    color: string;
+}
+
+interface RichTextMatch {
+    raw: string;
+    content: string;
+    start: number;
+    end: number;
+    expression: string;
+}
+                        
+const PATTERNS = [
+  { style: "bold", regex: "\\*([^*]+)\\*" },
+  { style: "italic", regex: "_([^_]+)_" },
+  { style: "lineThrough", regex: "~([^~]+)~" },
+];
+
+function insertAt(str, index, substring) {
+  // Clamp index into valid boundaries
+  const i = Math.max(0, Math.min(index, str.length));
+  return str.slice(0, i) + substring + str.slice(i);
+}
+
+function removeAt(str, index, strToRemove) {
+  return str.slice(0, index) + str.slice(index + strToRemove.length);
+}
+
+function replaceAt(str, index, substring, length) {
+  // Clamp index into valid boundaries
+  const i = Math.max(0, Math.min(index, str.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
+    }
+    : null;
+}
+
+function getRequiredLiterals(regexString) {
+  // Strip leading/trailing slashes and flags (if user passed /.../ form)
+  regexString = regexString.replace(/^\/|\/[a-z]*$/g, "");
+
+  // Remove ^ and $ anchors
+  regexString = regexString.replace(/^\^|\$$/g, "");
+
+  // 1. Find the first literal before any group or operator
+  const beforeGroup = regexString.match(/^((?:\\.|[^[(])+)/);
+  let openLiteral = null;
+
+  if (beforeGroup) {
+    const part = beforeGroup[1];
+    const litMatch = part.match(/\\(.)|([^\\])/); // first literal
+    if (litMatch) {
+      openLiteral = litMatch[1] ?? litMatch[2];
+    }
+  }
+
+  // 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];
+    }
+  }
+
+  // Return both if available, otherwise just the opening literal
+  return {
+    opening: openLiteral,
+    closing: closeLiteral,
+  };
+}
+
+function concileAnnotations(prevAnnotations, nextAnnotations) {
+  return {
+    bold: prevAnnotations.bold || nextAnnotations.bold,
+    italic: prevAnnotations.italic || nextAnnotations.italic,
+    lineThrough: prevAnnotations.lineThrough || nextAnnotations.lineThrough,
+    underline: prevAnnotations.underline || nextAnnotations.underline,
+    color: prevAnnotations.color || nextAnnotations.color,
+  };
+}
+
+// Returns string modifications
+function diffStrings(prev, next) : Diff {
+  let start = 0;
+
+  while (start < prev.length && start < next.length && prev[start] === next[start]) {
+    start++;
+  }
+
+  let endPrev = prev.length - 1;
+  let endNext = next.length - 1;
+
+  while (endPrev >= start && endNext >= start && prev[endPrev] === next[endNext]) {
+    endPrev--;
+    endNext--;
+  }
+
+  return {
+    start,
+    removed: prev.slice(start, endPrev + 1),
+    added: next.slice(start, endNext + 1),
+  };
+}
+
+// Returns an array of tokens
+const parseRichTextString = (richTextString: string, patterns: { regex: string, style: string }[], initalTokens = null) => {
+    let tokens = initalTokens || [
+        {
+            text: richTextString,
+            annotations: {
+                bold: false,
+                italic: false,
+                lineThrough: false,
+                underline: false,
+                color: "black"
+            }
+        }
+    ];
+    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,
+                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
+            }
+        }
+    }
+
+    return {
+        tokens: tokens.filter(token => token.text.length > 0),
+        plain_text: plain_text
+    }
+}
+
+// Returns a rich text string
+const parseTokens = (tokens) => {
+    
+}
+
+// Inserts a token at the given index
+// Only when start === end
+function insertToken(tokens: Token[], index: number, type: string, text = "" ) {
+    const updatedTokens = [...tokens];
+
+    let plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
+
+    // If cursor is at the end
+    if (plain_text.length === index) {
+        updatedTokens.push({
+            text: text,
+            annotations: {
+                ...updatedTokens[updatedTokens.length - 1].annotations,
+                [type]: !updatedTokens[updatedTokens.length - 1].annotations[type]
+            }
+        });
+
+        return { result: updatedTokens.filter(token => token.text.length > 0) };
+    }
+
+    let startIndex = index;
+    let startToken;
+
+    for (const token of updatedTokens) {
+        if (startIndex <= token.text.length) {
+            startToken = token;
+            break;
+        }
+        startIndex -= token.text.length;
+    }
+
+    const startTokenIndex = updatedTokens.indexOf(startToken);
+
+    let firstToken = {
+        text: startToken.text.slice(0, startIndex),
+        annotations: {
+            ...startToken.annotations,
+            [type]: startToken.annotations[type]
+        }
+    }
+
+    // Middle token is the selected text
+    let middleToken = {
+        text: text,
+        annotations: {
+            ...startToken.annotations,
+            [type]: !startToken.annotations[type]
+        }
+    }
+
+    let lastToken = {
+        text: startToken.text.slice(startIndex , startToken.text.length),
+        annotations: {
+            ...startToken.annotations,
+            [type]: startToken.annotations[type]
+        }
+    }
+
+    /**
+     * 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
+const updateTokens = (tokens: Token[], diff: Diff) => {
+    let updatedTokens = [...tokens];
+    const plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
+
+    // If we're at the end of the string
+    if (diff.start >= plain_text.length) {
+        if (diff.added.length > 0) {
+            updatedTokens[updatedTokens.length - 1].text += diff.added;
+
+            return {
+                updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+            };
+        }
+
+        if (diff.removed.length > 0) {
+            const lastTokenIndex = updatedTokens.length - 1;
+            updatedTokens[lastTokenIndex].text = updatedTokens[lastTokenIndex].text.slice(0, updatedTokens[lastTokenIndex].text.length - diff.removed.length);
+            
+            return {
+                updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+            };
+        }
+    }
+
+    // Find token where start
+    let startIndex = diff.start;
+    let startToken;
+
+    for (const token of updatedTokens) {
+        if (startIndex < token.text.length) {
+            startToken = token;
+            break;
+        }
+        startIndex -= token.text.length;
+    }
+    // Find token where end
+    // We need to add the length of the removed/added text to the start index to get the end index
+    let endIndex = diff.removed.length > diff.added.length
+        ? diff.start + diff.removed.length
+        : diff.start + diff.added.length;
+    let endToken;
+
+    for (const token of updatedTokens) {
+        if (endIndex <= token.text.length) {
+            endToken = token;
+            break;
+        }
+        endIndex -= token.text.length;
+    }
+
+    const startTokenIndex = updatedTokens.indexOf(startToken);
+    const endTokenIndex = updatedTokens.indexOf(endToken);
+
+    // Same token
+    if (startTokenIndex === endTokenIndex) {
+        const tokenCopy = { ...startToken };
+
+        if (diff.removed.length > 0 && diff.added.length > 0) {
+            tokenCopy.text = replaceAt(tokenCopy.text, startIndex, diff.added, diff.removed.length);
+                updatedTokens[startTokenIndex] = tokenCopy;
+                return {
+                    updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                    // Plain text must be updated to prevent bad diffs
+                    plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+                };
+        }
+
+        if (diff.removed.length > 0) {
+            tokenCopy.text = removeAt(tokenCopy.text, startIndex, diff.removed);
+
+            updatedTokens[startTokenIndex] = tokenCopy;
+            return {
+                updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+            };
+        }
+
+        if (diff.added.length > 0) {
+            // Check if token index is > 0 and if startIndex === 0 (See RNRT-6)
+            if (startTokenIndex > 0 && startIndex === 0) {
+                updatedTokens[startTokenIndex - 1].text += diff.added;
+                return {
+                    updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                    plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+                };
+            }
+
+            tokenCopy.text = insertAt(tokenCopy.text, startIndex, diff.added);
+            updatedTokens[startTokenIndex] = tokenCopy;
+            return {
+                updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+            };
+        }
+    }
+
+    // Cross-token
+    if (startTokenIndex !== endTokenIndex) {
+        const selectedTokens = updatedTokens.slice(startTokenIndex, endTokenIndex + 1);
+        
+        if (diff.added.length > 0) {
+            const firstToken = selectedTokens[0];
+            const lastToken = selectedTokens[selectedTokens.length - 1];
+
+            firstToken.text = firstToken.text.slice(0, startIndex) + diff.added;
+            lastToken.text = lastToken.text.slice(endIndex);
+            updatedTokens[startTokenIndex] = firstToken;
+            updatedTokens[endTokenIndex] = lastToken;
+
+            if (selectedTokens.length > 2) {
+                updatedTokens.splice(startTokenIndex + 1, selectedTokens.length - 2);
+                return {
+                    updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                    plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+                }
+            }
+
+            return {
+                updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+            }
+        }
+
+        /**
+         * Remove:
+         * - For more than two tokens, works.
+         * - For two tokens, does not work properly.
+         */
+        if (diff.removed.length > 0) {
+            const firstToken = selectedTokens[0];
+            const lastToken = selectedTokens[selectedTokens.length - 1];
+
+            firstToken.text = firstToken.text.slice(0, startIndex);
+            lastToken.text = lastToken.text.slice(endIndex);
+            updatedTokens[startTokenIndex] = firstToken;
+            updatedTokens[endTokenIndex] = lastToken;
+            
+            // If more than two tokens, whe need to remove the ones in between
+            if (selectedTokens.length > 2) {
+                updatedTokens.splice(startTokenIndex + 1, selectedTokens.length - 2);
+                return {
+                    updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                    plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+                }
+            }
+
+            return {
+                updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+                plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, ""),
+            }
+        }
+
+        return {
+            updatedTokens: updatedTokens.filter(token => token.text.length > 0),
+            plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, "")
+        };
+    }
+}
+
+// Updates annotations and splits tokens if necessary
+// Only when start !== end
+// To-do: Add support for multiple annotations
+const splitTokens = (
+    tokens: Token[],
+    start: number,
+    end: number,
+    type: string,
+    /** Used to strip opening and closing chars of rich text matches. */
+    withReplacement?: string
+) => {
+    let updatedTokens = [...tokens];
+
+    // Find token where start
+    let startIndex = start;
+    let startToken;
+
+    for (const token of updatedTokens) {
+        if (startIndex < token.text.length) {
+            startToken = token;
+            break;
+        }
+        startIndex -= token.text.length;
+    }
+    // Find token where end
+    let endIndex = end;
+    let endToken;
+    for (const token of updatedTokens) {
+        // The - 1 is necessary
+        if (endIndex <= token.text.length) {
+            endToken = token;
+            break;
+        }
+        endIndex -= token.text.length;
+    }
+
+    const startTokenIndex = updatedTokens.indexOf(startToken);
+    const endTokenIndex = updatedTokens.indexOf(endToken);
+
+    // If same token, split
+    if (startTokenIndex === endTokenIndex) {
+        /* 
+            Selection:      |---------|
+            Tokens:     ["Rich text input "] ["bold"] ["world!"] [" "]
+
+            Selection is within a token. We need to split that token to apply annotations:
+
+            First token: ["Ri"]
+            Middle token: ["ch text inp"] --> Annotations are applied here.
+            Last token: ["ut "]
+
+            Result: ["Ri"] ["ch text inp"] ["ut "] ["bold"] ["world!"] [" "]
+        */
+        
+        let firstToken = {
+            text: startToken.text.slice(0, startIndex),
+            annotations: {
+                ...startToken.annotations,
+                [type]: startToken.annotations[type]
+            }
+        }
+
+        // Middle token is the selected text
+        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, ""),
+            annotations: {
+                ...startToken.annotations,
+                [type]: !startToken.annotations[type]
+            }
+        }
+
+        let lastToken = {
+            // The replace method is used to remove the opening and closing rich text literal chars when parsing.
+            text: startToken.text.slice(endIndex , startToken.text.length).replace(withReplacement, ""),
+            annotations: {
+                ...startToken.annotations,
+                [type]: startToken.annotations[type]
+            }
+        }
+
+        // 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.
+        if (firstToken.text.length === 0 && lastToken.text.length === 0) {
+            updatedTokens.splice(startTokenIndex, 1, middleToken);
+            return { result: updatedTokens };
+        }
+
+        if (firstToken.text.length === 0) {
+            updatedTokens.splice(startTokenIndex, 1, middleToken, lastToken);
+            return { result: updatedTokens };
+        }
+
+        if (lastToken.text.length === 0) {
+            updatedTokens.splice(startTokenIndex, 1, firstToken, middleToken);
+            return { result: updatedTokens };
+        }
+
+        updatedTokens.splice(startTokenIndex, 1, firstToken, middleToken, lastToken)
+        return { result: updatedTokens };
+    }
+
+    // Cross-token selection
+    if (startTokenIndex !== endTokenIndex) {
+        // Before splitting, check if all selected tokens already have the annotation
+        const selectedTokens = updatedTokens.slice(startTokenIndex, endTokenIndex + 1);
+        const allSelectedTokensHaveAnnotation = selectedTokens.every((token) => token.annotations[type] === true);
+
+        let firstToken = {
+            text: startToken.text.slice(0, startIndex),
+            annotations: {
+                ...startToken.annotations,
+                [type]: startToken.annotations[type]
+            }
+        }
+
+        let secondToken = {
+            // The replace method is used to remove the opening and closing rich text literal chars when parsing.
+            text: startToken.text.slice(startIndex, startToken.text.length).replace(withReplacement, ""),
+            annotations: {
+                ...startToken.annotations,
+                [type]: allSelectedTokensHaveAnnotation ? false : true
+            }
+        }
+
+        const middleTokens = updatedTokens.slice(startTokenIndex + 1, endTokenIndex);
+        let updatedMiddleTokens = [...middleTokens];
+
+        for (const [index, token] of middleTokens.entries()) {
+            updatedMiddleTokens[index] = {
+                text: token.text,
+                annotations: {
+                    ...token.annotations,
+                    [type]: allSelectedTokensHaveAnnotation ? false : true
+                }
+            }
+        }
+
+        let secondToLastToken = {
+            text: endToken.text.slice(0, endIndex),
+            annotations: {
+                ...endToken.annotations,
+                [type]: allSelectedTokensHaveAnnotation ? false : true
+            }
+        }
+
+        let lastToken = {
+            // The replace method is used to remove the opening and closing rich text literal chars when parsing.
+            text: endToken.text.slice(endIndex, endToken.text.length).replace(withReplacement, ""),
+            annotations: {
+                ...endToken.annotations,
+                [type]: endToken.annotations[type]
+            }
+        }
+
+        // Catch empty tokens. Empty tokens are always at the extremes.
+        if (firstToken.text.length === 0 && lastToken.text.length === 0) {
+            updatedTokens = updatedTokens.slice(0, startTokenIndex).concat([secondToken, ...updatedMiddleTokens, secondToLastToken]).concat(updatedTokens.slice(endTokenIndex + 1));
+            return { result: updatedTokens };
+        }
+
+        if (firstToken.text.length === 0) {
+            updatedTokens = updatedTokens.slice(0, startTokenIndex).concat([secondToken, ...updatedMiddleTokens, secondToLastToken, lastToken]).concat(updatedTokens.slice(endTokenIndex + 1));
+            return { result: updatedTokens };
+        }
+
+        if (lastToken.text.length === 0) {
+            updatedTokens = updatedTokens.slice(0, startTokenIndex).concat([firstToken, secondToken, ...updatedMiddleTokens, secondToLastToken]).concat(updatedTokens.slice(endTokenIndex + 1));
+            return { result: updatedTokens };
+        }
+
+        updatedTokens = updatedTokens.slice(0, startTokenIndex).concat([firstToken, secondToken, ...updatedMiddleTokens, secondToLastToken, lastToken]).concat(updatedTokens.slice(endTokenIndex + 1));
+        return { result: updatedTokens };
+    }
+}
+
+// Concats tokens containing similar annotations
+const concatTokens = (tokens: Token[]) => {
+    let concatenedTokens = [];
+
+    for (const [index, token] of tokens.entries()) {
+        if (index === 0) {
+            concatenedTokens.push(token);
+            continue;
+        }
+
+        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.color === token.annotations.color) {
+            prevToken.text += token.text;
+            continue;
+        }
+
+        concatenedTokens.push(token);
+    }
+
+    return concatenedTokens;
+}
+
+export default function RichTextInput({ ref }) {
+    const inputRef = useRef<TextInput>(null);
+    const selectionRef = useRef({ start: 0, end: 0 });
+    const [tokens, setTokens] = useState([{
+        text: "",
+        annotations: {
+            bold: false,
+            italic: false,
+            lineThrough: false,
+            underline: false,
+            color: "black"
+        }
+    }]);
+
+    useEffect(() => {
+        if (tokens.length === 0) {
+            setTokens([{
+                text: "",
+                annotations: {
+                    bold: false,
+                    italic: false,
+                    lineThrough: false,
+                    underline: false,
+                    color: "black"
+                }
+            }])
+        }
+    }, [tokens]);
+
+    /**
+     * Prev text should not contain matching rich text formats.
+     * Those should be spliced once the corresponding tokens are created.
+     */
+    const prevTextRef = useRef(tokens.map(t => t.text).join(""));
+
+    // Find a better name
+    // To-do: Allow for multiple styles at once.
+    const [toSplit, setToSplit] = useState({
+        start: 0,
+        end: 0,
+        type: null
+    });
+
+    const handleSelectionChange = ({ nativeEvent }) => {
+        selectionRef.current = nativeEvent.selection;
+    }
+
+    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;
+        }
+
+        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(
+                tokens,
+                match.start,
+                match.end - 1,
+                annotation.style,
+                // Get the rich text opening char to replace it
+                getRequiredLiterals(match.expression).opening
+            );
+            const plain_text = result.reduce((acc, curr) => acc + curr.text, "");
+            /* const { updatedTokens, plain_text } = updateTokens(result, {
+                removed: getRequiredLiterals(match.expression).opening,
+                start: match.start,
+                added: ""
+            }) */
+
+            setTokens([...concatTokens(result)]);
+            prevTextRef.current = plain_text;
+
+
+            return;
+        }
+
+        if (diff.start === toSplit.start && diff.start === toSplit.end && diff.added.length > 0 && toSplit.type) {
+            const { result } = insertToken(tokens, diff.start, toSplit.type, diff.added);
+            const plain_text = result.map(t => t.text).join("");
+            setTokens([...concatTokens(result)]);
+            setToSplit({ start: 0, end: 0, type: null });
+            prevTextRef.current = plain_text;
+            return;
+        }
+
+        const { updatedTokens, plain_text} = updateTokens(tokens, diff);
+        
+        setTokens([...concatTokens(updatedTokens)]); 
+        prevTextRef.current = plain_text;
+    }
+
+    useImperativeHandle(ref, () => ({
+        toggleBold() {
+            const { start, end } = selectionRef.current;
+
+            if (start === end && toSplit.type === "bold") {
+                setToSplit({ start: 0, end: 0, type: null });
+                return;
+            }
+
+            if (start === end) {
+                setToSplit({ start, end, type: "bold" });
+                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,
+                    type: "bold"
+                })
+            }
+
+            const { result } = splitTokens(tokens, start, end, "bold");
+            setTokens([...concatTokens(result)]);
+            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+        },
+        toggleItalic() {
+            const { start, end } = selectionRef.current;
+
+            if (start === end && toSplit.type === "italic") {
+                setToSplit({ start: 0, end: 0, type: null });
+                return;
+            }
+
+            if (start === end) {
+                setToSplit({ start, end, type: "italic" });
+                return;
+            }
+
+            if (start < end) {
+                setToSplit({
+                    start: end,
+                    end: end,
+                    type: "italic"
+                })
+            }
+
+            const { result } = splitTokens(tokens, start, end, "italic");
+            setTokens([...concatTokens(result)]);
+            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+        },
+        toggleLineThrough() {
+            const { start, end } = selectionRef.current;
+
+            if (start === end && toSplit.type === "lineThrough") {
+                setToSplit({ start: 0, end: 0, type: null });
+                return;
+            }
+
+            if (start === end) {
+                setToSplit({ start, end, type: "lineThrough" });
+                return;
+            }
+
+            if (start < end) {
+                setToSplit({
+                    start: end,
+                    end: end,
+                    type: "lineThrough"
+                })
+            }
+
+            const { result } = splitTokens(tokens, start, end, "lineThrough");
+            setTokens([...concatTokens(result)]);
+            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+        },
+        toggleUnderline() {
+            const { start, end } = selectionRef.current;
+
+            if (start === end && toSplit.type === "underline") {
+                setToSplit({ start: 0, end: 0, type: null });
+                return;
+            }
+
+            if (start === end) {
+                setToSplit({ start, end, type: "underline" });
+                return;
+            }
+
+            if (start < end) {
+                setToSplit({
+                    start: end,
+                    end: end,
+                    type: "underline"
+                })
+            }
+
+            const { result } = splitTokens(tokens, start, end, "underline");
+            setTokens([...concatTokens(result)]);
+            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+        },
+        setValue(value: string) {
+            // To keep styles, parsing should be done before setting value
+            const { tokens, plain_text } = parseRichTextString(value, PATTERNS);
+            setTokens([...concatTokens(tokens)]);
+            prevTextRef.current = plain_text;
+        }
+    }))
+
+    return (
+       <View style={{ position: "relative" }}>
+            <TextInput
+                multiline={true}
+                ref={inputRef}
+                autoCorrect={false}
+                autoComplete="off"
+                style={styles.textInput}
+                placeholder="Rich text input"
+                onSelectionChange={handleSelectionChange}
+                onChangeText={handleOnChangeText}
+            >
+                {tokens.map((token, i) => {
+                    return (
+                        <Text key={i} style={[
+                            styles.text,
+                            ...Object.entries(token.annotations).map(([key, value]) => value ? styles[key] : null).filter(Boolean),
+                            token.annotations.underline && token.annotations.lineThrough && styles.underlineLineThrough
+                        ]}>
+                            {token.text}
+                        </Text>
+                    )
+                })}
+            </TextInput>
+       </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    textInput: {
+        fontSize: 20,
+        width: "100%",
+        paddingHorizontal: 16
+    },
+    text: {
+        color: "black"
+    },
+    bold: {
+        fontWeight: 'bold',
+    },
+    italic: {
+        fontStyle: "italic"
+    },
+    lineThrough: {
+        textDecorationLine: "line-through"
+    },
+    underline: {
+        textDecorationLine: "underline",
+    },
+    comment: {
+        textDecorationLine: "underline",
+        textDecorationColor: "rgba(255, 203, 0, .35)",
+        backgroundColor: "rgba(255, 203, 0, .12)"
+    },
+    underlineLineThrough: {
+        textDecorationLine: "underline line-through"
+    }
+});

package/src/Toolbar.tsx

@@ -0,0 +1,94 @@
+import { View, Button, StyleSheet, TouchableOpacity, Keyboard } from "react-native";
+import { RefObject, Ref } from "react";
+import FontAwesome6 from '@expo/vector-icons/FontAwesome6';
+
+interface RichTextInput {
+    toggleBold: () => void;
+    toggleItalic: () => void;
+    setValue: (value: string) => void;
+}
+
+interface ToolbarProps {
+    richTextInputRef: Ref<RichTextInput>,
+}
+
+export default function Toolbar({
+    richTextInputRef
+} : ToolbarProps) {
+
+    const handleBold = () => {
+        richTextInputRef.current.toggleBold();
+    }
+
+    const handleItalic = () => {
+        richTextInputRef.current.toggleItalic();
+    }
+
+    const handleLineThrough = () => {
+        richTextInputRef.current.toggleLineThrough();
+    }
+
+    const handleUnderline = () => {
+        richTextInputRef.current.toggleUnderline();
+    }
+
+    const handleKeyboardDismiss = () => {
+        Keyboard.dismiss();
+    }
+
+    return (
+        <View style={styles.toolbar}>
+            <TouchableOpacity style={styles.toolbarButton} onPress={handleBold}>
+                <FontAwesome6 name="bold" size={16} color="black" />
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.toolbarButton} onPress={handleItalic}>
+                <FontAwesome6 name="italic" size={16} color="black" />
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.toolbarButton} onPress={handleLineThrough}>
+                <FontAwesome6 name="strikethrough" size={16} color="black" />
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.toolbarButton} onPress={handleUnderline}>
+                <FontAwesome6 name="underline" size={16} color="black" />
+            </TouchableOpacity>
+
+            <TouchableOpacity style={[styles.toolbarButton, styles.keyboardDown]} onPress={handleKeyboardDismiss}>
+                <FontAwesome6 name="keyboard" size={16} color="black" />
+                <View style={styles.keyboardArrowContainer}>
+                    <FontAwesome6 name="chevron-down" size={8} color="black"/>
+                </View>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    toolbar: {
+        width: "100%",
+        height: 50,
+        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+        flexDirection: "row",
+        gap: 8,
+        paddingHorizontal: 16,
+        marginTop: 16
+    },
+    toolbarButton: {
+        height: 50,
+        width: 50,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    keyboardDown: {
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        paddingBottom: 6
+    },
+    keyboardArrowContainer: {
+        position: "absolute",
+        bottom: 13
+    }
+});