diff --git a/app/components/SimpleEditor/ContainerEditor.js b/app/components/SimpleEditor/ContainerEditor.js index fd3ddbaa9a182b1f1a9696af1b44021a5379fe91..376773acd2f1f6f144996eacb97d41cd0d83c92a 100644 --- a/app/components/SimpleEditor/ContainerEditor.js +++ b/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' } diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js b/app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js index 4e8c817439720720fd3e5d87533b8821967c3acf..dbc3e0d390cc72bc9b418cc772bd66f383267209 100644 --- a/app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js +++ b/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)