Notation on multiple elements?

[alienzhou]

Great thanks for this awesome library! 🎉

In my project, I want to add a notation on multiple elements. However, it would generate multiple notations. An example below

My HTML:

<p>
  I would like to add
  <span class="bright">a notation</span><span class="emphasis"> here</span>.
</p>

And I want to add only one notation on the last two span elements. How can I make this?

[pshihn]

You could create a span around the two spans, or create an animation group.

const config = { type: 'underline', color: 'red' };
const a1 = annotate(span1, config);
const a2 = annotate(span2, config);

const ag = annotationGroup([a1, a2]);
ag.show();

Does that solve your use case?

[alienzhou]

Thanks for your reply. Actually I'm trying to combine rough-notation with my library (which enables users to highlight some words on a website).

I have tried annotationGroup. But the notations are not visually continuous.

Beside, there is a case that creating a span around the two spans fails.

<span>I would like to<i> add </i></span><span><i>a </i>notation here</span>.

When users want to highlighting the two i elements, I can't easily wrap them in one element.

[pshihn]

My main concern is that if we allow multiple elements then I am not guaranteed that the elements are continuous or even have the same parent. They may also have margins between them. RoughNotation injects SVG relative to the element, but if there are multiple elements without a common parent it may get tricky where to inject the svg. Also, what happens when the selected text spans multiple elements across multiple lines?

I am trying to consider when someone else comes along whose use case is different than yours, and they pass two elements, what are their expectations? what if those elements are not next to each other.

Anyways, now that I understand your use case, let me think about it a bit more.