Expose quick-open functionality

[avgrad]

For a project I am working on I would love to use the QuickOpen functionality of the monaco editor for custom command-lists (or selection, ...) after executing another command.

An example for what I mean could be the "Go To Line" command, wich opens a new QuickOpen View and after executing shows a single command which jumps to the given line.

I imagine adding custom actions like "Rename file..." (action outside of monaco) or "Switch Language Mode...".

I tried to get the responsible controller and show it, but i didn't get it to work, because of exceptions about the object properties of QuickOpenModel (just giving an array does not work). I got it to work by extending IActionDescriptor by getQuickOpenEntries() (this or run() is required in the addAction method of StandaloneCodeEditor, which does the magic). What I didn't get to work here was a usable build from my custom-code (like npm-folder with dev, min, ...).

If this is appreciated by others, maybe we could get this to work for everyone.

[veeramarni]

@sydeslyde I'm looking for something to make the QuickOpen work, what were you tried that is working for you?

[avgrad]

@veeramarni As i described I tried adding the functionality myself by extending src/vs/editor/standalone/browser/standaloneCodeEditor.ts.

It has been quite some time since I tried this, and there are probably some things that changed since then or could be improved, but you can try to use this git diff result to replicate my changes. gitdiff.txt

As I said, I didn't finish that experiment, since I didn't find out how to build the standalone monaco editor properly, so I still hope we can discuss this feature, and then probably I could make a pull request when appreciated by the main contributers (@alexandrudima , ...)

[michael-hawker]

Yeah, I was just looking for a way to re-use the command palette for input like I've seen a lot of commands do in VS code. I want to expose a 'Load Sample' type command which then as a 'step 2' shows a list of samples the user could just type and select from within the command palette. Then it would execute the command for the selected sample after.

[Sparkenstein]

Any plans for adding this? It would be a good feature to have

[voorjaar]

I had a similar problem today, and found a hacker solution. Until this feature is implemented, I think you guys can use this solution.

import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput';

// Create your editor instance...
let editor = monaco.editor.create(
  // ...
);

// Add a new command, for getting an accessor.
let quickInputCommand = editor.addCommand(0, (accessor, func) => {
    // a hacker way to get the input service
    let quickInputService = accessor.get(IQuickInputService)
    func(quickInputService)
});

editor.addAction({
    id: "myQuickInput",
    label: "Test Quick Input",
    run: (editor) => {
         // create quick input
         editor.trigger("", quickInputCommand, (quickInput) => {
             quickInput.pick([
                {
                    type: 'item',
                    id: "my_quick_item",
                    label: "MyQuickItem",
                },
                {
                    type: 'item',
                    id: "my_quick_item2",
                    label: "MyQuickItem2",
                },
                {
                    type: 'item',
                    id: "my_quick_item3",
                    label: "MyQuickItem3",
                },
             ]).then((selected) => {
                console.log(selected)
             })
         })
    }
})

For more details you can refer to this answer I wrote.

[honestabelink]

@voorjaar, When I try this I get Value: Error: [invokeFunction] unknown service 'quickInputService'. Do you remember the version of monaco-editor this worked for.

Running inside electron if that makes a difference.

[manikantag]

To open command palette & filter available actions, hacky solution mentioned in this comment https://github.com/microsoft/monaco-editor/issues/193#issuecomment-1105252649 worked for me (again a hacky solution for the desperate and to filter only the available commands. tested with 0.34.1, 0.35.0 versions)

I tweaked the workaround a little bit to limit the querySelector only to monaco elements.

editor.focus(); // Editor needs focus to be able to trigger command
editor.trigger("", "editor.action.quickCommand", ""); // Opens the quickcommand
const input = editor.getDomNode().querySelector(".quick-input-box .input"); // Gets the quickcommand input
input.value = `> filter text`; // Change the input value
input.dispatchEvent(new Event("input", { bubbles: true })); // Trigger an input event, for the search to register the new input value

[keadex]

@honestabelink In my case I got that error because I was using the @monaco-editor/react library. That library internally loads another instance of the Monaco editor from the CDN. This causes having two Monaco instances not synchronized.

To fix that error I just added:

import Editor, { loader } from '@monaco-editor/react'
import * as monaco from 'monaco-editor'

loader.config({ monaco })

More details here -> https://www.npmjs.com/package/@monaco-editor/react#use-monaco-editor-as-an-npm-package