enriched-text-input 1.0.3 → 1.0.5

package/src/{RichTextInput.tsx → EnrichedTextInput.tsx}

@@ -1,6 +1,6 @@
-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";
+import { useState, useImperativeHandle, useRef, useEffect, JSX } from "react";
+import { TextInput, Text, StyleSheet, View, TextInputProps } from "react-native";
+import { markdownStyles } from "./markdownStyles";
 
 interface Token {
     text: string;
@@ -14,12 +14,7 @@ interface Diff {
 }
 
 interface Annotations {
-    bold: boolean;
-    italic: boolean;
-    lineThrough: boolean;
-    underline: boolean;
-    underlineLineThrough: boolean;
-    code: boolean;
+    [key: string]: boolean | string | null
 }
 
 interface RichTextMatch {
@@ -27,30 +22,36 @@ interface RichTextMatch {
     content: string;
     start: number;
     end: number;
+    pattern: Pattern;
+    /** @deprecated */
     expression: string;
 }
 
 interface Pattern {
     regex: string;
     style: string;
-    render: any
+    render: any;
+    opening?: string;
+    closing?: string;
 }
 
-interface RichTextInputProps {
+interface EnrichedTextInputProps {
     ref: any;
-    patterns?: Pattern[]
+    stylePatterns?: Pattern[];
+    placeholder?: string;
+    multiline?: boolean;
+    defaultValue?: string | Token[];
+    onValueChange?: () => void;
+    onSelectionChange?: () => void;
 }
-                        
-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 }
-];
+
+/**
+ * Note: maybe instead of using regex we could just define an "opening" and "closing" char.
+ * If both are defined we look for a match that looks like {opening}{content}{closing}.
+ * If just opening is defined, we look for a match that looks like {opening}{content}.
+ * Closing can not be defined if opening is not defined.
+ */
+export const defaultStylePatterns : Pattern[] = markdownStyles;
 
 function insertAt(str, index, substring) {
   // Clamp index into valid boundaries
@@ -68,59 +69,82 @@ function replaceAt(str, index, substring, length) {
   return str.slice(0, i) + substring + str.slice(i + length);
 }
 
-function findMatch(str: string, regexExpression: string) : RichTextMatch | null {
-  const regex = new RegExp(regexExpression);
-  const match = regex.exec(str);
-  return match
-    ? {
-        raw: match[0],
-        content: match[1],
-        start: match.index,
-        end: match.index + match[0].length,
-        expression: regexExpression
+function findTokens(
+    /** The tokens to search over. */
+    tokens: Token[],
+    /** start position of selection.*/
+    start: number,
+    /** end position of selection.*/
+    end?: number
+) {
+    
+    if (end) {
+        // To-do: search for all tokens between start and end
+        return { result: null };
     }
-    : null;
-}
 
-function getRequiredLiterals(regexString: string) {
-  // Strip leading/trailing slashes and flags (if user passed /.../ form)
-  regexString = regexString.replace(/^\/|\/[a-z]*$/g, "");
+    let startIndex = start;
+    let startToken;
+    for (const token of tokens) {
+        if (startIndex <= token.text.length) {
+            startToken = token;
+            break;
+        }
+        startIndex -= token.text.length;
+    }
 
-  // Remove ^ and $ anchors
-  regexString = regexString.replace(/^\^|\$$/g, "");
+    const startTokenIndex = tokens.indexOf(startToken);
 
-  // 1. Find the first literal before any group or operator
-  const beforeGroup = regexString.match(/^((?:\\.|[^[(])+)/);
-  let openLiteral = null;
+    return { result: [startToken] };
+}
 
-  if (beforeGroup) {
-    const part = beforeGroup[1];
-    const litMatch = part.match(/\\(.)|([^\\])/); // first literal
-    if (litMatch) {
-      openLiteral = litMatch[1] ?? litMatch[2];
-    }
-  }
+/**
+ * To-do: Add support for openings and closings that are conformed by two or more chars (e.g. **, __, <b>, etc.)
+ */
+function findMatchV2(str: string, patterns: Pattern[]) : RichTextMatch | null {
+    let match = null;
+    let copyOfString = str;
 
-  // 2. Detect a closing literal after a capturing group (optional)
-  let closeLiteral = null;
-  const afterGroup = regexString.match(/\)([^).]+)/);
-  if (afterGroup) {
-    const part = afterGroup[1];
-    const litMatch = part.match(/\\(.)|([^\\])/);
-    if (litMatch) {
-      closeLiteral = litMatch[1] ?? litMatch[2];
+    for (const pattern of patterns) {
+        let evenCount = 0;
+
+        for (const char of copyOfString) {
+            /** Cases where both opening and closing chars are defined (*...*, _..._, etc.)*/
+            if (pattern.opening && pattern.closing) {
+                if (evenCount < 2 && char === pattern.opening) {
+                    evenCount++;
+                }
+                if (evenCount === 2 && char === pattern.closing) {
+                    const openingIndex = copyOfString.indexOf(pattern.opening);
+                    const closingIndex = copyOfString.indexOf(pattern.closing, openingIndex + 1);
+
+                    match = {
+                        raw: copyOfString.slice(openingIndex, closingIndex + 1),
+                        content: copyOfString.slice(openingIndex + 1, closingIndex),
+                        start: openingIndex,
+                        end: closingIndex,
+                        pattern,
+                        /** @deprecated */
+                        expression: pattern.regex
+                    };
+                    break;
+                }
+            }
+
+            /** Cases where only opening char is defined (@, #, etc.) */
+        }
     }
-  }
 
-  // Return both if available, otherwise just the opening literal
-  return {
-    opening: openLiteral,
-    closing: closeLiteral,
-  };
+    return match;
 }
 
 /**
  * If prev token contains new annotation, negate prev. Else, use new annotation.
+ * 
+ * @example
+ * prev: { bold: true }
+ * new: { bold: false }
+ * result: { bold: false }
  */
 function concileAnnotations(prevAnnotations, newAnnotations) {
   let updatedAnnotations = { ...prevAnnotations };
@@ -157,58 +181,73 @@ function diffStrings(prev, next) : Diff {
   };
 }
 
-// Returns an array of tokens
-const parseRichTextString = (richTextString: string, patterns: { regex: string, style: string }[], initalTokens = null) => {
-    let tokens = initalTokens || [
+/** 
+ * [Needs refactoring]
+ * Parse rich text string into tokens.
+ */
+const parseRichTextString = (richTextString: string, patterns: Pattern[], initialTokens?: Token[])
+: { tokens: Token[], plain_text: string } => {
+    let copyOfString = richTextString;
+    let tokens : Token[] = initialTokens || [
         {
-            text: richTextString,
+            text: copyOfString,
             annotations: {}
         }
     ];
-    let plain_text = tokens.reduce((acc, curr) => acc + curr.text, "");
 
     for (const pattern of patterns) {
-        let match = pattern.regex ? findMatch(plain_text, pattern.regex) : null;
-        
-        if (match) {
-            const { result: splittedTokens } = splitTokens(
-                tokens,
-                match.start,
-                match.end - 1,
-                { [pattern.style]: true },
-                getRequiredLiterals(match.expression).opening
-            );
-            tokens = splittedTokens;
-            plain_text = splittedTokens.reduce((acc, curr) => acc + curr.text, "");
-            
-            const parsed = parseRichTextString(tokens, patterns, tokens);
-            
-            return {
-                tokens: parsed.tokens,
-                plain_text: parsed.plain_text
+        let evenCount = 0;
+
+        for (const char of copyOfString) {
+            /** Cases where both opening and closing chars are defined (*...*, _..._, etc.)*/
+            if (pattern.opening && pattern.closing) {
+                if (evenCount < 2 && char === pattern.opening) {
+                    evenCount++;
+                }
+                if (evenCount === 2 && char === pattern.closing) {
+                    const openingIndex = copyOfString.indexOf(pattern.opening);
+                    const closingIndex = copyOfString.indexOf(pattern.closing, openingIndex + 1);
+
+                    copyOfString = copyOfString.slice(0, openingIndex) + copyOfString.slice(closingIndex);
+                    const { result, plain_text } = splitTokens(tokens, openingIndex, closingIndex, { [pattern.style]: true }, pattern.opening);
+                    tokens = result;
+                    copyOfString = plain_text;
+                }
             }
+
+            /** Cases where only opening char is defined (@, #, etc.) */
         }
     }
 
     return {
-        tokens: tokens.filter(token => token.text.length > 0),
-        plain_text: plain_text
-    }
+        tokens,
+        plain_text: copyOfString
+    };
 }
 
-// Returns a rich text string
+/**
+ * Parse tokens into rich text string.
+ * To-do: Find a way to group consequitive tokens with a same annotation inside one single
+ * wrapper.
+ * 
+ * @example
+ * Tokens: [{ text: "Hello", annotations: { bold: true } }, { text: "World", annotations: { bold: true, italic: true } }]
+ * Current output: *Hello* *_World_*
+ * Desired output: *Hello _World_*
+ */
 const parseTokens = (tokens: Token[], patterns: Pattern[]) => {
     return tokens.map(token => {
         const { text, annotations } = token;
+        // Rich text wrappers (opening and closing chars)
         const wrappers = [];
 
-        Object.keys(annotations).forEach(key => {
+        patterns.forEach(pattern => {
             // If annotation has a truthy value, add the corresponding wrapper.
-            if (annotations[key]) wrappers.push(getRequiredLiterals(patterns.find(p => p.style === key).regex));
+            if (annotations[pattern.style]) wrappers.push(pattern.opening);
         });
 
         return wrappers.reduce(
-            (children, Wrapper) => `${Wrapper.opening}${children}${Wrapper.closing}`,
+            (children, wrapper) => `${wrapper}${children}${wrapper}`,
             text
         );
     }).join("");
@@ -268,7 +307,6 @@ function insertToken(tokens: Token[], index: number, annotations: Annotations, t
 
 /**
  * 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.
@@ -402,6 +440,7 @@ const updateTokens = (tokens: Token[], diff: Diff) => {
          * Remove:
          * - For more than two tokens, works.
          * - For two tokens, does not work properly.
+         * (right now remove for more than two tokens works properly. Anyway, it might need better testing).
          */
         if (diff.removed.length > 0) {
             const firstToken = selectedTokens[0];
@@ -436,7 +475,6 @@ const updateTokens = (tokens: Token[], diff: Diff) => {
 
 /**
  * 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 = (
@@ -514,7 +552,10 @@ const splitTokens = (
         }
 
         updatedTokens.splice(startTokenIndex, 1, firstToken, middleToken, lastToken)
-        return { result: updatedTokens.filter(token => token.text.length > 0) };
+        return {
+            result: updatedTokens.filter(token => token.text.length > 0),
+            plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, "")
+        };
     }
 
     // Cross-token selection
@@ -573,11 +614,14 @@ const splitTokens = (
         }
 
         updatedTokens = updatedTokens.slice(0, startTokenIndex).concat([firstToken, secondToken, ...updatedMiddleTokens, secondToLastToken, lastToken]).concat(updatedTokens.slice(endTokenIndex + 1));
-        return { result: updatedTokens.filter(token => token.text.length > 0) };
+        return {
+            result: updatedTokens.filter(token => token.text.length > 0),
+            plain_text: updatedTokens.reduce((acc, curr) => acc + curr.text, "")
+        };
     }
 }
 
-// Concats tokens containing similar annotations
+// Concats tokens containing same annotations
 const concatTokens = (tokens: Token[]) => {
     let concatenedTokens = [];
 
@@ -593,7 +637,8 @@ const concatTokens = (tokens: Token[]) => {
          * 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])) {
+        const prevTokenAnnotations = Object.keys(prevToken.annotations);
+        if (prevTokenAnnotations.length > 0 && prevTokenAnnotations.every(key => prevToken.annotations[key] === token.annotations[key])) {
             prevToken.text += token.text;
             continue;
         }
@@ -614,75 +659,25 @@ function Token(props: TokenProps) : JSX.Element {
     const { text, annotations } = token;
     const wrappers = [];
 
-    Object.keys(annotations).forEach(key => {
+    patterns.forEach(pattern => {
         // If annotation has a truthy value, add the corresponding wrapper.
-        if (annotations[key]) wrappers.push(patterns.find(p => p.style === key).render);
+        if (annotations[pattern.style]) wrappers.push(pattern.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) {
+export default function EnrichedTextInput(props: EnrichedTextInputProps) {
     const {
         ref,
-        patterns = PATTERNS
+        stylePatterns = defaultStylePatterns,
+        placeholder,
+        multiline = false,
+        defaultValue,
+        onSelectionChange,
+        onValueChange,
     } = props;
 
     const inputRef = useRef<TextInput>(null);
@@ -697,7 +692,6 @@ export default function RichTextInput(props: RichTextInputProps) {
             code: false
         }
     }]);
-
     useEffect(() => {
         if (tokens.length === 0) {
             setTokens([{
@@ -711,49 +705,67 @@ export default function RichTextInput(props: RichTextInputProps) {
                 }
             }])
         }
+
+        onValueChange && onValueChange();
     }, [tokens]);
 
+    useEffect(( ) => {
+        if (defaultValue) {
+            if (Array.isArray(defaultValue)) {
+                // Maybe check if tokens structure is valid before setting.
+                setTokens(defaultValue);
+                return;
+            }
+            // To keep styles, parsing should be done before setting defaultValue
+            const { tokens, plain_text } = parseRichTextString(defaultValue, stylePatterns);
+            setTokens(tokens);
+            prevTextRef.current = plain_text;
+        }
+    }, []);
+
     /**
      * Prev text should not contain matching rich text formats.
      * Those should be spliced once the corresponding tokens are created.
      */
     const prevTextRef = useRef(tokens.map(t => t.text).join(""));
 
-    // Find a better name
-    // To-do: Allow for multiple styles at once.
+    /**
+     * To-do: Find a better name.
+     * toSplit state is used to toggle styles when selection length === 0 (start === end).
+     * Eg, if user is typing with no styles applied and then presses the "bold" button with no text selected,
+     * the text to be inserted after that press should be styled as bold.
+     * The same happens to toggle of a style. If user is typing in "bold" and presses the "bold" button again,
+     * the text to be inserted after that press should not be styled as bold.
+     */
     const [toSplit, setToSplit] = useState({
         start: 0,
         end: 0,
         annotations: {}
     });
-
+    /* console.log("toSplit", toSplit); */
     const handleSelectionChange = ({ nativeEvent }) => {
         selectionRef.current = nativeEvent.selection;
+        onSelectionChange && onSelectionChange(nativeEvent);
     }
 
     const handleOnChangeText = (nextText: string) => {
         const diff = diffStrings(prevTextRef.current, nextText);
 
-        let match : RichTextMatch | null = null;
-
-        for (const pattern of patterns) {
-            match = findMatch(nextText, pattern.regex);
-            if (match) break;
-        }
+       const match = findMatchV2(nextText, stylePatterns);
+       /* console.log("MATCH:", match); */
 
+        // Note: refactor to use new parseRichText function instead of regex
         if (match) {
             // Check token containing match
             // If token already haves this annotation, do not format and perform a simple updateToken.
-            const annotation = patterns.find(p => p.regex === match.expression);
-            const { result } = splitTokens(
+            const { result, plain_text } = splitTokens(
                 tokens,
                 match.start,
-                match.end - 1,
-                { [annotation.style]: true },
+                match.end/*  - 1 */, // I don't remember why the -1
+                { [match.pattern.style]: true },
                 // Get the rich text opening char to replace it
-                getRequiredLiterals(match.expression).opening
+                match.pattern.opening
             );
-            const plain_text = result.reduce((acc, curr) => acc + curr.text, "");
 
             setTokens([...concatTokens(result)]);
             prevTextRef.current = plain_text;
@@ -761,6 +773,7 @@ export default function RichTextInput(props: RichTextInputProps) {
             return;
         }
 
+
         if (Object.values(toSplit.annotations).some(Boolean) && diff.start === toSplit.start && diff.start === toSplit.end) {
             const { result } = insertToken(
                 tokens,
@@ -789,17 +802,56 @@ export default function RichTextInput(props: RichTextInputProps) {
     }
 
     useImperativeHandle(ref, () => ({
-
-        setValue(value: string) {
+        /**
+         * Sets the TextInput's value as a rich text string or an array of tokens.
+         */
+        setValue(value: string | Token[]) {
+            if (Array.isArray(value)) {
+                // Maybe check if tokens structure is valid before setting.
+                setTokens(value);
+                return;
+            }
             // To keep styles, parsing should be done before setting value
-            const { tokens, plain_text } = parseRichTextString(value, patterns);
-            setTokens([...concatTokens(tokens)]);
+            const { tokens, plain_text } = parseRichTextString(value, stylePatterns);
+            setTokens(tokens);
             prevTextRef.current = plain_text;
         },
-        getRichText() {
-            return parseTokens(tokens, patterns);
+        /**
+         * Sets the TextInput's selection.
+         */
+        setSelection(start: number, end: number) {
+            inputRef.current.setSelection(start, end);
+        },
+        /**
+         * Focuses the TextInput.
+         */
+        focus() {
+            inputRef.current.focus();
+        },
+        blur() {
+            inputRef.current.blur();
+        },
+        /**
+         * Returns the TextInput's value as a rich text string matching the patterns 
+         * for each style defined in the patterns prop. If a style does not define an
+         * opening and closing char, it is ignored.
+         */
+        getRawValue() {
+            return tokens.map(t => t.text).join("");
+        },
+        getRichTextValue() {
+            return parseTokens(tokens, stylePatterns);
+        },
+        /**
+         * Returns the text input's value as an array of tokens.
+         */
+        getTokenizedValue() : Token[] {
+            return tokens;
         },
-        toggleStyle(style: string) {
+        /** 
+         * Toggles a given style. The style prop must match the name of a pattern.
+         */
+        toggleStyle(style: keyof Token["annotations"]) {
             const { start, end } = selectionRef.current;
 
             if (start === end) {
@@ -811,38 +863,39 @@ export default function RichTextInput(props: RichTextInputProps) {
                 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,
-                    annotations: concileAnnotations(toSplit.annotations, { [style]: true })
-                })
-            }
-
             const { result } = splitTokens(tokens, start, end, { [style]: true });
             setTokens([...concatTokens(result)]);
             requestAnimationFrame(() => {
                 inputRef.current.setSelection(start, end);
-            })
+            });
+        },
+        /**
+         * Returns the active styles for the current selection.
+         */
+        getActiveStyles() {
+            // Check for styles of the token at the current cursor position.
+            const { result } = findTokens(tokens, selectionRef.current.start);
+            
+            if (result[0].annotations) {
+                return Object.keys(result[0].annotations).filter(key => result[0].annotations[key]);
+            }
+
+            return [];
         }
     }));
 
     return (
        <View style={{ position: "relative" }}>
             <TextInput
-                multiline={true}
                 ref={inputRef}
-                autoComplete="off"
                 style={styles.textInput}
-                placeholder="Rich text input"
+                placeholder={placeholder}
+                multiline={multiline}
                 onSelectionChange={handleSelectionChange}
                 onChangeText={handleOnChangeText}
             >
                 <Text style={styles.text}>
-                    {tokens.map((token, i) => <Token key={i} token={token} patterns={patterns}/>)}
+                    {tokens.map((token, i) => <Token key={i} token={token} patterns={stylePatterns}/>)}
                 </Text>
             </TextInput>
        </View>
@@ -858,53 +911,5 @@ const styles = StyleSheet.create({
     },
     text: {
         color: "black",
-    },
-    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"
     }
 });