fix: link is not editable

(fixes streetwriters/notesnook#802)

packages/editor/src/index.ts

@@ -136,7 +136,12 @@ const useTiptap = (
         OrderedList,
         TaskItemNode.configure({ nested: true }),
         TaskListNode,
-        Link.configure({ openOnClick: !isMobile, validate: () => false }),
+        Link.configure({
+          openOnClick: !isMobile,
+          autolink: false,
+        }).extend({
+          inclusive: true,
+        }),
         Table.configure({
           resizable: true,
           allowTableNodeSelection: true,

packages/editor/src/toolbar/popups/link-popup.tsx

@@ -32,7 +32,7 @@ export function LinkPopup(props: LinkPopupProps) {
           <Input
             type="text"
             placeholder="Link text"
-            value={link.current?.text}
+            defaultValue={link.current?.text}
             sx={{ mb: 1 }}
             onChange={(e) =>
               (link.current = { ...link.current, text: e.target.value })
@@ -43,7 +43,7 @@ export function LinkPopup(props: LinkPopupProps) {
           type="url"
           autoFocus
           placeholder="https://example.com/"
-          value={link.current?.href}
+          defaultValue={link.current?.href}
           onChange={(e) =>
             (link.current = { ...link.current, href: e.target.value })
           }

packages/editor/src/toolbar/tools/link.tsx

@@ -7,7 +7,7 @@ import { useToolbarLocation } from "../stores/toolbar-store";
 import { MoreTools } from "../components/more-tools";
 import { useRefValue } from "../../hooks/use-ref-value";
 import { findMark, selectionToOffset } from "../utils/prosemirror";
-import { setTextSelection } from "prosemirror-utils";
+import { TextSelection } from "prosemirror-state";
 import { Flex, Text } from "rebass";
 import { ImageNode } from "../../extensions/image";
 
@@ -82,19 +82,41 @@ export function EditLink(props: ToolProps) {
   const onDone = useCallback((link: LinkDefinition) => {
     const { href, text, isImage } = link;
     const { from, node, to } = selectedNode.current;
-
     if (!href || !editor.current || !node) return;
 
     const mark = findMark(node, "link");
     if (!mark) return;
 
-    editor.current
-      .chain()
-      .command(({ tr }) => {
+    const selection = editor.current.state.selection;
+
+    let commandChain = editor.current.chain();
+
+    if (!isImage) {
+      commandChain = commandChain.command(({ tr }) => {
         tr.removeMark(from, to, mark.type);
-        tr.addMark(from, to, mark.type.create({ href }));
-        tr.insertText(text || node.textContent, from, to);
-        setTextSelection(tr.mapping.map(from))(tr);
+        tr.insertText(
+          text || node.textContent,
+          tr.mapping.map(from),
+          tr.mapping.map(to)
+        );
+        tr.setSelection(
+          TextSelection.create(tr.doc, tr.mapping.map(from), tr.mapping.map(to))
+        );
+        return true;
+      });
+    }
+
+    commandChain
+      .extendMarkRange("link")
+      .toggleLink({ href, target: "_blank" })
+      .command(({ tr }) => {
+        tr.setSelection(
+          TextSelection.create(
+            tr.doc,
+            tr.mapping.map(selection.from),
+            tr.mapping.map(selection.to)
+          )
+        );
         return true;
       })
       .focus(undefined, { scrollIntoView: true })