Edit span endpoints by dragging

[herongrove]

As a user, I want to be able to change the beginning or end of a span by dragging the edge of the span left or right. The label for the span should change position to stay centered on the new span. If the resulting span would have 0 tokens in it, the span should be deleted. Ideally, if the left edge moves past the right edge, the right edge should become the new left edge (and not move position), and the former left edge should become the right edge. For example,

Example 1: left edge moves one token leftward.

An example [sentence] is recorded here.
(User drags left edge left one token.)
An [example sentence] is recorded here.

Example 2: left edge moves past right edge

An [example] sentence is recorded here.
(User drags left edge right two tokens.)
An example] sentence[ is recorded here.
(The span display changes to reflect the new span between endpoints.)
An example [sentence] is recorded here.

Example 3: new span length would be 0

An [example] sentence is recorded here.
(User drags left edge right one token.)
An example[] sentence is recorded here.
(The span would be 0, so the span is deleted.)
An example sentence is recorded here.