How to add custom completer in react ace editor from outside of language_tools

Question

How to add custom completer in react based ace editor from index.js using functions like addCompleter or setCompleter

import { render } from "react-dom";
import AceEditor from "../src/ace";
import "brace/mode/jsx";
import 'brace/mode/HCPCustomCalcs'
import 'brace/theme/monokai'
import "brace/snippets/HCPCustomCalcs";
import "brace/ext/language_tools";
const defaultValue = `function onLoad(editor) {
  console.log("i've loaded");
}`;
class App extends Component {

  constructor(props, context) {
    super(props, context);
    this.onChange = this.onChange.bind(this);
}
onChange(newValue) {
    console.log('changes:', newValue);
}
  render() {

      return (
          <div>
              <AceEditor
                  mode="HCPCustomCalcs"
                  theme="monokai"
                  width={ '100%' }
                  height={ '100vh' }
                  onChange={this.onChange}
                  name="UNIQUE_ID_OF_DIV"
                  editorProps={{
                      $blockScrolling: true
                  }}
                  enableBasicAutocompletion={true}
                  enableLiveAutocompletion={true}
                  enableSnippets={true}
              />
          </div>
      );
  }
}
render(<App />, document.getElementById("example"));

i want to add my custom completer from here.my completer is something like this

var myCompleter ={
getCompletions: function(editor, session, pos, prefix, callback) {
        var completions = [];
        ["word1", "word2"].forEach(function(w) {

            completions.push({
                value: w,
                meta: "my completion",

            });
        });
        callback(null, completions);
    }
})}

In normal Ace-editor it was straight forward.By simply calling

var langTools = ace.require("ace/ext/language_tools")
langTools.addCompleter(myCompleter1);```

Answer 1

You can do something very similar to the normal Ace-editor.

const langTools = ace.acequire('ace/ext/language_tools');

langTools.addCompleter(myCompleter);

Using ace.acequire allows you to access hidden ACE features. Some documentation here: https://github.com/thlorenz/brace/wiki/Advanced:-Accessing-somewhat-hidden-ACE-features

Answer 2

i needed create the functionality with react JS, and i had a problem with the langTools, i don't coulded instancer with:

var langTools = ace.require("ace/ext/language_tools")
langTools.addCompleter(myCompleter1);```

the error returned addCompleter is not defined, so i used:

import { addCompleter } from 'ace-builds/src-noconflict/ext-language_tools';
addCompleter(myCompleter1);

That way I was able to run it without any problems.

auxilliars links:

https://gist.github.com/yuvalherziger/aa48782568c6914b55066d290ff88360 https://github.com/securingsincity/react-ace/issues/338