chore: bump @halo-dev/richtext-editor to support more features (#722)

#### What type of PR is this?

/kind improvement
/milestone 2.0.0-rc.2

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

升级 `@halo-dev/richtext-editor`。

1. 支持在工具栏显示有序列表、无序列表、任务列表的按钮。
2. 为工具栏的按钮添加 tooltip 提示。
3. 在工具栏添加高亮文字的按钮。
4. 在快捷操作列表添加有序列表、无序列表、任务列表、表格、普通文本的操作项。
5. 修复编辑器文字过长导致的布局问题。 Fixes https://github.com/halo-dev/halo/issues/2722

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

Fixes https://github.com/halo-dev/halo/issues/2722

#### Screenshots:

<img width="1376" alt="image" src="https://user-images.githubusercontent.com/21301288/204190762-5fba0bc6-5f15-4283-881a-cc90abd754df.png">

#### Special notes for your reviewer:

测试方式：

1. 需要 `pnpm install`
2. 测试上述功能是否正常。

#### Does this PR introduce a user-facing change?

```release-note
Console 端编辑器的工具栏支持列表、文字高亮等功能。
```

package.json

@@ -35,7 +35,7 @@
     "@halo-dev/api-client": "^0.0.53",
     "@halo-dev/components": "workspace:*",
     "@halo-dev/console-shared": "workspace:*",
-    "@halo-dev/richtext-editor": "^0.0.0-alpha.14",
+    "@halo-dev/richtext-editor": "^0.0.0-alpha.16",
     "@tiptap/extension-character-count": "^2.0.0-beta.202",
     "@uppy/core": "^3.0.4",
     "@uppy/dashboard": "^3.2.0",

pnpm-lock.yaml

@@ -15,7 +15,7 @@ importers:
       '@halo-dev/api-client': ^0.0.53
       '@halo-dev/components': workspace:*
       '@halo-dev/console-shared': workspace:*
-      '@halo-dev/richtext-editor': ^0.0.0-alpha.14
+      '@halo-dev/richtext-editor': ^0.0.0-alpha.16
       '@iconify-json/mdi': ^1.1.36
       '@iconify-json/vscode-icons': ^1.1.16
       '@rushstack/eslint-patch': ^1.2.0
@@ -107,7 +107,7 @@ importers:
       '@halo-dev/api-client': 0.0.53
       '@halo-dev/components': link:packages/components
       '@halo-dev/console-shared': link:packages/shared
-      '@halo-dev/richtext-editor': 0.0.0-alpha.14_vue@3.2.45
+      '@halo-dev/richtext-editor': 0.0.0-alpha.16_vue@3.2.45
       '@tiptap/extension-character-count': 2.0.0-beta.202
       '@uppy/core': 3.0.4
       '@uppy/dashboard': 3.2.0_@uppy+core@3.0.4
@@ -1966,8 +1966,8 @@ packages:
     resolution: {integrity: sha512-B3njjXFqTi28FfDhZ9VAVlv6mMQxLgIsBUqTPmMQF/IxWWtfN6cxYi7is+zmw+chFFe38UVaEAPSHORLMxnJ6A==}
     dev: false
 
-  /@halo-dev/richtext-editor/0.0.0-alpha.14_vue@3.2.45:
+  /@halo-dev/richtext-editor/0.0.0-alpha.16_vue@3.2.45:
-    resolution: {integrity: sha512-PiFN/sS1LEO2Vx9c5C147/gg8HXdcGnf9jRFEU3vLZPEtg4WdjApoYLl8ReOz+7sRxjeqeIEG3UzL0Yu4tdB/A==}
+    resolution: {integrity: sha512-MW0KCYT6UGg2zOh0kryGEz+IKLzo/onUTbAYCkiMX4YaQ1mIOoBU+ILaa0YOL2FmDyCxXst/UoSKdUvZu+Qieg==}
     peerDependencies:
       vue: ^3.2.37
     dependencies:
@@ -1983,6 +1983,7 @@ packages:
       '@tiptap/extension-gapcursor': 2.0.0-beta.204_fosglmwb3u6jhi6bbjmnlbdsbu
       '@tiptap/extension-hard-break': 2.0.0-beta.204_fosglmwb3u6jhi6bbjmnlbdsbu
       '@tiptap/extension-heading': 2.0.0-beta.204_fosglmwb3u6jhi6bbjmnlbdsbu
+      '@tiptap/extension-highlight': 2.0.0-beta.204_fosglmwb3u6jhi6bbjmnlbdsbu
       '@tiptap/extension-history': 2.0.0-beta.204_fosglmwb3u6jhi6bbjmnlbdsbu
       '@tiptap/extension-horizontal-rule': 2.0.0-beta.204_fosglmwb3u6jhi6bbjmnlbdsbu
       '@tiptap/extension-image': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
@@ -2812,6 +2813,14 @@ packages:
       '@tiptap/core': 2.0.0-beta.202
     dev: false
 
+  /@tiptap/extension-highlight/2.0.0-beta.204_fosglmwb3u6jhi6bbjmnlbdsbu:
+    resolution: {integrity: sha512-uAExkndb7lkREyQxiaknDWjGU8NvA4DT1b6hi4HaXz8doeEfVh71JFHkxFYV/I5qRnob8fhHv0ZxN7Q5CqC8fQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.193
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.202
+    dev: false
+
   /@tiptap/extension-history/2.0.0-beta.204_fosglmwb3u6jhi6bbjmnlbdsbu:
     resolution: {integrity: sha512-Dk64Nu2bnPutLV0Fd2H1c5ffGE+bQ2eVyWUrAGodAhZJINouN8EF7T0pZLSo0YaIlLMWsl23fImGtBEyVYQUKw==}
     peerDependencies:

src/components/editor/DefaultEditor.vue

@@ -30,9 +30,11 @@ import {
   ExtensionSubscript,
   ExtensionSuperscript,
   ExtensionPlaceholder,
+  ExtensionHighlight,
   ExtensionCommands,
   ExtensionIframe,
   CommandsSuggestion,
+  CommentParagraph,
   CommandHeader1,
   CommandHeader2,
   CommandHeader3,
@@ -41,6 +43,10 @@ import {
   CommandHeader6,
   CommandCodeBlock,
   CommandIframe,
+  CommandTable,
+  CommandBulletList,
+  CommandOrderedList,
+  CommandTaskList,
   ExtensionCodeBlock,
   lowlight,
   UndoMenuItem,
@@ -60,6 +66,11 @@ import {
   AlignRightMenuItem,
   AlignJustifyMenuItem,
   TableMenuItem,
+  BulletListMenuItem,
+  OrderedListMenuItem,
+  TaskListMenuItem,
+  HighlightMenuItem,
+  Separator,
 } from "@halo-dev/richtext-editor";
 import {
   IconCalendar,
@@ -166,11 +177,13 @@ const editor = useEditor({
     ExtensionPlaceholder.configure({
       placeholder: "输入 / 以选择输入类型",
     }),
+    ExtensionHighlight,
     ExtensionCommands.configure({
       suggestion: {
         ...CommandsSuggestion,
         items: ({ query }: { query: string }) => {
           return [
+            CommentParagraph,
             CommandHeader1,
             CommandHeader2,
             CommandHeader3,
@@ -178,6 +191,10 @@ const editor = useEditor({
             CommandHeader5,
             CommandHeader6,
             CommandCodeBlock,
+            CommandTable,
+            CommandBulletList,
+            CommandOrderedList,
+            CommandTaskList,
             CommandIframe,
           ].filter((item) =>
             [...item.keywords, item.title].some((keyword) =>
@@ -222,17 +239,26 @@ const toolbarMenuItems = computed(() => {
   return [
     UndoMenuItem(editor.value),
     RedoMenuItem(editor.value),
+    Separator(),
     HeadingMenuItem(editor.value),
     BoldMenuItem(editor.value),
     ItalicMenuItem(editor.value),
     UnderlineMenuItem(editor.value),
     StrikeMenuItem(editor.value),
+    HighlightMenuItem(editor.value),
+    Separator(),
     QuoteMenuItem(editor.value),
     CodeMenuItem(editor.value),
     SuperScriptMenuItem(editor.value),
     SubScriptMenuItem(editor.value),
+    Separator(),
+    BulletListMenuItem(editor.value),
+    OrderedListMenuItem(editor.value),
+    TaskListMenuItem(editor.value),
+    Separator(),
     CodeBlockMenuItem(editor.value),
     TableMenuItem(editor.value),
+    Separator(),
     AlignLeftMenuItem(editor.value),
     AlignCenterMenuItem(editor.value),
     AlignRightMenuItem(editor.value),
@@ -254,6 +280,7 @@ const bubbleMenuItems = computed(() => {
     ItalicMenuItem(editor.value),
     UnderlineMenuItem(editor.value),
     StrikeMenuItem(editor.value),
+    HighlightMenuItem(editor.value),
     QuoteMenuItem(editor.value),
     CodeMenuItem(editor.value),
     CodeBlockMenuItem(editor.value),
@@ -335,6 +362,9 @@ watch(
     :editor="editor"
     :toolbar-menu-items="toolbarMenuItems"
     :bubble-menu-items="bubbleMenuItems"
+    :content-styles="{
+      width: 'calc(100% - 18rem)',
+    }"
   >
     <template #extra>
       <div class="h-full w-72 overflow-y-auto border-l bg-white">