How to use the codemirror.registerHelper function in codemirror

},
                "Cmd-Enter": () => {
                    const { onHotkeyRun } = this.props;
                    onHotkeyRun && onHotkeyRun(this.getValue());
                },
                "Ctrl-Enter": () => {
                    const { onHotkeyRun } = this.props;
                    onHotkeyRun && onHotkeyRun(this.getValue());
                },
            },
            viewportMargin: 200,
        });

        this.editor.setCursor(this.editor.lineCount(), 0);

        CodeMirror.registerHelper("hint", "fromList", (cm, options) => {
            const cur = cm.getCursor();
            const token = cm.getTokenAt(cur);

            const to = CodeMirror.Pos(cur.line, token.end);
            let from = "",
                term = "";
            if (token.string) {
                term = token.string;
                from = CodeMirror.Pos(cur.line, token.start);
            } else {
                term = "";
                from = to;
            }

            // So that we don't autosuggest for anyof/allof filter values which
            // would be inside quotes.

/**
 * Registers GraphQL "info" tooltips for CodeMirror.
 *
 * When hovering over a token, this presents a tooltip explaining it.
 *
 * Options:
 *
 *   - schema: GraphQLSchema provides positionally relevant info.
 *   - hoverTime: The number of ms to wait before showing info. (Default 500)
 *   - renderDescription: Convert a description to some HTML, Useful since
 *                        descriptions are often Markdown formatted.
 *   - onClick: A function called when a named thing is clicked.
 *
 */
CodeMirror.registerHelper('info', 'graphql', (token, options) => {
  if (!options.schema || !token.state) {
    return;
  }

  const state = token.state;
  const kind = state.kind;
  const step = state.step;
  const typeInfo = getTypeInfo(options.schema, token.state);

  // Given a Schema and a Token, produce the contents of an info tooltip.
  // To do this, create a div element that we will render "into" and then pass
  // it to various rendering functions.
  if (
    (kind === 'Field' && step === 0 && typeInfo.fieldDef) ||
    (kind === 'AliasedField' && step === 2 && typeInfo.fieldDef)
  ) {

// Lazily require to ensure requiring SuperGraphiQL outside of a Browser context
      // does not produce an error.
      var CodeMirror = require("codemirror");
      require("codemirror/addon/fold/foldgutter");
      require("codemirror/addon/fold/brace-fold");
      require("codemirror/addon/dialog/dialog");
      require("codemirror/addon/search/search");
      require("codemirror/addon/search/searchcursor");
      require("codemirror/addon/search/jump-to-line");
      require("codemirror/keymap/sublime");
      require("codemirror-graphql/results/mode");

      if (this.props.ResultsTooltip) {
        require("codemirror-graphql/utils/info-addon");
        var tooltipDiv = document.createElement("div");
        CodeMirror.registerHelper("info", "graphql-results", function (token, options, cm, pos) {
          var Tooltip = _this2.props.ResultsTooltip;
          _reactDom2.default.render(_react2.default.createElement(Tooltip, { pos: pos }), tooltipDiv);
          return tooltipDiv;
        });
      }

      this.viewer = CodeMirror(this._node, {
        lineWrapping: true,
        value: this.props.value || "",
        readOnly: true,
        theme: this.props.editorTheme || "graphiql",
        mode: "graphql-results",
        keyMap: "sublime",
        foldGutter: {
          minFoldSize: 4
        },

if (!editorSupport) return [];
  const version = editor.newContentVersion();
  editorSupport.update(text, version);

  fixColors(editor, editorSupport);

  return (editorSupport.parseErrors || [])
    .map(({ line, col, msg }) => ({
      severity: 'error',
      from: { line: line - 1, ch: Math.min(editor.getLine(line - 1).length - 1, col) },
      to: { line, ch: 0 },
      message: msg,
    }));
});

codemirror.registerHelper('hint', 'cypher', (editor) => {
  const editorSupport = editor.editorSupport;
  if (!editorSupport) return {};
  editorSupport.update(editor.getValue());

  const { line, ch } = editor.getCursor();
  const { items, from, to } = editorSupport.getCompletion(line + 1, ch);

  const position = translatePosition(from, to);
  const render = (element, self, data) => {
    // eslint-disable-next-line no-param-reassign
    element.innerHTML += `<b>${data.displayText}</b>${data.postfix ? data.postfix : ''}`;
  };

  return {
    list: items
      .map(({ type, view, content, postfix }) =&gt; ({

token.state.parents,
    token.start
  );
  const match =
    context &&
    context.type.__typename === "CompositeConfigType" &&
    context.type.fields.find(f => f.name === token.string);

  if (match && match.description) {
    return match.description;
  }

  return null;
});

CodeMirror.registerHelper(
  "lint",
  "yaml",
  async (
    text: string,
    { checkConfig }: { checkConfig: LintJson },
    editor: any
  ): Promise> => {
    const codeMirrorDoc = editor.getDoc();
    const docs = yaml.parseAllDocuments(text);
    if (docs.length === 0) {
      return [];
    }
    // Assumption
    const doc = docs[0];
    const lints: Array = [];
    doc.errors.forEach(error => {

/**
 * Registers a "lint" helper for CodeMirror.
 *
 * Using CodeMirror's "lint" addon: https://codemirror.net/demo/lint.html
 * Given the text within an editor, this helper will take that text and return
 * a list of linter issues, derived from GraphQL's parse and validate steps.
 * Also, this uses `graphql-language-service-parser` to power the diagnostics
 * service.
 *
 * Options:
 *
 *   - schema: GraphQLSchema provides the linter with positionally relevant info
 *
 */
CodeMirror.registerHelper('lint', 'graphql', (text: string, options: any) => {
  const schema = options.schema;
  try {
    const rawResults = getDiagnostics(text, schema);

    const results = rawResults.map(error => ({
      message: error.message,
      severity: SEVERITY[error.severity - 1],
      type: TYPE[error.source],
      from: CodeMirror.Pos(error.range.start.line, error.range.start.character),
      to: CodeMirror.Pos(error.range.end.line, error.range.end.character),
    }));

    return results;
  } catch (err) {
    debug.log(err);
    return [];

import React,{Component,PropTypes} from 'react';
import {Scrollbars} from 'react-custom-scrollbars';
import {toastOpt} from '../../../utils/Constants';
import FSReactToastr from '../../../components/FSReactToastr';
import ReactCodemirror from 'react-codemirror';
import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript';
import jsonlint from 'jsonlint';
import lint from 'codemirror/addon/lint/lint';
import _ from 'lodash';
import TestRunREST from '../../../rest/TestRunREST';
import {Tabs, Tab} from 'react-bootstrap';
import CommonNotification from '../../../utils/CommonNotification';


CodeMirror.registerHelper("lint", "json", function(text) {
  var found = [];
  var {parser} = jsonlint;
  parser.parseError = function(str, hash) {
    var loc = hash.loc;
    found.push({
      from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
      to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
      message: str
    });
  };
  try {
    jsonlint.parse(text);
  } catch (e) {}
  return found;
});

**/

import React, {Component} from 'react';
import ReactDOM, {findDOMNode} from 'react-dom';
import _ from 'lodash';
import {Tabs, Tab, Row, Nav, NavItem} from 'react-bootstrap';
import ReactCodemirror from 'react-codemirror';
import '../utils/Overrides';
import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript';
import jsonlint from 'jsonlint';
import lint from 'codemirror/addon/lint/lint';
import Editable from '../components/Editable';
import Utils from '../utils/Utils';

CodeMirror.registerHelper("lint", "json", function(text) {
  var found = [];
  var {parser} = jsonlint;
  parser.parseError = function(str, hash) {
    var loc = hash.loc;
    found.push({
      from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
      to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
      message: str
    });
  };
  try {
    jsonlint.parse(text);
  } catch (e) {}
  return found;
});

**/

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import _ from 'lodash';
import FSReactToastr from '../../components/FSReactToastr';
import CommonNotification from '../../utils/CommonNotification';
import {toastOpt} from '../../utils/Constants';
import TopologyREST from '../../rest/TopologyREST';
import ReactCodemirror from 'react-codemirror';
import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript';
import jsonlint from 'jsonlint';
import lint from 'codemirror/addon/lint/lint';

CodeMirror.registerHelper("lint", "json", function(text) {
  var found = [];
  var {parser} = jsonlint;
  parser.parseError = function(str, hash) {
    var loc = hash.loc;
    found.push({
      from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
      to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
      message: str
    });
  };
  try {
    jsonlint.parse(text);
  } catch (e) {}
  return found;
});

import React, {Component, PropTypes}from 'react';
import ReactDOM from 'react-dom';
import _ from 'lodash';
import Select from 'react-select';

import ReactCodemirror from 'react-codemirror';
import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript';
import jsonlint from 'jsonlint';
import lint from 'codemirror/addon/lint/lint';

import TopologyREST from '../rest/TopologyREST';
import FSReactToastr from './FSReactToastr';
import TopologyUtils from '../utils/TopologyUtils';

CodeMirror.registerHelper("lint", "json", function(text) {
  var found = [];
  var {parser} = jsonlint; 
  parser.parseError = function(str, hash) {
    var loc = hash.loc;
    found.push({from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
                to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
                message: str});
  };
  try { jsonlint.parse(text); }
  catch(e) {}
  return found;
});

export default class OutputSchema extends Component {
	static propTypes = {
		topologyId: PropTypes.string.isRequired,