Rich-textify NPM

rich-textify

A powerful and flexible rich text editor component for React and React Native applications. It supports both HTML and Markdown, features real-time previews, and offers extensive customization options.

Features

📝 Smart text formatting with selection-based editing.
🎨 Visual formatting toolbar with active state indicators.
🔄 Supports both HTML and Markdown outputs.
🧹 Automatic cleanup of nested tags and invalid formatting.
🔒 Built-in HTML sanitization for enhanced security.
📱 Cross-platform support for React Native and Web.
🎯 Full TypeScript support for type safety.
💅 Extensive styling options for easy customization.
♿ Accessibility support for inclusive design.

Installation

npm install rich-textify

Quick Start

import { Editor, Viewer } from "rich-textify";
import { useState } from "react";
import { View, StyleSheet } from "react-native";

function App() {
  const [content, setContent] = useState("");

  return (
    <View style={styles.container}>
      {/* Rich Text Editor */}
      <Editor
        value={content}
        onChange={setContent}
        outputFormat="html"
        placeholder="Start typing..."
      />

      {/* Content Preview */}
      <Viewer content={content} inputFormat="html" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});

Components

Editor Component

The main rich text editor component with smart formatting capabilities.

<Editor
  value={content}
  onChange={setContent}
  outputFormat="html" // or "markdown"
  formatOptions={{
    bold: true,
    italic: true,
    underline: true,
    strikethrough: true,
    overline: true,
    subscript: true,
    superscript: true,
  }}
  style={styles.editor}
  textStyle={styles.editorText}
  placeholder="Type something..."
  maxLength={1000}
  minHeight={150}
  autoFocus={false}
  readOnly={false}
/>

Editor Props

Prop	Type	Default	Description
`value`	string	required	Current content
`onChange`	(value: string) => void	required	Callback for content changes
`outputFormat`	'html' \| 'markdown'	'html'	Output format
`formatOptions`	FormatOptions	All true	Text formatting options
`style`	ViewStyle	undefined	Styles for the container
`textStyle`	TextStyle	undefined	Styles for the text
`placeholder`	string	undefined	Placeholder text
`maxLength`	number	undefined	Maximum length of content
`minHeight`	number	100	Minimum height for the editor
`autoFocus`	boolean	false	Focus the editor on render
`readOnly`	boolean	false	Enable read-only mode

Viewer Component

Displays formatted content.

<Viewer
  content={content}
  inputFormat="html" // or "markdown"
  style={styles.viewer}
  textStyle={styles.viewerText}
  sanitize={true}
/>

Viewer Props

Prop	Type	Default	Description
`content`	string	required	Content to display
`inputFormat`	'html' \| 'markdown'	'html'	Format of the input content
`style`	ViewStyle	undefined	Styles for the container
`textStyle`	TextStyle	undefined	Styles for the text
`sanitize`	boolean	true	Enable content sanitization

Formatting Options

Define the text formatting capabilities in your app.

interface FormatOptions {
  bold?: boolean;
  italic?: boolean;
  underline?: boolean;
  strikethrough?: boolean;
  overline?: boolean;
  subscript?: boolean;
  superscript?: boolean;
}

Styling

Easily customize the appearance of Editor and Viewer components.

const styles = StyleSheet.create({
  editor: {
    backgroundColor: "#ffffff",
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  editorText: {
    fontSize: 16,
    lineHeight: 24,
    color: "#333",
  },
  viewer: {
    backgroundColor: "#f8f8f8",
    borderRadius: 8,
    padding: 16,
  },
  viewerText: {
    fontSize: 16,
    lineHeight: 24,
    color: "#333",
  },
});

Usage Guide

Text Selection and Formatting

Select text in the editor.
Click format buttons in the toolbar to apply formatting.
The selected text will be visually formatted.
The underlying content maintains clean HTML/Markdown.

Best Practices

Text Selection

Select text before applying formatting.
Use format toolbar buttons for consistent formatting.
Clear selection to start fresh formatting.

Content Management

Store formatted content as HTML or Markdown.
Use the Viewer component for displaying formatted content.
Implement proper content validation.
Consider content length limits.

Formatting

Use consistent format options across your app.
Consider platform-specific formatting needs.
Test formatting in both HTML and Markdown modes.

Styling

Follow platform design guidelines.
Ensure proper contrast ratios.
Test different content lengths.

Performance

Handle large content efficiently.
Implement proper error boundaries.
Consider debouncing content updates.

Security

HTML sanitization with sanitize-html.
XSS protection for safer content rendering.
Configurable allowed tags and attributes.
Nested tag cleanup for consistent output.

TypeScript Support

Rich type definitions are provided for enhanced development experience.

import type { EditorProps, ViewerProps, FormatOptions } from "rich-textify";

Tutorial: Building a Simple Note-Taking App

Step 1: Install the Package

npm install rich-textify

Step 2: Create the App Component

import { Editor, Viewer } from "rich-textify";
import { useState } from "react";
import { View, StyleSheet, Button } from "react-native";

function NoteApp() {
  const [note, setNote] = useState("");
  const [previewMode, setPreviewMode] = useState(false);

  return (
    <View style={styles.container}>
      {previewMode ? (
        <Viewer content={note} inputFormat="html" />
      ) : (
        <Editor
          value={note}
          onChange={setNote}
          outputFormat="html"
          placeholder="Write your note here..."
        />
      )}
      <Button
        title={previewMode ? "Edit Note" : "Preview Note"}
        onPress={() => setPreviewMode(!previewMode)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});

export default NoteApp;