oleg
/
monaco-editor
огледало од https://github.com/microsoft/monaco-editor.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
	<base href="..">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/


/*----------------------------------------SAMPLE CSS END*/
</style>
<a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples

<div id="bar" style="margin-bottom: 6px;"></div>

<div style="clear:both"></div>
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->

<div id="container" style="height:100%;"></div>


<!-- ----------------------------------------SAMPLE HTML END-->
</div>
<div style="clear:both"></div>

<script src="../metadata.js"></script>
<script src="dev-setup.js"></script>
<script>
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/

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"
});


/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>