Dynamic marked text


I am working on something I need your advice for.

user need to annotate ranges of text and that annotation need to be
dynamic. The Annotation object in my business logic has multiple
properties (anchor, head, plus a comment, username, …)

When a
user marks a piece of text I save all informations (anchor,
head,comment, …) in my backbone model. This model is saved along with
my data for later use.

Where I am struggling is to update those
anchor/head information if the marked text moves in the textarea after
user input for example.

How can I sync the changed info back to my model ?

In my knowledge there is nothing in the API to do so.

I thought to add a unique class which would be the UniqueID of my
backbone model but doc.getAllMarks() does not return class or other
information (to my knowledge, but would be glad to be wrong on this one.

Is the only way cm.LineInfo ? Which seems to output a markedSpans property with anchor/head/class ?

Hope someone can have an idea.

Keep track of the marks you added and call their find method to figure out where they are (and whether they have been deleted). Or am I missing something?

Please don’t post the same question both here and on the mailing list. One of them is sufficient.

Sorry, I copy pasted it here thinking the google mailing was no more active.

So, if I get what you say :

  • User marks text > I push the TexMarker object into my Annotation Model.
  • User updates textarea, the marker moves.
  • Before user hits ‘save’ I’ll call myAnnotationModel Textmarker find() and update coordinates and send the JSON back to my server.

I’ll try this way.

For my knowledge : How does CM knows that this particular TextMarker object is link to that piece of text ? In case there are two pieces of text exactly similar ? Thanks to From:To values, ok. But theses values can be updated so How CodeMirror find the mark again ?

Thanks for you hard work by the way.

The actual data structure in CodeMirror’s document model that tracks the start and end of a marker simply has a reference to the marker object that is returned from markText.

I just implemented your solution and it works great. I can update the text, even with copy-paste of the marked text and CM still finds the correct marked piece of text, that, sir, is brilliant.

Last question !
Is there a proper method to update a TextMarker object (in case its coordinates changed) ? Or should I throw the one I stored and replace it with the updated one ?

You have to clear and re-create it.

Thank you so much for your fast feedback marjin

I have a similar issue. If I understand correctly, would the following update the marked text?

var textSel = cm.markText(startPos,endPos);
cm.markText(newStartPos, newEndPos);

I know that you can style the markedText with a class but is there a way to apply a style to the marked text? Because the color would be dynamic, a class won’t do.

var style = {
    'background-color': 'blue',
    'color': 'red'
var textSel = markText(startPos, endPos, style);

For later reference, this was implemented in this pull request.