From ccf022454781aac18dbe2d326157079ef8ba830c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 31 Jan 2023 12:34:52 +0800
Subject: [PATCH 1/3] feat: add supports for set link

---
 .../src/components/EditorBubbleMenu.vue       | 10 ++-
 .../components/EditorLinkBubbleMenuItems.vue  | 85 +++++++++++++++++++
 2 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 packages/editor/src/components/EditorLinkBubbleMenuItems.vue

diff --git a/packages/editor/src/components/EditorBubbleMenu.vue b/packages/editor/src/components/EditorBubbleMenu.vue
index 477eb45..3bddcf3 100644
--- a/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/packages/editor/src/components/EditorBubbleMenu.vue
@@ -5,6 +5,7 @@ import type { PropType } from "vue";
 import { BubbleMenu, Editor } from "@tiptap/vue-3";
 import type { MenuItem } from "@/types";
 import { VTooltip } from "floating-vue";
+import EditorLinkBubbleMenuItems from "./EditorLinkBubbleMenuItems.vue";
 
 defineProps({
   editor: {
@@ -29,13 +30,20 @@ defineProps({
       <button
         v-for="(menuItem, index) in menuItems"
         :key="index"
+        v-tooltip="menuItem.title"
         :class="{ 'bg-gray-200 !text-black': menuItem.isActive?.() }"
         :title="menuItem.title"
         class="text-gray-600 text-lg hover:bg-gray-100 p-0.5 rounded-sm"
         @click="menuItem.action?.()"
       >
-        <component :is="menuItem.icon" v-tooltip="menuItem.title" />
+        <component :is="menuItem.icon" />
       </button>
+
+      <div class="px-1">
+        <div class="h-5 bg-gray-100" style="width: 1px"></div>
+      </div>
+
+      <EditorLinkBubbleMenuItems :editor="editor" />
     </div>
   </bubble-menu>
 </template>
diff --git a/packages/editor/src/components/EditorLinkBubbleMenuItems.vue b/packages/editor/src/components/EditorLinkBubbleMenuItems.vue
new file mode 100644
index 0000000..bac97f9
--- /dev/null
+++ b/packages/editor/src/components/EditorLinkBubbleMenuItems.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { Editor } from "@tiptap/vue-3";
+import { computed, type PropType } from "vue";
+import { VTooltip, Dropdown as VDropdown } from "floating-vue";
+import MdiLinkVariant from "~icons/mdi/link-variant";
+import MdiLinkVariantOff from "~icons/mdi/link-variant-off";
+
+const props = defineProps({
+  editor: {
+    type: Object as PropType<Editor>,
+    required: true,
+  },
+});
+
+const href = computed({
+  get() {
+    const attrs = props.editor.getAttributes("link");
+    return attrs?.href;
+  },
+  set(value) {
+    props.editor.commands.setLink({
+      href: value,
+      target: target.value ? "_blank" : "_self",
+    });
+  },
+});
+
+const target = computed({
+  get() {
+    const attrs = props.editor.getAttributes("link");
+    return attrs?.target === "_blank";
+  },
+  set(value) {
+    props.editor.commands.setLink({
+      href: href.value,
+      target: value ? "_blank" : "_self",
+    });
+  },
+});
+
+function handleUnSetLink() {
+  props.editor.commands.unsetLink();
+}
+</script>
+
+<template>
+  <VDropdown class="inline-flex" :triggers="['click']" :distance="10">
+    <button
+      v-tooltip="`${editor.isActive('link') ? '修改' : '添加'}链接`"
+      class="text-gray-600 text-lg hover:bg-gray-100 p-0.5 rounded-sm"
+      :class="{ 'bg-gray-200 !text-black': editor.isActive('link') }"
+    >
+      <MdiLinkVariant />
+    </button>
+
+    <template #popper>
+      <div
+        class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
+      >
+        <input
+          v-model.lazy="href"
+          placeholder="链接地址"
+          class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+        />
+        <label class="inline-flex items-center mt-2">
+          <input
+            v-model="target"
+            type="checkbox"
+            class="form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+          />
+          <span class="ml-2 text-sm text-gray-500">在新窗口打开</span>
+        </label>
+      </div>
+    </template>
+  </VDropdown>
+
+  <button
+    v-if="editor.isActive('link')"
+    v-tooltip="`取消链接`"
+    class="text-gray-600 text-lg hover:bg-gray-100 p-0.5 rounded-sm"
+    @click="handleUnSetLink"
+  >
+    <MdiLinkVariantOff />
+  </button>
+</template>

From 884248c4b770c9cb6ead56d974892e207a1f0037 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 31 Jan 2023 13:26:23 +0800
Subject: [PATCH 2/3] feat: add supports for open link

---
 .../src/components/EditorLinkBubbleMenuItems.vue      | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/editor/src/components/EditorLinkBubbleMenuItems.vue b/packages/editor/src/components/EditorLinkBubbleMenuItems.vue
index bac97f9..4cd5588 100644
--- a/packages/editor/src/components/EditorLinkBubbleMenuItems.vue
+++ b/packages/editor/src/components/EditorLinkBubbleMenuItems.vue
@@ -4,6 +4,7 @@ import { computed, type PropType } from "vue";
 import { VTooltip, Dropdown as VDropdown } from "floating-vue";
 import MdiLinkVariant from "~icons/mdi/link-variant";
 import MdiLinkVariantOff from "~icons/mdi/link-variant-off";
+import MdiShare from "~icons/mdi/share";
 
 const props = defineProps({
   editor: {
@@ -82,4 +83,14 @@ function handleUnSetLink() {
   >
     <MdiLinkVariantOff />
   </button>
+
+  <a
+    v-if="editor.isActive('link')"
+    v-tooltip="`打开链接`"
+    class="text-gray-600 text-lg hover:bg-gray-100 p-0.5 rounded-sm"
+    :href="editor.getAttributes('link')?.href"
+    target="_blank"
+  >
+    <MdiShare />
+  </a>
 </template>

From b723062adcefb8a89ba51a11a070dc981bd9b4b9 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 31 Jan 2023 15:17:52 +0800
Subject: [PATCH 3/3] perf: disable auto link

---
 example/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/src/App.vue b/example/src/App.vue
index 00097e3..f48ee71 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -108,7 +108,7 @@ const editor = useEditor({
     ExtensionTaskList,
     ExtensionTaskItem,
     ExtensionLink.configure({
-      autolink: true,
+      autolink: false,
       openOnClick: false,
     }),
     ExtensionTextAlign.configure({