From fc79de70fdc9c3d44e1c5420dd9e82443e6e49cb Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Thu, 11 Apr 2024 16:02:10 +0800
Subject: [PATCH] feat: add line-height setting feature for the default editor
 (#5681)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind feature
/area editor
/milestone 2.15.x

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

此 PR 为默认富文本编辑器中的 P 标签设置了 `line-height` 属性，因此可以支持为某一行设置行高。

#### How to test it?

测试行高功能是否正常。测试在不同组件下功能是否正常。

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

Fixes #5660

#### Does this PR introduce a user-facing change?
```release-note
为默认富文本编辑器增加行高设置
```
---
 .../editor/src/extensions/paragraph/index.ts  | 62 ++++++++++++++++++-
 .../extensions/search-and-replace/index.ts    |  2 +-
 ui/packages/editor/src/locales/en.yaml        |  3 +-
 ui/packages/editor/src/locales/zh-CN.yaml     |  1 +
 4 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/ui/packages/editor/src/extensions/paragraph/index.ts b/ui/packages/editor/src/extensions/paragraph/index.ts
index 5a11ecf6e..d9bf56d62 100644
--- a/ui/packages/editor/src/extensions/paragraph/index.ts
+++ b/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(),
+              },
+            };
+          }),
+        };
+      },
     };
   },
 });
diff --git a/ui/packages/editor/src/extensions/search-and-replace/index.ts b/ui/packages/editor/src/extensions/search-and-replace/index.ts
index 5389ee6c0..5717a57a2 100644
--- a/ui/packages/editor/src/extensions/search-and-replace/index.ts
+++ b/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,
diff --git a/ui/packages/editor/src/locales/en.yaml b/ui/packages/editor/src/locales/en.yaml
index ff8bc6692..5ccff1f09 100644
--- a/ui/packages/editor/src/locales/en.yaml
+++ b/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
diff --git a/ui/packages/editor/src/locales/zh-CN.yaml b/ui/packages/editor/src/locales/zh-CN.yaml
index 25e441247..1d209287f 100644
--- a/ui/packages/editor/src/locales/zh-CN.yaml
+++ b/ui/packages/editor/src/locales/zh-CN.yaml
@@ -131,3 +131,4 @@ editor:
       restore_default: 恢复为默认
     text:
       default: 默认
+    line_height: 行高