Feature: Add transcript editing

src/SpeechRecognition.js

@@ -1,7 +1,4 @@
 import { useCallback, useEffect, useReducer, useRef, useState } from "react";
-import NativeSpeechRecognition from "./NativeSpeechRecognition";
-import RecognitionManager from "./RecognitionManager";
-import { appendTranscript, clearTranscript } from "./actions";
 import isAndroid from "./isAndroid";
 import { transcriptReducer } from "./reducers";
 import {
@@ -10,6 +7,9 @@ import {
   compareTwoStringsUsingDiceCoefficient,
   concatTranscripts,
 } from "./utils";
+import { clearTranscript, appendTranscript, mutateTranscript } from "./actions";
+import RecognitionManager from "./RecognitionManager";
+import NativeSpeechRecognition from "./NativeSpeechRecognition";
 
 let _browserSupportsSpeechRecognition = !!NativeSpeechRecognition;
 let _browserSupportsContinuousListening =
@@ -22,7 +22,7 @@ const useSpeechRecognition = ({
   commands = [],
 } = {}) => {
   const [recognitionManager] = useState(
-    SpeechRecognition.getRecognitionManager(),
+    SpeechRecognition.getRecognitionManager()
   );
   const [
     browserSupportsSpeechRecognition,
@@ -37,11 +37,11 @@ const useSpeechRecognition = ({
     {
       interimTranscript: recognitionManager.interimTranscript,
       finalTranscript: "",
-    },
+    }
   );
   const [listening, setListening] = useState(recognitionManager.listening);
   const [isMicrophoneAvailable, setMicrophoneAvailable] = useState(
-    recognitionManager.isMicrophoneAvailable,
+    recognitionManager.isMicrophoneAvailable
   );
   const commandsRef = useRef(commands);
   commandsRef.current = commands;
@@ -50,11 +50,23 @@ const useSpeechRecognition = ({
     dispatch(clearTranscript());
   };
 
+  const dispatchMutateTranscript = (mutatedTranscript) => {
+    dispatch(mutateTranscript(mutatedTranscript));
+  };
+
   const resetTranscript = useCallback(() => {
     recognitionManager.resetTranscript();
     dispatchClearTranscript();
   }, [recognitionManager]);
 
+  const editTranscript = useCallback(
+    (mutatedTranscript) => {
+      recognitionManager.resetTranscript();
+      dispatchMutateTranscript(mutatedTranscript);
+    },
+    [recognitionManager]
+  );
+
   const testFuzzyMatch = (command, input, fuzzyMatchingThreshold) => {
     const commandToString =
       typeof command === "object" ? command.toString() : command;
@@ -64,7 +76,7 @@ const useSpeechRecognition = ({
       .trim();
     const howSimilar = compareTwoStringsUsingDiceCoefficient(
       commandWithoutSpecials,
-      input,
+      input
     );
     if (howSimilar >= fuzzyMatchingThreshold) {
       return {
@@ -111,7 +123,7 @@ const useSpeechRecognition = ({
                 return testFuzzyMatch(
                   subcommand,
                   input,
-                  fuzzyMatchingThreshold,
+                  fuzzyMatchingThreshold
                 );
               }
               return testMatch(subcommand, input);
@@ -138,10 +150,10 @@ const useSpeechRecognition = ({
               }
             });
           }
-        },
+        }
       );
     },
-    [resetTranscript],
+    [resetTranscript]
   );
 
   const handleTranscriptChange = useCallback(
@@ -151,7 +163,7 @@ const useSpeechRecognition = ({
       }
       matchCommands(newInterimTranscript, newFinalTranscript);
     },
-    [matchCommands, transcribing],
+    [matchCommands, transcribing]
   );
 
   const handleClearTranscript = useCallback(() => {
@@ -196,6 +208,7 @@ const useSpeechRecognition = ({
     resetTranscript,
     browserSupportsSpeechRecognition,
     browserSupportsContinuousListening,
+    editTranscript,
   };
 };
 const SpeechRecognition = {

src/actions.js

@@ -1,4 +1,8 @@
-import { APPEND_TRANSCRIPT, CLEAR_TRANSCRIPT } from "./constants";
+import {
+  CLEAR_TRANSCRIPT,
+  APPEND_TRANSCRIPT,
+  MUTATE_TRANSCRIPT,
+} from "./constants";
 
 export const clearTranscript = () => {
   return { type: CLEAR_TRANSCRIPT };
@@ -13,3 +17,12 @@ export const appendTranscript = (interimTranscript, finalTranscript) => {
     },
   };
 };
+
+export const mutateTranscript = (mutatedTranscript) => {
+  return {
+    type: MUTATE_TRANSCRIPT,
+    payload: {
+      mutatedTranscript,
+    },
+  };
+};

src/constants.js

@@ -1,2 +1,3 @@
 export const CLEAR_TRANSCRIPT = "CLEAR_TRANSCRIPT";
 export const APPEND_TRANSCRIPT = "APPEND_TRANSCRIPT";
+export const MUTATE_TRANSCRIPT = "MUTATE_TRANSCRIPT";

src/reducers.js

@@ -1,4 +1,8 @@
-import { APPEND_TRANSCRIPT, CLEAR_TRANSCRIPT } from "./constants";
+import {
+  CLEAR_TRANSCRIPT,
+  APPEND_TRANSCRIPT,
+  MUTATE_TRANSCRIPT,
+} from "./constants";
 import { concatTranscripts } from "./utils";
 
 const transcriptReducer = (state, action) => {
@@ -13,9 +17,14 @@ const transcriptReducer = (state, action) => {
         interimTranscript: action.payload.interimTranscript,
         finalTranscript: concatTranscripts(
           state.finalTranscript,
-          action.payload.finalTranscript,
+          action.payload.finalTranscript
         ),
       };
+    case MUTATE_TRANSCRIPT:
+      return {
+        interimTranscript: "",
+        finalTranscript: action.payload.mutatedTranscript,
+      };
     default:
       throw new Error();
   }