From a885415e7883820a335731bda2cc87c57b59aac4 Mon Sep 17 00:00:00 2001
From: Ellie Huxtable <ellie@elliehuxtable.com>
Date: Wed, 17 Jul 2024 18:04:36 +0100
Subject: [PATCH] [2024-07-17] Add new note

---
 ...custom keybinding with react codemirror.md | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 content/notes/custom keybinding with react codemirror.md

diff --git a/content/notes/custom keybinding with react codemirror.md b/content/notes/custom keybinding with react codemirror.md
new file mode 100644
index 00000000..dcf5cf2d
--- /dev/null
+++ b/content/notes/custom keybinding with react codemirror.md	
@@ -0,0 +1,40 @@
+---
+title: Custom keybinding with react-codemirror
+date: 2024-07-17
+---
+
+I'm currently using uiwjs/react-codemirror for a project, and needed to add a custom binding to cmd+enter
+
+The documentation didn't quite show what I needed, but with the following you can bind custom keys
+
+```js
+`import React from 'react'; 
+import CodeMirror from '@uiw/react-codemirror'; 
+import { keymap } from '@codemirror/view'; 
+import { defaultKeymap } from '@codemirror/commands'; 
+
+const MyCodeEditor = () => { 
+	const handleCmdEnter = React.useCallback((view) => { 
+		console.log('Cmd+Enter pressed!'); 
+		return true; 
+	}, []); 
+	
+	const customKeymap = keymap.of([ 
+		{ 
+			key: 'Mod-Enter', 
+			run: handleCmdEnter, 
+		}, 
+	]); 
+	
+	return ( 
+		<CodeMirror 
+			value="code and stuff" 
+			extensions={[customKeymap]} 
+		/> 
+	); 
+}; 
+
+export default MyCodeEditor;`
+```
+
+Note that you may need to ensure your keymap extension is listed _before_ other extensions, otherwise it may be handled too soon.---