enriched-text-input 1.0.3 → 1.0.5

package/API_REFERENCE.md

@@ -0,0 +1,119 @@
+# API Reference
+
+## Props
+
+### `ref`
+
+A React ref that lets you call any ref methods on the input.
+
+### `patterns`
+
+An array of style patterns for the input. Use this prop to define which styles should be available for the input to use. 
+
+```jsx
+interface Pattern {
+    name: string;
+    render: React.Component;
+    opening: string | null;
+    closing: string | null;
+}
+```
+
+A pattern can have either both opening and closing enclosures defined or just the opening enclosure, but cannot have only the closing enclosure defined. 
+
+### `defaultValue`
+
+Provides an initial value for the input. Can be a string or an array of tokens. If it’s a string and it matches any style defined in the `patterns` prop, proper styles will be applied. 
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+### `onValueChange`
+
+Callback that is called when the text input's value changes. You can use this callback to call ref methods such as `.getRawValue()`, `.getRichTextValue()` or `.getTokenizedValue()` to get the text input’s value in your preferred 
+
+### `onDebounceValueChange`
+
+Same as `onValueChange` but with an applied debouncing effect.
+
+## Ref methods
+
+### `.setValue()`
+
+```jsx
+setValue: (value: string | Tokens[]) => void;
+```
+
+Sets the value of the input.
+
+- `value: string | Tokens[]` - the value to set the input. If it’s a valid rich text string, the corresponding styling will be applied.
+
+### `.setSelection()`
+
+```jsx
+setSelection: (start: number, end: number) => void;
+```
+
+Sets the selection of the input.
+
+- `start: number` - the start index of the input’s selection.
+- `end: number` - the end index of the input’s selection.
+
+### `.focus()`
+
+```jsx
+focus: () => void;
+```
+
+Focuses the input;
+
+### `.blur()`
+
+```jsx
+blur: () => void;
+```
+
+Blurs the input.
+
+### `.toggleStyle()`
+
+```jsx
+toggleStyle: (style: string) => void;
+```
+
+Toggles a style at the cursor’s position.
+
+- `style: string` - the name of a pattern to toggle.
+
+### `.getActiveStyle()`
+
+```jsx
+getActiveStyle: () => string[] | [];
+```
+
+Returns the active styles for the current selection.
+
+### `.getRawValue()`
+
+```jsx
+getRawValue: () => string;
+```
+
+Returns the input’s value as a raw string without rich text enclosures.
+
+### `.getRichTextValue()`
+
+```jsx
+getRichTextValue: () => string;
+```
+
+Returns the text input’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.
+
+### `.getTokenizedValue()`
+
+```jsx
+getTokenizedValue: () => Tokens[];
+```
+
+Returns the text input's value as an array of tokens.

package/CONTRIBUTING.md

@@ -0,0 +1,33 @@
+# Contributing
+
+## Clone this repo
+
+1. Fork and clone your Github froked repo:
+```
+git clone https://github.com/<github_username>/enriched-text-input.git
+```
+
+2. Go to cloned repo directory:
+```
+cd enriched-text-input
+```
+
+## Install dependencies
+
+1. Install the dependencies in the root of the repo:
+```
+npm install
+```
+
+2. Go to the example project and install dependencies:
+```
+cd example && npm install
+```
+
+3. After that you can start the project with:
+```
+cd example && npm start
+```
+
+## Create a pull request
+After making any changes, open a pull request. Once you submit your pull request, it will get reviewed.

package/README.md

@@ -1,52 +1,36 @@
-[![plastic](https://dcbadge.limes.pink/api/server/https://discord.gg/DRmNp34bFE?bot=true&style=plastic)](https://discord.gg/DRmNp34bFE)
-
 # enriched-text-input
 
 > [!Note]
-> This library is still a work in progress. Expect breaking changes.
+This library is still a work in progress. Expect breaking changes.
+> 
 
-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. [Try it on Expo Snack](https://snack.expo.dev/@patosala/enriched-text-input).
+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. [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 elements however you want as long as they follow react-native's `Text` supported styles.
-
-## Features
 
-- [x] Basic text formatting (__bold__, _italic_, underline, ~~strikethrough~~ and `codeblocks`).
-- [x] Rich text format parsing.
-- [ ] Links and mentions.
-- [ ] Custom styling.
-- [ ] Custom rich text patterns.
-- [ ] Exposed event handlers (onSubmit, onChange, onBlur, onFocus, etc).
-- [ ] Custom methods and event handlers (setValue, onStartMention, onStyleChange, etc).
-- [ ] Headings.
+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.
 
-## Known limitations
-- Inline images.
-- Only `Text`component styles are supported.
+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.
 
 ## Installation
-```
+
+```bash
 npm install enriched-text-input
 ```
 
 ## Usage
-```js
+
+```jsx
 import { useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
-
-import { RichTextInput, Toolbar } from 'enriched-text-input';
+import { EnrichedTextInput, Toolbar } from 'enriched-text-input';
 
 export default function App() {
   const richTextInputRef = useRef(null);
 
   return (
     <View style={styles.container}>
-      <RichTextInput ref={richTextInputRef}/>
+      <EnrichedTextInput ref={richTextInputRef}/>
       <Toolbar richTextInputRef={richTextInputRef}>
         <Toolbar.Bold />
         <Toolbar.Italic />
@@ -66,35 +50,61 @@ const styles = StyleSheet.create({
     paddingTop: 120
   },
 });
+```
 
+## Current state
 
-```
+At the moment [1/1/2026] `enriched-text-input` works great for things such as small rich-text inputs (Eg. an input for a messaging app with rich-text support) but not for creating whole rich-text editors. This is because inline styles that do not break line are working as expected (Eg. bold, italic or underline work great but styles such as headings break line so they are currently not yet supported).
 
-## Contributing
+Live parsing of rich text symbols (such as wrapping words in asterisks `*`) is still a work in progress an not working correctly but you can toggle styles through the ref api of the `EnrichedTextInput` (or use the provided `Toolbar`component as shown in the example usage).
 
-### Clone this repo
+## Features
 
-1. Fork and clone your Github froked repo:
-```
-git clone https://github.com/<github_username>/react-native-rich-text.git
-```
+- [x]  Inline markdown styles (**bold**, *italic*, underline, ~~strikethrough~~ and `inline code`).
+- [ ]  Paragraph styles (headings, lists, quotes, etc).
+- [ ]  Live rich-text parsing.
+- [ ]  Links and mentions.
+- [x]  Custom inline styles.
+- [x]  Custom methods and event handlers (setValue, onStartMention, onStyleChange, etc).
 
-2. Go to cloned repo directory:
-```
-cd react-native-rich-text
-```
+## API Reference
 
-### Install dependencies
+[API Reference](https://github.com/PatoSala/enriched-text-input/blob/main/API_REFERENCE.md)
 
-1. Install the dependencies in the root of the repo:
-```
-npm install
-```
+## Style patterns
 
-3. After that you can start the project with:
-```
-npm start
+Style patterns are the styles that you provide the input with for it to know how it should display certain portions of the text. You can check their structure in the [API reference](https://github.com/PatoSala/enriched-text-input/blob/main/API_REFERENCE.md#stylePatterns). 
+
+By default `enriched-text-input` uses a set of markdown styles (such as **bold**, *italic*, underline, ~~strikethrough~~ and `inline code`) for you to use out of the box, but you can provide your own custom styles through the `stylePatterns` prop. Keep in mind that when using this prop `enriched-text-input` will ignore any default style patterns so that only the ones you provided will be valid.
+
+If you want you can provide `enriched-text-input` with both default style patterns and any additional style patterns you define:
+
+```bash
+import { EnrichedTextInput, markdownStyles } from "enriched-text-input";
+
+const customStyles = [
+	{
+		name: "comment",
+		opening: null,
+		closing: null,
+		render: Comment
+	}
+];
+
+<EnrichedTextInput
+	stylePattrns={[...markdownStyles, ...customStyles]}
+/>
 ```
 
-## Create a pull request
-After making any changes, open a pull request. Once you submit your pull request, it will get reviewed.
+## Applying styles
+
+To apply styles you can either toggle them using the `ref` method `.toggleStyle()` which accepts as a parameter the name of a style pattern, or you can use rich-text enclosures while typing. This enclosures are defined within the `stylePatterns` prop and corresponding styles will get applied when a matching pattern is found inside the input. 
+
+## Known limitations
+
+- Inline images.
+- Only `Text` component styles are supported.
+
+## Contributing
+
+[Contributing guide](https://github.com/PatoSala/enriched-text-input/blob/main/CONTRIBUTING.md)

package/example/App.tsx

@@ -1,70 +1,73 @@
 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';
-
-function Comment({ children }) {
-  return (
-    <Text style={{
-      backgroundColor: "rgba(255, 203, 0, .12)",
-      textDecorationLine: "underline",
-      textDecorationColor: "rgba(255, 203, 0, .35)",
-    }}>
-      {children}
-    </Text>
-  )
-}
+import { StyleSheet, View, KeyboardAvoidingView, Text, Button, TextInput } from 'react-native';
+import { EnrichedTextInput, Toolbar, markdownStyles } from 'enriched-text-input';
+import * as Clipboard from 'expo-clipboard';
 
 export default function App() {
   const [rawValue, setRawValue] = useState("");
+  const [richTextStringValue, setRichTextStringValue] = useState("");
+  const [activeStyles, setActiveStyles] = useState([]);
+  console.log("ACTIVE STYLES:", activeStyles);
   const richTextInputRef = useRef(null);
 
-  const customPatterns = [
-    ...PATTERNS,
-    { style: "comment", regex: null, render: Comment }
-  ];
+  const handleGetRichText = () => {
+    const richText = richTextInputRef.current?.getRichTextValue();
 
-  const handleComment = () => {
-    richTextInputRef.current?.toggleStyle("comment");
+    setRichTextStringValue(richText);
   }
 
-  const handleGetRichText = () => {
-    const richText = richTextInputRef.current?.getRichText();
-    console.log(richText);
+  const handleCopyToClipboard = async (text: string) => {
+    await Clipboard.setStringAsync(text);
   }
 
   return (
     <KeyboardAvoidingView style={styles.container} behavior="padding">
       <View style={{ flex: 1 }}>
-        {/* <TextInput
+        <TextInput
+          multiline
           style={{ fontSize: 20, padding: 16 }}
           value={rawValue}
           onChangeText={(text) => setRawValue(text)}
+          placeholder='Raw text'
         />
         <Button
           title='Set rich text string'
           onPress={() => richTextInputRef.current?.setValue(rawValue)}
-        /> */}
-        <RichTextInput
+        />
+
+        <EnrichedTextInput
           ref={richTextInputRef}
-          patterns={customPatterns}/>
+          placeholder="Rich text"
+          onValueChange={() => console.log("VALUE CHANGE", richTextInputRef.current?.getRichTextValue())}
+          multiline={true}
+        />
+        <Button
+          title='Get rich text string'
+          onPress={handleGetRichText}
+        />
+        <Text style={{ padding: 16, fontSize: 20, color: richTextStringValue ? "black" : "#b3b3b3" }}>{richTextStringValue ? richTextStringValue : "Get rich text output will appear here!"}</Text>
 
+        <View style={{ flexDirection: "row", justifyContent: "center"}}>
+          <Button
+            title='Clear'
+            onPress={() => setRichTextStringValue("")}
+          />
           <Button
-            title='Get rich text string (check console)'
-            onPress={handleGetRichText}
-            />
+            title='Copy'
+            onPress={() => handleCopyToClipboard(richTextStringValue)}
+          />
+        </View>
       </View>
       <View style={{ alignSelf: "end"}}>
         <Toolbar richTextInputRef={richTextInputRef}>
-          <Toolbar.Bold />
+          <Toolbar.Bold/>
           <Toolbar.Italic />
           <Toolbar.Underline />
           <Toolbar.Strikethrough />
           <Toolbar.Code />
-          <TouchableOpacity style={styles.toolbarButton} onPress={handleComment}>
+          {/* <TouchableOpacity style={styles.toolbarButton} onPress={handleComment}>
             <FontAwesome6 name="comment-alt" size={16} color="black" />
-          </TouchableOpacity>
-
+          </TouchableOpacity> */}
           <Toolbar.Keyboard />
         </Toolbar>
       </View>

package/example/package.json

@@ -10,11 +10,12 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "enriched-text-input": "file:../",
     "expo": "~54.0.25",
+    "expo-clipboard": "~8.0.8",
     "expo-status-bar": "~3.0.8",
     "react": "19.1.0",
-    "react-native": "0.81.5",
-    "enriched-text-input": "file:../"
+    "react-native": "0.81.5"
   },
   "private": true,
   "devDependencies": {

package/index.ts

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

package/package.json

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