usxeditor/README.md

USX editor react component.

# UsxEditor

A React component that displays USX editor control.

[Example usage](https://usxeditor.web.app/)

[![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat)](https://hg.sr.ht/~hindlemail/usxeditor/browse/LICENSE?rev=tip)
[![builds.sr.ht status](https://builds.sr.ht/~hindlemail/usxeditor.svg)](https://builds.sr.ht/~hindlemail/usxeditor?)

## Installation

```sh
npm install --save usxeditor
```

## Usage

```js

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}
```