feat: add tooltip to menus

halo-sigs · Nov 27, 2022 · b3e0f07 · b3e0f07
1 parent dbd185b
commit b3e0f07
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 18 deletions.
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -33,6 +33,7 @@ import {
   ExtensionSubscript,
   ExtensionSuperscript,
   ExtensionPlaceholder,
+  ExtensionHighlight,
   ExtensionCommands,
   ExtensionIframe,
   CommandsSuggestion,
@@ -68,6 +69,7 @@ import {
   BulletListMenuItem,
   OrderedListMenuItem,
   TaskListMenuItem,
+  HighlightMenuItem,
 } from "@halo-dev/richtext-editor";
 
 const content = ref("");
@@ -116,6 +118,7 @@ const editor = useEditor({
     ExtensionPlaceholder.configure({
       placeholder: "输入 / 以选择输入类型",
     }),
+    ExtensionHighlight,
     ExtensionCommands.configure({
       suggestion: {
         ...CommandsSuggestion,
@@ -169,6 +172,7 @@ const toolbarMenuItems = computed(() => {
     ItalicMenuItem(editor.value),
     UnderlineMenuItem(editor.value),
     StrikeMenuItem(editor.value),
+    HighlightMenuItem(editor.value),
     QuoteMenuItem(editor.value),
     CodeMenuItem(editor.value),
     SuperScriptMenuItem(editor.value),
@@ -192,6 +196,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),

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -60,6 +60,7 @@
     "@tiptap/extension-gapcursor": "^2.0.0-beta.202",
     "@tiptap/extension-hard-break": "^2.0.0-beta.202",
     "@tiptap/extension-heading": "^2.0.0-beta.202",
+    "@tiptap/extension-highlight": "2.0.0-beta.204",
     "@tiptap/extension-history": "^2.0.0-beta.202",
     "@tiptap/extension-horizontal-rule": "^2.0.0-beta.202",
     "@tiptap/extension-image": "2.0.0-beta.202",

diff --git a/packages/editor/src/components/EditorBubbleMenu.vue b/packages/editor/src/components/EditorBubbleMenu.vue
@@ -4,6 +4,8 @@ import "tippy.js/dist/svg-arrow.css";
 import type { PropType } from "vue";
 import { BubbleMenu, Editor } from "@tiptap/vue-3";
 import type { MenuItem } from "@/types";
+import { VTooltip } from "floating-vue";
+
 defineProps({
   editor: {
     type: Object as PropType<Editor>,
@@ -32,7 +34,7 @@ defineProps({
         class="text-gray-600 text-lg hover:bg-gray-100 p-0.5 rounded-sm"
         @click="menuItem.action?.()"
       >
-        <component :is="menuItem.icon" />
+        <component :is="menuItem.icon" v-tooltip="menuItem.title" />
       </button>
     </div>
   </bubble-menu>

diff --git a/packages/editor/src/components/EditorHeader.vue b/packages/editor/src/components/EditorHeader.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { Menu as VMenu } from "floating-vue";
+import { Menu as VMenu, VTooltip } from "floating-vue";
 import type { MenuItem } from "@/types";
 defineProps({
   menuItems: {
@@ -21,6 +21,7 @@ defineProps({
     >
       <button
         v-if="!menuItem.children?.length"
+        v-tooltip="menuItem.title"
         :class="{ 'bg-gray-200': menuItem.isActive?.() }"
         class="hover:bg-gray-100 p-1 rounded-sm"
         @click="menuItem.action"

diff --git a/packages/editor/src/extensions/index.ts b/packages/editor/src/extensions/index.ts
@@ -24,6 +24,7 @@ import ExtensionUnderline from "@tiptap/extension-underline";
 import ExtensionSubscript from "@tiptap/extension-subscript";
 import ExtensionSuperscript from "@tiptap/extension-superscript";
 import ExtensionPlaceholder from "@tiptap/extension-placeholder";
+import ExtensionHighlight from "@tiptap/extension-highlight";
 
 // Custom extensions
 import {
@@ -56,6 +57,7 @@ const allExtensions = [
   ExtensionImage,
   ExtensionTaskList,
   ExtensionTaskItem,
+  ExtensionHighlight,
   ExtensionLink.configure({
     autolink: true,
     openOnClick: false,
@@ -110,6 +112,7 @@ export {
   ExtensionSubscript,
   ExtensionSuperscript,
   ExtensionPlaceholder,
+  ExtensionHighlight,
   ExtensionCommands,
   CommandsSuggestion,
   ExtensionCodeBlock,

diff --git a/packages/editor/src/menus/index.ts b/packages/editor/src/menus/index.ts
@@ -40,6 +40,7 @@ import MdiTableSplitCell from "~icons/mdi/table-split-cell";
 import MdiFormatListBulleted from "~icons/mdi/format-list-bulleted";
 import MdiFormatListCheckbox from "~icons/mdi/format-list-checkbox";
 import MdiFormatListNumbered from "~icons/mdi/format-list-numbered";
+import MdiFormatColorHighlight from "~icons/mdi/format-color-highlight";
 
 export interface MenuItem {
   type: "button" | "separator";
@@ -54,7 +55,7 @@ export function UndoMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiUndoVariant,
-    title: "Undo",
+    title: "撤销",
     action: () => editor.chain().undo().run(),
     isActive: () => false,
   };
@@ -64,7 +65,7 @@ export function RedoMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiRedoVariant,
-    title: "Redo",
+    title: "恢复",
     action: () => editor.chain().redo().run(),
     isActive: () => false,
   };
@@ -74,7 +75,7 @@ export function BoldMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatBold,
-    title: "Bold",
+    title: "粗体",
     action: () => editor.chain().focus().toggleBold().run(),
     isActive: () => editor.isActive("bold"),
   };
@@ -84,7 +85,7 @@ export function ItalicMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatItalic,
-    title: "Italic",
+    title: "斜体",
     action: () => editor.chain().focus().toggleItalic().run(),
     isActive: () => editor.isActive("italic"),
   };
@@ -94,7 +95,7 @@ export function UnderlineMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatUnderline,
-    title: "Underline",
+    title: "下划线",
     action: () => editor.chain().focus().toggleUnderline().run(),
     isActive: () => editor.isActive("underline"),
   };
@@ -104,7 +105,7 @@ export function StrikeMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatStrikethrough,
-    title: "Strikethrough",
+    title: "删除线",
     action: () => editor.chain().focus().toggleStrike().run(),
     isActive: () => editor.isActive("strike"),
   };
@@ -114,7 +115,7 @@ export function QuoteMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatQuoteOpen,
-    title: "Quote",
+    title: "引用",
     action: () => editor.chain().focus().toggleBlockquote().run(),
     isActive: () => editor.isActive("blockquote"),
   };
@@ -124,7 +125,7 @@ export function CodeMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiCodeTags,
-    title: "Code",
+    title: "行内代码",
     action: () => editor.chain().focus().toggleCode().run(),
     isActive: () => editor.isActive("code"),
   };
@@ -134,7 +135,7 @@ export function SuperScriptMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatSuperscript,
-    title: "Superscript",
+    title: "上角标",
     action: () => editor.chain().focus().toggleSuperscript().run(),
     isActive: () => editor.isActive("superscript"),
   };
@@ -144,7 +145,7 @@ export function SubScriptMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatSubscript,
-    title: "Subscript",
+    title: "下角标",
     action: () => editor.chain().focus().toggleSubscript().run(),
     isActive: () => editor.isActive("subscript"),
   };
@@ -154,7 +155,7 @@ export function CodeBlockMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiCodeBracesBox,
-    title: "Code Block",
+    title: "代码块",
     action: () => editor.chain().focus().toggleCodeBlock().run(),
     isActive: () => editor.isActive("codeBlock"),
   };
@@ -164,7 +165,7 @@ export function HeadingMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatHeaderPound,
-    title: "普通文本",
+    title: "文本类型",
     isActive: () => editor.isActive("heading") || editor.isActive("paragraph"),
     children: [
       {
@@ -224,7 +225,7 @@ export function AlignLeftMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatAlignLeft,
-    title: "Align Left",
+    title: "左对齐",
     action: () => editor.chain().focus().setTextAlign("left").run(),
     isActive: () => editor.isActive({ textAlign: "left" }),
   };
@@ -234,7 +235,7 @@ export function AlignCenterMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatAlignCenter,
-    title: "Align Center",
+    title: "居中",
     action: () => editor.chain().focus().setTextAlign("center").run(),
     isActive: () => editor.isActive({ textAlign: "center" }),
   };
@@ -244,7 +245,7 @@ export function AlignRightMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatAlignRight,
-    title: "Align Right",
+    title: "右对齐",
     action: () => editor.chain().focus().setTextAlign("right").run(),
     isActive: () => editor.isActive({ textAlign: "right" }),
   };
@@ -254,7 +255,7 @@ export function AlignJustifyMenuItem(editor: Editor): MenuItem {
   return {
     type: "button",
     icon: MdiFormatAlignJustify,
-    title: "Align Justify",
+    title: "两端对齐",
     action: () => editor.chain().focus().setTextAlign("justify").run(),
     isActive: () => editor.isActive({ textAlign: "justify" }),
   };
@@ -389,3 +390,13 @@ export function TaskListMenuItem(editor: Editor): MenuItem {
     isActive: () => editor.isActive("taskList"),
   };
 }
+
+export function HighlightMenuItem(editor: Editor): MenuItem {
+  return {
+    type: "button",
+    icon: MdiFormatColorHighlight,
+    title: "高亮",
+    action: () => editor.chain().focus().toggleHighlight().run(),
+    isActive: () => editor.isActive("highlight"),
+  };
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml