Use shift instead of capslock for multiple line selection (#62)

Use shift instead of caplock for multiple line selection

src/App.tsx

@@ -153,7 +153,10 @@ function App() {
             >
               format
             </button> */}
-            <div className="bg-red h-full w-full overflow-auto">
+            <div
+              className="bg-red h-full w-full overflow-auto"
+              id="code-mirror-override"
+            >
               <CodeMirror
                 className="h-full"
                 value={code}

src/hooks/useHotKeyListener.ts

@@ -1,11 +1,15 @@
 import { useStore } from '../useStore'
 import { useEffect } from 'react'
 
+// Kurt's note: codeMirror styling overrides were needed to make this work
+// namely, the cursor needs to still be shown when the editor is not focused
+// search for code-mirror-override in the repo to find the relevant styles
+
 export function useHotKeyListener() {
   const { setIsShiftDown } = useStore((s) => ({
     setIsShiftDown: s.setIsShiftDown,
   }))
-  const keyName = 'CapsLock' // TODO #32 should be shift, but shift conflicts with the editor's use of the shift key atm.
+  const keyName = 'Shift'
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) =>
       event.key === keyName && setIsShiftDown(true)

src/hooks/useSetCursor.ts

@@ -11,9 +11,5 @@ export function useSetCursor(sourceRange: Range) {
       ? [...selectionRanges, sourceRange]
       : [sourceRange]
     setCursor(ranges)
-    const element: HTMLDivElement | null = document.querySelector('.cm-content')
-    if (element) {
-      element.focus()
-    }
   }
 }

src/index.css

@@ -17,3 +17,12 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+#code-mirror-override .cm-focused .cm-cursor {
+  border-left: 1.2px solid black;
+}
+#code-mirror-override .cm-cursor {
+  display: block;
+  border-left: 5px solid #0084e2;
+}