diff --git a/docs/Summary.md b/docs/Summary.md index 14cbf0689..79cce8100 100644 --- a/docs/Summary.md +++ b/docs/Summary.md @@ -57,6 +57,7 @@ - [withReact](libraries/slate-react/with-react.md) - [ReactEditor](libraries/slate-react/react-editor.md) - [Hooks](libraries/slate-react/hooks.md) + - [Slate](libraries/slate-react/slate.md) - [Editable](libraries/slate-react/editable.md) - [Event Handling](libraries/slate-react/event-handling.md) - [Slate History](libraries/slate-history/README.md) diff --git a/docs/libraries/slate-react/README.md b/docs/libraries/slate-react/README.md index 5da973ddd..0d2dbe330 100644 --- a/docs/libraries/slate-react/README.md +++ b/docs/libraries/slate-react/README.md @@ -5,7 +5,7 @@ This sub-library contains the React-specific logic for Slate. - [withReact](./with-react.md) - [ReactEditor](./react-editor.md) - [Hooks](./hooks.md) -- Slate (under construction) +- [Slate](./slate.md) - [Editable](./editable.md) - Usage (under construction) - [Event Handling](./event-handling.md) diff --git a/docs/libraries/slate-react/slate.md b/docs/libraries/slate-react/slate.md new file mode 100644 index 000000000..f23805ac8 --- /dev/null +++ b/docs/libraries/slate-react/slate.md @@ -0,0 +1,36 @@ +# Slate Component + +## `Slate(prop: SlateProps)` + +The `Slate` component must include somewhere in its `children` the `Editable` component. + +```typescript +type SlateProps = { + editor: ReactEditor + value: Descendant[] + children: React.ReactNode + onChange?: (value: Descendant[]) => void +} +``` + +### Slate Props + +#### `props.editor: ReactEditor` + +An instance of `ReactEditor` + +#### `props.value: Descendant[]` + +The initial value of the Editor. + +This prop is deceptively named. + +Slate once was a controlled component (i.e. it's contents were strictly controlled by the `value` prop) but due to features like its edit history which would be corrupted by direct editing of the `value` it is no longer a controlled component. + +#### `children: React.ReactNode` + +The `children` which must contain an `Editable` component. + +#### `onChange: (value: Descendant[]) => void` + +An optional callback function which you can use to be notified of changes in the editor's value.