I will not create a new problem, it will be considered a duplicate problem.
I have been using Monaco Editor for a long time in the tool I created earlier, and I also have a C3 Monaco Editor plugin.
So, I know the necessary improvements or new suggestions that should be added.
Monaco Editor is indeed more powerful than CodeMirror.
CodeMirror is lightweight but lacks complete features.
Meanwhile, Monaco Editor is quite heavy, but its features justify the performance cost.
Here are some additional feature suggestions:
reference code snippet from my plugin or from my tool.
suggest-widget reference code
function setSuggestionItemAlignment(sizeCompletion) {
const style = document.createElement('style');
style.innerHTML = `
.monaco-editor .suggest-widget .monaco-list-row {
width: ${rowWidth}px !important;
min-width: ${rowWidth}px !important;
max-width: ${rowWidth}px !important;
border-radius: 4px !important;
transition: background-color 0.2s ease-in-out;
}
.monaco-editor .suggest-widget .monaco-list-row:hover {
background-color: #171515 !important;
}
.monaco-editor .suggest-widget .monaco-list-row.selected {
background-color: #171515 !important;
}
.monaco-editor .suggest-widget .monaco-list-row .monaco-icon-label-container {
text-align: left !important;
font-size: ${sizeCompletion}px !important;
margin: 0 !important;
left: ${paddingLeft}px !important;
}
.monaco-editor .suggest-widget .monaco-icon-label {
flex: 1 !important;
display: block !important;
text-align: left !important;
align-items: flex-start !important;
}
`;
document.head.appendChild(style);
}
suggest-widget reference css
/* Main container for the suggest widget */
.monaco-editor .suggest-widget {
background-color: #1e1e1e !important; /* Main background color */
border: 1px solid #3c3c3c !important; /* Widget border */
color: #ffffff !important; /* Default text color */
font-size: 14px !important; /* Overall font size */
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}
/* List of items within the suggest widget */
.monaco-editor .suggest-widget .monaco-list {
background-color: #252526 !important; /* List background color */
font-size: 14px !important; /* Font size for items */
}
/* Each row/item in the list */
.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
padding: 6px 12px !important; /* Padding around each item */
border-bottom: 1px solid #3c3c3c !important; /* Separator line between items */
}
/* Appearance on item hover */
.monaco-editor .suggest-widget .monaco-list .monaco-list-row:hover {
background-color: #007acc !important; /* Background color on hover */
}
/* Style for highlighted text within an item */
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-highlighted-label {
color: #ffcc00 !important; /* Highlighted text color */
font-size: 14px !important; /* Font size for highlighted label */
}
/* If there is a scrollbar within the widget (optional) */
.monaco-editor .suggest-widget .scrollable-element {
scrollbar-color: #007acc #252526 !important; /* Color for scrollbar thumb and track */
}
/* Style for the currently selected item */
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.selected {
background-color: #005f9e !important; /* Background color for the selected item */
}
Add new existing api scripting including new api in future releases
construct.net/en/make-games/scripting-updates-8
function registerCustomSuggestions() {
if (langSet) {
// Adding custom suggestions
monaco.languages.registerCompletionItemProvider(langSet, {
provideCompletionItems: function (model, position) {
var suggestions = [
{
label: 'this._info.SetDOMSideScripts',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'this._info.SetDOMSideScripts(["c3runtime/domSide.js"]);',
detail: 'Using a DOM script'
},
{
label: 'this._info.AddC3RuntimeScript',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'this._info.AddC3RuntimeScript("c3runtime/bundle.js");',
detail: 'Adding a module script'
},
{
label: 'this._info.AddRemoteScriptDependency',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'this._info.AddRemoteScriptDependency("https://example.com/api-module.js", "module");',
detail: 'Load remote module script || Load remote "classic" script'
},
{
label: 'this._info.AddCordovaResourceFile',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'this._info.AddCordovaResourceFile({ src: "myfile.txt" });',
detail: 'Cordova resource file dependencies'
},
{
label: 'this._info.AddCordovaPluginReference',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'this._info.AddCordovaPluginReference({id: "cordova-plugin-inappbrowser"});',
detail: 'Cordova plugin dependencies'
},
{
label: 'this._info.AddFileDependency',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'this._info.AddFileDependency({ filename: "mydependency.js", type: "external-dom-script" });',
detail: 'File dependencies'
},
{
label: 'this._info.SetRuntimeModuleMainScript',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'this._info.SetRuntimeModuleMainScript("c3runtime/main.js");',
detail: 'Configuring use of modules'
},
{
label: 'this._info.SetTypeScriptDefinitionFiles',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'this._info.SetTypeScriptDefinitionFiles(["c3runtime/ISpriteInstance.d.ts"]);',
detail: 'SetTypeScriptDefinitionFiles(arr)'
},
...........
.........
........ other
];
return { suggestions: suggestions };
}
});
}
}