Replace Guest/Date time with comment header/title in sticky note annotation
Is it possible to replace/modify the Guest/Date time with a comment header/title(editable i.e can be different for every comment just like the comment section) in the notes panel of sticky note annotation without directly making any changes on pdftron repository? Please share the code snippet for the same in react Js.
attaching the requirement marked by the red arrow.
We do not have an API to modify this directly, and if you want to avoid modifying the annotation Author and date-time on the actual annotation. You could access the DOM element and then filter by any of the classes:
You can then modify the inner value of these. This is a slightly hacky way to approach this.
Something like:
document.querySelector(".author-and-time").querySelector(".author").innerText = "Change this value"
document.querySelector(".author-and-time").querySelector(".date-and-time").innerText = "Change second value"
I tried the above code, but getting compile time error ‘Object is possibly null’.
as document. querySelector(‘.author-and-time’) is printing null in console.
Will it be possible to replace the whole < div class=‘author’>guest</ div> with some other html element like textArea?
If replacment is not possible can we add one more html element like textArea below this and hide the author & time display?
You can also access the iframe from the root document like so: document.querySelector('#webviewer-1').contentDocument.querySelector('.author-and-time')from the documentation.
Best regards,
Maggie V.
Software Developer
PDFTron
@maggiev / @tgordon Thanks for the reply!!
I am still getting Object is possibly ‘null’ error when using document.querySelector(‘#webviewer-1’) also it says property ‘contentDocument’ doesn’t exist on type ‘Element’ when trying to call .contentDocument.querySelector(‘.author-and-time’) from it.
is there any other alternative way or approach to achieve this?
To access the WebViewer iframe from the root document, you’ll need to get the iframe selector first. And then access its window or document through the contentWindow or contentDocument properties.
For me, the WV iframe element has an id of #webviewer-1, you’ll need to find the correct identifier for your case.
Another way to access WV iframe is through WebViewer instance, from our documentation. This is where you load WebViewer: