About recording key down event.

[Rexime]

Is there any way to record every key-down event when using the editor in my webapp?

[jaywcjlove]

@Rexime https://uiwjs.github.io/react-codemirror/#/extensions/events

import CodeMirror from '@uiw/react-codemirror';
import { events } from '@uiw/codemirror-extensions-events';

function App() {
  const [scrollTop, setScrollTop] = useState(0);

  const eventExt = events.scroll({
    scroll: (evn) => {
      setScrollTop(evn.target.scrollTop);
    },
  });

  const eventExt2 = events.content({
    focus: (evn) => {
      console.log('focus');
    },
    blur: (evn) => {
      console.log('blur');
    },
  });

  return <CodeMirror value="console.log('hello world!');" height="200px" extensions={[eventExt, eventExt2]} />;
}
export default App;

[Rexime]

Thanks a lot!!

[Rexime]

@jaywcjlove I wanted to save every key code event, but I did not know how to do it. The example you provided was not for that purpose. Is there any example of that? Thank you so much!

[jaywcjlove]

@Rexime I'm not sure what you need

react-codemirror/core/src/index.tsx

Lines 57 to 58 in 24285de

	/** Fired whenever a change occurs to the document. */
	onChange?(value: string, viewUpdate: ViewUpdate): void;

[Rexime]

@jaywcjlove I need to collect this kind of info https://www.toptal.com/developers/keycode. Like everytime I press a key, it will be recorded. I'm not sure if it's possible for the codemirror.

[jaywcjlove]

@Rexime

  const eventExt2 = events.content({
    keydown: (evn) => {
      console.log('keydown');
    },
  });

[Rexime]

@jaywcjlove Thank you soooo much!!!! You really made my day!