@springmicro/rte

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

Styling

For the slate editor styles.

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

PaperEditor

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

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

InlineEditor

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.

/**
 * 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>
  );
}