Allow useSlate and useSlateStatic to use a generic to return a Custom Editor (#4135)

* Have useSlate and useSlateStatic return the Custom Editor

* v0.60.12

* Add generic to useSlate and useSlateStatic

* v0.60.13

* Fix useSlate and useSlateStatic to return customized Editor type

* v0.60.14

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.7.1",
-  "version": "0.60.11",
+  "version": "0.60.14",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/slate-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slate-react",
   "description": "Tools for building completely customizable richtext editors with React.",
-  "version": "0.60.11",
+  "version": "0.60.14",
   "license": "MIT",
   "repository": "git://github.com/ianstormtaylor/slate.git",
   "main": "dist/index.js",

packages/slate-react/src/custom-types.ts

@@ -1,12 +1,14 @@
 import { BaseRange, BaseText } from 'slate'
+import { ReactEditor } from './plugin/react-editor'
 
 declare module 'slate' {
   interface CustomTypes {
-    Text: {
+    Editor: ReactEditor
+    Text: BaseText & {
       placeholder: string
-    } & BaseText
-    Range: {
+    }
+    Range: BaseRange & {
       placeholder?: string
-    } & BaseRange
+    }
   }
 }

packages/slate-react/src/hooks/use-slate-static.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
-
 import { ReactEditor } from '../plugin/react-editor'
+import { Editor } from 'slate'
 
 /**
  * A React context for sharing the editor object.
@@ -12,7 +12,7 @@ export const EditorContext = createContext<ReactEditor | null>(null)
  * Get the current editor object from the React context.
  */
 
-export const useSlateStatic = () => {
+export const useSlateStatic = (): Editor => {
   const editor = useContext(EditorContext)
 
   if (!editor) {

packages/slate-react/src/hooks/use-slate.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react'
-
+import { Editor } from 'slate'
 import { ReactEditor } from '../plugin/react-editor'
 
 /**
@@ -13,7 +13,7 @@ export const SlateContext = createContext<[ReactEditor] | null>(null)
  * Get the current editor object from the React context.
  */
 
-export const useSlate = () => {
+export const useSlate = (): Editor => {
   const context = useContext(SlateContext)
 
   if (!context) {

site/examples/custom-types.d.ts

@@ -1,4 +1,14 @@
-import { Text, createEditor, Node, Element, Editor, Descendant } from 'slate'
+import {
+  Text,
+  createEditor,
+  Node,
+  Element,
+  Editor,
+  Descendant,
+  BaseEditor,
+} from 'slate'
+import { ReactEditor } from 'slate-react'
+import { HistoryEditor } from 'slate-history'
 
 export type BlockQuoteElement = { type: 'block-quote'; children: Descendant[] }
 
@@ -79,8 +89,11 @@ export type EmptyText = {
   text: string
 }
 
+export type CustomEditor = BaseEditor & ReactEditor & HistoryEditor
+
 declare module 'slate' {
   interface CustomTypes {
+    Editor: CustomEditor
     Element: CustomElement
     Text: CustomText | EmptyText
   }