fix: highlights get only applied to editableHost

Author: lukasbuenger

spec/highlighting.spec.js

@@ -286,6 +286,17 @@ describe('Highlighting', function () {
       expect(highlightSpan.length).toEqual(0)
     })
 
+    it('skips if the range exceeds the content length', () => {
+      const result = this.editable.highlight({
+        editableHost: this.$div[0],
+        highlightId: 'myId',
+        textRange: { foo: 3, bar: 32 }
+      })
+      const highlightSpan = this.$div.find('[data-word-id="myId"]')
+      expect(highlightSpan.length).toEqual(0)
+      expect(result).toEqual(-1)
+    })
+
     it('skips and warns if the range object represents a cursor', () => {
       this.editable.highlight({
         editableHost: this.$div[0],

src/highlight-support.js

@@ -4,6 +4,13 @@ import * as content from './content'
 import highlightText from './highlight-text'
 import TextHighlighting from './plugins/highlighting/text-highlighting'
 
+function isInHost (el, host) {
+  if (!el.closest) {
+    el = el.parentNode
+  }
+  return el.closest('[data-editable]:not([data-word-id])') === host
+}
+
 const highlightSupport = {
 
   highlightText (editableHost, text, highlightId) {
@@ -28,14 +35,18 @@ const highlightSupport = {
     if (this.hasHighlight(editableHost, highlightId)) {
       this.removeHighlight(editableHost, highlightId)
     }
+    const range = rangy.createRange()
+    range.selectCharacters(editableHost, startIndex, endIndex)
+
+    if (!isInHost(range.commonAncestorContainer, editableHost)) {
+      return -1
+    }
 
     const marker = highlightSupport.createMarkerNode(
       '<span class="highlight-comment" data-word-id="' + highlightId + '"></span>',
       'highlight',
       this.win
     )
-    const range = rangy.createRange()
-    range.selectCharacters(editableHost, startIndex, endIndex)
     const fragment = range.extractContents()
     marker.appendChild(fragment)
     range.deleteContents()