handle deletions when collapsed and on an existing track annotation

app/components/SimpleEditor/ContainerEditor.js

@@ -101,6 +101,7 @@ class ContainerEditor extends SubstanceContainerEditor {
 
     const trackChangesProvider = this.context.trackChangesProvider
     const options = {
+      key: (direction === 'left') ? 'BACKSPACE' : 'DELETE',
       move: direction,
       status: 'delete'
     }

app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js

@@ -7,6 +7,7 @@ import {
 
 import {
   createAnnotation,
+  deleteCharacter as deleteChar,
   expandAnnotation,
   truncateAnnotation
 } from 'substance'
@@ -25,10 +26,9 @@ class TrackChangesProvider {
   handleAdd (options) {
     const { event, status } = options
     if (status !== 'add') return
+    // console.log('adding')
 
     const isSelectionCollapsed = this.isSelectionCollapsed()
-    // const mode = this.getMode()
-
     let selection
 
     if (isSelectionCollapsed) {
@@ -71,32 +71,57 @@ class TrackChangesProvider {
   }
 
   handleDelete (options) {
-    const { move, status } = options
+    const { key, move, status } = options
     if (status !== 'delete') return
+    // console.log('deleting')
 
-    const mode = this.getMode()
     const isSelectionCollapsed = this.isSelectionCollapsed()
-
     let selection
 
     const direction = {
       cursorTo: (move === 'left') ? 'start' : 'end',
+      key: key,
       move: move
     }
 
     if (isSelectionCollapsed) {
-      if (!mode) {
+      const notOnTrack = this.isNotOnTrackAnnotation()
+      if (notOnTrack) {
         selection = this.setSelectionPlusOne(direction.move)
         this.createDeleteAnnotation(selection)
         this.moveCursorTo(direction.cursorTo)
         return
-      }
-      if (mode === 'delete') {
-        selection = this.setSelectionPlusOne(direction.move)
-        const annotation = this.getAnnotationByStatus('delete')
-        this.expandTrackAnnotation(selection, annotation)
-        this.moveCursorTo(direction.cursorTo)
-        return
+      } else {
+        const isOnAdd = this.isOnAnnotation('add')
+        const isOnDelete = this.isOnAnnotation('delete')
+
+        if (isOnDelete) {
+          selection = this.setSelectionPlusOne(direction.move)
+          const annotation = this.getAnnotationByStatus('delete')
+          this.expandTrackAnnotation(selection, annotation)
+          this.moveCursorTo(direction.cursorTo)
+          return
+        }
+
+        if (isOnAdd) {
+          const annotation = this.getAnnotationByStatus('add')
+          const isOnLeftEdge = this.isOnLeftEdge(annotation)
+          const isOnRightEdge = this.isOnRightEdge(annotation)
+          const key = direction.key
+
+          if (
+            (isOnLeftEdge && key === 'BACKSPACE') ||
+            (isOnRightEdge && key === 'DELETE')
+          ) {
+            selection = this.setSelectionPlusOne(direction.move)
+            this.createDeleteAnnotation(selection)
+            this.moveCursorTo(direction.cursorTo)
+            return
+          }
+
+          this.deleteCharacter(direction.move)
+          return
+        }
       }
     } else {
       selection = this.getSelection()
@@ -168,6 +193,18 @@ class TrackChangesProvider {
     }, { action: 'type' })
   }
 
+  deleteCharacter (direction) {
+    const surface = this.getSurface()
+    const info = { action: 'delete' }
+
+    const transformation = (tx, args) => {
+      args.direction = direction
+      return deleteChar(tx, args)
+    }
+
+    surface.transaction(transformation, info)
+  }
+
   /*
 
     ANNOTATION HELPERS
@@ -223,6 +260,11 @@ class TrackChangesProvider {
     return (selection.startOffset === annotation.startOffset)
   }
 
+  isOnRightEdge (annotation) {
+    const selection = this.getSelection()
+    return (selection.endOffset === annotation.endOffset)
+  }
+
   isNotOnTrackAnnotation () {
     const mode = this.getMode()
     return (mode === null)