Mark.js contenteditable - run Mark on input

Question

I'm am making a "word-checker" with a contenteditable div while using mark.js to highlingt certain words/word groups.

The problem I am having is that I can't find a way to "run" Mark.js as the words are being typed (copy/pasted) in.

I have tried to achieve this by adding an event listener to the textarea, but that throws an error: mark is not defined. textarea.addEventListener("input", mark); and by changing mark to instance textarea.addEventListener("input", instance); which gives me an error: TypeError: Property 'handleEvent' is not callable.. Here is the fiddle.

I have also looked at various examples found on SO and on google, but I just can't seem to find what I'm looking for. The closest thing I found was this, but I still couldn't get it to work.

Any help would be much appreciated. If I can provide any additional information, please let me know.

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

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

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": [",", ".", "!", "?"]
   }
});

textarea.addEventListener("input", mark);

.red {
    background-color: lightcoral;
}

.green{
    background-color: lightgreen;
}

.brown{
    background-color: burlywood;
}

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

score 1 · Accepted Answer · answered Mar 27 '21 at 20:24

1

You can put all the instance.mark(...) calls to a separate function (e.g. markWords). You can then call that function when the input text changes:

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

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

//create a function which will highlight all specified words
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": [",", ".", "!", "?"]
     }
  });
}

//call the markWords function to do the initial highlighting
markWords();

//setup listener to call function markWords
textarea.addEventListener("input", markWords);

answered Mar 27 '21 at 20:24

mcernak

9,050
1
5
13

1

Thank you. tt works. There is one issue though. Once I type in *green*, it throws the cursor/type-indicator to the beginning of the word. Any idea why and how to fix that? – WeAreDoomed Mar 27 '21 at 20:39
It looks like a bug in mark.js, try opening an issue: https://github.com/julmot/mark.js/issues/new – mcernak Mar 27 '21 at 21:41
Thank you. I found a similar issue here. https://stackoverflow.com/questions/10405450/mouse-cursor-jumps-to-the-start-of-a-string-in-an-text-input-field-in-ie . Any idea how I could work around this? – WeAreDoomed Mar 27 '21 at 21:42
I've had a look at these issues https://github.com/julmot/mark.js/issues?q=is%3Aissue+caret+is%3Aclosed , but I didn't find a workaround. I also tried calling the subsequent invocations of `instance.mark` from the `done` callback function mentioned in the documentation (https://markjs.io/), but that was also of no help. – mcernak Mar 27 '21 at 21:48
Posted an issue on github. Thank you for your help. It is much appreciated. Will open a new question on SO, hopefully someone knows a workaround. – WeAreDoomed Mar 27 '21 at 21:52

Mark.js contenteditable - run Mark on input

1 Answers1