Monaco-editor: editor.addCommand default fallback

Created on 19 Apr 2018  路  6Comments  路  Source: microsoft/monaco-editor

Hi, I could not find in the documentation and source code if it's possible to call addCommand of editor and fire a fallback for the default behaviour?

For example, I'm creating a handler for the "DELETE" button, but it's conditional and I want to use the normal browser behaviour if the condition does not satisfy.

Most helpful comment

first, create a context key
const ctxKey = editor.createContextKey('condition', false)
then you can use ctxKey.set(true) or ctxKey.set(false) to set its state.

finally use addCommand like:

  editor.addCommand(
    monaco.KeyCode.Delete,
    () => {
      // your handler here
    },
    'condition',
  )

only condition set to true will trigger your delete command, otherwise it will fallback to the default functionality.
btw. you could also use multiple conditions like 'condition1 && !condition2'

FYI. there is a builtin context key called suggestWidgetVisible that could tell the suggest widget is visible or not.

All 6 comments

first, create a context key
const ctxKey = editor.createContextKey('condition', false)
then you can use ctxKey.set(true) or ctxKey.set(false) to set its state.

finally use addCommand like:

  editor.addCommand(
    monaco.KeyCode.Delete,
    () => {
      // your handler here
    },
    'condition',
  )

only condition set to true will trigger your delete command, otherwise it will fallback to the default functionality.
btw. you could also use multiple conditions like 'condition1 && !condition2'

FYI. there is a builtin context key called suggestWidgetVisible that could tell the suggest widget is visible or not.

Thanks @troy351. Is it the only one option? In my case the condition is being defined inside "onDelete" handler. So basically when I hit delete I check the cursor position and if it is under some rules I what to perform my own version of code, otherwise - normal delete.

More detailed example. I'm trying to use ranges as immutable entities in the editor. That means that if someone wants to delete the range they can delete only the entire range, otherwise they remove character by character.

@myfoxtail you may check cursor position and set context key state in onDidChangeCursorPosition event, command handler only do the delete thing.
That's what I do in my emmet plugin, though it will check whenever cursor moves.
Maybe @alexandrudima could suggest a better way.

Ok, I'll play with it more.. Thanks guys.

I've tried with onDidChangeCursorPosition it works perfectly. I'm closing this question.

Hi, I have a question sort of related to this but is it possible to create an addCommand that does the default behavior as well as my additional command? For example, I want the backspace key to backspace but then trigger the suggestions drop down as well. I can't seem to write an addCommand for backspace without it disabling backspace in general.

I've also tried just triggering the suggestions dropdown on every change in the editor (so not using addCommand) but oddly enough, my suggestions box doesn't stay open. Maybe something small I'm missing here.

I'm using this as my command for triggering the box:
editor.trigger('triggerSuggestForErrorFix', 'editor.action.triggerSuggest');

Was this page helpful?
0 / 5 - 0 ratings

Related issues

PinkyJie picture PinkyJie  路  3Comments

Spongman picture Spongman  路  3Comments

andreymarchenko picture andreymarchenko  路  3Comments

Kedyn picture Kedyn  路  3Comments

Panhaiwei picture Panhaiwei  路  3Comments