feat: add line-height setting feature for the default editor

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

@@ -1,8 +1,33 @@
 import TiptapParagraph from "@tiptap/extension-paragraph";
 import type { ParagraphOptions } from "@tiptap/extension-paragraph";
-import type { ExtensionOptions } from "@/types";
+import type { ExtensionOptions, ToolbarItem as TypeToolbarItem } from "@/types";
+import type { Editor } from "@/tiptap";
+import { markRaw } from "vue";
+import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
+import TablerLineHeight from "~icons/tabler/line-height";
+import { i18n } from "@/locales";
+import ToolbarSubItem from "@/components/toolbar/ToolbarSubItem.vue";
 
 const Paragraph = TiptapParagraph.extend<ExtensionOptions & ParagraphOptions>({
+  addAttributes() {
+    return {
+      lineHeight: {
+        default: null,
+        parseHTML: (element) => {
+          return element.style.lineHeight;
+        },
+        renderHTML: (attributes) => {
+          const lineHeight = attributes.lineHeight;
+          if (!lineHeight) {
+            return {};
+          }
+          return {
+            style: `line-height: ${lineHeight}`,
+          };
+        },
+      },
+    };
+  },
   addOptions() {
     return {
       ...this.parent?.(),
@@ -23,6 +48,41 @@ const Paragraph = TiptapParagraph.extend<ExtensionOptions & ParagraphOptions>({
           allowPropagationDownward: true,
         };
       },
+      getToolbarItems({ editor }: { editor: Editor }): TypeToolbarItem {
+        return {
+          priority: 220,
+          component: markRaw(ToolbarItem),
+          props: {
+            editor,
+            isActive: !!editor.getAttributes(Paragraph.name)?.lineHeight,
+            icon: markRaw(TablerLineHeight),
+            title: i18n.global.t("editor.common.line_height"),
+          },
+          children: [0, 1, 1.5, 2, 2.5, 3].map((lineHeight) => {
+            return {
+              priority: lineHeight,
+              component: markRaw(ToolbarSubItem),
+              props: {
+                editor,
+                isActive:
+                  editor.getAttributes(Paragraph.name)?.lineHeight ===
+                  lineHeight,
+                title: !lineHeight
+                  ? i18n.global.t("editor.common.text.default")
+                  : String(lineHeight),
+                action: () =>
+                  editor
+                    .chain()
+                    .focus()
+                    .updateAttributes(Paragraph.name, {
+                      lineHeight,
+                    })
+                    .run(),
+              },
+            };
+          }),
+        };
+      },
     };
   },
 });

ui/packages/editor/src/extensions/search-and-replace/index.ts

@@ -59,7 +59,7 @@ const SearchAndReplace = Extension.create<ExtensionOptions>({
       getToolbarItems({ editor }: { editor: Editor }) {
         return [
           {
-            priority: 210,
+            priority: 230,
             component: markRaw(ToolbarItem),
             props: {
               editor,

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

@@ -26,7 +26,7 @@ editor:
       audio: Audio
       table: Table
       no_results: No results
-      placeholder: "Enter / to select input type"
+      placeholder: Enter / to select input type
     link:
       add_link: Add link
       edit_link: Edit link
@@ -131,3 +131,4 @@ editor:
       restore_default: Restore default
     text:
       default: Default
+    line_height: Line height

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

@@ -131,3 +131,4 @@ editor:
       restore_default: 恢复为默认
     text:
       default: 默认
+    line_height: 行高