How to use the handsontable.editors function in handsontable

import Handsontable from 'handsontable';

import { getDisplayValue } from '../common';

const { getCaretPosition, getSelectionEndPosition, setCaretPosition } = Handsontable.dom;

class KeyValueEditor extends Handsontable.editors.AutocompleteEditor {

  prepare(row, col, prop, td, originalValue, cellProperties, ...args) {
    super.prepare(row, col, prop, td, originalValue, cellProperties, ...args);
    this.cellProperties.strict = true; // Force strict mode (key-value context)
  }

  getValue() {
    const selection = this.htEditor.getSelectedLast();
    if (selection) {
      return this.htEditor.getSourceDataAtRow(selection[0])[this.cellProperties.keyProperty];
    }
  }

  setValue(value) {
    if (this.state === 'STATE_EDITING') {
      const colIndex = this.instance.toPhysicalColumn(this.col);

this.select.style.margin = '0'

  // display the <select>
  this.select.style.display = ''
}

SelectEditor.prototype.close = function () {
  this.select.style.display = 'none'
}

SelectEditor.prototype.focus = function () {
  this.select.focus()
}

Handsontable.editors.SelectEditor = SelectEditor
Handsontable.editors.registerEditor('select', SelectEditor)
module.exports = SelectEditor
</select>

this.select.style.left = tdOffset.left - rootOffset.left + 'px'
  this.select.style.margin = '0'

  // display the <select>
  this.select.style.display = ''
}

SelectEditor.prototype.close = function () {
  this.select.style.display = 'none'
}

SelectEditor.prototype.focus = function () {
  this.select.focus()
}

Handsontable.editors.SelectEditor = SelectEditor
Handsontable.editors.registerEditor('select', SelectEditor)
module.exports = SelectEditor
</select>

/**
 * source: array of strings, array of {label: '', value: ''} objects (both properties optional),
 *  or an object where the keys represent the value attribute and the values represent the label/text
 */
var Handsontable = require('handsontable')
var Promise = require('promise')
var _ = {extend: require('lodash/object/extend')}
;require('./styles/select-editor.css')

var SelectEditor = Handsontable.editors.BaseEditor.prototype.extend()

SelectEditor.prototype.init = function () {
  this.select = document.createElement('select')
  Handsontable.Dom.addClass(this.select, 'select-editor')
  this.select.style.display = 'none'
  this.instance.rootElement.appendChild(this.select)
}

SelectEditor.prototype.prepare = function () {
  Handsontable.editors.BaseEditor.prototype.prepare.apply(this, arguments) // call parent method

  var source = this.cellProperties.source
  var currentValue = this.instance.getDataAtCell(this.cellProperties.physicalRow, this.cellProperties.physicalCol)
  var optionsPromise

  if (typeof source === 'function') {

init(...args) {
      return Handsontable.editors.BaseEditor.prototype.init.call(this.$data.hotCustomEditorInstance, ...args);
    }

this.htEditor.loadData(choices);

    this.updateDropdownHeight();

    this.flipDropdownIfNeeded();

    this.highlightBestMatchingChoice(highlightIndex);

    this.instance.listen(false);

    setCaretPosition(this.TEXTAREA, pos, (pos === endPos ? void 0 : endPos));
  }

}

Handsontable.editors.registerEditor('key-value', KeyValueEditor);

export default KeyValueEditor;

makeEditorClass(editorComponent: React.Component): typeof Handsontable.editors.BaseEditor {
    const customEditorClass = class CustomEditor extends Handsontable.editors.BaseEditor implements Handsontable._editors.Base {
      editorComponent: React.Component;

      constructor(hotInstance, row, col, prop, TD, cellProperties) {
        super(hotInstance, row, col, prop, TD, cellProperties);

        (editorComponent as any).hotCustomEditorInstance = this;

        this.editorComponent = editorComponent;
      }

      focus() {
      }

      getValue() {
      }

beginEditing(...args) {
    return Handsontable.editors.BaseEditor.prototype.beginEditing.call(this.hotCustomEditorInstance, ...args);
  }