Speech-enable Lexical controls

To enable users to dictate into Lexical controls, install the lexical-react extension of the Dragon Copilot SDK for JavaScript.

npm install @microsoft/dragon-copilot-sdk-lexical-react

You'll need the following members from the Dragon Copilot SDK:

• LexicalSpeechPlugin

• lexicalControl

LexicalSpeechPlugin

Add LexicalSpeechPlugin to the LexicalComposer component. It registers the Lexical editor instance for later operations performed by the Dragon Copilot SDK.

Undo/redo voice commands

Lexical, rather than Dragon Copilot, handles undo/redo functionality. To enable undo and redo voice commands, add Lexical's HistoryPlugin.

Set the historyPluginPresent attribute of the LexicalSpeechPlugin to true or false to inform the Dragon Copilot SDK if HistoryPlugin is present. The default value is true; set it to false when HistoryPlugin isn't present.

import React from "react";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
import { LexicalSpeechPlugin } from "@microsoft/dragon-copilot-sdk-lexical-react";

export const CustomLexicalEditor = () => {
  return (
    <>
      <LexicalComposer>
        <PlainTextPlugin contentEditable={<ContentEditable />} ErrorBoundary={LexicalErrorBoundary} />
        <LexicalSpeechPlugin historyPluginPresent={false} />
      </LexicalComposer>
    </>
  );
};

lexicalControl

Pass the lexicalControl control type to the Dragon Copilot SDK's initialization options; this tells Dragon Copilot to speech-enable Lexical controls that have LexicalSpeechPlugin added to their composer.

import { lexicalControl } from "@microsoft/dragon-copilot-sdk-lexical-react";

await DragonCopilotSDK.dragon.initialize({
  applicationName: "Sample app",
  ...
  customControlOptions: {
    webCustomControlTypes: {
      lexicalControl,
    },
  },
});