From 52feea855339e3870c78ea0f307c7521e964470d Mon Sep 17 00:00:00 2001 From: Takagi <1103069291@qq.com> Date: Mon, 29 Jul 2024 20:57:54 +0800 Subject: [PATCH] fix: solve the problem that highlighting will prevent the keys (#6387) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /kind bug /area editor /milestone 2.18.x #### What this PR does / why we need it: 此 PR 解决了使用高亮插件之后按 `up` 或 `down` 按键被阻止的问题。 此问题的来源为 https://github.com/halo-sigs/richtext-editor/pull/56 ，在此前的 PR 中为了解决设置字体大小后再次设置高亮，会导致高亮无法完全笼罩字体的问题。 但经过仔细排查，发现上述问题之前的解决方式有误，正确的原因应该是设置字体大小的 `span` 标签与设置高亮的 `mark` 标签顺序相反导致。如下所示： image 正确的情况应该是在 `span` 中包裹 `mark`。此 PR 提升了 `TextStyle` 的优先级，结果如下所示： image #### How to test it? 测试对文本使用高亮功能之后按 `up` 或 `down` 按键是否生效。 测试对在文本设置大小之后，使用高亮、删除线等样式是否正确。 #### Which issue(s) this PR fixes: Fixes #6381 #### Does this PR introduce a user-facing change? ```release-note 解决默认编辑器中对文本使用高亮会导致按键被阻止的问题 ``` --- ui/packages/editor/src/extensions/color/index.ts | 4 ++-- .../editor/src/extensions/font-size/index.ts | 4 ++-- .../editor/src/extensions/highlight/index.ts | 13 ------------- ui/packages/editor/src/extensions/index.ts | 3 ++- .../editor/src/extensions/text-style/index.ts | 11 +++++++++++ 5 files changed, 17 insertions(+), 18 deletions(-) create mode 100644 ui/packages/editor/src/extensions/text-style/index.ts diff --git a/ui/packages/editor/src/extensions/color/index.ts b/ui/packages/editor/src/extensions/color/index.ts index 281ec0177..491ddbe70 100644 --- a/ui/packages/editor/src/extensions/color/index.ts +++ b/ui/packages/editor/src/extensions/color/index.ts @@ -3,7 +3,7 @@ import type { Editor } from "@/tiptap/vue-3"; import type { ExtensionOptions } from "@/types"; import type { ColorOptions } from "@tiptap/extension-color"; import TiptapColor from "@tiptap/extension-color"; -import TiptapTextStyle from "@tiptap/extension-text-style"; +import TextStyle from "@/extensions/text-style"; import { markRaw } from "vue"; import MdiFormatColor from "~icons/mdi/format-color"; import ColorToolbarItem from "./ColorToolbarItem.vue"; @@ -27,7 +27,7 @@ const Color = TiptapColor.extend({ }; }, addExtensions() { - return [TiptapTextStyle]; + return [TextStyle]; }, }); diff --git a/ui/packages/editor/src/extensions/font-size/index.ts b/ui/packages/editor/src/extensions/font-size/index.ts index 1e1b7525a..d527d550f 100644 --- a/ui/packages/editor/src/extensions/font-size/index.ts +++ b/ui/packages/editor/src/extensions/font-size/index.ts @@ -1,7 +1,7 @@ import { ToolbarItem, ToolbarSubItem } from "@/components"; import { i18n } from "@/locales"; import { Extension, type Editor } from "@/tiptap/vue-3"; -import TiptapTextStyle from "@tiptap/extension-text-style"; +import TextStyle from "@/extensions/text-style"; import { markRaw } from "vue"; import MdiFormatSize from "~icons/mdi/format-size"; @@ -110,7 +110,7 @@ const FontSize = Extension.create({ }; }, addExtensions() { - return [TiptapTextStyle]; + return [TextStyle]; }, }); diff --git a/ui/packages/editor/src/extensions/highlight/index.ts b/ui/packages/editor/src/extensions/highlight/index.ts index 8f3ce38c7..3f668e6fb 100644 --- a/ui/packages/editor/src/extensions/highlight/index.ts +++ b/ui/packages/editor/src/extensions/highlight/index.ts @@ -8,19 +8,6 @@ import MdiFormatColorHighlight from "~icons/mdi/format-color-highlight"; import HighlightToolbarItem from "./HighlightToolbarItem.vue"; const Highlight = TiptapHighlight.extend({ - addAttributes() { - if (!this.options.multicolor) { - return {}; - } - - return { - ...this.parent?.(), - style: { - default: "display: inline-block;", - parseHTML: (element) => element.getAttribute("style"), - }, - }; - }, addOptions() { return { ...this.parent?.(), diff --git a/ui/packages/editor/src/extensions/index.ts b/ui/packages/editor/src/extensions/index.ts index b47c95026..1dd558aac 100644 --- a/ui/packages/editor/src/extensions/index.ts +++ b/ui/packages/editor/src/extensions/index.ts @@ -5,7 +5,6 @@ import ExtensionDropcursor from "@tiptap/extension-dropcursor"; import ExtensionHardBreak from "@tiptap/extension-hard-break"; import ExtensionHorizontalRule from "@tiptap/extension-horizontal-rule"; import ExtensionPlaceholder from "@tiptap/extension-placeholder"; -import ExtensionTextStyle from "@tiptap/extension-text-style"; import ExtensionBlockquote from "./blockquote"; import ExtensionBold from "./bold"; import ExtensionBulletList from "./bullet-list"; @@ -29,6 +28,7 @@ import ExtensionTextAlign from "./text-align"; import ExtensionUnderline from "./underline"; // Custom extensions +import ExtensionTextStyle from "@/extensions/text-style"; import { ExtensionCodeBlock, lowlight } from "@/extensions/code-block"; import { ExtensionCommands } from "../extensions/commands-menu"; import ExtensionAudio from "./audio"; @@ -67,6 +67,7 @@ const allExtensions = [ ExtensionOrderedList, ExtensionStrike, ExtensionText, + ExtensionTextStyle, ExtensionImage, ExtensionTaskList, ExtensionHighlight, diff --git a/ui/packages/editor/src/extensions/text-style/index.ts b/ui/packages/editor/src/extensions/text-style/index.ts new file mode 100644 index 000000000..f19d2d5d6 --- /dev/null +++ b/ui/packages/editor/src/extensions/text-style/index.ts @@ -0,0 +1,11 @@ +import TiptapTextStyle, { + type TextStyleOptions, +} from "@tiptap/extension-text-style"; + +const TextStyle = TiptapTextStyle.extend({ + // Set the priority of this extension to 110 to ensure it loads before other extensions. + // It must load before the highlight plugin, otherwise, it will cause span and mark to display in parallel. + priority: 110, +}); + +export default TextStyle;