fix: Link UX (#1304)

* Changed how keyboard shortcut works and fixed redirects

* Fixed lint

* Changed default protocol to https

* Added protocols list

* Made protocol prefix get added to the `url` prop instead of only on render

* Fixed lint

Author: matthewlipski

packages/core/src/editor/BlockNoteExtensions.ts

@@ -19,6 +19,10 @@ import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlu
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 import { KeyboardShortcutsExtension } from "../extensions/KeyboardShortcuts/KeyboardShortcutsExtension.js";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin.js";
+import {
+  DEFAULT_LINK_PROTOCOL,
+  VALID_LINK_PROTOCOLS,
+} from "../extensions/LinkToolbar/protocols.js";
 import { NodeSelectionKeyboardPlugin } from "../extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.js";
 import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin.js";
 import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin.js";
@@ -159,14 +163,9 @@ const getTipTapExtensions = <
     // marks:
     Link.extend({
       inclusive: false,
-      addKeyboardShortcuts() {
-        return {
-          "Mod-k": () => {
-            this.editor.commands.toggleLink({ href: "" });
-            return true;
-          },
-        };
-      },
+    }).configure({
+      defaultProtocol: DEFAULT_LINK_PROTOCOL,
+      protocols: VALID_LINK_PROTOCOLS,
     }),
     ...Object.values(opts.styleSpecs).map((styleSpec) => {
       return styleSpec.implementation.mark;

packages/core/src/extensions/LinkToolbar/protocols.ts

@@ -0,0 +1,13 @@
+export const VALID_LINK_PROTOCOLS = [
+  "http",
+  "https",
+  "ftp",
+  "ftps",
+  "mailto",
+  "tel",
+  "callto",
+  "sms",
+  "cid",
+  "xmpp",
+];
+export const DEFAULT_LINK_PROTOCOL = "https";

packages/core/src/index.ts

@@ -36,6 +36,7 @@ export * from "./extensions-shared/UiElementPosition.js";
 export * from "./extensions/FilePanel/FilePanelPlugin.js";
 export * from "./extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 export * from "./extensions/LinkToolbar/LinkToolbarPlugin.js";
+export * from "./extensions/LinkToolbar/protocols.js";
 export * from "./extensions/SideMenu/SideMenuPlugin.js";
 export * from "./extensions/SuggestionMenu/DefaultGridSuggestionItem.js";
 export * from "./extensions/SuggestionMenu/DefaultSuggestionItem.js";

packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { RiLink } from "react-icons/ri";
 
 import {
@@ -48,14 +48,31 @@ export const CreateLinkButton = () => {
 
   const selectedBlocks = useSelectedBlocks(editor);
 
+  const [opened, setOpened] = useState(false);
   const [url, setUrl] = useState<string>(editor.getSelectedLinkUrl() || "");
   const [text, setText] = useState<string>(editor.getSelectedText());
 
   useEditorContentOrSelectionChange(() => {
+    setOpened(false);
     setText(editor.getSelectedText() || "");
     setUrl(editor.getSelectedLinkUrl() || "");
   }, editor);
 
+  useEffect(() => {
+    const callback = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+        setOpened(true);
+        event.preventDefault();
+      }
+    };
+
+    editor.prosemirrorView.dom.addEventListener("keydown", callback);
+
+    return () => {
+      editor.prosemirrorView.dom.removeEventListener("keydown", callback);
+    };
+  }, [editor.prosemirrorView.dom]);
+
   const update = useCallback(
     (url: string, text: string) => {
       editor.createLink(url, text);
@@ -87,7 +104,7 @@ export const CreateLinkButton = () => {
   }
 
   return (
-    <Components.Generic.Popover.Root>
+    <Components.Generic.Popover.Root opened={opened}>
       <Components.Generic.Popover.Trigger>
         {/* TODO: hide tooltip on click */}
         <Components.FormattingToolbar.Button
@@ -100,6 +117,7 @@ export const CreateLinkButton = () => {
             dict.generic.ctrl_shortcut
           )}
           icon={<RiLink />}
+          onClick={() => setOpened(true)}
         />
       </Components.Generic.Popover.Trigger>
       <Components.Generic.Popover.Content

packages/react/src/components/LinkToolbar/EditLinkMenuItems.tsx

@@ -1,3 +1,4 @@
+import { DEFAULT_LINK_PROTOCOL, VALID_LINK_PROTOCOLS } from "@blocknote/core";
 import {
   ChangeEvent,
   KeyboardEvent,
@@ -10,6 +11,16 @@ import { useComponentsContext } from "../../editor/ComponentsContext.js";
 import { useDictionary } from "../../i18n/dictionary.js";
 import { LinkToolbarProps } from "./LinkToolbarProps.js";
 
+const validateUrl = (url: string) => {
+  for (const protocol of VALID_LINK_PROTOCOLS) {
+    if (url.startsWith(protocol)) {
+      return url;
+    }
+  }
+
+  return `${DEFAULT_LINK_PROTOCOL}://${url}`;
+};
+
 export const EditLinkMenuItems = (
   props: Pick<LinkToolbarProps, "url" | "text" | "editLink">
 ) => {
@@ -30,7 +41,7 @@ export const EditLinkMenuItems = (
     (event: KeyboardEvent) => {
       if (event.key === "Enter") {
         event.preventDefault();
-        editLink(currentUrl, currentText);
+        editLink(validateUrl(currentUrl), currentText);
       }
     },
     [editLink, currentUrl, currentText]
@@ -49,7 +60,7 @@ export const EditLinkMenuItems = (
   );
 
   const handleSubmit = useCallback(
-    () => editLink(currentUrl, currentText),
+    () => editLink(validateUrl(currentUrl), currentText),
     [editLink, currentUrl, currentText]
   );