enriched-text-input 1.0.1 → 1.0.2

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,6 +1,5 @@
-import { useRef, useState } from 'react';
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View, Button } from 'react-native';
+import { useRef } from 'react';
+import { StyleSheet, View } from 'react-native';
 
 import { RichTextInput, Toolbar } from 'enriched-text-input';
 
@@ -10,8 +9,14 @@ export default function App() {
   return (
     <View style={styles.container}>
       <RichTextInput ref={richTextInputRef}/>
-      <Toolbar richTextInputRef={richTextInputRef} />
-      <StatusBar style="auto" />
+      <Toolbar richTextInputRef={richTextInputRef}>
+        <Toolbar.Bold />
+        <Toolbar.Italic />
+        <Toolbar.Underline />
+        <Toolbar.Strikethrough />
+        <Toolbar.Code />
+        <Toolbar.Keyboard />
+      </Toolbar>
     </View>
   );
 }

package/index.ts

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

package/package.json

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

package/src/RichTextInput.tsx

@@ -1,17 +1,9 @@
 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;
-    }
+    annotations: Annotations
 }
 
 interface Diff {
@@ -25,7 +17,7 @@ interface Annotations {
     italic: boolean;
     lineThrough: boolean;
     underline: boolean;
-    color: string;
+    code: boolean;
 }
 
 interface RichTextMatch {
@@ -35,11 +27,16 @@ interface RichTextMatch {
     end: number;
     expression: string;
 }
+
+interface RichTextInputProps {
+    ref: any
+}
                         
 const PATTERNS = [
-  { style: "bold", regex: "\\*([^*]+)\\*" },
-  { style: "italic", regex: "_([^_]+)_" },
-  { style: "lineThrough", regex: "~([^~]+)~" },
+  { style: "bold", regex: "\\*([^*]+)\\*", render: <Text style={{ fontWeight: "bold" }} /> },
+  { style: "italic", regex: "_([^_]+)_", render: <Text style={{ fontStyle: "italic" }} /> },
+  { style: "lineThrough", regex: "~([^~]+)~", render: <Text style={{ textDecorationLine: "line-through" }} /> },
+  { style: "code", regex: "`([^`]+)`", render: <Text style={{ fontFamily: "ui-monospace", backgroundColor: "lightgray", color: "red", paddingHorizontal: 6 }} /> },
 ];
 
 function insertAt(str, index, substring) {
@@ -111,11 +108,12 @@ 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,
+    bold: nextAnnotations.bold ? !prevAnnotations.bold : prevAnnotations.bold,
+    italic: nextAnnotations.italic ? !prevAnnotations.italic : prevAnnotations.italic,
+    lineThrough: nextAnnotations.lineThrough ? !prevAnnotations.lineThrough : prevAnnotations.lineThrough,
+    underline: nextAnnotations.underline ? !prevAnnotations.underline : prevAnnotations.underline,
+    code: nextAnnotations.code ? !prevAnnotations.code : prevAnnotations.code,
+    /* color: nextAnnotations.color */
   };
 }
 
@@ -152,7 +150,7 @@ const parseRichTextString = (richTextString: string, patterns: { regex: string,
                 italic: false,
                 lineThrough: false,
                 underline: false,
-                color: "black"
+                code: false
             }
         }
     ];
@@ -166,7 +164,7 @@ const parseRichTextString = (richTextString: string, patterns: { regex: string,
                 tokens,
                 match.start,
                 match.end - 1,
-                pattern.style,
+                { [pattern.style]: true },
                 getRequiredLiterals(match.expression).opening
             );
             tokens = splittedTokens;
@@ -194,7 +192,7 @@ const parseTokens = (tokens) => {
 
 // Inserts a token at the given index
 // Only when start === end
-function insertToken(tokens: Token[], index: number, type: string, text = "" ) {
+function insertToken(tokens: Token[], index: number, annotations: Annotations, text = "" ) {
     const updatedTokens = [...tokens];
 
     let plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
@@ -203,10 +201,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,30 +219,20 @@ 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)
     }
 
     let lastToken = {
         text: startToken.text.slice(startIndex , startToken.text.length),
-        annotations: {
-            ...startToken.annotations,
-            [type]: startToken.annotations[type]
-        }
+        annotations: startToken.annotations
     }
 
     /**
@@ -434,7 +419,7 @@ 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 +468,32 @@ 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]
-            }
+            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 +543,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) };
     }
 }
 
@@ -619,7 +564,7 @@ const concatTokens = (tokens: Token[]) => {
             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.annotations.code === token.annotations.code) {
             prevToken.text += token.text;
             continue;
         }
@@ -630,7 +575,64 @@ const concatTokens = (tokens: Token[]) => {
     return concatenedTokens;
 }
 
-export default function RichTextInput({ ref }) {
+function Token({ token }) {
+    const { text, annotations } = token;
+    const wrappers = [];
+
+    if (annotations.bold) wrappers.push(Bold);
+    if (annotations.italic) wrappers.push(Italic);
+    if (annotations.underline && annotations.lineThrough) wrappers.push(UnderlineStrikethrough);
+    if (annotations.underline) wrappers.push(Underline);
+    if (annotations.lineThrough) wrappers.push(Strikethrough);
+    if (annotations.code) wrappers.push(Code);
+
+    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>
+    )
+}
+
+export default function RichTextInput(props: RichTextInputProps) {
+    const {
+        ref
+    } = props;
+
     const inputRef = useRef<TextInput>(null);
     const selectionRef = useRef({ start: 0, end: 0 });
     const [tokens, setTokens] = useState([{
@@ -640,10 +642,10 @@ export default function RichTextInput({ ref }) {
             italic: false,
             lineThrough: false,
             underline: false,
-            color: "black"
+            code: false
         }
     }]);
-
+    console.log(tokens);
     useEffect(() => {
         if (tokens.length === 0) {
             setTokens([{
@@ -653,7 +655,7 @@ export default function RichTextInput({ ref }) {
                     italic: false,
                     lineThrough: false,
                     underline: false,
-                    color: "black"
+                    code: false
                 }
             }])
         }
@@ -670,7 +672,13 @@ export default function RichTextInput({ ref }) {
     const [toSplit, setToSplit] = useState({
         start: 0,
         end: 0,
-        type: null
+        annotations: {
+            bold: false,
+            italic: false,
+            lineThrough: false,
+            underline: false,
+            code: false
+        }
     });
 
     const handleSelectionChange = ({ nativeEvent }) => {
@@ -695,29 +703,43 @@ export default function RichTextInput({ ref }) {
                 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 (diff.start === toSplit.start
+            && diff.start === toSplit.end
+            && diff.added.length > 0
+            && Object.values(toSplit.annotations).includes(true)) {
+            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 });
+
+            // Reset
+            setToSplit({
+                start: 0,
+                end: 0,
+                annotations: {
+                    bold: false,
+                    italic: false,
+                    lineThrough: false,
+                    underline: false,
+                    code: false
+                }
+            });
             prevTextRef.current = plain_text;
             return;
         }
@@ -729,16 +751,37 @@ export default function RichTextInput({ ref }) {
     }
 
     useImperativeHandle(ref, () => ({
+
+        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;
+        },
         toggleBold() {
             const { start, end } = selectionRef.current;
 
-            if (start === end && toSplit.type === "bold") {
-                setToSplit({ start: 0, end: 0, type: null });
+            if (start === end && toSplit.annotations.bold) {
+                setToSplit({
+                    start,
+                    end,
+                    annotations: {
+                        ...toSplit.annotations,
+                        bold: false
+                    }
+                });
                 return;
             }
 
             if (start === end) {
-                setToSplit({ start, end, type: "bold" });
+                setToSplit({
+                    start,
+                    end,
+                    annotations: {
+                        ...toSplit.annotations,
+                        bold: true
+                    }
+                });
                 return;
             }
 
@@ -749,24 +792,41 @@ export default function RichTextInput({ ref }) {
                 setToSplit({
                     start: end,
                     end: end,
-                    type: "bold"
+                    annotations: {
+                        ...toSplit.annotations,
+                        bold: true
+                    }
                 })
             }
 
-            const { result } = splitTokens(tokens, start, end, "bold");
+            const { result } = splitTokens(tokens, start, end, { bold: true });
             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 });
+            if (start === end && toSplit.annotations.italic ) {
+                setToSplit({
+                    start,
+                    end,
+                    annotations: {
+                        ...toSplit.annotations,
+                        italic: false
+                    }
+                });
                 return;
             }
 
             if (start === end) {
-                setToSplit({ start, end, type: "italic" });
+                setToSplit({
+                    start,
+                    end,
+                    annotations: {
+                        ...toSplit.annotations,
+                        italic: true
+                    }
+                });
                 return;
             }
 
@@ -774,24 +834,41 @@ export default function RichTextInput({ ref }) {
                 setToSplit({
                     start: end,
                     end: end,
-                    type: "italic"
-                })
+                    annotations: {
+                        ...toSplit.annotations,
+                        italic: true
+                    }
+                });
             }
 
-            const { result } = splitTokens(tokens, start, end, "italic");
+            const { result } = splitTokens(tokens, start, end, { italic: true });
             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 });
+            if (start === end && toSplit.annotations.lineThrough) {
+                setToSplit({
+                    start,
+                    end,
+                    annotations: {
+                        ...toSplit.annotations,
+                        lineThrough: false
+                    }
+                });
                 return;
             }
 
             if (start === end) {
-                setToSplit({ start, end, type: "lineThrough" });
+                setToSplit({
+                    start,
+                    end,
+                    annotations: {
+                        ...toSplit.annotations,
+                        lineThrough: true
+                    }
+                });
                 return;
             }
 
@@ -799,24 +876,41 @@ export default function RichTextInput({ ref }) {
                 setToSplit({
                     start: end,
                     end: end,
-                    type: "lineThrough"
+                    annotations: {
+                        ...toSplit.annotations,
+                        lineThrough: true
+                    }
                 })
             }
 
-            const { result } = splitTokens(tokens, start, end, "lineThrough");
+            const { result } = splitTokens(tokens, start, end, { lineThrough: true });
             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 });
+            if (start === end && toSplit.annotations.underline) {
+                setToSplit({
+                    start: 0,
+                    end: 0,
+                    annotations: {
+                        ...toSplit.annotations,
+                        underline: false
+                    }
+                });
                 return;
             }
 
             if (start === end) {
-                setToSplit({ start, end, type: "underline" });
+                setToSplit({
+                    start,
+                    end,
+                    annotations: {
+                        ...toSplit.annotations,
+                        underline: true
+                    }
+                });
                 return;
             }
 
@@ -824,45 +918,75 @@ export default function RichTextInput({ ref }) {
                 setToSplit({
                     start: end,
                     end: end,
-                    type: "underline"
+                    annotations: {
+                        ...toSplit.annotations,
+                        underline: true
+                    }
                 })
             }
 
-            const { result } = splitTokens(tokens, start, end, "underline");
+            const { result } = splitTokens(tokens, start, end, { underline: 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;
+        toggleCode() {
+            const { start, end } = selectionRef.current;
+
+            if (start === end && toSplit.annotations.code ) {
+                setToSplit({
+                    start: 0,
+                    end: 0,
+                    annotations: {
+                        ...toSplit.annotations,
+                        code: false
+                    }
+                });
+                return;
+            }
+
+            if (start === end) {
+                setToSplit({
+                    start,
+                    end,
+                    annotations: {
+                        ...toSplit.annotations,
+                        code: true
+                    }
+                });
+                return;
+            }
+
+            if (start < end) {
+                setToSplit({
+                    start: end,
+                    end: end,
+                    annotations: {
+                        ...toSplit.annotations,
+                        code: true
+                    }
+                });
+            }
+
+            const { result } = splitTokens(tokens, start, end, { code: true });
+            setTokens([...concatTokens(result)]);
+            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} />)}
+                </Text>
             </TextInput>
        </View>
     );
@@ -870,12 +994,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 +1014,28 @@ 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"
     }
 });

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,124 @@ 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();
     }
 
+    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();
     }
 
+    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();
     }
 
+    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();
     }
 
+    return (
+        <TouchableOpacity style={styles.toolbarButton} onPress={handleUnderline}>
+            <FontAwesome6 name="underline" size={16} color="black" />
+        </TouchableOpacity>
+    )
+}
+
+Toolbar.Code = () => {
+    const richTextInputRef = useToolbarContext();
+
+    const handleCode = () => {
+        richTextInputRef.current.toggleCode();
+    }
+
+    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({