feat: add the clear format function to the default rich text editor (#5685)

#### What type of PR is this?

/kind feature
/area editor
/milestone 2.15.x

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

为默认富文本编辑器添加清除格式的功能。快捷键为 `Mod + \`。

#### How to test it?

输入文本，使用加粗、链接、斜体等 mark 相关功能，之后使用清除格式，查看格式是否被清除。

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

Fixes #5684 

#### Does this PR introduce a user-facing change?
```release-note
为默认富文本编辑器添加清除格式的功能。
```

ui/packages/editor/src/dev/App.vue

@@ -45,6 +45,7 @@ import {
   ExtensionTrailingNode,
   ExtensionListKeymap,
   ExtensionSearchAndReplace,
+  ExtensionClearFormat,
 } from "../index";
 
 const content = useLocalStorage("content", "");
@@ -111,6 +112,7 @@ const editor = useEditor({
     ExtensionTrailingNode,
     ExtensionListKeymap,
     ExtensionSearchAndReplace,
+    ExtensionClearFormat,
   ],
   parseOptions: {
     preserveWhitespace: true,

ui/packages/editor/src/extensions/clear-format/index.ts

@@ -0,0 +1,35 @@
+import { Extension } from "@/tiptap";
+import type { ExtensionOptions } from "@/types";
+import type { Editor } from "@/tiptap";
+import { markRaw } from "vue";
+import IconParkSolidClearFormat from "~icons/icon-park-solid/clear-format";
+import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
+import { i18n } from "@/locales";
+
+const clearFormat = Extension.create<ExtensionOptions>({
+  addOptions() {
+    return {
+      getToolbarItems({ editor }: { editor: Editor }) {
+        return {
+          priority: 23,
+          component: markRaw(ToolbarItem),
+          props: {
+            editor,
+            isActive: false,
+            icon: markRaw(IconParkSolidClearFormat),
+            title: i18n.global.t("editor.common.clear_format"),
+            action: () => editor.chain().focus().unsetAllMarks().run(),
+          },
+        };
+      },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-\\": () => this.editor.chain().focus().unsetAllMarks().run(),
+    };
+  },
+});
+
+export default clearFormat;

ui/packages/editor/src/extensions/index.ts

@@ -43,6 +43,7 @@ import ExtensionDraggable from "./draggable";
 import ExtensionNodeSelected from "./node-selected";
 import ExtensionTrailingNode from "./trailing-node";
 import ExtensionSearchAndReplace from "./search-and-replace";
+import ExtensionClearFormat from "./clear-format";
 
 const allExtensions = [
   ExtensionBlockquote,
@@ -100,6 +101,7 @@ const allExtensions = [
   ExtensionNodeSelected,
   ExtensionTrailingNode,
   ExtensionSearchAndReplace,
+  ExtensionClearFormat,
 ];
 
 export {
@@ -147,4 +149,5 @@ export {
   ExtensionTrailingNode,
   ExtensionListKeymap,
   ExtensionSearchAndReplace,
+  ExtensionClearFormat,
 };

ui/packages/editor/src/locales/en.yaml

@@ -132,3 +132,4 @@ editor:
     text:
       default: Default
     line_height: Line height
+    clear_format: Clear format

ui/packages/editor/src/locales/zh-CN.yaml

@@ -132,3 +132,4 @@ editor:
     text:
       default: 默认
     line_height: 行高
+    clear_format: 清除格式

ui/src/components/editor/DefaultEditor.vue

@@ -47,6 +47,7 @@ import {
   DecorationSet,
   ExtensionListKeymap,
   ExtensionSearchAndReplace,
+  ExtensionClearFormat,
 } from "@halo-dev/richtext-editor";
 // ui custom extension
 import {
@@ -396,6 +397,7 @@ onMounted(() => {
       ExtensionListKeymap,
       UiExtensionUpload,
       ExtensionSearchAndReplace,
+      ExtensionClearFormat,
     ],
     parseOptions: {
       preserveWhitespace: true,