diff --git a/src/editor/FloatingToolbar.tsx b/src/editor/FloatingToolbar.tsx
index 3d9dd2f..fd698c9 100644
--- a/src/editor/FloatingToolbar.tsx
+++ b/src/editor/FloatingToolbar.tsx
@@ -33,6 +33,12 @@ export function FloatingToolbar({ editor }: { editor: Editor | null }) {
const [alignOpen, setAlignOpen] = useState(false);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
+ const openLink = () => {
+ if (!editor) return;
+ setLinkValue((editor.getAttributes("link").href as string) ?? "");
+ setLinkOpen(true);
+ };
+
useEffect(() => {
if (linkOpen) linkInputRef.current?.focus();
}, [linkOpen]);
@@ -46,6 +52,21 @@ export function FloatingToolbar({ editor }: { editor: Editor | null }) {
};
}, [editor]);
+ useEffect(() => {
+ if (!editor) return;
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key.toLowerCase() !== "k" || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey) return;
+ if (!editor.isFocused && !linkOpen) return;
+ e.preventDefault();
+ e.stopPropagation();
+ if (linkOpen) setLinkOpen(false);
+ else openLink();
+ };
+ window.addEventListener("keydown", onKey, true);
+ return () => window.removeEventListener("keydown", onKey, true);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [editor, linkOpen]);
+
if (!editor) return null;
const insertImage = async (file: File) => {
@@ -53,11 +74,6 @@ export function FloatingToolbar({ editor }: { editor: Editor | null }) {
editor.chain().focus().insertContent({ type: "figure", attrs: { src, placement: "full-width" } }).run();
};
- const openLink = () => {
- setLinkValue((editor.getAttributes("link").href as string) ?? "");
- setLinkOpen(true);
- };
-
const applyLink = () => {
const href = normalizeUrl(linkValue);
if (!href) {
@@ -126,7 +142,7 @@ export function FloatingToolbar({ editor }: { editor: Editor | null }) {
- {tool(editor.isActive("link") || linkOpen, () => (linkOpen ? setLinkOpen(false) : openLink()), "Link", )}
+ {tool(editor.isActive("link") || linkOpen, () => (linkOpen ? setLinkOpen(false) : openLink()), "Link (⌘K)", )}
{linkOpen && (
<>
setLinkOpen(false)} />