Comments (1)
@51yu There is an official example, you can refer to it.
function createDependencyProposals(range) {
// returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
// here you could do a server side lookup
return [
{
label: '"lodash"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "The Lodash library exported as Node.js modules.",
insertText: '"lodash": "*"',
range: range,
},
{
label: '"express"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "Fast, unopinionated, minimalist web framework",
insertText: '"express": "*"',
range: range,
},
{
label: '"mkdirp"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "Recursively mkdir, like <code>mkdir -p</code>",
insertText: '"mkdirp": "*"',
range: range,
},
{
label: '"my-third-party-library"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "Describe your library here",
insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
insertTextRules:
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
range: range,
},
];
}
monaco.languages.registerCompletionItemProvider("json", {
provideCompletionItems: function (model, position) {
// find out if we are completing a property in the 'dependencies' object.
var textUntilPosition = model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column,
});
var match = textUntilPosition.match(
/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/
);
if (!match) {
return { suggestions: [] };
}
var word = model.getWordUntilPosition(position);
var range = {
startLineNumber: position.lineNumber,
endLineNumber: position.lineNumber,
startColumn: word.startColumn,
endColumn: word.endColumn,
};
return {
suggestions: createDependencyProposals(range),
};
},
});
monaco.editor.create(document.getElementById("container"), {
value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
language: "json",
});
from react-monacoeditor.
Related Issues (20)
- Webpack compilation warning in 0.29.0 with DOMPurify
- support for nextJs HOT 2
- Autocomplete with Antlr4 grammar file HOT 1
- EditorSimpleWorker.loadForeignModule error
- Support for error highlighting HOT 1
- Liquid not in the list on the demo website HOT 2
- Can you please name the code block HOT 3
- React render two Editors instead of one HOT 5
- 如何自动格式化代码 HOT 7
- Perhaps its not a good idea to trigger 'registerCompletionItemProvider' with 'value' HOT 1
- YAML multiline code has invalid color highlighting
- cmd+f in the Monaco Editor, find/search box not appearing HOT 1
- Cannot read properties of null (reading 'useState') HOT 4
- how to use it to debug my code HOT 5
- Unexpected character '' error HOT 4
- 请教个问题,默认高亮一些字段 HOT 2
- Not work in IOS 12
- error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'. HOT 3
- Dependency Dashboard
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-monacoeditor.