From 3345377dd09f4234c82e814dfaa310f69fa48386 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sat, 22 Nov 2025 11:50:55 +0000
Subject: fix: use kbd for editor card

---
 .../components/dashboard/bookmarks/EditorCard.tsx  | 34 +++++-----------------
 1 file changed, 7 insertions(+), 27 deletions(-)

(limited to 'apps/web/components/dashboard/bookmarks')

diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index b80cd889..fa752c5f 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -1,8 +1,8 @@
 import type { SubmitErrorHandler, SubmitHandler } from "react-hook-form";
-import React, { useEffect, useImperativeHandle, useRef } from "react";
+import React, { useImperativeHandle, useRef } from "react";
 import { ActionButton } from "@/components/ui/action-button";
 import { Form, FormControl, FormItem } from "@/components/ui/form";
-import InfoTooltip from "@/components/ui/info-tooltip";
+import { Kbd } from "@/components/ui/kbd";
 import MultipleChoiceDialog from "@/components/ui/multiple-choice-dialog";
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
@@ -17,6 +17,7 @@ import {
 import { cn, getOS } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
+import { useHotkeys } from "react-hotkeys-hook";
 import { z } from "zod";
 
 import { useCreateBookmarkWithPostHook } from "@karakeep/shared-react/hooks/bookmarks";
@@ -24,27 +25,6 @@ import { BookmarkTypes } from "@karakeep/shared/types/bookmarks";
 
 import { useUploadAsset } from "../UploadDropzone";
 
-function useFocusOnKeyPress(
-  inputRef: React.RefObject<HTMLTextAreaElement | null>,
-) {
-  useEffect(() => {
-    function handleKeyPress(e: KeyboardEvent) {
-      if (!inputRef.current) {
-        return;
-      }
-      if ((e.metaKey || e.ctrlKey) && e.code === "KeyE") {
-        inputRef.current.focus();
-        e.preventDefault();
-      }
-    }
-
-    document.addEventListener("keydown", handleKeyPress);
-    return () => {
-      document.removeEventListener("keydown", handleKeyPress);
-    };
-  }, [inputRef]);
-}
-
 interface MultiUrlImportState {
   urls: URL[];
   text: string;
@@ -70,7 +50,9 @@ export default function EditorCard({ className }: { className?: string }) {
   });
   const { ref, ...textFieldProps } = form.register("text");
   useImperativeHandle(ref, () => inputRef.current);
-  useFocusOnKeyPress(inputRef);
+  useHotkeys("mod+e", () => {
+    inputRef.current?.focus();
+  });
 
   const { mutate, isPending } = useCreateBookmarkWithPostHook({
     onSuccess: (resp) => {
@@ -215,9 +197,7 @@ export default function EditorCard({ className }: { className?: string }) {
       >
         <div className="flex justify-between">
           <p className="text-sm">{t("editor.new_item")}</p>
-          <InfoTooltip size={15}>
-            <p className="text-center">{t("editor.quickly_focus")}</p>
-          </InfoTooltip>
+          <Kbd>⌘ + E</Kbd>
         </div>
         <Separator />
         <FormItem className="flex-1">
-- 
cgit v1.2.3-70-g09d2