#162 fixed (#164)

Co-authored-by: = <[email protected]>

Author: RahulkumarRV

app/components/CodeEditor.tsx

@@ -10,6 +10,7 @@ import { useJsonDoc } from "~/hooks/useJsonDoc";
 import { getEditorSetup } from "~/utilities/codeMirrorSetup";
 import { darkTheme, lightTheme } from "~/utilities/codeMirrorTheme";
 import { useTheme } from "./ThemeProvider";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export type CodeEditorProps = {
   content: string;
@@ -98,6 +99,16 @@ export function CodeEditor(opts: CodeEditorProps) {
 
   const { minimal } = useJsonDoc();
 
+  useHotkeys(
+   "ctrl+a,meta+a,command+a",
+   (e) => {
+     e.preventDefault();
+     view?.dispatch({ selection: { anchor: 0, head: state?.doc.length } });
+   },
+   [view, state]
+ );
+
+
   return (
     <div>
       <div

app/components/CodeViewer.tsx

@@ -4,6 +4,7 @@ import { useRef, useEffect } from "react";
 import { getViewerSetup } from "~/utilities/codeMirrorSetup";
 import { darkTheme, lightTheme } from "~/utilities/codeMirrorTheme";
 import { useTheme } from "./ThemeProvider";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export function CodeViewer({ code, lang }: { code: string; lang?: "json" }) {
   const editor = useRef(null);
@@ -16,7 +17,7 @@ export function CodeViewer({ code, lang }: { code: string; lang?: "json" }) {
 
   const [theme] = useTheme();
 
-  const { setContainer } = useCodeMirror({
+  const { setContainer, view, state } = useCodeMirror({
     container: editor.current,
     extensions,
     value: code,
@@ -33,6 +34,15 @@ export function CodeViewer({ code, lang }: { code: string; lang?: "json" }) {
     }
   }, [editor.current]);
 
+  useHotkeys(
+    "ctrl+a,meta+a,command+a",
+    (e) => {
+      e.preventDefault();
+      view?.dispatch({ selection: { anchor: 0, head: state?.doc.length } });
+    },
+    [view, state]
+  );
+
   return (
     <div>
       <div ref={editor} />

app/components/JsonPreview.tsx

@@ -15,7 +15,8 @@ import { getPreviewSetup } from "~/utilities/codeMirrorSetup";
 import { lightTheme, darkTheme } from "~/utilities/codeMirrorTheme";
 import { CopyTextButton } from "./CopyTextButton";
 import { useTheme } from "./ThemeProvider";
-import {usePreferences} from '~/components/PreferencesProvider'
+import {usePreferences} from '~/components/PreferencesProvider';
+import { useHotkeys } from "react-hotkeys-hook";
 
 export type JsonPreviewProps = {
   json: unknown;
@@ -56,7 +57,7 @@ export function JsonPreview({ json, highlightPath }: JsonPreviewProps) {
 
   const [theme] = useTheme();
 
-  const { setContainer, view } = useCodeMirror({
+  const { setContainer, view, state } = useCodeMirror({
     container: editor.current,
     extensions,
     value: jsonMapped.json,
@@ -92,6 +93,15 @@ export function JsonPreview({ json, highlightPath }: JsonPreviewProps) {
     view.dispatch(transactionSpec);
   }, [view, highlighting, jsonMapped, highlightPath]);
 
+  useHotkeys(
+    "ctrl+a,meta+a,command+a",
+    (e) => {
+      e.preventDefault();
+      view?.dispatch({ selection: { anchor: 0, head: state?.doc.length } });
+    },
+    [view, state]
+  );
+
   const [hovering, setHovering] = useState(false);
 
   return (