diff --git a/docs/Summary.md b/docs/Summary.md index 1deff5a46..25e7140ca 100644 --- a/docs/Summary.md +++ b/docs/Summary.md @@ -54,6 +54,7 @@ ## Libraries - [Slate React](libraries/slate-react/README.md) + - [withReact](libraries/slate-react/with-react.md) - [Slate History](libraries/slate-history/README.md) - [withHistory](/libraries/slate-history/with-history.md) - [HistoryEditor](/libraries/slate-history/history-editor.md) diff --git a/docs/libraries/slate-react/README.md b/docs/libraries/slate-react/README.md index 3851163ba..014bea09c 100644 --- a/docs/libraries/slate-react/README.md +++ b/docs/libraries/slate-react/README.md @@ -2,6 +2,8 @@ This sub-library contains the React-specific logic for Slate. +- [withReact](./with-react.md) + ## Components React components for rendering Slate editors diff --git a/docs/libraries/slate-react/with-react.md b/docs/libraries/slate-react/with-react.md new file mode 100644 index 000000000..6f09186e0 --- /dev/null +++ b/docs/libraries/slate-react/with-react.md @@ -0,0 +1,17 @@ +# withReact + +The `withReact` plugin enables Slate to work in a React environment. Currently, React is the only first class implementation of Slate available. + +### `withReact(editor: T, clipboardFormatKey = 'x-slate-fragment'): T & ReactEditor` + +Add `ReactEditor` to an instance of any `Editor`. + +The `clipboardFormatKey` option allows you to customize the `DataTransfer` type when Slate data is copied to the clipboard. By default, it is `application/x-slate-fragment` but it can be customized using this option. + +This can be useful when a user copies from one Slate editor to a differently configured Slate editor. This could cause nodes to be inserted which are not correctly typed for the receiving editor, corrupting the document. By customizing the `clipboardFormatKey` one can ensure that the raw JSON data isn't cpied between editors with different schemas. + +Example with `withHistory`: + +```typescript +const [editor] = useState(() => withReact(withHistory(createEditor()))) +```