fix: solve the problem that highlighting will prevent the keys (#6387)

#### 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` 标签顺序相反导致。如下所示：

<img width="1019" alt="image" src="https://github.com/user-attachments/assets/90c0926e-caab-40b6-91ae-97c075ef7225">

正确的情况应该是在 `span` 中包裹 `mark`。此 PR 提升了 `TextStyle` 的优先级，结果如下所示：

<img width="1022" alt="image" src="https://github.com/user-attachments/assets/e5e61d54-defd-493b-818c-c09faf55a7c1">

#### 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

@@ -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<ColorOptions & ExtensionOptions>({
     };
   },
   addExtensions() {
-    return [TiptapTextStyle];
+    return [TextStyle];
   },
 });
 

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<FontSizeOptions>({
     };
   },
   addExtensions() {
-    return [TiptapTextStyle];
+    return [TextStyle];
   },
 });
 

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<ExtensionOptions & HighlightOptions>({
-  addAttributes() {
-    if (!this.options.multicolor) {
-      return {};
-    }
-
-    return {
-      ...this.parent?.(),
-      style: {
-        default: "display: inline-block;",
-        parseHTML: (element) => element.getAttribute("style"),
-      },
-    };
-  },
   addOptions() {
     return {
       ...this.parent?.(),

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,

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<TextStyleOptions>({
+  // 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;