mirror of https://github.com/halo-dev/halo-admin
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 端编辑器的工具栏支持列表、文字高亮等功能。 ```pull/712/head^2
Ryan Wang
GitHub
parent
83ad16cd3f
commit
d4b7c23f53
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
resolution: {integrity: sha512-PiFN/sS1LEO2Vx9c5C147/gg8HXdcGnf9jRFEU3vLZPEtg4WdjApoYLl8ReOz+7sRxjeqeIEG3UzL0Yu4tdB/A==}
|
||||
/@halo-dev/richtext-editor/0.0.0-alpha.16_vue@3.2.45:
|
||||
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:
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue