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)} />