Editor Command Palette Block for React

So you can see it without a click. On load the palette is the Command drawn inline over a picture of the editor, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette component and share the block's state, so the mode and the text you typed in the copy are in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

The block keeps the mode apart from the text. In the plain file search a first >, @, : or ? is taken out of the input and becomes the mode, shown as a chip in front of it, so the input holds only what you search for. Backspace on an empty input drops the chip and goes back to files; Escape closes the palette. The ? mode lists the four modes as rows, and choosing one switches to it without closing. rowsFor returns the rows of the current mode, so a new mode is one function and one entry in MODES.

It shows one row, "Go to line 7", for a number from 1 to 12, the length of the drawn file; a bigger number reads "Go to the last line, 12" and says it is past the end, and anything that is not a number shows what to type. Choosing the row moves the drawn caret there. In your editor read the line count from the open document.

They are shown as data, the way an editor lists its own bindings: Toggle sidebar says ⌘B, and the demo does not bind it. Choosing the row runs the command here. The keys read Ctrl or Alt on systems that are not Apple's, swapped in after the page loads. In your app show the bindings your editor really has.

Everything. Opening a file moves it to the front of the recent list and switches the drawn tab; Toggle sidebar hides the drawn explorer, Next tab and Previous tab move between the three tabs, and the rest of the commands only say what they would do. In your app replace pick with calls to your editor: open the file, run the command, move the cursor.

Yes. Type to search, the arrow keys move through the rows, Enter chooses and Escape closes the palette and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The count is spoken a moment after typing stops, and a mode change says its name. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The real dialog is named by its title and described by its sentence.