From 92b03170f7662d1034b0dc46d39b8426c7392e9d Mon Sep 17 00:00:00 2001 From: Sunny Hirai Date: Wed, 12 Apr 2023 22:01:59 -0700 Subject: [PATCH] Add docs for with-react --- docs/Summary.md | 1 + docs/libraries/slate-react/README.md | 2 ++ docs/libraries/slate-react/with-react.md | 17 +++++++++++++++++ 3 files changed, 20 insertions(+) create mode 100644 docs/libraries/slate-react/with-react.md 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()))) +```