UsxEditor

A React component that displays USX editor control.

Example usage

Installation

npm install --save usxeditor

Usage

import React, {useState} from 'react';
import UsxEditor, {UsxFootnoteEditor} from 'UsxEditor';

function App()
{

  const [usx, setUsx] = useState('<usx version="3.0"><para style="p"><verse number="1" style="v"/>hello world</para><para style="s">subheading</para></usx>');

  return (
    <div className="App">
      <header className="App-header">
        
        <div style={{padding: 20}}>React based USX editor technology demo</div>
        
        <div style={{display: 'flex', flexDirection : 'column', width: '80%'}}>
          <UsxEditor
            usx={usx}
            paraMap={['s', 'p']}
            charMap={{'wj' : {}, 'nd' : {style : {'textDecoration' : 'underline' }}}}
            showFootnotePane={true}
            onUsxChanged={(usx: string) => setUsx(usx)}
          />
        </div>
        <div>
          <br /><hr /><br />
          Raw Usx : <span>{usx}</span>
        </div>
      </header>
    </div>
  );
}

export default App;

API

UsxEditor

| prop | description | type | default | | ---- | ----------- | ---- | ------- | | usx | The usx string to display | string | | | paraMap | Paragraph markers | string[] | [] | | charMap | Character markers | CharacterMarkerDefinitions | {} | | showFootnotePane| show/hides footnote pane | boolean | false | | showStatusBar | show/hide status bar | boolean | false | | onUsxChanged | USX has been modified | Function : (usx : string) => void | |

CharacterMarkerDefinitions

{stylename : CharacterMarkerDefinition, ...}

for example:

{{'wj' : {}, 'nd' : {style : {'textDecoration' : 'underline' }}}}

CharacterMarkerDefinition

{style : css, fontSize : number}