fix(highlight): Remove zero width space when getting text range

Author: ajwild

spec/highlight-support.spec.js

@@ -327,6 +327,36 @@ ke The <br> World Go Round`)
       expect(this.getHtml()).to.equal(expectedHtml)
     })
 
+    it('limits start and end values to text range', function () {
+      setupHighlightEnv(this, 'ab')
+      this.highlightRange('ab', 'myId', -1, 100)
+      const expectedHtml = this.formatHtml(
+        `<span class="highlight-comment" data-editable="ui-unwrap" data-highlight="comment" data-word-id="myId">ab</span>`
+      )
+
+      expect(this.getHtml()).to.equal(expectedHtml)
+    })
+
+    it('always selects the first character if values are too small', function () {
+      setupHighlightEnv(this, 'ab')
+      this.highlightRange('ab', 'myId', 0, 0)
+      const expectedHtml = this.formatHtml(
+        `<span class="highlight-comment" data-editable="ui-unwrap" data-highlight="comment" data-word-id="myId">a</span>b`
+      )
+
+      expect(this.getHtml()).to.equal(expectedHtml)
+    })
+
+    it('always selects the last character if values are too large', function () {
+      setupHighlightEnv(this, 'ab')
+      this.highlightRange('ab', 'myId', 2, 5)
+      const expectedHtml = this.formatHtml(
+        `a<span class="highlight-comment" data-editable="ui-unwrap" data-highlight="comment" data-word-id="myId">b</span>`
+      )
+
+      expect(this.getHtml()).to.equal(expectedHtml)
+    })
+
     it('handles a <br> tag without whitespaces', function () {
       setupHighlightEnv(this, 'a<br>b')
       this.highlightRange('b', 'myId', 1, 2)

spec/selection.spec.js

@@ -142,6 +142,17 @@ describe('Selection', function () {
       })
     })
 
+    describe('getTextRange()', function () {
+
+      it('handles a zero width non-break space', function () {
+        const oneWord = createElement('<div>\uFEFFfoobar\uFEFF</div>')
+        const range = createRange()
+        range.selectNodeContents(oneWord)
+        const selection = new Selection(oneWord, range)
+        expect(selection.getTextRange()).to.deep.equal({start: 0, end: 6, text: 'foobar'})
+      })
+    })
+
     describe('custom:', function () {
 
       beforeEach(function () {

src/highlight-support.js

@@ -45,8 +45,9 @@ const highlightSupport = {
       this.win
     )
 
-    const actualStartIndex = startIndex
-    const actualEndIndex = endIndex
+    // Do not let highlight exceed text range - it should also be at least 1 character long
+    const actualStartIndex = Math.min(Math.max(startIndex, 0), blockText.length - 1)
+    const actualEndIndex = Math.min(Math.max(endIndex, 1), blockText.length)
 
     highlightText.highlightMatches(editableHost, [{
       startIndex: actualStartIndex,

src/util/dom.js

@@ -182,7 +182,10 @@ export const toCharacterRange = (range, container) => {
   startRange.setStart(container, 0)
   startRange.setEnd(range.startContainer, range.startOffset)
 
-  const rangeText = range.toString()
+  // Remove zero width space to make selection more accurate,
+  // because it will be removed on component blur via extractContent.
+  const zeroWidthNonBreakingSpace = /\uFEFF/g
+  const rangeText = range.toString().replace(zeroWidthNonBreakingSpace, '')
   const start = startRange.toString().length
   const end = start + rangeText.length