StyledText in annotation’s content

susielu / react-annotation

Use react-annotation with built-in annotation types, or extend it to make custom annotations. It is made for annotations in SVG.

http://react-annotation.susielu.com/

Apache License 2.0

396 stars 34 forks source link

StyledText in annotation’s content #24

Closed j-barata closed 5 years ago

j-barata commented 5 years ago

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 5 years ago

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 5 years ago

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 5 years ago

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>}
/>