@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>;

  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 (

          style={{ height: "50vh", overflowY: "scroll" }}

      ref={(newRef) => setRef(newRef)}

    >

      

        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?

      

      

      

        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?

      

      

    

  );

}

Styling

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>;
readOnly: boolean;
editor?: BaseEditor & ReactEditor;
scrollElement?: HTMLElement;
};

refers to a parent scroll element. The default is the global

but if you are placing the

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 (

style={{ height: "50vh", overflowY: "scroll" }}
ref={(newRef) => setRef(newRef)}
>

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?

);
}