augnito-plate-button

Augnito Plate Button

overview

Augnito Plate Button that enables Augnito SDK support into a plate editor

required peer dependencies

plate

npm install @udecode/plate

plate's peers are also required

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

*note: up to this point this is a plate basic installation*

note 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.

Installation

Once all the dependencies are installed run

npm i augnito-plate-button

usage

import the library into the component where the editor will be hosted

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

prepare your SDK provided values

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

use the component

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

full example component

/* eslint-disable jsx-a11y/no-access-key */
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;