@springmicro/rte 0.1.3 → 0.1.11

package/README.md

@@ -2,14 +2,67 @@
 
 > WARNING: This package will likely see many breaking changes until its first major release.
 
-## Build
+## Styling
 
-```bash
-pnpm run build
+For the slate editor styles.
+
+```tsx
+import "@springmicro/rte/dist/style.css";
 ```
 
-## Usage
+## 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>
+  );
+}
 ```