From 5afc112101261c7865f7b09dc6b0b2097e65a193 Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Mon, 15 Aug 2022 13:24:16 +0500
Subject: [PATCH] fix: link is not editable (fixes streetwriters/notesnook#802)

---
 packages/editor/src/index.ts                  |  7 +++-
 .../editor/src/toolbar/popups/link-popup.tsx  |  4 +-
 packages/editor/src/toolbar/tools/link.tsx    | 38 +++++++++++++++----
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index bd907c86b..9064a7730 100644
--- a/packages/editor/src/index.ts
+++ b/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,
diff --git a/packages/editor/src/toolbar/popups/link-popup.tsx b/packages/editor/src/toolbar/popups/link-popup.tsx
index 7b2f8fefe..68498dd0f 100644
--- a/packages/editor/src/toolbar/popups/link-popup.tsx
+++ b/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 })
           }
diff --git a/packages/editor/src/toolbar/tools/link.tsx b/packages/editor/src/toolbar/tools/link.tsx
index 325c9f703..f9d57339f 100644
--- a/packages/editor/src/toolbar/tools/link.tsx
+++ b/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 })