enriched-text-input 1.0.1 → 1.0.3

package/README.md

@@ -7,16 +7,16 @@
 
 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.
+It will only support text styling since it's not possible to render images inside `Text` views in React Native. [Try it on Expo Snack](https://snack.expo.dev/@patosala/enriched-text-input).
 
 ## Motivation
 The field for rich-text in react native is still a bit green. Current libraries that add support for rich-text in react native applications are either WebViews wrapping libraries for the web, limiting customization, or require native code which drops support for Expo Go and react-native-web.
 
-In theory, by only using JavaScript we are able to provide better cross-platform compatibility and the possibility to style however you want elements like links, mentions, bold, italic, unerline text and more.
+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~~).
+- [x] Basic text formatting (__bold__, _italic_, underline, ~~strikethrough~~ and `codeblocks`).
 - [x] Rich text format parsing.
 - [ ] Links and mentions.
 - [ ] Custom styling.
@@ -27,6 +27,7 @@ In theory, by only using JavaScript we are able to provide better cross-platform
 
 ## Known limitations
 - Inline images.
+- Only `Text`component styles are supported.
 
 ## Installation
 ```
@@ -35,7 +36,7 @@ npm install enriched-text-input
 
 ## Usage
 ```js
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { RichTextInput, Toolbar } from 'enriched-text-input';
@@ -46,7 +47,14 @@ export default function App() {
   return (
     <View style={styles.container}>
       <RichTextInput ref={richTextInputRef}/>
-      <Toolbar richTextInputRef={richTextInputRef} />
+      <Toolbar richTextInputRef={richTextInputRef}>
+        <Toolbar.Bold />
+        <Toolbar.Italic />
+        <Toolbar.Underline />
+        <Toolbar.Strikethrough />
+        <Toolbar.Code />
+        <Toolbar.Keyboard />
+      </Toolbar>
     </View>
   );
 }
@@ -59,6 +67,7 @@ const styles = StyleSheet.create({
   },
 });
 
+
 ```
 
 ## Contributing

package/example/App.tsx

@@ -1,18 +1,74 @@
 import { useRef, useState } from 'react';
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View, Button } from 'react-native';
+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 { 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 richTextInputRef = useRef(null);
 
+  const customPatterns = [
+    ...PATTERNS,
+    { style: "comment", regex: null, render: Comment }
+  ];
+
+  const handleComment = () => {
+    richTextInputRef.current?.toggleStyle("comment");
+  }
+
+  const handleGetRichText = () => {
+    const richText = richTextInputRef.current?.getRichText();
+    console.log(richText);
+  }
+
   return (
-    <View style={styles.container}>
-      <RichTextInput ref={richTextInputRef}/>
-      <Toolbar richTextInputRef={richTextInputRef} />
-      <StatusBar style="auto" />
-    </View>
+    <KeyboardAvoidingView style={styles.container} behavior="padding">
+      <View style={{ flex: 1 }}>
+        {/* <TextInput
+          style={{ fontSize: 20, padding: 16 }}
+          value={rawValue}
+          onChangeText={(text) => setRawValue(text)}
+        />
+        <Button
+          title='Set rich text string'
+          onPress={() => richTextInputRef.current?.setValue(rawValue)}
+        /> */}
+        <RichTextInput
+          ref={richTextInputRef}
+          patterns={customPatterns}/>
+
+          <Button
+            title='Get rich text string (check console)'
+            onPress={handleGetRichText}
+            />
+      </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>
   );
 }
 
@@ -22,4 +78,11 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     paddingTop: 120
   },
+  toolbarButton: {
+      height: 50,
+      width: 50,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+  }
 });

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "enriched-text-input",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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,17 +1,10 @@
-import { useState, useImperativeHandle, useRef, useEffect } from "react";
+import { useState, useImperativeHandle, useRef, useEffect, ReactElement, JSX } from "react";
 import { TextInput, Text, StyleSheet, View, Linking } from "react-native";
-
-const exampleText = "_None_ *bold* _italic_ ~strikethrough~ none";
+import { get } from "react-native/Libraries/TurboModule/TurboModuleRegistry";
 
 interface Token {
     text: string;
-    annotations: {
-        bold: boolean;
-        italic: boolean;
-        lineThrough: boolean;
-        underline: boolean;
-        color: string;
-    }
+    annotations: Annotations
 }
 
 interface Diff {
@@ -25,7 +18,8 @@ interface Annotations {
     italic: boolean;
     lineThrough: boolean;
     underline: boolean;
-    color: string;
+    underlineLineThrough: boolean;
+    code: boolean;
 }
 
 interface RichTextMatch {
@@ -35,11 +29,27 @@ interface RichTextMatch {
     end: number;
     expression: string;
 }
+
+interface Pattern {
+    regex: string;
+    style: string;
+    render: any
+}
+
+interface RichTextInputProps {
+    ref: any;
+    patterns?: Pattern[]
+}
                         
-const PATTERNS = [
-  { style: "bold", regex: "\\*([^*]+)\\*" },
-  { style: "italic", regex: "_([^_]+)_" },
-  { style: "lineThrough", regex: "~([^~]+)~" },
+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 }
 ];
 
 function insertAt(str, index, substring) {
@@ -72,7 +82,7 @@ function findMatch(str: string, regexExpression: string) : RichTextMatch | null
     : null;
 }
 
-function getRequiredLiterals(regexString) {
+function getRequiredLiterals(regexString: string) {
   // Strip leading/trailing slashes and flags (if user passed /.../ form)
   regexString = regexString.replace(/^\/|\/[a-z]*$/g, "");
 
@@ -109,14 +119,19 @@ function getRequiredLiterals(regexString) {
   };
 }
 
-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,
-  };
+/**
+ * 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
@@ -147,26 +162,20 @@ const parseRichTextString = (richTextString: string, patterns: { regex: string,
     let tokens = initalTokens || [
         {
             text: richTextString,
-            annotations: {
-                bold: false,
-                italic: false,
-                lineThrough: false,
-                underline: false,
-                color: "black"
-            }
+            annotations: {}
         }
     ];
     let plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
 
     for (const pattern of patterns) {
-        let match = findMatch(plain_text, pattern.regex);
+        let match = pattern.regex ? findMatch(plain_text, pattern.regex) : null;
         
         if (match) {
             const { result: splittedTokens } = splitTokens(
                 tokens,
                 match.start,
                 match.end - 1,
-                pattern.style,
+                { [pattern.style]: true },
                 getRequiredLiterals(match.expression).opening
             );
             tokens = splittedTokens;
@@ -188,13 +197,27 @@ const parseRichTextString = (richTextString: string, patterns: { regex: string,
 }
 
 // Returns a rich text string
-const parseTokens = (tokens) => {
-    
+const parseTokens = (tokens: Token[], patterns: Pattern[]) => {
+    return tokens.map(token => {
+        const { text, annotations } = token;
+        const wrappers = [];
+
+        Object.keys(annotations).forEach(key => {
+            // If annotation has a truthy value, add the corresponding wrapper.
+            if (annotations[key]) wrappers.push(getRequiredLiterals(patterns.find(p => p.style === key).regex));
+        });
+
+        return wrappers.reduce(
+            (children, Wrapper) => `${Wrapper.opening}${children}${Wrapper.closing}`,
+            text
+        );
+    }).join("");
 }
 
 // Inserts a token at the given index
 // Only when start === end
-function insertToken(tokens: Token[], index: number, type: string, text = "" ) {
+// 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];
 
     let plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
@@ -203,10 +226,7 @@ function insertToken(tokens: Token[], index: number, type: string, text = "" ) {
     if (plain_text.length === index) {
         updatedTokens.push({
             text: text,
-            annotations: {
-                ...updatedTokens[updatedTokens.length - 1].annotations,
-                [type]: !updatedTokens[updatedTokens.length - 1].annotations[type]
-            }
+            annotations: concileAnnotations(updatedTokens[updatedTokens.length - 1].annotations, annotations)
         });
 
         return { result: updatedTokens.filter(token => token.text.length > 0) };
@@ -224,48 +244,35 @@ function insertToken(tokens: Token[], index: number, type: string, text = "" ) {
     }
 
     const startTokenIndex = updatedTokens.indexOf(startToken);
-
     let firstToken = {
         text: startToken.text.slice(0, startIndex),
-        annotations: {
-            ...startToken.annotations,
-            [type]: startToken.annotations[type]
-        }
+        annotations: startToken.annotations
     }
 
     // Middle token is the selected text
     let middleToken = {
         text: text,
-        annotations: {
-            ...startToken.annotations,
-            [type]: !startToken.annotations[type]
-        }
+        annotations: concileAnnotations(startToken.annotations, annotations) // prevAnnotations + newAnnotations
     }
 
     let lastToken = {
         text: startToken.text.slice(startIndex , startToken.text.length),
-        annotations: {
-            ...startToken.annotations,
-            [type]: startToken.annotations[type]
-        }
+        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)
+ * 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.
+ */
 const updateTokens = (tokens: Token[], diff: Diff) => {
     let updatedTokens = [...tokens];
     const plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
@@ -427,14 +434,16 @@ 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: Add support for multiple annotations. [done].
+ * To-do: Separate the logic of finding the corresponding token into another function.
+ */
 const splitTokens = (
     tokens: Token[],
     start: number,
     end: number,
-    type: string,
+    annotations: Annotations,
     /** Used to strip opening and closing chars of rich text matches. */
     withReplacement?: string
 ) => {
@@ -483,56 +492,37 @@ const splitTokens = (
         
         let firstToken = {
             text: startToken.text.slice(0, startIndex),
-            annotations: {
-                ...startToken.annotations,
-                [type]: startToken.annotations[type]
-            }
+            annotations: startToken.annotations
         }
 
         // 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]
-            }
+            /** 
+             * 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)
         }
 
         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 };
+            annotations: startToken.annotations
         }
 
         updatedTokens.splice(startTokenIndex, 1, firstToken, middleToken, lastToken)
-        return { result: updatedTokens };
+        return { result: updatedTokens.filter(token => token.text.length > 0) };
     }
 
     // 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 type = Object.keys(annotations)[0]; // When splitting we only pass one key to annotations param.
         const allSelectedTokensHaveAnnotation = selectedTokens.every((token) => token.annotations[type] === true);
 
         let firstToken = {
@@ -582,24 +572,8 @@ const splitTokens = (
             }
         }
 
-        // 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 };
+        return { result: updatedTokens.filter(token => token.text.length > 0) };
     }
 }
 
@@ -615,11 +589,11 @@ 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.color === token.annotations.color) {
+        /**
+         * 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])) {
             prevToken.text += token.text;
             continue;
         }
@@ -630,7 +604,87 @@ const concatTokens = (tokens: Token[]) => {
     return concatenedTokens;
 }
 
-export default function RichTextInput({ ref }) {
+interface TokenProps {
+    token: Token;
+    patterns: Pattern[]
+}
+
+function Token(props: TokenProps) : JSX.Element {
+    const { token, patterns } = props;
+    const { text, annotations } = token;
+    const wrappers = [];
+
+    Object.keys(annotations).forEach(key => {
+        // If annotation has a truthy value, add the corresponding wrapper.
+        if (annotations[key]) wrappers.push(patterns.find(p => p.style === key).render);
+    });
+
+    return wrappers.reduce(
+        (children, Wrapper) => <Wrapper>{children}</Wrapper>,
+        text
+    );
+}
+
+function Code({ children }) {
+    return (
+        <Text style={styles.code}>{children}</Text>
+    )
+}
+
+function Bold({ children }) {
+    return (
+        <Text style={styles.bold}>{children}</Text>
+    )
+}
+
+function Italic({ children }) {
+    return (
+        <Text style={styles.italic}>{children}</Text>
+    )
+}
+
+function Underline({ children }) {
+    return (
+        <Text style={styles.underline}>{children}</Text>
+    )
+}
+
+function Strikethrough({ children }) {
+    return (
+        <Text style={styles.lineThrough}>{children}</Text>
+    )
+}
+
+function UnderlineStrikethrough({ children }) {
+    return (
+        <Text style={styles.underlineLineThrough}>{children}</Text>
+    )
+}
+
+function Heading({ children }) {
+    return (
+        <Text style={styles.heading}>{children}</Text>
+    )
+}
+
+function SubHeading({ children }) {
+    return (
+        <Text style={styles.subHeading}>{children}</Text>
+    )
+}
+
+function SubSubHeading({ children }) {
+    return (
+        <Text style={styles.subSubHeading}>{children}</Text>
+    )
+}
+
+export default function RichTextInput(props: RichTextInputProps) {
+    const {
+        ref,
+        patterns = PATTERNS
+    } = props;
+
     const inputRef = useRef<TextInput>(null);
     const selectionRef = useRef({ start: 0, end: 0 });
     const [tokens, setTokens] = useState([{
@@ -640,7 +694,7 @@ export default function RichTextInput({ ref }) {
             italic: false,
             lineThrough: false,
             underline: false,
-            color: "black"
+            code: false
         }
     }]);
 
@@ -653,7 +707,7 @@ export default function RichTextInput({ ref }) {
                     italic: false,
                     lineThrough: false,
                     underline: false,
-                    color: "black"
+                    code: false
                 }
             }])
         }
@@ -670,7 +724,7 @@ export default function RichTextInput({ ref }) {
     const [toSplit, setToSplit] = useState({
         start: 0,
         end: 0,
-        type: null
+        annotations: {}
     });
 
     const handleSelectionChange = ({ nativeEvent }) => {
@@ -682,7 +736,7 @@ export default function RichTextInput({ ref }) {
 
         let match : RichTextMatch | null = null;
 
-        for (const pattern of PATTERNS) {
+        for (const pattern of patterns) {
             match = findMatch(nextText, pattern.regex);
             if (match) break;
         }
@@ -690,38 +744,44 @@ export default function RichTextInput({ ref }) {
         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 annotation = patterns.find(p => p.regex === match.expression);
             const { result } = splitTokens(
                 tokens,
                 match.start,
                 match.end - 1,
-                annotation.style,
+                { [annotation.style]: true },
                 // 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);
+        if (Object.values(toSplit.annotations).some(Boolean) && diff.start === toSplit.start && diff.start === toSplit.end) {
+            const { result } = insertToken(
+                tokens,
+                diff.start,
+                toSplit.annotations,
+                diff.added
+            );
             const plain_text = result.map(t => t.text).join("");
-            setTokens([...concatTokens(result)]);
-            setToSplit({ start: 0, end: 0, type: null });
+            setTokens(concatTokens(result));
+
+            // Reset
+            setToSplit({
+                start: 0,
+                end: 0,
+                annotations: {}
+            });
             prevTextRef.current = plain_text;
             return;
         }
 
+        // Default update
         const { updatedTokens, plain_text} = updateTokens(tokens, diff);
         
         setTokens([...concatTokens(updatedTokens)]); 
@@ -729,140 +789,61 @@ export default function RichTextInput({ ref }) {
     }
 
     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));
+        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;
         },
-        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));
+        getRichText() {
+            return parseTokens(tokens, patterns);
         },
-        toggleLineThrough() {
+        toggleStyle(style: string) {
             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" });
+                    start,
+                    end,
+                    annotations: concileAnnotations(toSplit.annotations, { [style]: 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,
-                    type: "underline"
+                    annotations: concileAnnotations(toSplit.annotations, { [style]: true })
                 })
             }
 
-            const { result } = splitTokens(tokens, start, end, "underline");
+            const { result } = splitTokens(tokens, start, end, { [style]: true });
             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;
+            requestAnimationFrame(() => {
+                inputRef.current.setSelection(start, end);
+            })
         }
-    }))
+    }));
 
     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>
-                    )
-                })}
+                <Text style={styles.text}>
+                    {tokens.map((token, i) => <Token key={i} token={token} patterns={patterns}/>)}
+                </Text>
             </TextInput>
        </View>
     );
@@ -870,12 +851,13 @@ export default function RichTextInput({ ref }) {
 
 const styles = StyleSheet.create({
     textInput: {
-        fontSize: 20,
         width: "100%",
-        paddingHorizontal: 16
+        paddingHorizontal: 16,
+        fontSize: 20,
+        zIndex: 1
     },
     text: {
-        color: "black"
+        color: "black",
     },
     bold: {
         fontWeight: 'bold',
@@ -889,12 +871,40 @@ const styles = StyleSheet.create({
     underline: {
         textDecorationLine: "underline",
     },
-    comment: {
-        textDecorationLine: "underline",
-        textDecorationColor: "rgba(255, 203, 0, .35)",
-        backgroundColor: "rgba(255, 203, 0, .12)"
-    },
     underlineLineThrough: {
         textDecorationLine: "underline line-through"
+    },
+    codeContainer: {
+        backgroundColor: "lightgray",
+        paddingHorizontal: 4,
+        borderRadius: 4,
+        height: 24,
+        position: "absolute",
+        top: 10
+    },
+    code: {
+        fontFamily: "ui-monospace",
+        color: "#EB5757",
+        fontSize: 20,
+        backgroundColor: "rgba(135, 131, 120, .15)"
+    },
+    highlight: {
+        width: "100%",
+        position: "absolute",
+        padding: 20,
+        height: 24,
+        backgroundColor: "blue"
+    },
+    heading: {
+        fontSize: 32,
+        fontWeight: "bold"
+    },
+    subHeading: {
+        fontSize: 28,
+        fontWeight: "bold"
+    },
+    subSubHeading: {
+        fontSize: 24,
+        fontWeight: "bold"
     }
 });

package/src/Toolbar.tsx

@@ -1,5 +1,5 @@
-import { View, Button, StyleSheet, TouchableOpacity, Keyboard } from "react-native";
-import { RefObject, Ref } from "react";
+import { View, ScrollView, StyleSheet, TouchableOpacity, Keyboard } from "react-native";
+import { useContext, createContext, Ref, useState, useEffect } from "react";
 import FontAwesome6 from '@expo/vector-icons/FontAwesome6';
 
 interface RichTextInput {
@@ -10,58 +10,169 @@ interface RichTextInput {
 
 interface ToolbarProps {
     richTextInputRef: Ref<RichTextInput>,
+    children: React.ReactNode
+}
+
+const ToolbarContext = createContext(null);
+
+const useToolbarContext = () => {
+    const context = useContext(ToolbarContext);
+    
+    return context;
 }
 
 export default function Toolbar({
-    richTextInputRef
+    richTextInputRef,
+    children
 } : ToolbarProps) {
 
+    const [ref, setRef] = useState(null);
+
+    useEffect(() => {
+        setRef(richTextInputRef);
+    }, [richTextInputRef]);
+
+    return (
+        <ToolbarContext.Provider value={ref}>
+            <ScrollView
+                style={styles.toolbar}
+                horizontal
+                keyboardShouldPersistTaps="always"
+            >
+                {children}
+            </ScrollView>
+        </ToolbarContext.Provider>
+    );
+}
+
+Toolbar.Bold = () => {
+    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" />
+        </TouchableOpacity>
+    )
+}
+
+Toolbar.Italic = () => {
+    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" />
+        </TouchableOpacity>
+    )
+}
+
+Toolbar.Strikethrough = () => {
+    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" />
+        </TouchableOpacity>
+    )
+}
+
+Toolbar.Underline = () => {
+    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" />
+        </TouchableOpacity>
+    )
+}
+
+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="black" />
+            <FontAwesome6 name="1" size={16} color="black" />
+        </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="black" />
+            <FontAwesome6 name="2" size={16} color="black" />
+        </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="black" />
+            <FontAwesome6 name="3" size={16} color="black" />
+        </TouchableOpacity>
+    )
+}
+
+Toolbar.Code = () => {
+    const richTextInputRef = useToolbarContext();
+
+    const handleCode = () => {
+        richTextInputRef.current.toggleStyle("code");
     }
 
+    return (
+        <TouchableOpacity style={styles.toolbarButton} onPress={handleCode}>
+            <FontAwesome6 name="code" size={16} color="black" />
+        </TouchableOpacity>
+    )
+}
+
+Toolbar.Keyboard = () => {
     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>
-    );
+       <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>
+    )
 }
 
 const styles = StyleSheet.create({
@@ -90,5 +201,9 @@ const styles = StyleSheet.create({
     keyboardArrowContainer: {
         position: "absolute",
         bottom: 13
+    },
+    heading: {
+        flexDirection: "row",
+        gap: 4
     }
 });