0.5.16 • Published 2 months ago

@springmicro/rte v0.5.16

Weekly downloads
-
License
-
Repository
-
Last release
2 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.5.10

3 months ago

0.5.11

3 months ago

0.5.8

3 months ago

0.5.7

3 months ago

0.5.9

3 months ago

0.5.16

2 months ago

0.5.14

2 months ago

0.5.15

2 months ago

0.5.12

3 months ago

0.5.13

2 months ago

0.3.0

7 months ago

0.5.4

4 months ago

0.5.3

4 months ago

0.3.5

6 months ago

0.5.6

3 months ago

0.5.5

3 months ago

0.5.0

4 months ago

0.4.1

4 months ago

0.3.2

7 months ago

0.4.0

5 months ago

0.5.2

4 months ago

0.3.4

6 months ago

0.5.1

4 months ago

0.2.1

11 months ago

0.2.0

11 months ago

0.2.0-alpha.4

11 months ago

0.2.0-alpha.3

12 months ago

0.2.0-alpha.2

12 months ago

0.2.0-alpha.1

12 months ago

0.2.0-alpha.0

12 months ago

0.1.13

1 year ago

0.1.13-alpha.7

1 year ago

0.1.13-alpha.6

1 year ago

0.1.13-alpha.3

1 year ago

0.1.13-alpha.2

1 year ago

0.1.13-alpha.0

1 year ago

0.1.12

1 year ago

0.1.11

1 year ago

0.1.10

1 year ago

0.1.3

1 year ago