0.2.1 • Published 5 months ago

@springmicro/rte v0.2.1

Weekly downloads
-
License
-
Repository
-
Last release
5 months ago

@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>
  );
}
0.2.1

5 months ago

0.2.0

5 months ago

0.2.0-alpha.4

5 months ago

0.2.0-alpha.3

5 months ago

0.2.0-alpha.2

6 months ago

0.2.0-alpha.1

6 months ago

0.2.0-alpha.0

6 months ago

0.1.13

6 months ago

0.1.13-alpha.7

6 months ago

0.1.13-alpha.6

6 months ago

0.1.13-alpha.3

6 months ago

0.1.13-alpha.2

6 months ago

0.1.13-alpha.0

6 months ago

0.1.12

6 months ago

0.1.11

6 months ago

0.1.10

6 months ago

0.1.3

7 months ago