Name: Typix
Author: Diyorbek Juraev

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

Demo

Loading preview…

import {  createEditorConfig,  defaultExtensionNodes,  defaultTheme,  EditorContent,  EditorRoot,} from "@typix-editor/react";import { SpeechToTextExtension } from "@typix-editor/extension-speech-to-text";import { Toolbar } from "./Toolbar";const config = createEditorConfig({  extensionNodes: defaultExtensionNodes,  theme: defaultTheme,});export default function SpeechToTextExample() {  return (    <EditorRoot config={config}>      <div className="editor-container">        <Toolbar />        <EditorContent placeholder="Click the mic button and speak..." />      </div>      <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