Implementation of ghost text

[arun...@googlemail.com]

Hello,

i am struggling to make ghosttext work.

I am not sure if this is the right way to implement it but ghosttext is showing.

But when i press tab it does not apply the text and adds tab from cursor position.

var ghostTextArray = ["foo", "bar"]; //Find Match Text editor.on('input', function(){ var position = editor.getCursorPosition(); var token = editor.session.getTokenAt(position.row, position.column); for(var i = 0; i < ghostTextArray.length; i++){ //If Match if(ghostTextArray[i].startsWith(tokenVal)){ editor.setGhostText(ghostTextArray[i].slice(tokenVal.length), position); break; }; }; });

Is there any example of implementation of ghosttext?

Thanks

[Harutyun Amirjanyan]

ghostText is only meant as a way to display ghost text in the editor

If you want to display it as a part of autocomplete use

if (!editor.completer)
    Autocomplete.for(editor.completer)
editor.completer.inlineEnabled = true

[arun...@googlemail.com]

Is it not possible to use custom array and use ghosttext like in above code?

Not as a part of autocomplete.

For example:

var ghostTextArray = ["foo", "bar"];

[Harutyun Amirjanyan]

you could do 

var ghostTextArray = ["foo", "bar"];

//Find Match Text
var active = false

editor.on('input', function(){
  var position = editor.getCursorPosition();
  var token = editor.session.getTokenAt(position.row, position.column);

 var tokenVal = token && token.value || ""
  active = false

  for(var i = 0; i < ghostTextArray.length; i++){
      //If Match
 if(ghostTextArray[i].startsWith(tokenVal)){

 editor.setGhostText(active = ghostTextArray[i].slice(tokenVal.length), position);
 break;
 };
  };
});
editor.commands.addCommand({
    bindKey: {win: "Tab", mac: "Tab" },
    name: "completeGhostText", exec(editor) {
    if (!active) return false
    editor.insert(active)
    active = false
}})

or using autocompleter

//samples/autocompletion

// trigger extension
ace.require("ace/ext/language_tools");
var editor = ace.edit("example");
editor.session.setMode("ace/mode/html");
editor.setTheme("ace/theme/tomorrow");
// enable autocompletion and snippets
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});
editor.completers = [{
    getCompletions(editor, session, pos, prefix, callback) {
        callback(null, ["foo", "bar"].map(x=> {
            return {value: x}
        }))
    }
}]

var Autocomplete = ace.require("ace/autocomplete").Autocomplete;
var completer = editor.completer || Autocomplete.for(editor)
completer.inlineEnabled=true
 

https://mkslanc.github.io/ace-playground/?value=Ly9zYW1wbGVzL2F1dG9jb21wbGV0aW9uCgovLyB0cmlnZ2VyIGV4dGVuc2lvbgphY2UucmVxdWlyZSgiYWNlL2V4dC9sYW5ndWFnZV90b29scyIpOwp2YXIgZWRpdG9yID0gYWNlLmVkaXQoImV4YW1wbGUiKTsKZWRpdG9yLnNlc3Npb24uc2V0TW9kZSgiYWNlL21vZGUvaHRtbCIpOwplZGl0b3Iuc2V0VGhlbWUoImFjZS90aGVtZS90b21vcnJvdyIpOwovLyBlbmFibGUgYXV0b2NvbXBsZXRpb24gYW5kIHNuaXBwZXRzCmVkaXRvci5zZXRPcHRpb25zKHsKICAgIGVuYWJsZUJhc2ljQXV0b2NvbXBsZXRpb246IHRydWUsCiAgICBlbmFibGVTbmlwcGV0czogdHJ1ZSwKICAgIGVuYWJsZUxpdmVBdXRvY29tcGxldGlvbjogdHJ1ZQp9KTsKZWRpdG9yLmNvbXBsZXRlcnMgPSBbewogICAgZ2V0Q29tcGxldGlvbnMoZWRpdG9yLCBzZXNzaW9uLCBwb3MsIHByZWZpeCwgY2FsbGJhY2spIHsKICAgICAgICBjYWxsYmFjayhudWxsLCBbImZvbyIsICJiYXIiXS5tYXAoeD0%2BIHsKICAgICAgICAgICAgcmV0dXJuIHt2YWx1ZTogeH0KICAgICAgICB9KSkKICAgIH0gCn1dCgp2YXIgQXV0b2NvbXBsZXRlID0gYWNlLnJlcXVpcmUoImFjZS9hdXRvY29tcGxldGUiKS5BdXRvY29tcGxldGU7CnZhciBjb21wbGV0ZXIgPSBlZGl0b3IuY29tcGxldGVyIHx8IEF1dG9jb21wbGV0ZS5mb3IoZWRpdG9yKQpjb21wbGV0ZXIuaW5saW5lRW5hYmxlZD10cnVlIApjb21wbGV0ZXIKXDBcMDxzY3JpcHQgc3JjPSJodHRwczovL3d3dy51bnBrZy5jb20vYWNlLWJ1aWxkc0BsYXRlc3Qvc3JjLW5vY29uZmxpY3QvYWNlLmpzIj48L3NjcmlwdD4KPCEtLSBsb2FkIGFjZSBsYW5ndWFnZSB0b29scyAtLT4KPHNjcmlwdCBzcmM9Imh0dHBzOi8vd3d3LnVucGtnLmNvbS9hY2UtYnVpbGRzQGxhdGVzdC9zcmMtbm9jb25mbGljdC9leHQtbGFuZ3VhZ2VfdG9vbHMuanMiPjwvc2NyaXB0Pgo8ZGl2IGlkPSdleGFtcGxlJyBzdHlsZT0iaGVpZ2h0OiAxMDAlIj48L2Rpdj4K#autocompletion

[arun...@googlemail.com]

Thank you for the example. Very helpful.