feat: add new event highlgihtingChange for changes through spellcheck

Author: meinradandermatt

README.md

@@ -43,6 +43,8 @@ You can check out a [simple demo on the website](https://livingdocsio.github.io/
   Fired when the cursor position changes.
 - **change**  
   Fired when the user has made a change.
+- **spellcheckUpdated**  
+  Fired when the spellcheckService has updated the spellcheck highlights.
 - **clipboard**  
   Fired for `copy`, `cut` and `paste` events.
 - **insert**  

examples/index.html

@@ -284,6 +284,22 @@ <h3>Example:</h3>
 editable.on('change', elem => {
   const currentContent = editable.getContent(elem);
 })
+</code></pre>
+          </div>
+
+        </div>
+        <div class="documentation">
+          <h4>
+            <span>spellcheckUpdated</span>
+          </h4>
+          <p>Fired when the spellcheckService has updated the spellcheck highlights.</p>
+
+          <div class="code-example">
+            <h3>Example:</h3>
+<pre><code class="language-javascript">
+editable.on('spellcheckUpdated', elem => {
+  const currentContent = editable.getContent(elem);
+})
 </code></pre>
           </div>
 

spec/spellcheck.spec.js

@@ -53,6 +53,13 @@ describe('Spellcheck:', function () {
         expect($(this.p).find('.misspelled-word').length).toEqual(1)
       })
 
+      it('notify spellcheckUpdated on add highlight through spellcheck', function () {
+        let called = 0
+        this.editable.on('spellcheckUpdated', () => called++)
+        this.highlighting.highlight(this.p, true)
+        expect(called).toEqual(1)
+      })
+
       it('removes a corrected highlighted match.', function () {
         this.highlighting.highlight(this.p)
         let $misspelledWord = $(this.p).find('.misspelled-word')

src/core.js

@@ -455,7 +455,7 @@ Editable.browser = browser
 // Set up callback functions for several events.
 ;['focus', 'blur', 'flow', 'selection', 'cursor', 'newline',
   'insert', 'split', 'merge', 'empty', 'change', 'switch',
-  'move', 'clipboard', 'paste'
+  'move', 'clipboard', 'paste', 'spellcheckUpdated'
 ].forEach((name) => {
   // Generate a callback function to subscribe to an event.
   Editable.prototype[name] = function (handler) {

src/highlighting.js

@@ -135,7 +135,6 @@ export default class Highlighting {
 
       this.safeHighlightMatches(editableHost, matchCollection.matches)
     })
-
   }
 
   // Calls highlightMatches internally but ensures
@@ -149,6 +148,9 @@ export default class Highlighting {
     } else {
       this.highlightMatches(editableHost, matches)
     }
+    if (this.editable.dispatcher) {
+      this.editable.dispatcher.notify('spellcheckUpdated', editableHost)
+    }
   }
 
   highlightMatches (editableHost, matches) {