Autocomplete does not trigger in parentheses

1

Hello,

I implemented Autocompletion in my editor and it is working fine.
But if I try to trigger it within parentheses, i.e.

drawCircle(mou|

the autocompletion is not triggered (it should show “mouse”). Outside the brackets it works.

I think I found the problem in the matchBefore-method in codemirror/autocomplete:

matchBefore(expr) {

        let line = this.state.doc.lineAt(this.pos);
        let start = Math.max(line.from, this.pos - 250);
        let str = line.text.slice(start - line.from, this.pos - line.from);
        let found = str.search(ensureAnchor(expr, false));
        return found < 0 ? null : { from: start + found, to: this.pos, text: str.slice(found) };
    }

This yields the whole string ‘drawCircle(mou’ and therefore the autocompletion for ‘mouse’ is not triggered.

I think there should be an option to configure the autocomplete package to define delimiter-characters such that you can specify to break at such characters like ‘(’ or ‘,’. Another solution would be to set the hard-coded 250 to 0.

You can find my editor here. Just type ‘mou’ in a free line and you will get the hints. If you type ‘drawCircle(mou’ there won’t be a completion.

2

What regular expression are you passing to matchBefore?

3

I do not pass anything, the package does this on its own.
I think, this (showing no hints if caret is in brackets) is standard behaviour of CM 6, isn’t it?

4

How did you set up autocompletion, then?

5

Thanks in advance. This should be the relevant code:

this.language=new Compartment();
      let editor=new EditorView({
        state: EditorState.create({
          doc: "",
          extensions: [
            basicSetup,
            EditorView.lineWrapping,
            indentUnit.of("  "),
            this.language.of(javascript()),
            keymap.of([indentWithTab]),
            EditorView.updateListener.of((v) => {
              if(!changed){
                changed=v.docChanged;
              }
              if(changed){
                this.size=v.state.doc.length;
              }
              if(timer) clearTimeout(timer);
              timer = setTimeout(() => {
                if (changed) {
                  this.update(v);
                  changed=false;
                }
              }, 500 );
            }),
          ]
        }),
        parent: this.$refs.editor
      });

So I use the autocompletion out of the box.

6

The standard completion provided by javascript() will never complete mouse, so I think you’re misunderstanding something.

7

Okay, you’re right. I also take the snippets from @codemirror/lang-javascript and remove all existing snippets. After that I add new snippets a ka

snippets.push(autocomplete.snippetCompletion("Math.pow(${basis},${exp})", {
    label: "Math.pow",
    info: "Berechnet basis hoch exp.",
    type: "function"
  }));

As I said, the hints are displayed outside of brackets, but not inside.

8

Thank you very much for your quick answers by the way. I really appreciate that!

9

JavaScript autocompletion works fine for me inside square and curly brackets.

10

Okay, now it works after reading your autocompletion example.
Thank you very much!