Merge pull request #5147 from wangeditor-team/fix-text-indent-style

fix(indent menu): 修复了因为设置 fontSize 导致 text-indent 没法对齐的问题

Author: wangfupeng1988

packages/basic-modules/__tests__/indent/menu/decrease-indent-menu.test.ts

@@ -27,7 +27,7 @@ describe('decrease indent menu', () => {
     editor.select(startLocation)
     expect(menu.isDisabled(editor)).toBeTruthy() // 没有 indent 则 disabled
 
-    Transforms.setNodes(editor, { type: 'header1' })
+    Transforms.setNodes(editor, { type: 'header1', children: [] })
     expect(menu.isDisabled(editor)).toBeTruthy() // 没有 indent 则 disabled
 
     editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
@@ -41,7 +41,7 @@ describe('decrease indent menu', () => {
 
   it('exec', () => {
     editor.select(startLocation)
-    Transforms.setNodes(editor, { indent: '2em' })
+    Transforms.setNodes(editor, { type: 'paragraph', indent: '2em', children: [] })
 
     expect(menu.isDisabled(editor)).toBeFalsy() // 有 indent 则取消 disabled
 

packages/basic-modules/__tests__/indent/menu/increase-indent-menu.test.ts

@@ -27,7 +27,7 @@ describe('increase indent menu', () => {
     editor.select(startLocation)
     expect(menu.isDisabled(editor)).toBeFalsy()
 
-    Transforms.setNodes(editor, { type: 'header1' })
+    Transforms.setNodes(editor, { type: 'header1', children: [] })
     expect(menu.isDisabled(editor)).toBeFalsy()
 
     editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
@@ -44,4 +44,15 @@ describe('increase indent menu', () => {
     menu.exec(editor, '')
     expect(menu.getValue(editor)).toBe('2em')
   })
+
+  it('indent value', () => {
+    editor.insertNode({
+      type: 'paragraph',
+      children: [{ fontSize: '18px', text: 'text1' } as any],
+    })
+
+    menu.exec(editor, '')
+
+    expect(menu.getValue(editor)).toBe('36px')
+  })
 })

packages/basic-modules/src/modules/indent/menu/IncreaseIndentMenu.ts

@@ -3,15 +3,17 @@
  * @author wangfupeng
  */
 
-import { Transforms, Element, Editor } from 'slate'
-import { IDomEditor, t } from '@wangeditor/core'
+import { Transforms, Element, Editor, Text } from 'slate'
+import { IDomEditor, t, DomEditor } from '@wangeditor/core'
 import BaseMenu from './BaseMenu'
 import { INDENT_RIGHT_SVG } from '../../../constants/icon-svg'
 import { IndentElement } from '../custom-types'
+import type { FontSizeAndFamilyText } from '../../font-size-family/custom-types'
 
 class IncreaseIndentMenu extends BaseMenu {
   readonly title = t('indent.increase')
   readonly iconSvg = INDENT_RIGHT_SVG
+  private DEFAULT_INDENT_VALUE = '2em'
 
   isDisabled(editor: IDomEditor): boolean {
     const matchNode = this.getMatchNode(editor)
@@ -26,11 +28,31 @@ class IncreaseIndentMenu extends BaseMenu {
     return false
   }
 
+  private getIndentValue(editor: IDomEditor) {
+    const matchNode = this.getMatchNode(editor)
+
+    if (!matchNode) return this.DEFAULT_INDENT_VALUE
+    const textChildren = (matchNode as Element).children.filter(Text.isText)
+
+    const lastTextNode = textChildren[0] as FontSizeAndFamilyText
+
+    if (!lastTextNode || !lastTextNode.fontSize) return this.DEFAULT_INDENT_VALUE
+
+    // 如果段落的第一个 Text 节点 设置了 fontSize 样式，indent 值需要根据 fontSize 进行计算
+    const fontSize = lastTextNode.fontSize
+    const value = parseInt(lastTextNode.fontSize)
+    const unit = fontSize.replace(`${value}`, '')
+
+    return `${value * 2}${unit}`
+  }
+
   exec(editor: IDomEditor, value: string | boolean): void {
+    const indent = this.getIndentValue(editor)
+
     Transforms.setNodes(
       editor,
       {
-        indent: `2em`,
+        indent,
       },
       {
         match: n => Element.isElement(n),