Severe IndexSizeError and Multiple Text Annotation Creation Failure in Vue 3 WebViewer Integration

Technical Support WebViewer
, ,
1

WebViewer Version: 11.8.0

Do you have an issue with a specific file(s)?
→ No, I have tested with various PDF files, and the issue persists across all of them.

Can you reproduce using one of our samples or online demos?
→ Not yet tested with official samples/demos as my integration is specific to my Vue 3 application setup.

Are you using the WebViewer server?
→ No. My integration primarily uses the client-side JavaScript library via npm i @pdftron/webviewer.

Does the issue only happen on certain browsers?
→ No, the issue occurs on both Chrome and Edge browsers running on Windows 11.

Is your issue related to a front-end framework?
→ Yes, it is related to my integration within a Vue 3 application.

Is your issue related to annotations?
→ Yes, specifically with text annotation functionalities (Free Text and Insert Text).

Please give a brief summary of your issue:
→ Severe IndexSizeError and Multiple Text Annotation Creation Failure in Vue 3 WebViewer Integration. (I am unable to type into text annotations, and cannot create more than one text annotation.)

Please describe your issue and provide steps to reproduce it:
→ Hello Apryse Community Team,

I’m currently integrating the Apryse WebViewer into a Vue 3 application, and I’ve encountered a severe issue specifically with the text annotation functionality. While other annotation types seem to work as expected, I am unable to see or correctly input text when attempting to create a text annotation (e.g., Free Text or Insert Text, Replace Text annotation), face difficulties creating multiple text annotations, and receive persistent IndexSizeError messages in the console.

The Problem: When I select the text annotation tool (e.g., Free Text or Insert Text) and click on the PDF document to create an annotation, the following occurs:

  1. A new text annotation widget/bounding box appears on the document.
  2. However, I cannot type any text into it.
  3. The cursor might not change to a text input cursor, or if it does, input is still ignored.
  4. Furthermore, I am unable to create more than one text annotation (e.g., Free Text or Insert Text). After creating the first text annotation, subsequent attempts to create another one do not result in a new annotation appearing.
  5. Critically, the browser console logs IndexSizeError messages, suggesting an issue with text range/selection handling within WebViewer’s core. These errors occur when attempting to create or interact with text annotations.

Expected Behavior: I expect that after selecting the text annotation tool and clicking on the document, an editable text box should appear, allowing me to directly type and see my input characters within the annotation. Additionally, I should be able to create multiple instances of text annotations on the document as needed, without encountering console errors.

Steps to Reproduce:

  1. Integrate Apryse WebViewer into a Vue 3 application.
  2. Load any PDF document into the WebViewer.
  3. Select the “Free Text Annotation” or “Insert Text Annotation” tool.
  4. Click anywhere on the PDF document to create the first text annotation. ( Observe that typing is not working, and both ‘setBaseAndExtent’ and ‘setStart’ IndexSizeErrors are immediately logged in the console.)
  5. Attempt to click elsewhere on the PDF document to create a second text annotation. (Observe that a second annotation does not appear)
  6. Console Error Details (Full Stack Traces): Below are the exact error messages observed in the browser console:

webviewer-core.min.js:3237 Uncaught IndexSizeError: Failed to execute ‘setBaseAndExtent’ on ‘Selection’: The offset 4294967294 is larger than the node’s length (16).
at r.selection.setNativeRange (webviewer-core.min.js:3237:399)
at Proxy.value (webviewer-core.min.js:1531:386)
at Proxy.value (webviewer-core.min.js:1474:70)
at webviewer-core.min.js:1990:339
r.selection.setNativeRange @ webviewer-core.min.js:3237
value @ webviewer-core.min.js:1531
value @ webviewer-core.min.js:1474
(anonymous) @ webviewer-core.min.js:1990

webviewer-core.min.js:1524 Uncaught (in promise) IndexSizeError: Failed to execute ‘setStart’ on ‘Range’: The offset 4294967294 is larger than the node’s length (16).
at Proxy.value (webviewer-core.min.js:1524:188)
at Proxy.value (webviewer-core.min.js:1528:347)
at Proxy.value (webviewer-core.min.js:1472:431)
at Proxy.value (webviewer-core.min.js:1464:482)
at pa.focus (webviewer-core.min.js:2001:93)
at z.hV (webviewer-core.min.js:2723:92)
at z. (webviewer-core.min.js:2711:471)
at b (webviewer-core.min.js:66:50)
at Object.next (webviewer-core.min.js:64:325)
at webviewer-core.min.js:64:256
at new Promise ()
at ia (webviewer-core.min.js:64:33)
at webviewer-core.min.js:2711:124
at Array.forEach ()
at Proxy.onEditBoxAnnotationChanged (webviewer-core.min.js:2711:84)
at webviewer-core.min.js:917:230

What I’ve Tried So Far:

  • Confirmed that other annotation types (e.g., highlighting, freehand, sticky notes) are working correctly.
  • Tested with various PDF files to ensure the issue is not file-specific.
  • Checked WebViewer version (11.8.0).
  • Reviewed the Apryse documentation for text annotation and Vue 3 integration, but couldn’t find a direct solution.

Environment Details:

  • Apryse WebViewer Version : 11.8.0
  • Vue.js Version : 3.0
  • Browser(s) : Chrome, Edge
  • Operating System : Windows 11
  • Integration Method : npm i @pdftron/webviewer

Could you please provide some guidance on how to resolve this issue? Is there a specific configuration for Vue 3 integration or text annotation that I might be missing? Any help would be greatly appreciated!
Thank you in advance for your time and assistance.

Best regards, ChangKoog Lee, Samsung Heavy Industries

Please provide a link to a minimal sample where the issue is reproducible:
→ Unfortunately, creating and sharing a public, minimal example is challenging, as my project is part of a large-scale, internal corporate project. Please let me know if, after reviewing the detailed steps and console logs provided above, a minimal sample is still strictly required.

2

Hello, I’m AiRon, an automated tech support bot :robot: While you wait for one of our customer support representatives, I can help you with your question.


It sounds like you’re experiencing an issue with the text annotation functionality when integrating Apryse WebViewer into a Vue 3 application. This could be related to how the WebViewer is set up or how Vue 3 interacts with it, especially concerning the handling of DOM elements and event listeners.

Some things you can try:

  • Ensure that the static assets required for WebViewer are correctly copied and accessible. Missing files could cause unexpected behavior.

  • Double-check the integration setup, especially the configuration of WebViewer within your Vue 3 application. Ensure that the WebViewer instance is correctly initialized.

  • Review how Vue 3 might be affecting the DOM elements. Vue’s reactivity system sometimes interferes with direct DOM manipulations.

  • Consider testing your integration with a basic Vue 3 setup to rule out any conflicts with other parts of your application.

  • Look into the handling of event listeners for text annotations. Ensure that events aren’t being blocked or mismanaged by your Vue setup.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

3

Hi there,

We have a sample WebViewer integration with Vue project available here:

Could you please give this a try and see if it works for you? The sample project is already on Vue 3.
I am able to create multiple free-text annotations, and insertText caret annotations without any issues:

image
image1920×780 146 KB

Best regards,
Kevin