From a0dc9590c2b56cb48ad99ed84120ced27b105d97 Mon Sep 17 00:00:00 2001
From: Nimbus3009 <12313223@mail.sustech.edu.cn>
Date: Mon, 26 May 2025 17:16:39 +0800
Subject: [PATCH] Add support for customizing nofollow of links in editor
 (#7444)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/area ui
/area editor

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

![屏幕截图 2025-05-19 101940](https://github.com/user-attachments/assets/bad2c616-7445-452e-b1bd-c8220f94a8bc)

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

Fixes #6950

```release-note
增加可以勾选 nofollow 的设定
```
---
 .../src/extensions/link/LinkBubbleButton.vue  | 30 ++++++++++++++++++-
 .../editor/src/extensions/link/index.ts       |  4 +++
 ui/packages/editor/src/locales/zh-CN.yaml     |  1 +
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue b/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue
index dfbec50d1..66a95ac34 100644
--- a/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue
+++ b/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue
@@ -25,6 +25,7 @@ const href = computed({
     props.editor.commands.setLink({
       href: value,
       target: target.value ? "_blank" : "_self",
+      rel: rel.value ? "nofollow" : "",
     });
   },
 });
@@ -38,6 +39,21 @@ const target = computed({
     props.editor.commands.setLink({
       href: href.value,
       target: value ? "_blank" : "_self",
+      rel: rel.value ? "nofollow" : "",
+    });
+  },
+});
+
+const rel = computed({
+  get() {
+    const attrs = props.editor.getAttributes("link");
+    return attrs?.rel === "nofollow";
+  },
+  set(value) {
+    props.editor.commands.setLink({
+      href: href.value,
+      target: target.value ? "_blank" : "_self",
+      rel: value ? "nofollow" : "",
     });
   },
 });
@@ -66,6 +82,7 @@ const handleLinkBubbleButton = () => {
       props.editor.commands.setLink({
         href: text,
         target: "_self",
+        rel: "",
       });
     }
   }
@@ -100,7 +117,7 @@ const handleLinkBubbleButton = () => {
           :placeholder="i18n.global.t('editor.extensions.link.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">
+        <label class="inline-flex items-center mt-2 mr-2">
           <input
             v-model="target"
             type="checkbox"
@@ -110,6 +127,17 @@ const handleLinkBubbleButton = () => {
             {{ i18n.global.t("editor.extensions.link.open_in_new_window") }}
           </span>
         </label>
+        <label class="inline-flex items-center mt-2">
+          <!-- nofollow -->
+          <input
+            v-model="rel"
+            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.nofollow") }}
+          </span>
+        </label>
       </div>
     </template>
   </VDropdown>
diff --git a/ui/packages/editor/src/extensions/link/index.ts b/ui/packages/editor/src/extensions/link/index.ts
index 6b022aa55..18b528a8a 100644
--- a/ui/packages/editor/src/extensions/link/index.ts
+++ b/ui/packages/editor/src/extensions/link/index.ts
@@ -14,6 +14,10 @@ const Link = TiptapLink.extend<ExtensionOptions & LinkOptions>({
     };
   },
 
+  renderHTML({ HTMLAttributes }) {
+    return ["a", HTMLAttributes, 0];
+  },
+
   addPasteRules() {
     // Remove the function of pasted text parsing as a link
     return [];
diff --git a/ui/packages/editor/src/locales/zh-CN.yaml b/ui/packages/editor/src/locales/zh-CN.yaml
index ef573fba6..2247f70b1 100644
--- a/ui/packages/editor/src/locales/zh-CN.yaml
+++ b/ui/packages/editor/src/locales/zh-CN.yaml
@@ -33,6 +33,7 @@ editor:
       placeholder: 链接地址
       open_in_new_window: 在新窗口中打开
       cancel_link: 取消链接
+      nofollow: 搜索引擎忽略链接关系
     audio:
       disable_autoplay: 关闭自动播放
       enable_autoplay: 开启自动播放