WebViewer - Underline of Free Text gets longer when reloading page ( F5 )

Product: WebViewer

Product Version: 7.3.2

When I create it:
=> underline length equal to text length
image

After reloading the page:
=> underline length longer than text length
image

Then, I double-click on it and blur:
=> underline length equal to text length
image
image

I don’t know why It maybe caused by my code. Please help me check this problem.

Please provide a link to a minimal sample where the issue is reproducible:

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello Khanhndd,
Thanks for contacting us for support.
This issue is not reproducible on my end. To dive it deeper, can I know how do you keep the annotation after reloading the page? Because every time we do the reloading, annotations would be gone.
It is better you can provide me a code for this.

1 Like

Thank you for your reply. I got the solution.

When reloading page and component did mount ( ReactJS) , I do:

 const annotationsFromXfdf = await annotManager.importAnnotCommand(xfdf);
        const annotations = annotationsFromXfdf.map(annotation => {
      ....
     // Get Padding Border Rectangle again
          if (annotation instanceof window.Annotations.FreeTextAnnotation) {
            const paddingRect = new window.Annotations.Rect(6, 3, 6, 3);
            if (!annotation.getPadding()?.isEqual(paddingRect)) {
              annotation.setRect(
                new window.Annotations.Rect(
                annotation.X - 6,
                annotation.Y - 3,
                annotation.X + annotation.Width + 6,
                annotation.Y + annotation.Height + 3));
              annotation.setPadding(paddingRect);
            }
          }

          // Get Underline format again

          const defaultStyle = annotation?.getRichTextStyle();
          if(annotation.Subject ==="Free text" && defaultStyle) {
            const newStyle = { ...defaultStyle };
            const lengthContentAnnotation = annotation.getContents()?.length
            lengthContentAnnotation && (newStyle[lengthContentAnnotation] = {});
            annotation.setRichTextStyle(newStyle);
          }

 return annotation;
 });