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({ + 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({ 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({ 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: 行高