react-codemirror icon indicating copy to clipboard operation
react-codemirror copied to clipboard

Event missing using keymap

Open guillermoamaral opened this issue 1 year ago • 2 comments

Hello sr!

For some reason that I ignore, after upgrading version (I guess that was what happen), I stop getting the event in the handler of an extra key specified in keymap (and I do need to stop event propagation):

<CodeMirror
		extensions={[Prec.highest(keymap.of(this.extraKeys()))]}
		theme={this.theme()}
		value={value}
		onChange={this.valueChanged}
		/>

extraKeys() {
	return [
		{
			key: "Enter",
			run: this.enterPressed,
		},
		{
			key: "Shift-Enter",
			run: this.enterPressed,
		},
	];
}

enterPressed = (editor, event) => {
	if (event.shiftKey || event.altKey) {
		event.stopPropagation();
		return;
	}
	event.preventDefault();
	if (this.props.onAccept) this.props.onAccept();
	this.clear();
	return true;
};

Any help is wellcome. Thanks!

guillermoamaral avatar Oct 31 '24 22:10 guillermoamaral

// Define custom key bindings
const myKeymap = [
  {
    key: "Ctrl-s",
    run: (view) => {
      console.log("Save triggered!"); // Action to be taken when "Ctrl-s" is pressed
      return true; // Return true to indicate the key was successfully handled
    },
    preventDefault: true, // Prevents the default browser action for this key
  },
  {
    key: "Ctrl-b",
    run: (view) => {
      console.log("Bold formatting triggered!"); // Action to be taken when "Ctrl-b" is pressed
      return true; // Return true to indicate the key was successfully handled
    },
    preventDefault: true, // Prevents the default browser action for this key
  },
];

<CodeMirror
  extensions={[...myKeymap]} // Add keymap as an extension in the editor setup
/>

@guillermoamaral I’m not sure where the issue is, so here’s an example for your reference.

jaywcjlove avatar Nov 01 '24 05:11 jaywcjlove

Thanks!

The issue was that my hanlders (e.g., enterPressed = (editor, event)), expected (and received in a previous version) the event as a second parameter (with which they did things like event.preventDefault()). For some reason that stop happening and my handlers broke because event argument was undefined. I changed my code to use the property preventDefault and remove event argument from my handlers.

guillermoamaral avatar Nov 01 '24 13:11 guillermoamaral