augnito-plate-button

Augnito Plate Button

Overview

Augnito Plate Button that enables Augnito SDK support into a plate editor hence enabling speech to text on it. It requires a react app with slate and it's peer dependencies installed in order to work.

Some commands make use of specific plugins such as bold, start lists, etc.

Requerided peer dependencies

Before installing the Augnito Plate Button a react app with a functional plate editor bust be set. The instructions on how to set up a react app are not covered here.

Plate

npm install @udecode/plate

Plate's peers dependencies are also required

npm install slate slate-react slate-history slate-hyperscript react react-dom styled-components

up to this point this is a plate basic installation

Plugins

In order to use some commands such as marks (bold, italics, etc), lists and others the related plugin must be installed and added to the plate instance. These must be installed and enabled as described on Plate's documentation.

Installation

Once all the dependencies are installed the Augnito Plate Button can be installed via npm using:

npm i augnito-plate-button

Usage

1 - Import the library into the component where the editor will be hosted

import { ToolbarAugnito } from 'augnito-plate-button';

2- Prepare your SDK provided values

const accountCode = '';
const accessKey = '';
const userTag = '';
const deviceId = '';
const sourceApp = '';
const lmId = '';

3- Use the component

<Plate>
  <HeadingToolbar>
    <ToolbarAugnito
      accountCode="{accountCode}"
      accessKey="{accessKey}"
      userTag="{userTag}"
      deviceId="{deviceId}"
      sourceApp="{sourceApp}"
      lmId="{lmId}"
    ></ToolbarAugnito>
  </HeadingToolbar>
</Plate>

---

Full example component

Assumign a working React App.

import './App.css';
import { Plate, HeadingToolbar } from '@udecode/plate';
import { ToolbarAugnito } from 'augnito-plate-button';

const accountCode = '';
const accessKey = '';
const userTag = '';
const deviceId = '';
const sourceApp = '';
const lmId = '';

function App() {
  return (
    <div className="App">
      <div className="editor">
        <Plate>
          <HeadingToolbar>
            <ToolbarAugnito
              accountCode={accountCode}
              accessKey={accessKey}
              userTag={userTag}
              deviceId={deviceId}
              sourceApp={sourceApp}
              lmId={lmId}
            ></ToolbarAugnito>
          </HeadingToolbar>
        </Plate>
      </div>
    </div>
  );
}

export default App;