How to prevent default behaviour on Delete key pressing on DocumentViewer?

Technical Support
1

Hi there,

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.4.0

Detailed description of issue
I created a custom UI in my project, and documentViewer like that:

`new Core.DocumentViewer()`
documentViewer.loadDocument(fileUrl).then(...)

That’s why I don’t have instance object, so I cannot follow this topic to prevent Delete key pressing behaviour. I see that, when I press the Delete key, the delete action (for annotationManager) is triggered and the annotation vanishes from the PDF file. I don’t want to that.

I tried to define addEventListener for documentViewer and stop Delete key by preventDefault or stopPropagation, but it doesn’t work. I even tried to get an advice from this topic, but the only effect, that I can achieve, is an infinite loop.
OK, I could probably prevent this with the document (not documentViewer), but I still want to use Delete key in a form, when an annotation is selected.

In my case, is it even possible to programatically stop deleting annotations after pressing Delete key?

Thanks for any help,
Dorota

1 Like
3

Hello Dorota,

You can get the instance by importing the getInstance function from the WebViewer library.
This will allow you to use the instance to disable any hotkeys.

https://pdfjs.express/api/global.html#getInstance__anchor

Also, the latest version of pdf.js Express is 8.7, we recommend updating to the latest version of if possible.

If this doesn’t work, could you please provide a sample project?

Best Regards,
Darian Chen

4

Hi Darian,

Thanks for the advice. Unfortunately, this won’t help in my case.

To create my own UI, I followed this tutorial. Therefore I cannot import anything from @pdftron/webviewer. Is there another solution to use your great library?

Considering version 8.7 - I checked 8.7.4 and in my case it is not useful because the library throws an error:
image
from this line in PDFJSDocumentType.js file:
window.instance.addSearchListener(function(searchValue, options, results)
and pdf is not loaded. Perhaps this is the “instance”, but I don’t have it.

If you need more clarification, just let me know.

Best regards,
Dorota

5

Hello Dorota,

After taking a closer look at our documentation on hotkeys guide, it appears that we do not have an available hotkey for the delete key, so I don’t think this method will work.

Hotkeys: PDFJS Express WebViewer Namespace: Hotkeys

You mentioned that you tried adding a confirmation popup before deleting and that causes an infinite loop? Could you explain this in more detail? What errors are you receiving and could you provide the code?

One possible solution could be to redraw the annotation whenever a user deletes it. Would something like this work for you?

Best Regards,
Darian Chen

6

Hello Dorota,

Another solution could be to set the NoDelete property on the annotations to true when adding.

  annotationManager.addEventListener('annotationChanged', (annotations, action) => {
    if (action === 'add') {
       annotations.forEach(annotation => {
         annotation.NoDelete = true;
       });
    }
  });

Let me know if this helps.

7

Hello Darian,

Great, thank you, NoDelete is the solution for me. I thought it would be possible to disable the Del key, but the simpler, the better.

Best regards,
Dorota

8

Hello Dorota,

Glad that worked for you.

After speaking with my team, it is possible to disable the delete key. The delete key is actually under the tools namespace instead of UI.Hotkeys.

On WebViewer, it would look like the link below, but this should also work for PDF.js Express.

Feel free to use either solution.

1 Like
9

Hi Darian,

Yes! This is exactly what i meant earlier :star_struck:. This solution is even beter, because I don’t have to remember to “unblock” the deletion if I want to programatically remove annotations. Also, I just realized that Backspace button behaves the same way :dizzy_face: (although it should be obvious for me). Thank you for all your help.

Best regards,
Dorota