enriched-text-input 1.0.2 → 1.0.3

package/example/App.tsx

@@ -1,23 +1,74 @@
-import { useRef } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { useRef, useState } from 'react';
+import { StyleSheet, View, KeyboardAvoidingView, Text, TouchableOpacity, Button, TextInput } from 'react-native';
+import { FontAwesome6 } from '@expo/vector-icons';
+import { RichTextInput, Toolbar, PATTERNS } from 'enriched-text-input';
 
-import { 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}>
-        <Toolbar.Bold />
-        <Toolbar.Italic />
-        <Toolbar.Underline />
-        <Toolbar.Strikethrough />
-        <Toolbar.Code />
-        <Toolbar.Keyboard />
-      </Toolbar>
-    </View>
+    <KeyboardAvoidingView style={styles.container} behavior="padding">
+      <View style={{ flex: 1 }}>
+        {/* <TextInput
+          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>
   );
 }
 
@@ -27,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,5 +1,4 @@
-import RichTextInput from "./src/RichTextInput";
-import { Code } from "./src/RichTextInput";
+import RichTextInput, { PATTERNS } from "./src/RichTextInput";
 import Toolbar from "./src/Toolbar";
 
-export { RichTextInput, Toolbar, Code };
+export { RichTextInput, PATTERNS, Toolbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "enriched-text-input",
-  "version": "1.0.2",
+  "version": "1.0.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,5 +1,6 @@
-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";
+import { get } from "react-native/Libraries/TurboModule/TurboModuleRegistry";
 
 interface Token {
     text: string;
@@ -17,6 +18,7 @@ interface Annotations {
     italic: boolean;
     lineThrough: boolean;
     underline: boolean;
+    underlineLineThrough: boolean;
     code: boolean;
 }
 
@@ -28,15 +30,26 @@ interface RichTextMatch {
     expression: string;
 }
 
+interface Pattern {
+    regex: string;
+    style: string;
+    render: any
+}
+
 interface RichTextInputProps {
-    ref: any
+    ref: any;
+    patterns?: Pattern[]
 }
                         
-const PATTERNS = [
-  { style: "bold", regex: "\\*([^*]+)\\*", render: <Text style={{ fontWeight: "bold" }} /> },
-  { style: "italic", regex: "_([^_]+)_", render: <Text style={{ fontStyle: "italic" }} /> },
-  { style: "lineThrough", regex: "~([^~]+)~", render: <Text style={{ textDecorationLine: "line-through" }} /> },
-  { style: "code", regex: "`([^`]+)`", render: <Text style={{ fontFamily: "ui-monospace", backgroundColor: "lightgray", color: "red", paddingHorizontal: 6 }} /> },
+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) {
@@ -69,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, "");
 
@@ -106,15 +119,19 @@ function getRequiredLiterals(regexString) {
   };
 }
 
-function concileAnnotations(prevAnnotations, nextAnnotations) {
-  return {
-    bold: nextAnnotations.bold ? !prevAnnotations.bold : prevAnnotations.bold,
-    italic: nextAnnotations.italic ? !prevAnnotations.italic : prevAnnotations.italic,
-    lineThrough: nextAnnotations.lineThrough ? !prevAnnotations.lineThrough : prevAnnotations.lineThrough,
-    underline: nextAnnotations.underline ? !prevAnnotations.underline : prevAnnotations.underline,
-    code: nextAnnotations.code ? !prevAnnotations.code : prevAnnotations.code,
-    /* color: nextAnnotations.color */
-  };
+/**
+ * If prev token contains new annotation, negate prev. Else, use new annotation.
+ */
+function concileAnnotations(prevAnnotations, newAnnotations) {
+  let updatedAnnotations = { ...prevAnnotations };
+
+  for (const key of Object.keys(newAnnotations)) {
+    newAnnotations[key]
+    ? updatedAnnotations[key] = !updatedAnnotations[key]
+    : updatedAnnotations[key] = newAnnotations[key];
+  }
+
+  return updatedAnnotations;
 }
 
 // Returns string modifications
@@ -145,19 +162,13 @@ const parseRichTextString = (richTextString: string, patterns: { regex: string,
     let tokens = initalTokens || [
         {
             text: richTextString,
-            annotations: {
-                bold: false,
-                italic: false,
-                lineThrough: false,
-                underline: false,
-                code: false
-            }
+            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(
@@ -186,12 +197,26 @@ 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
+// To-do: Instead of recieving annotations and text it could recieve a token.
 function insertToken(tokens: Token[], index: number, annotations: Annotations, text = "" ) {
     const updatedTokens = [...tokens];
 
@@ -227,30 +252,27 @@ function insertToken(tokens: Token[], index: number, annotations: Annotations, t
     // Middle token is the selected text
     let middleToken = {
         text: text,
-        annotations: concileAnnotations(startToken.annotations, annotations)
+        annotations: concileAnnotations(startToken.annotations, annotations) // prevAnnotations + newAnnotations
     }
 
     let lastToken = {
         text: startToken.text.slice(startIndex , startToken.text.length),
         annotations: startToken.annotations
     }
-
-    /**
-     * Note: the following conditionals are to prevent empty tokens.
-     * It would be ideal if instead of catching empty tokens we could write the correct insert logic to prevent them.
-     * Maybe use a filter instead?
-     */
     
     updatedTokens.splice(startTokenIndex, 1, firstToken, middleToken, lastToken);
-    
     return {
         result: updatedTokens.filter(token => token.text.length > 0)
     };
 }
 
-// Updates token content (add, remove, replace)
-// Note: need to support cross-token updates.
-// It's actually updating just the text of tokens
+/**
+ * Updates token content (add, remove, replace)
+ * 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, "");
@@ -412,9 +434,11 @@ 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,
@@ -475,6 +499,11 @@ const splitTokens = (
         let middleToken = {
             // The replace method is used to remove the opening and closing rich text literal chars when parsing.
             text: startToken.text.slice(startIndex, endIndex).replace(withReplacement, ""),
+            /** 
+             * We need to concile previous annotations with new ones.
+             * Eg. If we are applying bold to middle token but start token already has bold, we need to toggle bold off.
+             * But if we are applying bold to middle token but start token does not have bold, we need to toggle bold on.
+             */
             annotations: concileAnnotations(startToken.annotations, annotations)
         }
 
@@ -560,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.code === token.annotations.code) {
+        /**
+         * If prev token has all the same annotations as current token, we add curent token text to prev token
+         * and continue looping without adding current token to concatened tokens array.
+         */
+        if (Object.keys(prevToken.annotations).every(key => prevToken.annotations[key] === token.annotations[key])) {
             prevToken.text += token.text;
             continue;
         }
@@ -575,16 +604,20 @@ const concatTokens = (tokens: Token[]) => {
     return concatenedTokens;
 }
 
-function Token({ token }) {
+interface TokenProps {
+    token: Token;
+    patterns: Pattern[]
+}
+
+function Token(props: TokenProps) : JSX.Element {
+    const { token, patterns } = props;
     const { text, annotations } = token;
     const wrappers = [];
 
-    if (annotations.bold) wrappers.push(Bold);
-    if (annotations.italic) wrappers.push(Italic);
-    if (annotations.underline && annotations.lineThrough) wrappers.push(UnderlineStrikethrough);
-    if (annotations.underline) wrappers.push(Underline);
-    if (annotations.lineThrough) wrappers.push(Strikethrough);
-    if (annotations.code) wrappers.push(Code);
+    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>,
@@ -628,9 +661,28 @@ function UnderlineStrikethrough({ children }) {
     )
 }
 
+function Heading({ children }) {
+    return (
+        <Text style={styles.heading}>{children}</Text>
+    )
+}
+
+function SubHeading({ children }) {
+    return (
+        <Text style={styles.subHeading}>{children}</Text>
+    )
+}
+
+function SubSubHeading({ children }) {
+    return (
+        <Text style={styles.subSubHeading}>{children}</Text>
+    )
+}
+
 export default function RichTextInput(props: RichTextInputProps) {
     const {
-        ref
+        ref,
+        patterns = PATTERNS
     } = props;
 
     const inputRef = useRef<TextInput>(null);
@@ -645,7 +697,7 @@ export default function RichTextInput(props: RichTextInputProps) {
             code: false
         }
     }]);
-    console.log(tokens);
+
     useEffect(() => {
         if (tokens.length === 0) {
             setTokens([{
@@ -672,13 +724,7 @@ export default function RichTextInput(props: RichTextInputProps) {
     const [toSplit, setToSplit] = useState({
         start: 0,
         end: 0,
-        annotations: {
-            bold: false,
-            italic: false,
-            lineThrough: false,
-            underline: false,
-            code: false
-        }
+        annotations: {}
     });
 
     const handleSelectionChange = ({ nativeEvent }) => {
@@ -690,7 +736,7 @@ export default function RichTextInput(props: RichTextInputProps) {
 
         let match : RichTextMatch | null = null;
 
-        for (const pattern of PATTERNS) {
+        for (const pattern of patterns) {
             match = findMatch(nextText, pattern.regex);
             if (match) break;
         }
@@ -698,7 +744,7 @@ export default function RichTextInput(props: RichTextInputProps) {
         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,
@@ -715,10 +761,7 @@ export default function RichTextInput(props: RichTextInputProps) {
             return;
         }
 
-        if (diff.start === toSplit.start
-            && diff.start === toSplit.end
-            && diff.added.length > 0
-            && Object.values(toSplit.annotations).includes(true)) {
+        if (Object.values(toSplit.annotations).some(Boolean) && diff.start === toSplit.start && diff.start === toSplit.end) {
             const { result } = insertToken(
                 tokens,
                 diff.start,
@@ -726,24 +769,19 @@ export default function RichTextInput(props: RichTextInputProps) {
                 diff.added
             );
             const plain_text = result.map(t => t.text).join("");
-            setTokens([...concatTokens(result)]);
+            setTokens(concatTokens(result));
 
             // Reset
             setToSplit({
                 start: 0,
                 end: 0,
-                annotations: {
-                    bold: false,
-                    italic: false,
-                    lineThrough: false,
-                    underline: false,
-                    code: false
-                }
+                annotations: {}
             });
             prevTextRef.current = plain_text;
             return;
         }
 
+        // Default update
         const { updatedTokens, plain_text} = updateTokens(tokens, diff);
         
         setTokens([...concatTokens(updatedTokens)]); 
@@ -754,33 +792,21 @@ export default function RichTextInput(props: RichTextInputProps) {
 
         setValue(value: string) {
             // To keep styles, parsing should be done before setting value
-            const { tokens, plain_text } = parseRichTextString(value, PATTERNS);
+            const { tokens, plain_text } = parseRichTextString(value, patterns);
             setTokens([...concatTokens(tokens)]);
             prevTextRef.current = plain_text;
         },
-        toggleBold() {
+        getRichText() {
+            return parseTokens(tokens, patterns);
+        },
+        toggleStyle(style: string) {
             const { start, end } = selectionRef.current;
 
-            if (start === end && toSplit.annotations.bold) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        bold: false
-                    }
-                });
-                return;
-            }
-
             if (start === end) {
                 setToSplit({
                     start,
                     end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        bold: true
-                    }
+                    annotations: concileAnnotations(toSplit.annotations, { [style]: true })
                 });
                 return;
             }
@@ -792,184 +818,15 @@ export default function RichTextInput(props: RichTextInputProps) {
                 setToSplit({
                     start: end,
                     end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        bold: true
-                    }
+                    annotations: concileAnnotations(toSplit.annotations, { [style]: true })
                 })
             }
 
-            const { result } = splitTokens(tokens, start, end, { bold: true });
+            const { result } = splitTokens(tokens, start, end, { [style]: true });
             setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
-        },
-        toggleItalic() {
-            const { start, end } = selectionRef.current;
-
-            if (start === end && toSplit.annotations.italic ) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        italic: false
-                    }
-                });
-                return;
-            }
-
-            if (start === end) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        italic: true
-                    }
-                });
-                return;
-            }
-
-            if (start < end) {
-                setToSplit({
-                    start: end,
-                    end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        italic: true
-                    }
-                });
-            }
-
-            const { result } = splitTokens(tokens, start, end, { italic: true });
-            setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
-        },
-        toggleLineThrough() {
-            const { start, end } = selectionRef.current;
-
-            if (start === end && toSplit.annotations.lineThrough) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        lineThrough: false
-                    }
-                });
-                return;
-            }
-
-            if (start === end) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        lineThrough: true
-                    }
-                });
-                return;
-            }
-
-            if (start < end) {
-                setToSplit({
-                    start: end,
-                    end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        lineThrough: true
-                    }
-                })
-            }
-
-            const { result } = splitTokens(tokens, start, end, { lineThrough: true });
-            setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
-        },
-        toggleUnderline() {
-            const { start, end } = selectionRef.current;
-
-            if (start === end && toSplit.annotations.underline) {
-                setToSplit({
-                    start: 0,
-                    end: 0,
-                    annotations: {
-                        ...toSplit.annotations,
-                        underline: false
-                    }
-                });
-                return;
-            }
-
-            if (start === end) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        underline: true
-                    }
-                });
-                return;
-            }
-
-            if (start < end) {
-                setToSplit({
-                    start: end,
-                    end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        underline: true
-                    }
-                })
-            }
-
-            const { result } = splitTokens(tokens, start, end, { underline: true });
-            setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
-        },
-        toggleCode() {
-            const { start, end } = selectionRef.current;
-
-            if (start === end && toSplit.annotations.code ) {
-                setToSplit({
-                    start: 0,
-                    end: 0,
-                    annotations: {
-                        ...toSplit.annotations,
-                        code: false
-                    }
-                });
-                return;
-            }
-
-            if (start === end) {
-                setToSplit({
-                    start,
-                    end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        code: true
-                    }
-                });
-                return;
-            }
-
-            if (start < end) {
-                setToSplit({
-                    start: end,
-                    end: end,
-                    annotations: {
-                        ...toSplit.annotations,
-                        code: true
-                    }
-                });
-            }
-
-            const { result } = splitTokens(tokens, start, end, { code: true });
-            setTokens([...concatTokens(result)]);
-            requestAnimationFrame(() => inputRef.current.setSelection(start, end));
+            requestAnimationFrame(() => {
+                inputRef.current.setSelection(start, end);
+            })
         }
     }));
 
@@ -985,7 +842,7 @@ export default function RichTextInput(props: RichTextInputProps) {
                 onChangeText={handleOnChangeText}
             >
                 <Text style={styles.text}>
-                    {tokens.map((token, i) => <Token key={i} token={token} />)}
+                    {tokens.map((token, i) => <Token key={i} token={token} patterns={patterns}/>)}
                 </Text>
             </TextInput>
        </View>
@@ -1037,5 +894,17 @@ const styles = StyleSheet.create({
         padding: 20,
         height: 24,
         backgroundColor: "blue"
+    },
+    heading: {
+        fontSize: 32,
+        fontWeight: "bold"
+    },
+    subHeading: {
+        fontSize: 28,
+        fontWeight: "bold"
+    },
+    subSubHeading: {
+        fontSize: 24,
+        fontWeight: "bold"
     }
 });

package/src/Toolbar.tsx

@@ -49,7 +49,7 @@ Toolbar.Bold = () => {
     const richTextInputRef = useToolbarContext();
 
     const handleBold = () => {
-        richTextInputRef.current.toggleBold();
+        richTextInputRef.current.toggleStyle("bold");
     }
 
     return (
@@ -63,7 +63,7 @@ Toolbar.Italic = () => {
     const richTextInputRef = useToolbarContext();
 
     const handleItalic = () => {
-        richTextInputRef.current.toggleItalic();
+        richTextInputRef.current.toggleStyle("italic");
     }
 
     return (
@@ -77,7 +77,7 @@ Toolbar.Strikethrough = () => {
     const richTextInputRef = useToolbarContext();
 
     const handleLineThrough = () => {
-        richTextInputRef.current.toggleLineThrough();
+        richTextInputRef.current.toggleStyle("lineThrough");
     }
 
     return (
@@ -91,7 +91,7 @@ Toolbar.Underline = () => {
     const richTextInputRef = useToolbarContext();
 
     const handleUnderline = () => {
-        richTextInputRef.current.toggleUnderline();
+        richTextInputRef.current.toggleStyle("underline");
     }
 
     return (
@@ -101,11 +101,56 @@ Toolbar.Underline = () => {
     )
 }
 
+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.toggleCode();
+        richTextInputRef.current.toggleStyle("code");
     }
 
     return (
@@ -156,5 +201,9 @@ const styles = StyleSheet.create({
     keyboardArrowContainer: {
         position: "absolute",
         bottom: 13
+    },
+    heading: {
+        flexDirection: "row",
+        gap: 4
     }
 });