pref: optimize the toolbar space and fold the same type of function (#5683)

#### What type of PR is this?

/kind improvement
/area editor
/milestone 2.15.x

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

本 PR 对富文本编辑器中工具栏和冒泡菜单进行精简。

- 对默认富文本冒泡菜单及顶部工具栏相同类型的功能进行了折叠。
- 删除在 text 的冒泡菜单中，不属于当前选中文本的功能，例如转换为代码块等，这些实际上是段落的功能，并非是文本的功能。而 textAlign 目前也仅仅用在标题和行上，因此也移除。

#### How to test it?

查看默认富文本编辑器工具栏中，折叠的功能是否正常。选中文本，查看文本中是否不包含段落相关的功能。

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

Fixes #5669 

#### Does this PR introduce a user-facing change?
```release-note
对默认富文本编辑器中的工具栏进行折叠及精简优化。
```

ui/packages/editor/src/extensions/text-align/index.ts

@@ -1,4 +1,4 @@
-import type { Editor } from "@/tiptap/vue-3";
+import { type Editor } from "@/tiptap/vue-3";
 import TiptapTextAlign from "@tiptap/extension-text-align";
 import type { TextAlignOptions } from "@tiptap/extension-text-align";
 import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
@@ -9,59 +9,90 @@ import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
+import ToolbarSubItem from "@/components/toolbar/ToolbarSubItem.vue";
+
+const iconComponent = {
+  left: MdiFormatAlignLeft,
+  center: MdiFormatAlignCenter,
+  right: MdiFormatAlignRight,
+  justify: MdiFormatAlignJustify,
+};
+
+const getIcon = (editor: Editor) => {
+  let icon = MdiFormatAlignLeft;
+  Object.entries(iconComponent).forEach(([key, value]) => {
+    if (editor.isActive({ textAlign: key })) {
+      icon = value;
+      return;
+    }
+  });
+  return icon;
+};
 
 const TextAlign = TiptapTextAlign.extend<ExtensionOptions & TextAlignOptions>({
   addOptions() {
     return {
       ...this.parent?.(),
       getToolbarItems({ editor }: { editor: Editor }) {
-        return [
-          {
-            priority: 180,
-            component: markRaw(ToolbarItem),
-            props: {
-              editor,
-              isActive: editor.isActive({ textAlign: "left" }),
-              icon: markRaw(MdiFormatAlignLeft),
-              title: i18n.global.t("editor.common.align_left"),
-              action: () => editor.chain().focus().setTextAlign("left").run(),
-            },
+        return {
+          priority: 180,
+          component: markRaw(ToolbarItem),
+          props: {
+            editor,
+            isActive: false,
+            icon: markRaw(getIcon(editor)),
+            title: i18n.global.t("editor.common.align_method"),
           },
-          {
-            priority: 190,
-            component: markRaw(ToolbarItem),
-            props: {
-              editor,
-              isActive: editor.isActive({ textAlign: "center" }),
-              icon: markRaw(MdiFormatAlignCenter),
-              title: i18n.global.t("editor.common.align_center"),
-              action: () => editor.chain().focus().setTextAlign("center").run(),
+          children: [
+            {
+              priority: 0,
+              component: markRaw(ToolbarSubItem),
+              props: {
+                editor,
+                isActive: editor.isActive({ textAlign: "left" }),
+                icon: markRaw(MdiFormatAlignLeft),
+                title: i18n.global.t("editor.common.align_left"),
+                action: () => editor.chain().focus().setTextAlign("left").run(),
+              },
             },
-          },
-          {
-            priority: 200,
-            component: markRaw(ToolbarItem),
-            props: {
-              editor,
-              isActive: editor.isActive({ textAlign: "right" }),
-              icon: markRaw(MdiFormatAlignRight),
-              title: i18n.global.t("editor.common.align_right"),
-              action: () => editor.chain().focus().setTextAlign("right").run(),
+            {
+              priority: 10,
+              component: markRaw(ToolbarSubItem),
+              props: {
+                editor,
+                isActive: editor.isActive({ textAlign: "center" }),
+                icon: markRaw(MdiFormatAlignCenter),
+                title: i18n.global.t("editor.common.align_center"),
+                action: () =>
+                  editor.chain().focus().setTextAlign("center").run(),
+              },
             },
-          },
-          {
-            priority: 210,
-            component: markRaw(ToolbarItem),
-            props: {
-              editor,
-              isActive: editor.isActive({ textAlign: "justify" }),
-              icon: markRaw(MdiFormatAlignJustify),
-              title: i18n.global.t("editor.common.align_justify"),
-              action: () =>
-                editor.chain().focus().setTextAlign("justify").run(),
+            {
+              priority: 20,
+              component: markRaw(ToolbarSubItem),
+              props: {
+                editor,
+                isActive: editor.isActive({ textAlign: "right" }),
+                icon: markRaw(MdiFormatAlignRight),
+                title: i18n.global.t("editor.common.align_right"),
+                action: () =>
+                  editor.chain().focus().setTextAlign("right").run(),
+              },
             },
-          },
-        ];
+            {
+              priority: 30,
+              component: markRaw(ToolbarSubItem),
+              props: {
+                editor,
+                isActive: editor.isActive({ textAlign: "justify" }),
+                icon: markRaw(MdiFormatAlignJustify),
+                title: i18n.global.t("editor.common.align_justify"),
+                action: () =>
+                  editor.chain().focus().setTextAlign("justify").run(),
+              },
+            },
+          ],
+        };
       },
     };
   },

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

@@ -4,9 +4,7 @@ import { markRaw } from "vue";
 import ColorBubbleItem from "@/extensions/color/ColorBubbleItem.vue";
 import HighlightBubbleItem from "@/extensions/highlight/HighlightBubbleItem.vue";
 import LinkBubbleButton from "@/extensions/link/LinkBubbleButton.vue";
-import MdiFormatQuoteOpen from "~icons/mdi/format-quote-open";
 import MdiCodeTags from "~icons/mdi/code-tags";
-import MdiCodeBracesBox from "~icons/mdi/code-braces-box";
 import MdiFormatColor from "~icons/mdi/format-color";
 import MdiFormatColorHighlight from "~icons/mdi/format-color-highlight";
 import MdiFormatItalic from "~icons/mdi/format-italic";
@@ -15,10 +13,6 @@ import MdiShare from "~icons/mdi/share";
 import MdiFormatStrikethrough from "~icons/mdi/format-strikethrough";
 import MdiFormatSubscript from "~icons/mdi/format-subscript";
 import MdiFormatSuperscript from "~icons/mdi/format-superscript";
-import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
-import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
-import MdiFormatAlignRight from "~icons/mdi/format-align-right";
-import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
 import MdiFormatUnderline from "~icons/mdi/format-underline";
 import { isActive, isTextSelection } from "@/tiptap/vue-3";
 import type { EditorState } from "@/tiptap/pm";
@@ -125,7 +119,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
               },
             },
             {
-              priority: 51,
+              priority: 60,
               component: markRaw(ColorBubbleItem),
               props: {
                 isActive: ({ editor }) => editor.isActive("color"),
@@ -134,18 +128,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
               },
             },
             {
-              priority: 60,
-              props: {
-                isActive: ({ editor }) => editor.isActive("blockquote"),
-                icon: markRaw(MdiFormatQuoteOpen),
-                title: i18n.global.t("editor.common.quote"),
-                action: ({ editor }) => {
-                  return editor.commands.toggleBlockquote();
-                },
-              },
-            },
-            {
-              priority: 80,
+              priority: 70,
               props: {
                 isActive: ({ editor }) => editor.isActive("code"),
                 icon: markRaw(MdiCodeTags),
@@ -155,17 +138,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
               },
             },
             {
-              priority: 90,
-              props: {
-                isActive: ({ editor }) => editor.isActive("codeBlock"),
-                icon: markRaw(MdiCodeBracesBox),
-                title: i18n.global.t("editor.common.codeblock"),
-                action: ({ editor }) =>
-                  editor.chain().focus().toggleCodeBlock().run(),
-              },
-            },
-            {
-              priority: 100,
+              priority: 80,
               props: {
                 isActive: ({ editor }) => editor.isActive("superscript"),
                 icon: markRaw(MdiFormatSuperscript),
@@ -175,7 +148,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
               },
             },
             {
-              priority: 110,
+              priority: 90,
               props: {
                 isActive: ({ editor }) => editor.isActive("subscript"),
                 icon: markRaw(MdiFormatSubscript),
@@ -185,58 +158,14 @@ const Text = TiptapText.extend<ExtensionOptions>({
               },
             },
             {
-              priority: 120,
-              props: {
-                isActive: ({ editor }) =>
-                  editor.isActive({ textAlign: "left" }),
-                icon: markRaw(MdiFormatAlignLeft),
-                title: i18n.global.t("editor.common.align_left"),
-                action: ({ editor }) =>
-                  editor.chain().focus().setTextAlign("left").run(),
-              },
-            },
-            {
-              priority: 130,
-              props: {
-                isActive: ({ editor }) =>
-                  editor.isActive({ textAlign: "center" }),
-                icon: markRaw(MdiFormatAlignCenter),
-                title: i18n.global.t("editor.common.align_center"),
-                action: ({ editor }) =>
-                  editor.chain().focus().setTextAlign("center").run(),
-              },
-            },
-            {
-              priority: 140,
-              props: {
-                isActive: ({ editor }) =>
-                  editor.isActive({ textAlign: "right" }),
-                icon: markRaw(MdiFormatAlignRight),
-                title: i18n.global.t("editor.common.align_right"),
-                action: ({ editor }) =>
-                  editor.chain().focus().setTextAlign("right").run(),
-              },
-            },
-            {
-              priority: 150,
-              props: {
-                isActive: ({ editor }) =>
-                  editor.isActive({ textAlign: "justify" }),
-                icon: markRaw(MdiFormatAlignJustify),
-                title: i18n.global.t("editor.common.align_justify"),
-                action: ({ editor }) =>
-                  editor.chain().focus().setTextAlign("justify").run(),
-              },
-            },
-            {
-              priority: 160,
+              priority: 100,
               component: markRaw(LinkBubbleButton),
               props: {
                 isActive: ({ editor }) => editor.isActive("link"),
               },
             },
             {
-              priority: 170,
+              priority: 110,
               props: {
                 isActive: () => false,
                 visible: ({ editor }) => editor.isActive("link"),
@@ -246,7 +175,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
               },
             },
             {
-              priority: 180,
+              priority: 120,
               props: {
                 isActive: () => false,
                 visible: ({ editor }) => editor.isActive("link"),

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

@@ -91,6 +91,7 @@ editor:
     color_picker:
       more_color: More
   common:
+    align_method: Align method
     align_left: Align left
     align_center: Align center
     align_right: Align right

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

@@ -91,6 +91,7 @@ editor:
     color_picker:
       more_color: 更多颜色
   common:
+    align_method: 对齐方式
     align_left: 左对齐
     align_center: 居中
     align_right: 右对齐