From 083424eeb0c18e5e647cd24b4f779623554ab66d Mon Sep 17 00:00:00 2001
From: Sunny Hirai <thesunny@gmail.com>
Date: Wed, 12 Apr 2023 22:14:00 -0700
Subject: [PATCH] Extract ReactEditor docs into its own page and organize the
 methods with subheadings

---
 docs/Summary.md                            |   7 +-
 docs/libraries/slate-react/README.md       |  85 +----------------
 docs/libraries/slate-react/react-editor.md | 103 +++++++++++++++++++++
 3 files changed, 108 insertions(+), 87 deletions(-)
 create mode 100644 docs/libraries/slate-react/react-editor.md

diff --git a/docs/Summary.md b/docs/Summary.md
index 25e7140ca..e8edf195f 100644
--- a/docs/Summary.md
+++ b/docs/Summary.md
@@ -53,9 +53,10 @@
 
 ## Libraries
 
-- [Slate React](libraries/slate-react/README.md)
-  - [withReact](libraries/slate-react/with-react.md)
-- [Slate History](libraries/slate-history/README.md)
+- [Slate React](/libraries/slate-react/README.md)
+  - [withReact](/libraries/slate-react/with-react.md)
+  - [ReactEditor](/libraries/slate-react/react-editor.md)
+- [Slate History](/libraries/slate-history/README.md)
   - [withHistory](/libraries/slate-history/with-history.md)
   - [HistoryEditor](/libraries/slate-history/history-editor.md)
   - [History](/libraries/slate-history/history.md)
diff --git a/docs/libraries/slate-react/README.md b/docs/libraries/slate-react/README.md
index 014bea09c..0d206d469 100644
--- a/docs/libraries/slate-react/README.md
+++ b/docs/libraries/slate-react/README.md
@@ -3,6 +3,7 @@
 This sub-library contains the React-specific logic for Slate.
 
 - [withReact](./with-react.md)
+- [ReactEditor](./react-editor.md)
 
 ## Components
 
@@ -110,90 +111,6 @@ Get the current editor object from the React context. A version of useSlate that
 
 Get the current editor selection from the React context. Only re-renders when the selection changes.
 
-## ReactEditor
-
-A React and DOM-specific version of the `Editor` interface. All about translating between the DOM and Slate.
-
-### `isComposing(editor: ReactEditor)`
-
-Check if the user is currently composing inside the editor.
-
-### `findKey(editor: ReactEditor, node: Node)`
-
-Find a key for a Slate node.
-
-### `findPath(editor: ReactEditor, node: Node)`
-
-Find the path of Slate node.
-
-### `isFocused(editor: ReactEditor)`
-
-Check if the editor is focused.
-
-### `isReadOnly(editor: ReactEditor)`
-
-Check if the editor is in read-only mode.
-
-### `blur(editor: ReactEditor)`
-
-Blur the editor.
-
-### `focus(editor: ReactEditor)`
-
-Focus the editor.
-
-### `deselect(editor: ReactEditor)`
-
-Deselect the editor.
-
-### `hasDOMNode(editor: ReactEditor, target: DOMNode, options: { editable?: boolean } = {})`
-
-Check if a DOM node is within the editor.
-
-### `insertData(editor: ReactEditor, data: DataTransfer)`
-
-Insert data from a `DataTransfer` into the editor. This is a proxy method to call in this order `insertFragmentData(editor: ReactEditor, data: DataTransfer)` and then `insertTextData(editor: ReactEditor, data: DataTransfer)`.
-
-### `insertFragmentData(editor: ReactEditor, data: DataTransfer)`
-
-Insert fragment data from a `DataTransfer` into the editor. Returns true if some content has been effectively inserted.
-
-### `insertTextData(editor: ReactEditor, data: DataTransfer)`
-
-Insert text data from a `DataTransfer` into the editor. Returns true if some content has been effectively inserted.
-
-### `setFragmentData(editor: ReactEditor, data: DataTransfer, originEvent?: 'drag' | 'copy' | 'cut')`
-
-Sets data from the currently selected fragment on a `DataTransfer`.
-
-### `toDOMNode(editor: ReactEditor, node: Node)`
-
-Find the native DOM element from a Slate node.
-
-### `toDOMPoint(editor: ReactEditor, point: Point)`
-
-Find a native DOM selection point from a Slate point.
-
-### `toDOMRange(editor: ReactEditor, range: Range)`
-
-Find a native DOM range from a Slate `range`.
-
-### `toSlateNode(editor: ReactEditor, domNode: DOMNode)`
-
-Find a Slate node from a native DOM `element`.
-
-### `findEventRange(editor: ReactEditor, event: any)`
-
-Get the target range from a DOM `event`.
-
-### `toSlatePoint(editor: ReactEditor, domPoint: DOMPoint)`
-
-Find a Slate point from a DOM selection's `domNode` and `domOffset`.
-
-### `toSlateRange(editor: ReactEditor, domRange: DOMRange | DOMStaticRange | DOMSelection, options?: { exactMatch?: boolean } = {})`
-
-Find a Slate range from a DOM range or selection.
-
 ## Plugins
 
 React-specific plugins for Slate editors
diff --git a/docs/libraries/slate-react/react-editor.md b/docs/libraries/slate-react/react-editor.md
new file mode 100644
index 000000000..06a30f382
--- /dev/null
+++ b/docs/libraries/slate-react/react-editor.md
@@ -0,0 +1,103 @@
+# ReactEditor
+
+`ReactEditor` is added to `Editor` when it is instntiated using the `withReact` method.
+
+```typescript
+const [editor] = useState(() => withReact(withHistory(createEditor())))
+```
+
+- [Static methods](react-editor.md#static-methods)
+  - [Check methods](react-editor.md#check-methods)
+  - [Focus and selection methods](react-editor.md#focus-and-selection-methods)
+  - [DOM translation methods](react-editor.md#dom-translation-methods)
+  - [DataTranfer methods](react-editor.md#datatransfer-methods)
+
+## Static methods
+
+### Check methods
+
+#### `ReactEditor.isComposing(editor: ReactEditor)`
+
+Check if the user is currently composing inside the editor.
+
+#### `ReactEditor.isFocused(editor: ReactEditor)`
+
+Check if the editor is focused.
+
+#### `ReactEditor.isReadOnly(editor: ReactEditor)`
+
+Check if the editor is in read-only mode.
+
+### Focus and selection methods
+
+#### `ReactEditor.blur(editor: ReactEditor)`
+
+Blur the editor.
+
+#### `ReactEditor.focus(editor: ReactEditor)`
+
+Focus the editor.
+
+#### `ReactEditor.deselect(editor: ReactEditor)`
+
+Deselect the editor.
+
+### DOM translation methods
+
+#### `ReactEditor.findKey(editor: ReactEditor, node: Node)`
+
+Find a key for a Slate node.
+
+#### `ReactEditor.findPath(editor: ReactEditor, node: Node)`
+
+Find the path of Slate node.
+
+#### `ReactEditor.hasDOMNode(editor: ReactEditor, target: DOMNode, options: { editable?: boolean } = {})`
+
+Check if a DOM node is within the editor.
+
+#### `ReactEditor.toDOMNode(editor: ReactEditor, node: Node)`
+
+Find the native DOM element from a Slate node.
+
+#### `ReactEditor.toDOMPoint(editor: ReactEditor, point: Point)`
+
+Find a native DOM selection point from a Slate point.
+
+#### `ReactEditor.toDOMRange(editor: ReactEditor, range: Range)`
+
+Find a native DOM range from a Slate `range`.
+
+#### `ReactEditor.toSlateNode(editor: ReactEditor, domNode: DOMNode)`
+
+Find a Slate node from a native DOM `element`.
+
+#### `ReactEditor.findEventRange(editor: ReactEditor, event: any)`
+
+Get the target range from a DOM `event`.
+
+#### `ReactEditor.toSlatePoint(editor: ReactEditor, domPoint: DOMPoint)`
+
+Find a Slate point from a DOM selection's `domNode` and `domOffset`.
+
+#### `ReactEditor.toSlateRange(editor: ReactEditor, domRange: DOMRange | DOMStaticRange | DOMSelection, options?: { exactMatch?: boolean } = {})`
+
+Find a Slate range from a DOM range or selection.
+
+### DataTransfer methods
+
+#### `ReactEditor.insertData(editor: ReactEditor, data: DataTransfer)`
+
+Insert data from a `DataTransfer` into the editor. This is a proxy method to call in this order `insertFragmentData(editor: ReactEditor, data: DataTransfer)` and then `insertTextData(editor: ReactEditor, data: DataTransfer)`.
+
+#### `ReactEditor.insertFragmentData(editor: ReactEditor, data: DataTransfer)`
+
+Insert fragment data from a `DataTransfer` into the editor. Returns true if some content has been effectively inserted.
+
+#### `ReactEditor.insertTextData(editor: ReactEditor, data: DataTransfer)`
+
+Insert text data from a `DataTransfer` into the editor. Returns true if some content has been effectively inserted.
+
+#### `ReactEditor.setFragmentData(editor: ReactEditor, data: DataTransfer, originEvent?: 'drag' | 'copy' | 'cut')`
+
+Sets data from the currently selected fragment on a `DataTransfer`.