Collapse selection according to reverse (#3799)

* Rename test slate transforms delete unit-character inline-before to inline-afte

* Add missing tests for Transforms.delete, symmetric to existing tests with respect to options.reverse

* In Transforms.delete collapse selection according to options.reverse

* Add directionality to Editor#deleteFragment

packages/slate-react/src/components/editable.tsx

@@ -301,7 +301,8 @@ export const Editable = (props: EditableProps) => {
           Range.isExpanded(selection) &&
           type.startsWith('delete')
         ) {
-          Editor.deleteFragment(editor)
+          const direction = type.endsWith('Backward') ? 'backward' : 'forward'
+          Editor.deleteFragment(editor, direction)
           return
         }
 
@@ -945,7 +946,7 @@ export const Editable = (props: EditableProps) => {
                   event.preventDefault()
 
                   if (selection && Range.isExpanded(selection)) {
-                    Editor.deleteFragment(editor)
+                    Editor.deleteFragment(editor, 'backward')
                   } else {
                     Editor.deleteBackward(editor)
                   }
@@ -957,7 +958,7 @@ export const Editable = (props: EditableProps) => {
                   event.preventDefault()
 
                   if (selection && Range.isExpanded(selection)) {
-                    Editor.deleteFragment(editor)
+                    Editor.deleteFragment(editor, 'forward')
                   } else {
                     Editor.deleteForward(editor)
                   }
@@ -969,7 +970,7 @@ export const Editable = (props: EditableProps) => {
                   event.preventDefault()
 
                   if (selection && Range.isExpanded(selection)) {
-                    Editor.deleteFragment(editor)
+                    Editor.deleteFragment(editor, 'backward')
                   } else {
                     Editor.deleteBackward(editor, { unit: 'line' })
                   }
@@ -981,7 +982,7 @@ export const Editable = (props: EditableProps) => {
                   event.preventDefault()
 
                   if (selection && Range.isExpanded(selection)) {
-                    Editor.deleteFragment(editor)
+                    Editor.deleteFragment(editor, 'forward')
                   } else {
                     Editor.deleteForward(editor, { unit: 'line' })
                   }
@@ -993,7 +994,7 @@ export const Editable = (props: EditableProps) => {
                   event.preventDefault()
 
                   if (selection && Range.isExpanded(selection)) {
-                    Editor.deleteFragment(editor)
+                    Editor.deleteFragment(editor, 'backward')
                   } else {
                     Editor.deleteBackward(editor, { unit: 'word' })
                   }
@@ -1005,7 +1006,7 @@ export const Editable = (props: EditableProps) => {
                   event.preventDefault()
 
                   if (selection && Range.isExpanded(selection)) {
-                    Editor.deleteFragment(editor)
+                    Editor.deleteFragment(editor, 'forward')
                   } else {
                     Editor.deleteForward(editor, { unit: 'word' })
                   }

packages/slate/src/create-editor.ts

@@ -127,11 +127,11 @@ export const createEditor = (): Editor => {
       }
     },
 
-    deleteFragment: () => {
+    deleteFragment: (direction?: 'forward' | 'backward') => {
       const { selection } = editor
 
       if (selection && Range.isExpanded(selection)) {
-        Transforms.delete(editor)
+        Transforms.delete(editor, { reverse: direction === 'backward' })
       }
     },
 

packages/slate/src/interfaces/editor.ts

@@ -54,7 +54,7 @@ export interface BaseEditor {
   apply: (operation: Operation) => void
   deleteBackward: (unit: 'character' | 'word' | 'line' | 'block') => void
   deleteForward: (unit: 'character' | 'word' | 'line' | 'block') => void
-  deleteFragment: () => void
+  deleteFragment: (direction?: 'forward' | 'backward') => void
   getFragment: () => Descendant[]
   insertBreak: () => void
   insertFragment: (fragment: Node[]) => void
@@ -435,8 +435,8 @@ export const Editor: EditorInterface = {
    * Delete the content in the current selection.
    */
 
-  deleteFragment(editor: Editor): void {
-    editor.deleteFragment()
+  deleteFragment(editor: Editor, direction?: 'forward' | 'backward'): void {
+    editor.deleteFragment(direction)
   },
 
   /**

packages/slate/src/transforms/text.ts

@@ -207,7 +207,9 @@ export const TextTransforms: TextTransforms = {
         })
       }
 
-      const point = endRef.unref() || startRef.unref()
+      const point = reverse
+        ? startRef.unref() || endRef.unref()
+        : endRef.unref() || startRef.unref()
 
       if (options.at == null && point) {
         Transforms.select(editor, point)

packages/slate/test/transforms/delete/point/inline-end.tsx

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { Transforms } from 'slate'
+import { jsx } from '../../..'
+
+export const run = editor => {
+  Transforms.delete(editor)
+}
+export const input = (
+  <editor>
+    <block>
+      one
+      <inline>
+        two
+        <cursor />
+      </inline>
+      <text />
+    </block>
+    <block>
+      <text />
+      <inline>three</inline>
+      four
+    </block>
+  </editor>
+)
+export const output = (
+  <editor>
+    <block>
+      one
+      <inline>two</inline>
+      <text>
+        <cursor />
+      </text>
+      <inline>three</inline>
+      four
+    </block>
+  </editor>
+)

packages/slate/test/transforms/delete/point/inline-inside-reverse.tsx

@@ -27,11 +27,10 @@ export const output = (
     <block>
       one
       <inline>two</inline>
-      <text />
-      <inline>
+      <text>
         <cursor />
-        three
-      </inline>
+      </text>
+      <inline>three</inline>
       four
     </block>
   </editor>

packages/slate/test/transforms/delete/point/inline-void-reverse.tsx

@@ -25,9 +25,10 @@ export const output = (
     <block>
       <text />
       <inline void>
-        <text />
-      </inline>
+        <text>
           <cursor />
+        </text>
+      </inline>
       word
     </block>
   </editor>

packages/slate/test/transforms/delete/point/inline-void.tsx

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { Transforms } from 'slate'
+import { jsx } from '../../..'
+
+export const run = editor => {
+  Transforms.delete(editor)
+}
+export const input = (
+  <editor>
+    <block>
+      word
+      <cursor />
+    </block>
+    <block>
+      <text />
+      <inline void>
+        <text />
+      </inline>
+      <text />
+    </block>
+  </editor>
+)
+export const output = (
+  <editor>
+    <block>
+      word
+      <cursor />
+      <inline void>
+        <text />
+      </inline>
+      <text />
+    </block>
+  </editor>
+)

packages/slate/test/transforms/delete/unit-character/inline-after.tsx

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { Transforms } from 'slate'
+import { jsx } from '../../..'
+
+export const run = editor => {
+  Transforms.delete(editor)
+}
+export const input = (
+  <editor>
+    <block>
+      one
+      <inline>two</inline>
+      <cursor />a
+    </block>
+  </editor>
+)
+export const output = (
+  <editor>
+    <block>
+      one
+      <inline>two</inline>
+      <cursor />
+    </block>
+  </editor>
+)

packages/slate/test/transforms/delete/unit-character/inline-before.tsx

@@ -3,23 +3,26 @@ import { Transforms } from 'slate'
 import { jsx } from '../../..'
 
 export const run = editor => {
-  Transforms.delete(editor)
+  Transforms.delete(editor, { unit: 'character' })
 }
 export const input = (
   <editor>
     <block>
-      one
+      a<cursor />
       <inline>two</inline>
-      <cursor />a
+      three
     </block>
   </editor>
 )
 export const output = (
   <editor>
     <block>
-      one
-      <inline>two</inline>
+      a
+      <inline>
         <cursor />
+        wo
+      </inline>
+      three
     </block>
   </editor>
 )

packages/slate/test/transforms/delete/unit-character/inline-end-reverse.tsx

@@ -18,8 +18,11 @@ export const output = (
   <editor>
     <block>
       one
-      <inline>tw</inline>
+      <inline>
+        tw
         <cursor />
+      </inline>
+      <text />
     </block>
   </editor>
 )