[release-2.17] fix: solve the problem that highlighting will prevent the keys (#6409)

This is an automated cherry-pick of #6387

/assign JohnNiang

```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;