Volume intellisense--path suggestions

[bwateratmsft]

Investigate if it's possible to suggest file paths in volume mappings (host-side only, container side is impossible)

[bwateratmsft]

One thing I'm not sure about is if you can switch into another completion, while inside a completion already, and then switch back. For volumes we have a completion to help them with syntax, and IMO this is more important than one to help them with file paths (which they are likely to copy/paste anyway). If we have to choose one or the other, I'd choose syntax.

[rcjsuen]

One thing I'm not sure about is if you can switch into another completion, while inside a completion already, and then switch back.

Can you clarify what you mean here? Wouldn't the text caret determine whether you want syntax support or path support?

[bwateratmsft]

We have a completion for volumes that basically gives this snippet:

${1:hostPath}:${2:containerPath}:${3|rw,ro|}$0

The tab stops there help them get the hostPath:containerPath:mode syntax right. So the question is, can we switch to path completions when in the hostPath tab stop, to help them author a file path on the host machine, and then go back to the volume syntax completion after? I'm not even sure if that's possible in VSCode.

[rcjsuen]

@bwateratmsft Oh, I see what you mean now. It can kind of work...? 🤔 See below...

1. Paste the attached JavaScript code into the Monaco playground.
2. Click the "Run" button.
3. Place the text caret in the editor on the right-hand side.
4. Invoke Intellisense.
5. Accept "volume" with enter.
6. Invoke Intellisense.
7. Select "/host/path" with enter.
8. Tab to "containerPath".
9. Select "/container/path" with enter.
10. Tab to "rw".

function createDependencyProposals(word, range) {
    if (word.word === "hostPath") {
        return [
            {
                label: '/host/path',
                insertText: '/host/path',
                range: range
            }
        ]; 
    }
    if (word.word === "containerPath") {
        return [
            {
                label: '/container/path',
                insertText: '/container/path',
                range: range
            }
        ]; 
    }
	return [
		{
			label: 'volume',
			insertText: '${1:hostPath}:${2:containerPath}:${3|rw,ro|}$0',
			insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
			range: range
		}
	];
}

monaco.languages.registerCompletionItemProvider('plaintext', {
	provideCompletionItems: (model, position) => {
		const word = model.getWordUntilPosition(position);
		const range = {
			startLineNumber: position.lineNumber,
			endLineNumber: position.lineNumber,
			startColumn: word.startColumn,
			endColumn: word.endColumn
		};
		return {
			suggestions: createDependencyProposals(word, range)
		};
	}
});

monaco.editor.create(document.getElementById('container'), { language: 'plaintext' });