enriched-text-input 1.0.3 → 1.0.5

package/src/Toolbar.tsx

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

package/src/components/StyledText.tsx

@@ -0,0 +1,106 @@
+import { Text, StyleSheet } from "react-native";
+
+export function Code({ children }) {
+    return (
+        <Text style={styles.code}>{children}</Text>
+    )
+}
+
+export function Bold({ children }) {
+    return (
+        <Text style={styles.bold}>{children}</Text>
+    )
+}
+
+export function Italic({ children }) {
+    return (
+        <Text style={styles.italic}>{children}</Text>
+    )
+}
+
+export function Underline({ children }) {
+    return (
+        <Text style={styles.underline}>{children}</Text>
+    )
+}
+
+export function Strikethrough({ children }) {
+    return (
+        <Text style={styles.lineThrough}>{children}</Text>
+    )
+}
+
+export function UnderlineStrikethrough({ children }) {
+    return (
+        <Text style={styles.underlineLineThrough}>{children}</Text>
+    )
+}
+
+export function Heading({ children }) {
+    return (
+        <Text style={styles.heading}>{children}</Text>
+    )
+}
+
+export function SubHeading({ children }) {
+    return (
+        <Text style={styles.subHeading}>{children}</Text>
+    )
+}
+
+export function SubSubHeading({ children }) {
+    return (
+        <Text style={styles.subSubHeading}>{children}</Text>
+    )
+}
+
+const styles = StyleSheet.create({
+    bold: {
+        fontWeight: 'bold',
+    },
+    italic: {
+        fontStyle: "italic"
+    },
+    lineThrough: {
+        textDecorationLine: "line-through"
+    },
+    underline: {
+        textDecorationLine: "underline",
+    },
+    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/markdownStyles.ts

@@ -0,0 +1,12 @@
+import { Bold, Code, Heading, Italic, SubHeading, SubSubHeading, Strikethrough, Underline } from "./components/StyledText";
+
+export const markdownStyles = [
+  { style: "bold", regex: "\\*([^*]+)\\*", render: Bold, opening: "*", closing: "*" },
+  { style: "italic", regex: "_([^_]+)_", render: Italic, opening: "_", closing: "_" },
+  { style: "lineThrough", regex: "~([^~]+)~", render: Strikethrough, opening: "~", closing: "~" },
+  { style: "code", regex: "`([^`]+)`", render: Code, opening: "`", closing: "`" },
+  { style: "underline", regex: "__([^_]+)__", render: Underline, opening: "__", closing: "__" },
+  { style: "heading", regex: null, render: Heading, opening: "#", closing: null },
+  { style: "subHeading", regex: null, render: SubHeading, opening: "##", closing: null },
+  { style: "subSubHeading", regex: null, render: SubSubHeading, opening: "###", closing: null }
+];