Customize freetext tool to change text and behavior programatically

Technical Support
1

How can I customize freetext tool for following:

A) change initial text (possibly from custom drop-down selection)
B) It automatically goes to edit more, how can I programatically come out of edit more since I will be changing the text programatically
C) Upon coming out of edit mode, it shows context menu. I do not want to show context menu after the text is edited. Only when user clicks on this annotation, I want to show the context menu, like in all other annotations.

I tried following to change initial text, but it did not work

  var Tools = this.wvInstance.Tools;
  var Annotations = this.wvInstance.Annotations
  var freeTextMouseUp = Tools.FreeTextCreateTool.prototype.mouseLeftUp;
  Tools.FreeTextCreateTool.initialText = 'REDACTED'
  Tools.FreeTextCreateTool.prototype.mouseLeftUp = function() {
    if (this.annotation) {
      this.text = 'REDACTED'
      instance.docViewer.getAnnotationManager().redrawAnnotation(this.annotation);
    }
    freeTextMouseUp.apply(this, arguments);
  }
2

Hi,

A)
The initialText function actually lives on the prototype instead of the function itself, so I believe you should do

Tools.FreeTextCreateTool.prototype.initialText = 'REDACTED'

B)
You can listen to the editorFocus event of editboxManager and in the event callback you can grab the editor element inside the page container and then call the blur method of it. The id of an editor element looks like freetext-editor-${annotation.Id}.

C)
You can listen to the editorBlur event and then use this.wvInstance.annotManager to deselect all the annotaitons.

Thanks,
Zhijie

3

Both the code as suggested did not help. Pls see the code below. The event is not getting called back. Pls suggest.

var Tools = this.wvInstance.Tools
Tools.FreeTextCreateTool.prototype.initialText = ‘REDACTED’

this.wvInstance.docViewer.getAnnotationManager().getEditBoxManager().editorFocused = (editor, annotation) => {
console.log(editor)
editor.blur()
}

4

Hi,

editorFocused is an event so you need to bind to it with the ‘on’ function.

this.wvInstance.docViewer.getAnnotationManager().getEditBoxManager().on('editorFocused', (editor, annotation) => {
   console.log(editor)
   editor.blur()
})
5

That did not work as well. The event is not getting triggered even with
this.wvInstance.docViewer.getAnnotationManager().getEditBoxManager().on(‘editorFocused’, (editor, annotation) =>

Also, following has not changed initial text
Tools.FreeTextCreateTool.prototype.initialText = ‘REDACTED’

6

I am able to get the event with editorFocus instead of editorFocused as following

this.wvInstance.docViewer.getAnnotationManager().getEditBoxManager().on(‘editorFocus’, (editor, annotation) => {
console.log(‘editorFocus’)
editor.editor.container.blur()
}

However, blur is not working. Basically, I do not want user to have access to rich text popup.

Also, how can I change the text programmatically?

Following is not working as well
Tools.FreeTextCreateTool.prototype.initialText = ‘REDACTED’

Pls suggest.

7

Hi,

After more investigation I was actually able to find an API that disables freetext editing, and is probably what you want. Regarding initialText, it seems that the viewer is overwriting the value, so we need to wait for some time before calling it. Here’s the code you can try.

Webviewer(
  {
    initialDoc: hashFile,
    path: '/lib',
  },
  document.getElementById('viewer')
).then(function(instance) {
  instance.annotManager.disableFreeTextEditing();
  instance.docViewer.on('documentLoaded', () => {
    instance.Tools.FreeTextCreateTool.setTextHandler(() => 'REDACTED');
  })
});

I’ve verified that this solution works on my end, so will lock this post. If it doesn’t work on your end please open a new topic. Thanks.