Speech-to-Text Rich Text Editor

A powerful, feature-rich React component library for building rich text editors with built-in speech-to-text capabilities, smart mention support, and flexible feature toggles.

Features

✨ Speech-to-Text Integration

• Built-in Web Speech API integration
• Real-time transcript display
• Seamless text insertion from voice input

🎯 Smart @Mentions

• Custom mention autocomplete
• User selection from suggestions
• Styled mention tags with hover effects

⚙️ Feature Toggles

• Enable/disable features dynamically
• No need to rebuild
• Granular control over functionality

📝 Rich Text Editing

• Built on Quill editor
• Multiple formatting options
• Undo/redo support

🎨 Customizable Styling

• Dark mode support
• Tailwind CSS ready
• Easy theme customization

Installation

npm install speech-to-text-editor
# or
yarn add speech-to-text-editor

Quick Start

import { RichTextEditor } from "speech-to-text-editor";
import "speech-to-text-editor/styles";

export default function MyEditor() {
  const editorRef = useRef(null);

  return (
    <RichTextEditor
      ref={editorRef}
      placeholder="Start typing or use the microphone..."
      features={{
        speechToText: true,
        mentions: true,
        formatting: true,
      }}
      onContentChange={(content) => {
        console.log("HTML:", content.html);
        console.log("JSON:", content.content);
      }}
    />
  );
}

API Reference

RichTextEditor Component

Main editor component with all features integrated.

Props

| Prop | Type | Default | Description | | ------------------ | ---------- | ------------------- | ----------------------------- | | placeholder | string | "Start typing..." | Editor placeholder text | | features | object | All enabled | Feature configuration | | onContentChange | function | - | Callback when content changes | | mentions | array | [] | Available mentions list | | onMentionTrigger | function | - | Callback when @ is typed | | className | string | "" | CSS class name | | style | object | {} | Inline styles | | readOnly | boolean | false | Read-only mode |

Ref Methods

const editorRef = useRef(null);

// Get HTML content
editorRef.current.getHTML();

// Insert text
editorRef.current.insertText("Hello World");

// Control speech
editorRef.current.startSpeech();
editorRef.current.stopSpeech();

// Selection
editorRef.current.getSelection();
editorRef.current.setSelection(0, 10);

// Get Quill instance
editorRef.current.getQuill();

useEditor Hook

Manage a Quill editor instance.

const {
  editorRef,
  quillRef,
  isReady,
  getContent,
  getHTML,
  setContent,
  setHTML,
  insertText,
  insertEmbed,
  getSelection,
  setSelection,
} = useEditor(options);

useSpeechRecognition Hook

Handle Web Speech API interactions.

const {
  isListening,
  transcript,
  interimTranscript,
  error,
  isSupported,
  startListening,
  stopListening,
  abortListening,
  resetTranscript,
} = useSpeechRecognition(options);

useFeatureToggle Hook

Manage feature toggles dynamically.

const { features, toggleFeature, setFeature, isEnabled } = useFeatureToggle({
  speechToText: true,
  mentions: true,
});

Feature Configuration

Control which features are enabled:

<RichTextEditor
  features={{
    speechToText: true, // Enable voice input
    mentions: true, // Enable @mentions
    formatting: true, // Enable text formatting
    undo: true, // Enable undo
    redo: true, // Enable redo
  }}
/>

Handling Mentions

const handleMentionTrigger = ({ index, text }) => {
  // Show mention suggestions
  // User selects: @Alice
};

<RichTextEditor
  onMentionTrigger={handleMentionTrigger}
  mentions={[
    { id: "1", label: "Alice Johnson" },
    { id: "2", label: "Bob Smith" },
  ]}
/>;

Content Management

const editorRef = useRef(null);

const handleDownload = () => {
  const html = editorRef.current.getHTML();
  // Download or send to server
};

const handleClear = () => {
  const quill = editorRef.current.getQuill();
  quill.setContents([]);
};

Browser Support

• Chrome/Edge: Full support including Web Speech API
• Firefox: Full support (requires feature flag)
• Safari: Full support (iOS 14.5+)
• Mobile: Full support with native speech recognition

Styling

The editor comes with default styles. Customize with CSS:

/* Override speech button color */
.speech-btn {
  background-color: #007bff;
}

/* Customize mention styling */
.mention-span {
  background-color: #e0e7ff;
  color: #3730a3;
}

Advanced Usage

Custom Toolbar

<RichTextEditor
  modules={{
    toolbar: [
      ["bold", "italic", "underline"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["link", "image"],
    ],
  }}
/>

Content Persistence

const [content, setContent] = useState(null);

const saveContent = async () => {
  const html = editorRef.current.getHTML();
  await fetch("/api/save", {
    method: "POST",
    body: JSON.stringify({ content: html }),
  });
};

<RichTextEditor onContentChange={(c) => setContent(c)} />;

Examples

See the demo app for complete working examples including:

• Basic editor setup
• Feature toggle implementation
• Mention selection UI
• Content preview and export
• HTML download functionality

License

MIT © 2025

Contributing

Contributions welcome! Please open issues and submit pull requests.

Support

For issues, questions, or feature requests, please visit our GitHub repository.