augnito-plate-button

Augnito Plate Button

Overview

Augnito Plate Button enables Augnito SDK support into within Plate enabling speech to text on it. It requires a React app with Plate and it's peer dependencies installed.

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

Required peer dependencies

Before installing the Augnito Plate Button a React app with a functional Plate editor bust be already set up. The instructions on how to bootstrap a React app are out of the scope of this library.

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 basic Plate 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

Assuming a working React App with Plate and it's dependencies set up:

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;

Commands

Besides regular speech to text the button can process the following commands:

command	notes
stop mic	stops dictation. Sames as clicking the dictation button once started.
new line	same as hitting carriage return. If used within a list it creates a new list entry (see lists commands)
select next word
select next N words
deselect	removes the just the selection (contents on the selection remain unchanged).
select last word
select last N words
select next sentence	if cursor not at the end of a sentence selects the current sentece.
select last sentence	same principe with select next sentence.
delete that	deletes the word under the cursor or the contents of a selection.
delete it	same as delete that command.
bold it	bolds the word under the cursor or the selected text. Requires createBoldPlugin().
bold that	same as bold it command.
italicise it	makes the current word or the selected text italic Requires createItalicPlugin().
italicise that	same as italicise it command.
underline it	underlines the current word or the selected text Requires createUnderlinePlugin().
underline that	same as underline it command.
next field	moves to and selects the next dynamic field (next [] pair or next [content] occurrence).
previous field	moves to and selects the previous dynamic field (previous [] pair or previous [content] occurrence).
start number list	starts a numbered (ordered) list. Requires createListPlugin().
start bullet list	starts a bullet list. Requires createListPlugin().
stop bullet list | stop number list	exist the current list context. Requires createListPlugin().

Version support:

The Augnito Plate Button uses many functions, API, structures and code from Plate,Slate,Rect, etc. To ensure perfomance and bundle size those dependencies are expected to be installed on the consumer solution source (as stated on the required dependencies section) which means these are present only once on the project. The versions that should not break compatibility are:

library	semver
@udecode/plate	^10
react	^17
react-dom	^17
slate	^0
slate-history	^0
slate-hyperscript	^0
slate-react	^0
styled-components	^5