Autocomplete is not working with my mixed language parser

1

I’m having trouble with autocomplete in my mixed language parser. The parser is designed to handle js code within double curly braces and plain text outside. While the parser seems to be functioning correctly, autocomplete isn’t working as expected. I’m trying to provide autocomplete suggestions for both js and custom completions. Any clue what the issue is here? Any help would be much appreciated!

This is my customLanguage.grammar file:

@top Document { (TextContent | JsBlock)* }

JsBlock { "{{" JsContent "}}" }

@tokens {
  TextContent { ![\{\}]+ }
  JsContent { ![\{\}]+ }
}

This is my parser.ts file:

// This file was generated by lezer-generator. You probably shouldn't edit it.
import {LRParser} from "@lezer/lr"
export const parser = LRParser.deserialize({
  version: 14,
  states: "zQQOPOOOYOQO'#C_OOOO'#Ca'#CaQQOPOOO_OPO,58yOOOO-E6_-E6_OOOO1G.e1G.e",
  stateData: "d~OQQOVPO~OSSO~OWUO~O",
  goto: "aUPPPVPZTQORQRORTR",
  nodeNames: "⚠ Document TextContent JsBlock JsContent",
  maxTerm: 8,
  skippedNodes: [0],
  repeatNodeCount: 1,
  tokenData: "!l~RVO#oh#o#p!U#p#qh#q#r!a#r;'Sh;'S;=`!O<%lOhRoTSQQPO#oh#p#qh#r;'Sh;'S;=`!O<%lOhR!RP;=`<%lh~!XP#o#p![~!aOV~~!dP#q#r!g~!lOW~",
  tokenizers: [0, 1],
  topRules: {"Document":[0,1]},
  tokenPrec: 0
})

This is my mixedParser.ts:

import { parser as jsParser } from '@lezer/javascript';
import { parseMixed } from '@lezer/common';
import { LRLanguage } from '@codemirror/language';
import { parser } from './parser';

export const mixedParser = parser.configure({
    wrap: parseMixed((node) => {
        if (node.type.name === 'JsBlock') {
            return { parser: jsParser };
        }
        return null;
    }),
});

const customLanguage = LRLanguage.define({ parser: mixedParser });

export { customLanguage as javascriptAndPlainTextParser };

This is my autocomplete.config.ts:

import { completeFromList } from '@codemirror/autocomplete';
import { javascript } from '@codemirror/lang-javascript';
import { LRLanguage, LanguageSupport } from '@codemirror/language';
import { javascriptAndPlainTextParser } from 'src/containers/TemplateEditor/SidebarRight/TemplateInputInfo/Settings/ExpressionEditor/CustomLanguage/Parser/mixedParser';

const mixedLanguage = LRLanguage.define({
    parser: javascriptAndPlainTextParser.parser,
});

const customJavascriptSupport = (): LanguageSupport => {
    return new LanguageSupport(javascriptAndPlainTextParser, [
        javascriptAndPlainTextParser.data.of({
            autocomplete: completeFromList([{ label: 'inside js node' }]),
        }),
    ]);
};

export const mixedLanguageSupport = (): LanguageSupport => {
    return new LanguageSupport(mixedLanguage, [
        mixedLanguage.data.of({
            autocomplete: completeFromList([{ label: 'outside js node' }]),
        }),
        customJavascriptSupport().support,
        javascript().support,
    ]);
};

This is my editorState.ts:

import { EditorState } from '@codemirror/state';
import { basicSetup } from 'codemirror';
import { EditorView } from '@codemirror/view';
import { autocompletion } from '@codemirror/autocomplete';
import { mixedLanguageSupport } from './Autocomplete/autocomplete.config';
import { javascriptAndPlainTextParser } from './CustomLanguage/Parser/mixedParser';
import highlightExtensions from './SyntaxHighlighting/syntaxhighlighting.config';

export const createEditorState = (doc: string): EditorState => {
    return EditorState.create({
        doc,
        extensions: [
            basicSetup,
            javascriptAndPlainTextParser,
            mixedLanguageSupport(),
            autocompletion(),
            EditorView.lineWrapping,
            ...highlightExtensions,
        ],
    });
};

Thanks! :slight_smile: