fix: import lineheight

package.json

@@ -1,6 +1,6 @@
 {
   "name": "echo-editor",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "private": false,
   "license": "MIT",
   "description": "A modern WYSIWYG rich-text editor using tiptap for Vue.js",

src/extensions/LineHeight/LineHeight.ts

@@ -1,12 +1,14 @@
 import { Extension } from '@tiptap/core'
 import type { Editor } from '@tiptap/core'
-import { createLineHeightCommand, transformCSStoLineHeight, transformLineHeightToCSS } from '@/utils/line-height'
+import { createLineHeightCommand } from '@/utils/line-height'
 import LineHeightDropdown from './components/LineHeightDropdown.vue'
 import type { GeneralOptions } from '@/type'
+import { DEFAULT_LINE_HEIGHT } from '@/constants'
 
 export interface LineHeightOptions extends GeneralOptions<LineHeightOptions> {
   types: string[]
   lineHeights: string[]
+  defaultHeight: string
 }
 
 declare module '@tiptap/core' {
@@ -25,6 +27,7 @@ export const LineHeight = Extension.create<LineHeightOptions>({
       ...this.parent?.(),
       types: ['paragraph', 'heading', 'list_item', 'todo_item'],
       lineHeights: ['100%', '115%', '150%', '200%', '250%', '300%'],
+      defaultHeight: DEFAULT_LINE_HEIGHT,
       button({ editor, t }: { editor: Editor; t: any }) {
         return {
           component: LineHeightDropdown,
@@ -45,16 +48,13 @@ export const LineHeight = Extension.create<LineHeightOptions>({
           lineHeight: {
             default: null,
             parseHTML: element => {
-              return transformCSStoLineHeight(element.style.lineHeight) || null
+              return element.style.lineHeight || this.options.defaultHeight
             },
             renderHTML: attributes => {
-              if (!attributes.lineHeight) {
+              if (attributes.lineHeight === this.options.defaultHeight || !attributes.lineHeight) {
                 return {}
               }
-              const cssLineHeight = transformLineHeightToCSS(attributes.lineHeight)
-              return {
-                style: `line-height: ${cssLineHeight};`,
-              }
+              return { style: `line-height: ${attributes.lineHeight}` }
             },
           },
         },

src/styles/ProseMirror.scss

@@ -1,11 +1,11 @@
 .ProseMirror {
   /* Typography */
   p {
-    @apply leading-relaxed my-3 first:mt-0 last:mb-0;
+    @apply leading-relaxed first:mt-0 last:mb-0;
   }
 
   & > p {
-    @apply my-6 first:mt-0 last:mb-0;
+    @apply mb-1.5 first:mt-0 last:mb-0;
   }
 
   h1 {

src/utils/line-height.ts

@@ -5,8 +5,6 @@ import type { Command } from '@tiptap/core'
 
 export const ALLOWED_NODE_TYPES = ['paragraph', 'heading', 'list_item', 'todo_item']
 
-const NUMBER_VALUE_PATTERN = /^\d+(.\d+)?$/
-
 export function isLineHeightActive(state: EditorState, lineHeight: string): boolean {
   const { selection, doc } = state
   const { from, to } = selection
@@ -33,34 +31,6 @@ export function isLineHeightActive(state: EditorState, lineHeight: string): bool
   return active
 }
 
-export function transformLineHeightToCSS(value: string | number): string {
-  if (!value) return ''
-
-  let strValue = String(value)
-
-  if (NUMBER_VALUE_PATTERN.test(strValue)) {
-    const numValue = parseFloat(strValue)
-    strValue = String(Math.round(numValue * 100)) + '%'
-  }
-
-  return parseFloat(strValue) * LINE_HEIGHT_100 + '%'
-}
-
-export function transformCSStoLineHeight(value: string): string {
-  if (!value) return ''
-  if (value === DEFAULT_LINE_HEIGHT) return ''
-
-  let strValue = value
-
-  if (NUMBER_VALUE_PATTERN.test(value)) {
-    const numValue = parseFloat(value)
-    strValue = String(Math.round(numValue * 100)) + '%'
-    if (strValue === DEFAULT_LINE_HEIGHT) return ''
-  }
-
-  return parseFloat(strValue) / LINE_HEIGHT_100 + '%'
-}
-
 interface SetLineHeightTask {
   node: ProsemirrorNode
   nodeType: NodeType