From 505f38a14533364797aa17f846d2c1987f5310c0 Mon Sep 17 00:00:00 2001 From: Takagi <1103069291@qq.com> Date: Sat, 13 Apr 2024 08:50:08 +0800 Subject: [PATCH] pref: optimize the rich text editor link paste logic (#5680) 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 /area ui /milestone 2.15.x #### What this PR does / why we need it: 优化默认富文本编辑器中自动创建链接的逻辑。 - 移除了粘贴文本时，如果文本为链接则会自动转为链接的问题。 - 移除输入链接文本之后回车，会自动转化为链接的问题。 - 新增当选中的文本内容为链接时，点击链接按钮，将会自动转化选中的文本为链接。 #### How to test it? 在富文本编辑器中，测试如下场景： 1. 在浏览器地址栏复制一个链接，粘贴后不会再转为链接，而是一个普通文本。 2. 输入一段链接文本，按回车后是否不会再被转为链接。 3. 选中一段可以被解析为链接的地址，选中此地址，点击链接按钮，此地址是否会被默认转为链接。 #### Which issue(s) this PR fixes: Fixes #5653 #### Does this PR introduce a user-facing change? ```release-note 优化默认富文本编辑器中文本自动转为链接的相关逻辑 ``` --- ui/packages/editor/package.json | 2 + .../src/extensions/link/LinkBubbleButton.vue | 40 ++++++++++++++++++- .../editor/src/extensions/link/index.ts | 5 +++ ui/pnpm-lock.yaml | 25 +++++++++--- ui/src/components/editor/DefaultEditor.vue | 2 +- 5 files changed, 65 insertions(+), 9 deletions(-) diff --git a/ui/packages/editor/package.json b/ui/packages/editor/package.json index 415ef2ac1..b6a8938df 100644 --- a/ui/packages/editor/package.json +++ b/ui/packages/editor/package.json @@ -82,12 +82,14 @@ "floating-vue": "2.0.0-beta.24", "github-markdown-css": "^5.2.0", "highlight.js": "11.8.0", + "linkifyjs": "^4.1.3", "lowlight": "^3.0.0", "scroll-into-view-if-needed": "^3.1.0", "tippy.js": "^6.3.7" }, "devDependencies": { "@iconify/json": "^2.2.117", + "@types/linkifyjs": "^2.1.7", "release-it": "^16.1.5", "vite-plugin-dts": "^3.7.3" }, diff --git a/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue b/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue index e1fd1e3af..8ed831c35 100644 --- a/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue +++ b/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue @@ -3,7 +3,9 @@ import { computed, type Component } from "vue"; import { VTooltip, Dropdown as VDropdown } from "floating-vue"; import MdiLinkVariant from "~icons/mdi/link-variant"; import { i18n } from "@/locales"; -import type { Editor } from "@/tiptap/vue-3"; +import { type Editor } from "@/tiptap/vue-3"; +import { test } from "linkifyjs"; +import { TextSelection } from "@tiptap/pm/state"; const props = defineProps<{ editor: Editor; @@ -39,10 +41,44 @@ const target = computed({ }); }, }); + +/** + * Convert the currently selected text when clicking the link + */ +const handleLinkBubbleButton = () => { + if (props.isActive({ editor: props.editor })) { + return; + } + const { state } = props.editor; + const { selection } = state; + const { empty } = selection; + + if (selection instanceof TextSelection) { + if (empty) { + return false; + } + const { content } = selection.content(); + if (!content || content.childCount !== 1) { + return false; + } + const text = content.firstChild?.textContent; + if (text && test(text, "url")) { + props.editor.commands.setLink({ + href: text, + target: "_self", + }); + } + } +};