1

I'm working on a "text-checker" while using Mark.js.

The issue I am having is, that once I input the word and it gets marked/highlighted the cursor jumps to the beginning of that word. Here is an example.

Maybe the solution would be to somehow save the cursor location before the markup is triggered and loading it once the markup is done? Since I don't know when the markup is triggered maybe, save cursor location on every input and loading again index+1?

Any help, pointers, reference would be welcome.

Thank you

<div class="textarea" id="textarea" contenteditable="true">
    I hate blood pudding and so do you.
</div>

.red { background-color: lightcoral; }

.green{ background-color: lightgreen; }

.brown{ background-color: burlywood; }


var textarea = document.getElementById("textarea");
var instance = new Mark("div.textarea");

var red   = ["red", "blood"];
var brown = ["brown", "pudding"];
var green = ["green", "grass"];

var markWords = function() {
    instance.mark(red, {
       seperateWordSearch: false,
       className: "red",
       "accuracy": {
          "value": "exactly",
          "limiters": [",", ".", "!", "?"]
       }
    });

    instance.mark(brown, {
        seperateWordSearch: false,
        className: "brown",
        "accuracy": {
           "value": "exactly",
           "limiters": [",", ".", "!", "?"]
        }
    });
   
     instance.mark(green, {
        seperateWordSearch: false,
        className: "green",
        "accuracy": {
           "value": "exactly",
           "limiters": [",", ".", "!", "?"]
        }
    });
}

markWords();

textarea.addEventListener("input", markWords);

A big shout out @mcernak for helping me get to this point.

WeAreDoomed
  • 248
  • 1
  • 14
  • Cannot replicate your issue.... Could you explain the steps? – Roko C. Buljan Mar 28 '21 at 01:45
  • As I type I only see 300 nested `` under the first *"blood"* – Roko C. Buljan Mar 28 '21 at 01:48
  • You're not using `markInstance.unmark` even though it's suggested even in their examples: https://jsfiddle.net/julmot/hdyLpy37/ – Roko C. Buljan Mar 28 '21 at 01:55
  • Hello, Thank you for the reply. The easiest way would be to go to the (updated) fiddle and type any of the following words into the textarea: *green, red, brown*. You will see that the carot/cursor moves to the beginning of that word. I have updated the fiddle so it includes unmark, but that did not solve the cursor issue. – WeAreDoomed Mar 28 '21 at 14:39
  • I cannot reproduce the issue as you explained it. The only issue I see: set the cursor inside an already highlighted word - start typing in the middle of it. - Only in such case the caret jumps to the beginning of that word. Not sure if it's a bug on part of Mark.js - not going to investigate that. You could raise a bug report on their git pages maybe? - Or maybe the plugin was not intended to work on live editable elements? Not sure. – Roko C. Buljan Mar 28 '21 at 22:10
  • No problem. I was "hoping someone already had this issue" and resolved it. Thank you for taking the time to look into it. I have already raised the issue on their GitHub site. – WeAreDoomed Mar 29 '21 at 17:59

0 Answers0