From 0f6722a37e22634409db5b8d79bd6cebf0fbd882 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Thu, 27 Jun 2024 18:04:54 +0800
Subject: [PATCH] pref: add the option to open a new window to the picture jump
 link (#6170)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/area editor
/milestone 2.17.x

#### What this PR does / why we need it:

为图片跳转链接增加在新窗口打开的选项。

#### How to test it?

测试新窗口打开是否正常可用。

#### Which issue(s) this PR fixes:

Fixes #6109

#### Does this PR introduce a user-facing change?
```release-note
默认编辑器图片跳转链接支持配置新窗口打开
```
---
 .../extensions/image/BubbleItemImageHref.vue  | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue b/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue
index f624b5a2f..999852667 100644
--- a/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue
+++ b/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue
@@ -2,7 +2,7 @@
 import { i18n } from "@/locales";
 import type { Editor } from "@/tiptap/vue-3";
 import { computed, type Component } from "vue";
-import Image from "./index";
+import { ExtensionLink, ExtensionImage } from "@/extensions";
 
 const props = defineProps<{
   editor: Editor;
@@ -15,15 +15,24 @@ const props = defineProps<{
 
 const href = computed({
   get: () => {
-    return props.editor.getAttributes(Image.name).href;
+    const attrs = props.editor.getAttributes(ExtensionLink.name);
+    return attrs?.href || props.editor.getAttributes(ExtensionImage.name).href;
   },
   set: (href: string) => {
-    props.editor
-      .chain()
-      .updateAttributes(Image.name, { href: href })
-      .setNodeSelection(props.editor.state.selection.from)
-      .focus()
-      .run();
+    props.editor.commands.setLink({ href: href, target: "_blank" });
+  },
+});
+
+const target = computed({
+  get() {
+    const attrs = props.editor.getAttributes(ExtensionLink.name);
+    return attrs?.target === "_blank";
+  },
+  set(value) {
+    props.editor.commands.setLink({
+      href: href.value,
+      target: value ? "_blank" : "_self",
+    });
   },
 });
 </script>
@@ -34,4 +43,14 @@ const href = computed({
     :placeholder="i18n.global.t('editor.common.placeholder.alt_href')"
     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">
+      {{ i18n.global.t("editor.extensions.link.open_in_new_window") }}
+    </span>
+  </label>
 </template>