Fix - withReact type signature (#5091)

* Fix signature of `withReact` function Fixes #4144 * Fix code to pass type checks * Add a changeset entry
ianstormtaylor · Aug 22, 2022 · e18879e · e18879e
1 parent e927336
commit e18879e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/.changeset/smooth-queens-tie.md b/.changeset/smooth-queens-tie.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix `withReact()` function type definition
diff --git a/packages/slate-react/src/plugin/with-react.ts b/packages/slate-react/src/plugin/with-react.ts
@@ -1,5 +1,14 @@
 import ReactDOM from 'react-dom'
-import { Editor, Node, Operation, Path, Point, Range, Transforms } from 'slate'
+import {
+  BaseEditor,
+  Editor,
+  Node,
+  Operation,
+  Path,
+  Point,
+  Range,
+  Transforms,
+} from 'slate'
 import {
   TextDiff,
   transformPendingPoint,
@@ -35,7 +44,7 @@ import { ReactEditor } from './react-editor'
  * See https://docs.slatejs.org/concepts/11-typescript to learn how.
  */
 
-export const withReact = <T extends Editor>(editor: T) => {
+export const withReact = <T extends BaseEditor>(editor: T): T & ReactEditor => {
   const e = editor as T & ReactEditor
   const { apply, onChange, deleteBackward, addMark, removeMark } = e
 
@@ -55,7 +64,7 @@ export const withReact = <T extends Editor>(editor: T) => {
       EDITOR_TO_PENDING_INSERTION_MARKS.set(e, null)
     }
 
-    EDITOR_TO_USER_MARKS.delete(editor)
+    EDITOR_TO_USER_MARKS.delete(e)
 
     addMark(key, value)
   }
@@ -70,7 +79,7 @@ export const withReact = <T extends Editor>(editor: T) => {
       EDITOR_TO_PENDING_INSERTION_MARKS.set(e, null)
     }
 
-    EDITOR_TO_USER_MARKS.delete(editor)
+    EDITOR_TO_USER_MARKS.delete(e)
 
     removeMark(key)
   }
@@ -80,24 +89,24 @@ export const withReact = <T extends Editor>(editor: T) => {
       return deleteBackward(unit)
     }
 
-    if (editor.selection && Range.isCollapsed(editor.selection)) {
-      const parentBlockEntry = Editor.above(editor, {
-        match: n => Editor.isBlock(editor, n),
-        at: editor.selection,
+    if (e.selection && Range.isCollapsed(e.selection)) {
+      const parentBlockEntry = Editor.above(e, {
+        match: n => Editor.isBlock(e, n),
+        at: e.selection,
       })
 
       if (parentBlockEntry) {
         const [, parentBlockPath] = parentBlockEntry
         const parentElementRange = Editor.range(
-          editor,
+          e,
           parentBlockPath,
-          editor.selection.anchor
+          e.selection.anchor
         )
 
         const currentLineRange = findCurrentLineRange(e, parentElementRange)
 
         if (!Range.isCollapsed(currentLineRange)) {
-          Transforms.delete(editor, { at: currentLineRange })
+          Transforms.delete(e, { at: currentLineRange })
         }
       }
     }
@@ -108,30 +117,30 @@ export const withReact = <T extends Editor>(editor: T) => {
   e.apply = (op: Operation) => {
     const matches: [Path, Key][] = []
 
-    const pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(editor)
+    const pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(e)
     if (pendingDiffs?.length) {
       const transformed = pendingDiffs
         .map(textDiff => transformTextDiff(textDiff, op))
         .filter(Boolean) as TextDiff[]
 
-      EDITOR_TO_PENDING_DIFFS.set(editor, transformed)
+      EDITOR_TO_PENDING_DIFFS.set(e, transformed)
     }
 
-    const pendingSelection = EDITOR_TO_PENDING_SELECTION.get(editor)
+    const pendingSelection = EDITOR_TO_PENDING_SELECTION.get(e)
     if (pendingSelection) {
       EDITOR_TO_PENDING_SELECTION.set(
-        editor,
-        transformPendingRange(editor, pendingSelection, op)
+        e,
+        transformPendingRange(e, pendingSelection, op)
       )
     }
 
-    const pendingAction = EDITOR_TO_PENDING_ACTION.get(editor)
+    const pendingAction = EDITOR_TO_PENDING_ACTION.get(e)
     if (pendingAction?.at) {
       const at = Point.isPoint(pendingAction?.at)
-        ? transformPendingPoint(editor, pendingAction.at, op)
-        : transformPendingRange(editor, pendingAction.at, op)
+        ? transformPendingPoint(e, pendingAction.at, op)
+        : transformPendingRange(e, pendingAction.at, op)
 
-      EDITOR_TO_PENDING_ACTION.set(editor, at ? { ...pendingAction, at } : null)
+      EDITOR_TO_PENDING_ACTION.set(e, at ? { ...pendingAction, at } : null)
     }
 
     switch (op.type) {
@@ -145,8 +154,8 @@ export const withReact = <T extends Editor>(editor: T) => {
 
       case 'set_selection': {
         // Selection was manually set, don't restore the user selection after the change.
-        EDITOR_TO_USER_SELECTION.get(editor)?.unref()
-        EDITOR_TO_USER_SELECTION.delete(editor)
+        EDITOR_TO_USER_SELECTION.get(e)?.unref()
+        EDITOR_TO_USER_SELECTION.delete(e)
         break
       }