From d4b7c23f53abf34420df09d4e11db1a11960f983 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Mon, 28 Nov 2022 19:22:25 +0800 Subject: [PATCH] chore: bump @halo-dev/richtext-editor to support more features (#722) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### 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: image #### Special notes for your reviewer: 测试方式： 1. 需要 `pnpm install` 2. 测试上述功能是否正常。 #### Does this PR introduce a user-facing change? ```release-note Console 端编辑器的工具栏支持列表、文字高亮等功能。 ``` --- package.json | 2 +- pnpm-lock.yaml | 17 ++++++++++---- src/components/editor/DefaultEditor.vue | 30 +++++++++++++++++++++++++ 3 files changed, 44 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 67e158fa..a1c198bb 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 55ff88c2..fc18ebd2 100644 --- a/pnpm-lock.yaml +++ b/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: - 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: diff --git a/src/components/editor/DefaultEditor.vue b/src/components/editor/DefaultEditor.vue index a1b65bef..e3189cca 100644 --- a/src/components/editor/DefaultEditor.vue +++ b/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)', + }" >