How to use the @jupyterlab/completer.CompletionHandler function in @jupyterlab/completer

register: (
        completable: ICompletionManager.ICompletable
      ): ICompletionManager.ICompletableAttributes => {
        const { connector, editor, parent } = completable;
        const model = new CompleterModel();
        const completer = new Completer({ editor, model });
        const handler = new CompletionHandler({ completer, connector });
        const id = parent.id;

        // Hide the widget when it first loads.
        completer.hide();

        // Associate the handler with the parent widget.
        handlers[id] = handler;

        // Set the handler's editor.
        handler.editor = editor;

        // Attach the completer widget.
        Widget.attach(completer, document.body);

        // Listen for parent disposal.
        parent.disposed.connect(() => {

defaultFor: ['.ipynb'],
    preferKernel: true,
    canStartKernel: true,
    rendermime, contentFactory,
    mimeTypeService: editorServices.mimeTypeService
  });
  docRegistry.addModelFactory(mFactory);
  docRegistry.addWidgetFactory(wFactory);

  let nbWidget = docManager.open(NOTEBOOK) as NotebookPanel;
  let palette = new CommandPalette({ commands });

  const editor = nbWidget.notebook.activeCell && nbWidget.notebook.activeCell.editor;
  const model = new CompleterModel();
  const completer = new Completer({ editor, model });
  const handler = new CompletionHandler({ completer, session: nbWidget.session });

  // Set the handler's editor.
  handler.editor = editor;

  // Listen for active cell changes.
  nbWidget.notebook.activeCellChanged.connect((sender, cell) => {
    handler.editor = cell && cell.editor;
  });

  // Hide the widget when it first loads.
  completer.hide();

  let panel = new SplitPanel();
  panel.id = 'main';
  panel.orientation = 'horizontal';
  panel.spacing = 0;

register: (
        completable: ICompletionManager.ICompletable
      ): ICompletionManager.ICompletableAttributes => {
        const { connector, editor, parent } = completable;
        const model = new CompleterModel();
        const completer = new Completer({ editor, model });
        const handler = new CompletionHandler({ completer, connector });
        const id = parent.id;

        // Hide the widget when it first loads.
        completer.hide();

        // Associate the handler with the parent widget.
        handlers[id] = handler;

        // Set the handler's editor.
        handler.editor = editor;

        // Attach the completer widget.
        Widget.attach(completer, document.body);

        // Listen for parent disposal.
        parent.disposed.connect(() => {

contentFactory,
    mimeTypeService: editorServices.mimeTypeService
  });
  docRegistry.addModelFactory(mFactory);
  docRegistry.addWidgetFactory(wFactory);

  let notebookPath = PageConfig.getOption('notebookPath');
  let nbWidget = docManager.open(notebookPath) as NotebookPanel;
  let palette = new CommandPalette({ commands });

  const editor =
    nbWidget.content.activeCell && nbWidget.content.activeCell.editor;
  const model = new CompleterModel();
  const completer = new Completer({ editor, model });
  const connector = new KernelConnector({ session: nbWidget.session });
  const handler = new CompletionHandler({ completer, connector });

  // Set the handler's editor.
  handler.editor = editor;

  // Listen for active cell changes.
  nbWidget.content.activeCellChanged.connect((sender, cell) => {
    handler.editor = cell && cell.editor;
  });

  // Hide the widget when it first loads.
  completer.hide();

  let panel = new SplitPanel();
  panel.id = 'main';
  panel.orientation = 'horizontal';
  panel.spacing = 0;

register: (
        completable: ICompletionManager.ICompletable
      ): ICompletionManager.ICompletableAttributes => {
        const { connector, editor, parent } = completable;
        const model = new CompleterModel();
        const completer = new Completer({ editor, model });
        const handler = new CompletionHandler({ completer, connector });
        const id = parent.id;

        // Hide the widget when it first loads.
        completer.hide();

        // Associate the handler with the parent widget.
        handlers[id] = handler;

        // Set the handler's editor.
        handler.editor = editor;

        // Attach the completer widget.
        Widget.attach(completer, document.body);

        // Listen for parent disposal.
        parent.disposed.connect(() => {

constructor(props: CompleterProps) {
    super(props);

    const editor =
      this.props.notebookPanel.content.activeCell &&
      this.props.notebookPanel.content.activeCell.editor;
    const model = new CompleterModel();
    this.completer = new Completer({ editor, model });
    const connector = new KernelConnector({
      session: this.props.notebookPanel.session
    });
    this.handler = new CompletionHandler({
      completer: this.completer,
      connector
    });
    // Set the handler's editor.
    this.handler.editor = editor;

    // Listen for active cell changes.
    this.props.notebookPanel.content.activeCellChanged.connect(
      (sender, cell) => {
        this.handler.editor = cell && cell.editor;
      }
    );

    // Hide the widget when it first loads.
    this.completer.hide();

it('should create a completer handler', () => {
        const handler = new CompletionHandler({
          connector,
          completer: new Completer({ editor: null })
        });
        expect(handler).to.be.an.instanceof(CompletionHandler);
      });
    });

it('should be safe to call multiple times', () => {
        const handler = new CompletionHandler({
          connector,
          completer: new Completer({ editor: null })
        });
        expect(handler.isDisposed).to.equal(false);
        handler.dispose();
        handler.dispose();
        expect(handler.isDisposed).to.equal(true);
      });
    });

it('should create a completer handler', () => {
        const handler = new CompletionHandler({
          connector,
          completer: new Completer({ editor: null })
        });
        expect(handler).to.be.an.instanceof(CompletionHandler);
      });
    });

it('should be a data connector', () => {
        const handler = new CompletionHandler({
          connector,
          completer: new Completer({ editor: null })
        });
        expect(handler.connector).to.have.property('fetch');
        expect(handler.connector).to.have.property('remove');
        expect(handler.connector).to.have.property('save');
      });
    });