feat: add editable.highlight() method

Author: peyerluk

src/core.js

@@ -9,6 +9,7 @@ import * as content from './content'
 import * as clipboard from './clipboard'
 import Dispatcher from './dispatcher'
 import Cursor from './cursor'
+import highlightSupport from './highlight-support'
 import Highlighting from './highlighting'
 import createDefaultEvents from './create-default-events'
 import browser from 'bowser'
@@ -35,6 +36,7 @@ import browser from 'bowser'
  */
 
 const Editable = module.exports = class Editable {
+
   constructor (instanceConfig) {
     const defaultInstanceConfig = {
       window: window,
@@ -330,6 +332,26 @@ const Editable = module.exports = class Editable {
     }
   }
 
+  // Highlight text within an editable.
+  //
+  // The first occurrence of the provided 'text' will be highlighted.
+  //
+  // The markup used for the highlighting will be removed from
+  // the final content.
+  //
+  // @param editableHost {DomNode}
+  // @param text {String}
+  // @param highlightId {String} Optional
+  //   Added to the highlight markups in the property `data-word-id`
+  // @param remove {Boolean} Optional
+  highlight ({editableHost, text, highlightId, remove}) {
+    if (!remove) {
+      highlightSupport.highlightText(editableHost, text, highlightId)
+    } else {
+      highlightSupport.removeHighlight(editableHost, highlightId)
+    }
+  }
+
   /**
    * Subscribe a callback function to a custom event fired by the API.
    *

src/highlight-support.js

@@ -0,0 +1,45 @@
+import $ from 'jquery'
+
+import * as content from './content'
+import highlightText from './highlight-text'
+import TextHighlighting from './plugins/highlighting/text-highlighting'
+
+const highlightSupport = {
+
+  highlightText (editableHost, text, highlightId) {
+    let blockText = highlightText.extractText(editableHost)
+
+    const marker = '<span class="highlight-comment"></span>'
+    const markerNode = highlightSupport.createMarkerNode(marker, this.win)
+
+    const textSearch = new TextHighlighting(markerNode, 'text')
+    const matches = textSearch.findMatches(blockText, [text])
+
+    if (matches && matches.length) {
+      if (highlightId) matches[0].id = highlightId
+      highlightText.highlightMatches(editableHost, matches)
+    }
+  },
+
+  removeHighlight (editableHost, highlightId) {
+    $(editableHost).find(`[data-word-id="${highlightId}"]`)
+      .each((index, elem) => {
+        content.unwrap(elem)
+      })
+  },
+
+  createMarkerNode (markerMarkup, win) {
+    let marker = $(markerMarkup)[0]
+
+    if (win) {
+      marker = content.adoptElement(marker, win.document)
+    }
+
+    marker.setAttribute('data-editable', 'ui-unwrap')
+    marker.setAttribute('data-highlight', 'highlight')
+    return marker
+  }
+
+}
+
+export default highlightSupport

src/highlight-text.js

@@ -51,7 +51,7 @@ export default {
         let isFirstPortion = isLastPortion = false
         if (totalOffset <= currentMatch.startIndex) {
           isFirstPortion = true
-          var wordId = currentMatch.startIndex
+          var wordId = currentMatch.id || currentMatch.startIndex
         }
         if (nodeEndOffset >= currentMatch.endIndex) {
           var isLastPortion = true

src/highlighting.js

@@ -7,8 +7,10 @@ import SpellcheckService from './plugins/highlighting/spellcheck-service'
 import WhitespaceHighlighting from './plugins/highlighting/whitespace-highlighting'
 import WordHighlighting from './plugins/highlighting/text-highlighting'
 import MatchCollection from './plugins/highlighting/match-collection'
+import highlightSupport from './highlight-support'
 
 export default class Highlighting {
+
   constructor (editable, configuration, spellcheckConfig) {
     this.editable = editable
     this.win = editable.win
@@ -37,12 +39,14 @@ export default class Highlighting {
     this.config = $.extend(true, defaultConfig, configuration)
 
     let spellcheckService = this.config.spellcheck.spellcheckService
-    let spellcheckMarker = this.createMarkerNode(this.config.spellcheck.marker)
-    let whitespaceMarker = this.createMarkerNode(this.config.whitespace.marker)
+    const spellcheckMarker = this.config.spellcheck.marker
+    const whitespaceMarker = this.config.whitespace.marker
+    const spellcheckMarkerNode = highlightSupport.createMarkerNode(spellcheckMarker, this.win)
+    const whitespaceMarkerNode = highlightSupport.createMarkerNode(whitespaceMarker, this.win)
 
     this.spellcheckService = new SpellcheckService(spellcheckService)
-    this.spellcheck = new WordHighlighting(spellcheckMarker)
-    this.whitespace = new WhitespaceHighlighting(whitespaceMarker)
+    this.spellcheck = new WordHighlighting(spellcheckMarkerNode)
+    this.whitespace = new WhitespaceHighlighting(whitespaceMarkerNode)
 
     this.setupListeners()
   }
@@ -89,18 +93,6 @@ export default class Highlighting {
     }
   }
 
-  // Marker
-  // ------
-
-  createMarkerNode (markerMarkup) {
-    let marker = $(markerMarkup)[0]
-    marker = content.adoptElement(marker, this.win.document)
-
-    marker.setAttribute('data-editable', 'ui-unwrap')
-    marker.setAttribute('data-highlight', 'highlight')
-    return marker
-  }
-
   // Manage Highlights
   // -----------------
 
@@ -144,6 +136,8 @@ export default class Highlighting {
 
   }
 
+  // Calls highlightMatches internally but ensures
+  // that the selection stays the same
   safeHighlightMatches (editableHost, matches) {
     const selection = this.editable.getSelection(editableHost)
     if (selection) {