How to use the @ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler function in @ckeditor/ckeditor5-ui

// Use the high priority because the math UI navigation is more important
			// than other feature's actions, e.g. list indentation.
			// https://github.com/ckeditor/ckeditor5-link/issues/146
			priority: 'high'
		} );

		// Close the panel on the Esc key press when the editable has focus and the balloon is visible.
		this.editor.keystrokes.set( 'Esc', ( data, cancel ) => {
			if ( this._isPopupVisible ) {
				this._hideUI();
				cancel();
			}
		} );

		// Close on click outside of balloon panel element.
		clickOutsideHandler( {
			emitter: this.popupView,
			activator: () => this._isPopupVisible,
			contextElements: [ this._balloon.view.element ],
			callback: () => this._hideUI()
		} );
}

this._form.keystrokes.set( 'Esc', ( data, cancel ) => {
      this._hideForm( true );
      cancel();
    } );

    // Reposition the balloon or hide the form if an intro src widget is no longer selected.
    this.listenTo( editingView, 'render', () => {
      if ( !isCustomWidgetSelected( 'form', editingView.selection ) ) {
        this._hideForm( true );
      } else if ( this._isVisible ) {
        repositionCustomContextualBalloon( 'form', editor );
      }
    }, { priority: 'low' } );

    // Close on click outside of balloon panel element.
    clickOutsideHandler( {
      emitter: this._form,
      activator: () => this._isVisible,
      contextElements: [ this._form.element ],
      callback: () => this._hideForm()
    } );
  }

this._form.keystrokes.set( 'Esc', ( data, cancel ) => {
			this._hideForm( true );
			cancel();
		} );

		// Reposition the balloon or hide the form if an image widget is no longer selected.
		this.listenTo( editor.ui, 'update', () => {
			if ( !getSelectedImageWidget( viewDocument.selection ) ) {
				this._hideForm( true );
			} else if ( this._isVisible ) {
				repositionContextualBalloon( editor );
			}
		} );

		// Close on click outside of balloon panel element.
		clickOutsideHandler( {
			emitter: this._form,
			activator: () => this._isVisible,
			contextElements: [ this._balloon.view.element ],
			callback: () => this._hideForm()
		} );
	}

this._form.keystrokes.set( 'Esc', ( data, cancel ) => {
      this._hideForm( true );
      cancel();
    } );

    // Reposition the balloon or hide the form if an intro src widget is no longer selected.
    this.listenTo( editingView, 'render', () => {
      if ( !isAcasiWidgetSelected( editingView.selection ) ) {
        this._hideForm( true );
      } else if ( this._isVisible ) {
        repositionContextualBalloon( editor );
      }
    }, { priority: 'low' } );

    // Close on click outside of balloon panel element.
    clickOutsideHandler( {
      emitter: this._form,
      activator: () => this._isVisible,
      contextElements: [ this._form.element ],
      callback: () => this._hideForm()
    } );
  }

// Use the high priority because the emoji UI navigation is more important
			// than other feature's actions, e.g. list indentation.
			// https://github.com/ckeditor/ckeditor5-link/issues/146
			priority: 'high'
		} );

		// Close the panel on the Esc key press when the editable has focus and the balloon is visible.
		this.editor.keystrokes.set( 'Esc', ( data, cancel ) => {
			if ( this._balloon.visibleView === this.formView ) {
				this._hidePanel();
				cancel();
			}
		} );

		// Close on click outside of balloon panel element.
		clickOutsideHandler( {
			emitter: this.formView,
			activator: () => this._balloon.hasView( this.formView ),
			contextElements: [ this._balloon.view.element ],
			callback: () => this._hidePanel()
		} );
	}