susielu/react-annotation

StyledText in annotation’s content

Closed this issue · 3 comments

j-barata commented

It would be very useful to have the possibility to provide formatted content (styles, links, ...) within the annotation’s body.

Do you already planned some similar feature ?

susielu commented

If you are willing to manually handle the text wrapping instead of sending note as an object you can pass it JSX, see example here: https://github.com/susielu/react-annotation/releases/tag/v2.1.0

Does that suffice for your use case?

j-barata commented

Hi, thanks for your answer.
I was more thinking in the usage of a "foreignObject" to embbed the formatted text in the svg annotation note content.

(see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject)

susielu commented

You can pass any type of JSX element to the note in the example I shared including a foreginObject:

<AnnotationLabel
  x={150}
  y={170}
  dy={117}
  dx={162}
  color={"#9610ff"}
  className="show-bg" 
  editMode={true}
  note={ <foreignObject x="20" y="20" width="160" height="160">

    <div xmlns="http://www.w3.org/1999/xhtml">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
      porta vel dui convallis, rutrum imperdiet eros. Aliquam
      erat volutpat.
    </div>
  </foreignObject>}
/>