How to use the codemirror.defineOption function in codemirror

})

function onChangeHandler(cm, changes) {
    var cur = cm.getCursor()

    if (
        cm.hasFocus() &&
        !/\w/.test(
            cm.getRange(cur, { line: cur.line, ch: Infinity })
        ) /* && cm.findPosH(cm.getCursor(), 1, 'char', true).hitSide */
    ) {
        cm.showPrediction(cm.options.hintOptions)
    }
}

CodeMirror.defineOption('showPredictions', false, function(cm, val, old) {
    if (old && old != CodeMirror.Init) {
        // cm.removeKeyMap(keyMap);
        // cm.state.closeBrackets = null;
    }
    if (val) {
        // console.log('attcaching predictions')
        // cm.state.closeBrackets = val;
        // cm.addKeyMap(keyMap);

        cm.on('changes', onChangeHandler)
    } else {
        cm.off('changes', onChangeHandler)
    }
})

var requestAnimationFrame =

/**
 * @typedef PasteOption
 * @type {object}
 * @property {boolean} enabled
 * @property {PasteImageUploader | string} uploadTo
 */

/**
 * @type {PasteOption}
 */
var defaultOption = { // exposed options from Paste class
  enabled: false,
  uploadTo: 'sm.ms'
}

CodeMirror.defineOption('hmdPasteImage', false, function (cm, newVal) {
  // complete newCfg with default values
  var paste = getPaste(cm)
  var newCfg = {}

  if (newVal === true) newVal = { enabled: true }
  else if (/string|function/.test(typeof newVal)) newVal = { enabled: true, uploadTo: newVal }
  else {
    // normalize to boolean
    newVal.enabled = !!newVal.enabled
  }

  for (let k in defaultOption) {
    newCfg[k] = newVal.hasOwnProperty(k) ? newVal[k] : defaultOption[k]
  }

  if (paste.enabled !== newCfg.enabled) {

/**
       * Options for InsertFile.
       *
       * You may also provide a `false` to disable it; a `true` to enable it with `defaultOption.fileHandler`
       * ( Note: you shall load a related PowerPack, or manually, to populate `defaultOption.fileHandler` )
       *
       * Or provide a FileHandler (overwrite the default one), meanwhile, byDrop & byPaste will set to `true`
       */
      hmdInsertFile?: OptionValueType
    }
  }
}

suggestedEditorConfig.hmdInsertFile = suggestedOption

CodeMirror.defineOption("hmdInsertFile", defaultOption, function (cm: cm_t, newVal: OptionValueType) {

  ///// convert newVal's type to `Partial`, if it is not.

  if (!newVal || typeof newVal === "boolean") {
    let enabled = !!newVal
    newVal = { byDrop: enabled, byPaste: enabled }
  } else if (typeof newVal === 'function') {
    newVal = { byDrop: true, byPaste: true, fileHandler: newVal }
  }

  ///// apply config and write new values into cm

  var inst = getAddon(cm)
  for (var k in defaultOption) {
    inst[k] = (k in newVal) ? newVal[k] : defaultOption[k]
  }

declare global {
  namespace HyperMD {
    interface EditorConfiguration {
      /**
       * Options for CursorDebounce.
       *
       * You may also provide a `false` to disable it; a `true` to enable it
       */
      hmdCursorDebounce?: OptionValueType
    }
  }
}

suggestedEditorConfig.hmdCursorDebounce = suggestedOption

CodeMirror.defineOption("hmdCursorDebounce", defaultOption, function (cm: cm_t, newVal: OptionValueType) {

  ///// convert newVal's type to `Partial`, if it is not.

  if (!newVal || typeof newVal === "boolean") {
    newVal = { enabled: !!newVal }
  }

  ///// apply config and write new values into cm

  var inst = getAddon(cm)
  for (var k in defaultOption) {
    inst[k] = (k in newVal) ? newVal[k] : defaultOption[k]
  }
})

//#endregion

declare global {
  namespace HyperMD {
    interface EditorConfiguration {
      /**
       * If not empty, this will affect `editor.hmdResolveURL()` if the URL of result is relative.
       *
       * Also affects other addons, eg. opening links, showing images...
       */
      hmdReadLink?: OptionValueType
    }
  }
}

suggestedEditorConfig.hmdReadLink = suggestedOption

CodeMirror.defineOption("hmdReadLink", defaultOption, function (cm: cm_t, newVal: OptionValueType) {

  ///// convert newVal's type to `Partial`, if it is not.

  if (!newVal || typeof newVal === "string") {
    newVal = { baseURI: newVal as string }
  }

  ///// apply config and write new values into cm

  var inst = getAddon(cm)
  for (var k in defaultOption) {
    inst[k] = (k in newVal) ? newVal[k] : defaultOption[k]
  }
})

//#endregion

namespace HyperMD {
    interface EditorConfiguration {
      /**
       * Options for MyAddon.
       *
       * You may also provide a `false` to disable it; a `true` to enable it with defaultOption (except `enabled`)
       */
      // TODO: write doc above
      hmdMyAddon?: OptionValueType
    }
  }
}

suggestedEditorConfig.hmdMyAddon = suggestedOption

CodeMirror.defineOption("hmdMyAddon", defaultOption, function (cm: cm_t, newVal: OptionValueType) {

  ///// convert newVal's type to `Partial`, if it is not.

  if (!newVal || typeof newVal === "boolean") {
    newVal = { enabled: !!newVal }
  }

  ///// apply config and write new values into cm

  var inst = getAddon(cm)
  for (var k in defaultOption) {
    inst[k] = (k in newVal) ? newVal[k] : defaultOption[k]
  }
})

//#endregion

// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE
/**
 * @modifier NHN FE Development Lab 
 */
import CodeMirror from 'codemirror';

/* eslint-disable */
CodeMirror.defineOption('placeholder', '', function(cm, val, old) {
  var prev = old && old != CodeMirror.Init
  if (val && !prev) {
    cm.on('blur', onBlur)
    cm.on('change', onChange)
    cm.on('swapDoc', onChange)
    onChange(cm)
  } else if (!val && prev) {
    cm.off('blur', onBlur)
    cm.off('change', onChange)
    cm.off('swapDoc', onChange)
    clearPlaceholder(cm)
    var wrapper = cm.getWrapperElement()
    wrapper.className = wrapper.className.replace(' CodeMirror-empty', '')
  }

  if (val && !cm.hasFocus()) onBlur(cm)

* Options for Hover.
       *
       * You may also provide a `false` to disable it;
       * a `true` to enable it with defaultOption (except `enabled`);
       * or a Convertor to decide the content of tooltip.
       *
       * @see Convertor
       */
      hmdHover?: OptionValueType
    }
  }
}

suggestedEditorConfig.hmdHover = suggestedOption

CodeMirror.defineOption("hmdHover", defaultOption, function (cm: cm_t, newVal: OptionValueType) {

  ///// convert newVal's type to `Partial`, if it is not.

  if (!newVal || typeof newVal === "boolean") {
    newVal = { enabled: !!newVal }
  } else if (typeof newVal === "function") {
    newVal = { enabled: true, convertor: newVal }
  }

  ///// apply config and write new values into cm

  var inst = getAddon(cm)
  for (var k in defaultOption) {
    inst[k] = (k in newVal) ? newVal[k] : defaultOption[k]
  }
})

var codemirror = require('codemirror');

global.jsonlint = require('jsonlint/web/jsonlint.js');

require('codemirror/addon/edit/closebrackets');
require('codemirror/addon/edit/matchbrackets');
require('codemirror/addon/lint/lint');
require('codemirror/addon/lint/json-lint');
require('codemirror/addon/selection/active-line');
require('codemirror/mode/javascript/javascript');

codemirror.defineOption("matchBrackets", true);
codemirror.defineOption("autoCloseBrackets", true);
codemirror.defineOption("lineWrapping", true);
codemirror.defineOption("tabSize", 2);
codemirror.defineOption("mode", "application/json");
codemirror.defineOption("gutters", ["CodeMirror-lint-markers"]);
codemirror.defineOption("lint", true);
codemirror.defineOption("styleActiveLine", true);

global.CodeMirror = codemirror;

/**
 * Edition field for a JSON string in a textarea.
 *
 * @example 
 */
export default function maJsonField() {
    return {

var codemirror = require('codemirror');

global.jsonlint = require('jsonlint/web/jsonlint.js');

require('codemirror/addon/edit/closebrackets');
require('codemirror/addon/edit/matchbrackets');
require('codemirror/addon/lint/lint');
require('codemirror/addon/lint/json-lint');
require('codemirror/addon/selection/active-line');
require('codemirror/mode/javascript/javascript');

codemirror.defineOption("matchBrackets", true);
codemirror.defineOption("autoCloseBrackets", true);
codemirror.defineOption("lineWrapping", true);
codemirror.defineOption("tabSize", 2);
codemirror.defineOption("mode", "application/json");
codemirror.defineOption("gutters", ["CodeMirror-lint-markers"]);
codemirror.defineOption("lint", true);
codemirror.defineOption("styleActiveLine", true);

global.CodeMirror = codemirror;

/**
 * Edition field for a JSON string in a textarea.
 *
 * @example 
 */
export default function maJsonField() {
    return {
        scope: {
            'field': '&',