fix: Multi-block links (#1565)

* Improved link UX

* Small fix

Author: matthewlipski

packages/core/src/editor/BlockNoteEditor.ts

@@ -91,7 +91,7 @@ import {
 import { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
 
-import { Plugin, Transaction } from "@tiptap/pm/state";
+import { Plugin, TextSelection, Transaction } from "@tiptap/pm/state";
 import { dropCursor } from "prosemirror-dropcursor";
 import { EditorView } from "prosemirror-view";
 import { ySyncPluginKey } from "y-prosemirror";
@@ -1149,17 +1149,18 @@ export class BlockNoteEditor<
     }
 
     const { from, to } = this._tiptapEditor.state.selection;
-
-    if (!text) {
-      text = this._tiptapEditor.state.doc.textBetween(from, to);
-    }
-
     const mark = this.pmSchema.mark("link", { href: url });
 
     this.dispatch(
-      this._tiptapEditor.state.tr
-        .insertText(text, from, to)
-        .addMark(from, from + text.length, mark)
+      text
+        ? this._tiptapEditor.state.tr
+            .insertText(text, from, to)
+            .addMark(from, from + text.length, mark)
+        : this._tiptapEditor.state.tr
+            .setSelection(
+              TextSelection.create(this._tiptapEditor.state.tr.doc, to)
+            )
+            .addMark(from, to, mark)
     );
   }
 

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

@@ -75,8 +75,8 @@ export const CreateLinkButton = () => {
   }, [editor.prosemirrorView?.dom]);
 
   const update = useCallback(
-    (url: string, text: string) => {
-      editor.createLink(url, text);
+    (url: string) => {
+      editor.createLink(url);
       editor.focus();
     },
     [editor]
@@ -93,11 +93,7 @@ export const CreateLinkButton = () => {
       }
     }
 
-    if (isTableCellSelection(editor.prosemirrorState.selection)) {
-      return false;
-    }
-
-    return true;
+    return !isTableCellSelection(editor.prosemirrorState.selection);
   }, [linkInSchema, selectedBlocks, editor.prosemirrorState.selection]);
 
   if (
@@ -128,7 +124,12 @@ export const CreateLinkButton = () => {
       <Components.Generic.Popover.Content
         className={"bn-popover-content bn-form-popover"}
         variant={"form-popover"}>
-        <EditLinkMenuItems url={url} text={text} editLink={update} />
+        <EditLinkMenuItems
+          url={url}
+          text={text}
+          editLink={update}
+          showTextField={false}
+        />
       </Components.Generic.Popover.Content>
     </Components.Generic.Popover.Root>
   );

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

@@ -22,12 +22,14 @@ const validateUrl = (url: string) => {
 };
 
 export const EditLinkMenuItems = (
-  props: Pick<LinkToolbarProps, "url" | "text" | "editLink">
+  props: Pick<LinkToolbarProps, "url" | "text" | "editLink"> & {
+    showTextField?: boolean;
+  }
 ) => {
   const Components = useComponentsContext()!;
   const dict = useDictionary();
 
-  const { url, text, editLink } = props;
+  const { url, text, editLink, showTextField } = props;
 
   const [currentUrl, setCurrentUrl] = useState<string>(url);
   const [currentText, setCurrentText] = useState<string>(text);
@@ -78,16 +80,18 @@ export const EditLinkMenuItems = (
         onChange={handleUrlChange}
         onSubmit={handleSubmit}
       />
-      <Components.Generic.Form.TextInput
-        className={"bn-text-input"}
-        name="title"
-        icon={<RiText />}
-        placeholder={dict.link_toolbar.form.title_placeholder}
-        value={currentText}
-        onKeyDown={handleEnter}
-        onChange={handleTextChange}
-        onSubmit={handleSubmit}
-      />
+      {showTextField !== false && (
+        <Components.Generic.Form.TextInput
+          className={"bn-text-input"}
+          name="title"
+          icon={<RiText />}
+          placeholder={dict.link_toolbar.form.title_placeholder}
+          value={currentText}
+          onKeyDown={handleEnter}
+          onChange={handleTextChange}
+          onSubmit={handleSubmit}
+        />
+      )}
     </Components.Generic.Form.Root>
   );
 };