# @springmicro/rte

> WARNING: This package will likely see many breaking changes until its first major release.

## Styling

For the slate editor styles.

```tsx
import "@springmicro/rte/dist/style.css";
```

## PaperEditor

```tsx
import { PaperEditor } from "@springmicro/rte";

declare type PaperEditorProps = {
  value?: Descendant[];
};
```

## InlineEditor

```tsx
import { InlineEditor } from "@springmicro/rte";

declare type InlineEditorProps = {
  value?: Descendant[];
  setValue?: React.Dispatch<React.SetStateAction<Descendant[]>>;
  readOnly: boolean;
  editor?: BaseEditor & ReactEditor;
  scrollElement?: HTMLElement;
};
```

`scrollElement` refers to a parent scroll element. The default is the global `window` but if you are placing the `InlineEditor` in a custom scroll element then a reference to that element needs to be placed here to properly position the toolbar either above or below the editor.

```jsx
/**
 * Scroll Element Example
 * Put other content above and below to scroll and see the menu move.
 */
export function InlineEditorWithScrolling(props) {
  const [ref, setRef] = React.useState();
  return (
    <div
      style={{ height: "50vh", overflowY: "scroll" }}
      ref={(newRef) => setRef(newRef)}
    >
      <div style={{ color: "#aaa" }}>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sint fuga
        reprehenderit unde dolores expedita, nam, enim repellendus sit
        doloremque eveniet quas vel perferendis! Cumque, eveniet? Dignissimos
        mollitia voluptas provident?
      </div>
      <InlineEditor {...props} scrollElement={ref} />
      <div style={{ color: "#aaa" }}>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sint fuga
        reprehenderit unde dolores expedita, nam, enim repellendus sit
        doloremque eveniet quas vel perferendis! Cumque, eveniet? Dignissimos
        mollitia voluptas provident?
      </div>
      <div style={{ height: "100vh" }}></div>
    </div>
  );
}
```
