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

``bash
npm install speech-to-text-editor


or


yarn add speech-to-text-editor
`

Quick Start

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

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

return (
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

$3

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

`jsx
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();
`

$3

Manage a Quill editor instance.

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

$3

Handle Web Speech API interactions.

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

$3

Manage feature toggles dynamically.

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

Feature Configuration

Control which features are enabled:

`jsx
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

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

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

Content Management

`jsx
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:

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

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

Advanced Usage

$3

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

$3

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

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

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.