title: Trouble with markjs.io and TinyMCE Bookmark when caret is active on text
body: <p>Okay. I'm using TinyMCE and MarkJS to highlight long words in the text. If words are longer than 6 letters they are marked.</p>
  
  <p>I've put together a demo here: <a href="http://codepen.io/MarkBuskbjerg/pen/RomqKO" rel="nofollow noreferrer">http://codepen.io/MarkBuskbjerg/pen/RomqKO</a></p>
  
  <p><strong>The problem:</strong></p>
  
  <p>At first glance everything is mighty fine. The long words are highligthed perfectly.</p>
  
  <p>But...</p>
  
  <p>If you place the caret inside the word. The highlight disappears on keydown.</p>
  
  <p>Example: Place the caret at the end of the text and arrow key your way throught the text the highlight is gone when the caret is on a highlighted word.</p>
  
  <p>I suspect that the problem is due to TinyMCE triggering some sort of event when the caret is on a word.</p>
  
  <p><strong>Possible solution</strong>
  I've tried to see if the caret is somehow splitting the word and thereby making it seem shorter. Which doesn't seem to be the case (see the console.log(words) on line 24.</p>
  
  <p>** EDIT 30-12-2016:**
  Seems like it ought to be TinyMCE triggering the error when the caret is inside of a word. Maybe because it execute some other event?</p>
  
  <p><strong>My question</strong>
  I somehow need to find a way to keep the word highlighted while the caret is active on the highlighted span.</p>
  
  <p>Any ideas on how to achieve this is very much appreciated :)</p>
  
  <p>The HTML markup is:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="myTextArea" contenteditable="true"&gt;
          Lorem ipsum dolores sit amet.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JavaScript goes like this:</p>
  
  <pre><code>tinymce.init({
    selector: '#myTextArea',
    height: 200,
    setup: function(ed) {
      ed.on('keyup', myCustomInitInstance);
      ed.on('paste', myCustomInitInstance);
      ed.on('cut', myCustomInitInstance);
    },
    init_instance_callback: "myCustomInitInstance",
  });
  
  function myCustomInitInstance(inst) {
    var rawText = tinyMCE.get('myTextArea').getContent({
      format: 'text'
    });
    rawText = rawText.replace(/&lt;([^&gt;]+)&gt;|[\.\+\?,\(\)"'\-\!\;\:]/ig, "");
  
    var words = rawText.split(" ");
  
    var matchWarning = [];
    var longWord = 6;
    var wordCounter;
    var output;
    for (var i = 0, len = words.length; i &lt; len; i++) {
      if (words[i].length &gt; longWord) {
        matchWarning.push(words[i]);
      }
    }
  
    var editor = tinyMCE.activeEditor;
     // Store the selection
    var bookmark = editor.selection.getBookmark();
    console.log(bookmark);
     // Remove previous marks and add new ones
     var $ctx = $(editor.getBody());
     $ctx.unmark({
       done: function() {
        $ctx.mark(matchWarning, {
          acrossElements: true,
          //debug: true,
          separateWordSearch: false
        });
      }
    });
    console.log(bookmark);
    // Restore the selection
    editor.selection.moveToBookmark(bookmark);
  
  }
  </code></pre>