microsoft / microsoft/monaco-editor
[Bug]
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 46.8k
- Forks
- 4.1k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 1
Description
Reproducible in vscode.dev or in VS Code Desktop?
- Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- Not reproducible in the monaco editor playground
Monaco Editor Playground Link
import React, { useState } from 'react';
import { Editor, useMonaco } from '@monaco-editor/react';
const JavaEditor = () => {
const monaco = useMonaco();
const [isMonacoReady, setIsMonacoReady] = useState(false);
const handleEditorMount = (editor, monacoInstance) => {
if (monacoInstance && !isMonacoReady) {
setIsMonacoReady(true);
// Register Java language
try {
monacoInstance.languages.register({ id: 'java' });
// Register completion items for Java
monacoInstance.languages.registerCompletionItemProvider('java', {
provideCompletionItems: (model, position) => {
const suggestions = [
{
label: 'sys',
kind: monacoInstance.languages.CompletionItemKind.Function,
insertText: 'System.out.println(${1:message});',
insertTextRules: monacoInstance.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Prints a message to the console.',
},
{
label: 'String',
kind: monacoInstance.languages.CompletionItemKind.Class,
insertText: 'String',
documentation: 'Represents a sequence of characters.',
},
{
label: 'Scanner',
kind: monacoInstance.languages.CompletionItemKind.Class,
insertText: 'Scanner ${1:scanner} = new Scanner(${2:System.in});',
insertTextRules: monacoInstance.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Used to read input from the user.',
},
{
label: 'main',
kind: monacoInstance.languages.CompletionItemKind.Function,
insertText: 'public static void main(String[] args) {\n\t${1:// write your code here}\n}',
insertTextRules: monacoInstance.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Main entry point for a Java program.',
},
];
return { suggestions };
},
});
// Register hover provider
monacoInstance.languages.registerHoverProvider('java', {
provideHover: function (model, position) {
const word = model.getWordAtPosition(position);
if (word) {
return {
contents: [
{
value: `**Java Autocomplete**\n\nThis is a custom tooltip for ${word.word}`,
},
],
};
}
},
});
} catch (error) {
console.error('Error initializing Monaco editor:', error);
}
}
};
return (
<div style={{ height: '500px' }}>
);
};
export default JavaEditor;
Monaco Editor Playground Code
Reproduction Steps
No response
Actual (Problematic) Behavior
Expected Behavior
Working but while reloading. I getting this issue
Additional Context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the supplied React example using @monaco-editor/react and the Monaco Editor Playground link, then reproduce the behavior during reload described in the issue. Compare the observed result with the attached screenshot and the stated expected behavior; the issue is complete when the reload problem is reproduced, its cause is identified, and the behavior works as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100