Fix undo selection behavior

Author: paxos

src/index.ts

@@ -648,6 +648,14 @@ function undoUnorderedListStyle(text: string): UndoResult {
   }
 }
 
+const prefix = (index: number, unorderedList: boolean): string => {
+  if (unorderedList) {
+    return '- '
+  } else {
+    return `${index + 1}. `
+  }
+}
+
 function listStyle(textarea: HTMLTextAreaElement, style: StyleArgs): SelectionRange {
   const noInitialSelection = textarea.selectionStart === textarea.selectionEnd
   let selectionStart = textarea.selectionStart
@@ -656,55 +664,59 @@ function listStyle(textarea: HTMLTextAreaElement, style: StyleArgs): SelectionRa
   // Select whole line
   expandSelectionToLine(textarea)
 
-  const prefix = (index: number): string => {
-    if (style.unorderedList) {
-      return '- '
-    } else if (style.orderedList) {
-      return `${index + 1}. `
-    }
-    return ''
-  }
-
   let selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd)
 
   // If the user intent was to do an undo, we will stop after this.
   // Otherwise, we will still undo to other list type to prevent list stacking
+  let undoResultOpositeList: UndoResult
   let undoResult: UndoResult
+
   if (style.orderedList) {
     undoResult = undoOrderedListStyle(selectedText)
-    selectedText = undoUnorderedListStyle(undoResult.text).text
+    undoResultOpositeList = undoUnorderedListStyle(undoResult.text)
+    selectedText = undoResultOpositeList.text
   } else {
     undoResult = undoUnorderedListStyle(selectedText)
-    selectedText = undoOrderedListStyle(undoResult.text).text
+    undoResultOpositeList = undoOrderedListStyle(undoResult.text)
+    selectedText = undoResultOpositeList.text
   }
 
   const lines = selectedText.split('\n').map((value, index) => {
-    return `${prefix(index)}${value}`
+    return `${prefix(index, style.unorderedList)}${value}`
   })
 
   const totalPrefixLength = lines.reduce((previousValue, currentValue, currentIndex) => {
-    return previousValue + prefix(currentIndex).length
+    return previousValue + prefix(currentIndex, style.unorderedList).length
+  }, 0)
+
+  const totalPrefixLengthOpositeList = lines.reduce((previousValue, currentValue, currentIndex) => {
+    return previousValue + prefix(currentIndex, !style.unorderedList).length
   }, 0)
 
   if (undoResult.processed) {
     if (noInitialSelection) {
-      selectionStart = Math.max(selectionStart - prefix(0).length, 0)
+      selectionStart = Math.max(selectionStart - prefix(0, style.unorderedList).length, 0)
       selectionEnd = selectionStart
     } else {
-      selectionStart = Math.max(selectionStart - prefix(0).length, 0)
-      selectionEnd = selectionEnd - totalPrefixLength
+      selectionStart = textarea.selectionStart
+      selectionEnd = textarea.selectionEnd - prefix(0, style.unorderedList).length
     }
     return {text: undoResult.text, selectionStart, selectionEnd}
   }
 
   const {newlinesToAppend, newlinesToPrepend} = newlinesToSurroundSelectedText(textarea)
 
   if (noInitialSelection) {
-    selectionStart = Math.max(selectionStart + prefix(0).length + newlinesToAppend.length, 0)
+    selectionStart = Math.max(selectionStart + prefix(0, style.unorderedList).length + newlinesToAppend.length, 0)
     selectionEnd = selectionStart
   } else {
-    selectionStart = Math.max(textarea.selectionStart + newlinesToAppend.length, 0)
-    selectionEnd = textarea.selectionEnd + newlinesToAppend.length + totalPrefixLength
+    if (undoResultOpositeList.processed) {
+      selectionStart = Math.max(textarea.selectionStart + newlinesToAppend.length, 0)
+      selectionEnd = textarea.selectionEnd + newlinesToAppend.length + totalPrefixLength - totalPrefixLengthOpositeList
+    } else {
+      selectionStart = Math.max(textarea.selectionStart + newlinesToAppend.length, 0)
+      selectionEnd = textarea.selectionEnd + newlinesToAppend.length + totalPrefixLength
+    }
   }
 
   const text = newlinesToAppend + lines.join('\n') + newlinesToPrepend

test/test.js

@@ -598,19 +598,19 @@ describe('markdown-toolbar-element', function () {
       it('undo list if partial line is selected', function () {
         setVisualValue('One\n\n- T|w|o\n\nThree\n')
         clickToolbar('md-unordered-list')
-        assert.equal('One\n\nT|w|o\n\nThree\n', visualValue())
+        assert.equal('One\n\n|Two|\n\nThree\n', visualValue())
       })
 
       it('undo two lines list if two lines are selected', function () {
         setVisualValue('|- One\n- Two|\n\nThree\n')
         clickToolbar('md-unordered-list')
-        assert.equal('|One\nTwo|\n\nThree\n', visualValue())
+        assert.equal('|One\nTwo\n\n|Three\n', visualValue())
       })
 
       it('undo two lines list if 2 lines are partially selected', function () {
         setVisualValue('- O|ne\n- Tw|o\n\nThree\n')
         clickToolbar('md-unordered-list')
-        assert.equal('O|ne\nTw|o\n\nThree\n', visualValue())
+        assert.equal('|One\nTwo\n\n|Three\n', visualValue())
       })
     })
 
@@ -619,14 +619,14 @@ describe('markdown-toolbar-element', function () {
         setVisualValue('One\n|Two\nThree|\n')
         clickToolbar('md-ordered-list')
         clickToolbar('md-unordered-list')
-        assert.equal('One\n\n|- Two\n- Three\n|', visualValue())
+        assert.equal('One\n\n|- Two\n- Three|\n', visualValue())
       })
 
       it('does not stack list styles when selecting one line', function () {
         setVisualValue('One\n|Two|\nThree\n')
         clickToolbar('md-ordered-list')
         clickToolbar('md-unordered-list')
-        assert.equal('One\n\n|- Two|\n\nThree', visualValue())
+        assert.equal('One\n\n|- Two|\n\nThree\n', visualValue())
       })
 
       it('turns line into list when you click the unordered list icon with selection', function () {
@@ -706,7 +706,7 @@ describe('markdown-toolbar-element', function () {
       it('undo an ordered list by selecting multiple styled lines', function () {
         setVisualValue('|1. One\n2. Two\n3. Three|\n')
         clickToolbar('md-ordered-list')
-        assert.equal('|One\nTwo\nThree|\n', visualValue())
+        assert.equal('|One\nTwo\nThree\n|', visualValue())
       })
     })