Name: Typix
Author: Diyorbek Juraev

The Speech to Text extension enables voice-to-text dictation using the Web Speech API.

Demo

Speech recognition is not supported in your browser.

Loading preview...

import {  EditorContent,  EditorRoot,  createEditorConfig,  defaultExtensionNodes,} from "@typix-editor/react";import {  SpeechToTextExtension,  useSpeechToText,  isSpeechRecognitionSupported,} from "@typix-editor/extension-speech-to-text";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({  extensionNodes: defaultExtensionNodes,  theme,});function MicButton() {  const { isListening, toggle } = useSpeechToText();  if (!isSpeechRecognitionSupported()) return null;  return (    <button onClick={toggle}>      {isListening ? "Stop Listening" : "Start Dictation"}    </button>  );}export default function SpeechToTextExample() {  return (    <EditorRoot config={config}>      <MicButton />      <EditorContent placeholder="Click 'Start Dictation' and speak..." />      <SpeechToTextExtension />    </EditorRoot>  );}

Installation

pnpm add @typix-editor/extension-speech-to-text

npm install @typix-editor/extension-speech-to-text

yarn add @typix-editor/extension-speech-to-text

Setup

import { SpeechToTextExtension } from '@typix-editor/extension-speech-to-text';

function MyEditor() {
  return (
    <EditorRoot>
      <EditorContent />
      <SpeechToTextExtension />
    </EditorRoot>
  );
}

With the useSpeechToText hook

import { useSpeechToText, isSpeechRecognitionSupported } from '@typix-editor/extension-speech-to-text';

function VoiceButton() {
  const { isListening, start, stop } = useSpeechToText();

  if (!isSpeechRecognitionSupported()) {
    return null;
  }

  return (
    <button onClick={isListening ? stop : start}>
      {isListening ? 'Stop' : 'Dictate'}
    </button>
  );
}

Exports

Export	Type	Description
`SpeechToTextExtension`	Component	The speech-to-text plugin
`SpeechToTextExtensionProps`	Type	Props type
`useSpeechToText`	Hook	Control speech recognition
`isSpeechRecognitionSupported`	Function	Check browser support
`SPEECH_TO_TEXT_COMMAND`	Lexical Command	Command for speech results

Browser support

The Web Speech API is required. Check support before rendering:

if (isSpeechRecognitionSupported()) {
  // Safe to use speech-to-text
}

The Web Speech API is not supported in all browsers. It works best in Chrome and Edge.

Speech to Text