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

Lexical editor speech-enablement in your react app. This package is an 'extension' of the dragon-copilot-sdk for Javscript package.

Installation

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

Usage

The package has two exposed members which should be used in order to speech enable a lexical control:

LexicalSpeechPlugin

A lexical plugin you have to add to the LexicalComposer. It 'registers' the lexical editor instance for later operations done by BrowserSDK. Attribute historyPluginPresent informs BrowserSDK whether lexical HistoryPlugin is added by the integrator. This allows undo/redo voice commands to use lexical's undo/redo functionality, ensuring formatting is also correctly applied or reversed. Default value is true for this attribute, so make sure you set it to false when HistoryPlugin is not 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

The control type initialiser needs to be passed to BrowserSDK so it can handle those lexical controls which have LexicalSpeechPlugin added to their composer.

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

await dragon.initialize({
  applicationName: “Sample app”,
  …
  customControlOptions: {
    webCustomControlTypes: {
      lexicalControl,
    },
  },
});

To see this in action in a working app, you can check out /tests/react-test-app of this git repository.

Features

• Easy integration with @lexical/react