Recently, I embarked on a project to develop a browser-based editor using monaco and antlr for a unique programming language. Following an excellent guide, I found at , gave me a great start.
While Monaco provides basic suggestions with ctrl + space, I am eager to implement intelligent auto-completion (similar to intellisense) within monaco. What steps should I take to achieve this?
Monaco provides the ability to register your own completion provider, which applies across all editor instances for a specific language. To do this, use the languages.registerCompletionItemProvider method and pass an instance of your provider.
The structure of the provider class is straightforward. Here's a basic example:
export class CodeCompletionProvider implements languages.CompletionItemProvider {
public readonly triggerCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.\@(".split("");
public provideCompletionItems(model: ITextModel, position: Position, context: CompletionContext,
token: CancellationToken): ProviderResult<CompletionList> {
return {
incomplete: false,
suggestions: this.createInternalCompletionItems(replaceRange, model.editorMode),
};
}
return services.getCodeCompletionItems(sourceContext, position);
}
public resolveCompletionItem(item: CompletionItem, token: CancellationToken): ProviderResult<CompletionItem> {
return item;
}
}
The main task is to generate the completion items. One approach is to utilize my antlr4-c3 code completion core and enhance it with custom logic to create and utilize a symbol table for providing symbol information.
If you're looking for a powerful code completion tool, I highly suggest checking out Mike Lischke's C3 Code completion.
For more information on how to use C3 Code completion, take a look at the helpful tutorial provided by Strumenta: Strumenta Tutorial on using C3 Code completion
While there may be additional details beyond the scope of this answer, the tutorial is a great resource.
When it comes to integrating Code completion in Monaco with the Language Server Protocol (LSP), there are resources available to assist in the process. To learn more, check out this tutorial from the Strumenta site, specifically focusing on "The Basics" section which covers connecting to the LSP code completion hooks.
As I delve into the world of VS 2015 Typescript projects, I find myself faced with a myriad of build options. Many times, the questions and answers on Stack Overflow mention command line options that I'm not completely familiar with, especially when i ...
Whenever I attempt to deploy my Firebase cloud functions, I encounter the following error. Expected outcome: Successful deployment of functions. Error: Error: An issue occurred while reading functions/package.json: functions/lib/index.js is missing and ...
I'm fresh to the realm of TypeScript and modules. I have here a file/module that has got me puzzled, and I could really use some guidance on deciphering it: export default function MyAdapter (client: Pool): AdapterType { return { async foo ( ...
My current dilemma involves the need to position the focus/cursor at the end of text that is loaded within the Froala editor. I attempted to accomplish this using the focus event of Froala (events.focus), but unfortunately, it did not yield the desired out ...
Working with Angular 12 and encountering an error when trying to invoke a method within another method. Here is a simplified representation of my situation (in TypeScript, specifically for Angular: export class SomeClass { testvariable on ...
Trying to incorporate the PrimeReact Dropdown component in a NextJs app with TypeScript. Encountering an error when attempting to select options from the dropdown list: "Objects are not valid as a React child (found: object with keys {name, code})" The b ...
In my Angular application, I have a numeric textbox that displays a percentage value and allows users to update it. https://i.stack.imgur.com/eCOKe.png <label for="fees">Fees %</label> <div class="inpu ...
Within my application, I am working with an array of heroes which are displayed in a list using *ngFor. When a user clicks on a hero in the list, the hero is copied to a new variable and that variable is then bound to an input field using two-way binding. ...
Currently, I am in the process of migrating my Google Map functionality from ionic-native to JavaScript. I am facing an issue while attempting to modify the click listener of my map from a separate class. The problem seems to be related to property errors. ...
I have a list of essential items and I aim to generate a record based on the elements within that list. Each item in the required list will correspond to an empty array in the exist record. Essentially, I am looking to condense the following code into one ...
I am currently utilizing an autocomplete field that needs to fetch data from a MySQL database based on a PHP (YII2) action. The autocomplete field is currently being populated statically. Below is the code used to populate the autocomplete field: app.cont ...
I am facing an issue displaying the preview mode because the URL must contain specific parameters such as "category" and "slug" (as shown in the image below). Here is the error URL with undefined parameters Therefore, I am unable to retrieve the paramete ...
Looking to create a customizable customer letter in either plain text or HTML format that can be edited further by the customer. Considering using Handlebars.js to render an HTML template with mustache tags, using a JSON object for business information. T ...
I have a collection of menu buttons with icons, stored in an array of objects. The icon names are saved as strings that correspond to Material UI icons: interface MenuButton { text: string, onClickFunction: Function icon: string } export defau ...
Check out this example code: function enumerable(value: boolean) { return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { descriptor.enumerable = value; }; } class A { @enumerable(false) a: number = 1 b: number ...
I am attempting to pass a function that returns another function to material UI's onTouchTap event: <IconButton onTouchTap={onObjectClick(object)} style={iconButtonStyle} > <img alt={customer.name} className="object-img" src={obj ...
Is there a way to create a versatile function that can be applied to any interface derived from a top-level interface? This function should take an unpersisted interface (without an id property) and return a persisted one (with an id property). The two ma ...
country code: "ab", "aa", "fr", ... I need to create a custom pipe that will convert a countryCode into a countryName, such as: "ab" → "Abkhazian", "ch" → "Chinese", "fr" ...
I'm attempting to redirect the user to a specific URL when they click the back button in their browser. Here is the code snippet: constructor(private router: Router,private location: PlatformLocation) { let eventUrl = window.sessionSt ...
I am currently experiencing a challenge while attempting to create a custom validator using Angular. I have created a form for my sign-up page and wanted to ensure that the password and confirm password fields match by implementing a custom validator. Des ...