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

fix(indent menu): 修复了因为设置 fontSize 导致 text-indent 没法对齐的问题
wangeditor-team · Dec 24, 2022 · f491c00 · f491c00
2 parents 75812c3 + a431d46
commit f491c00
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 6 deletions.
diff --git a/packages/basic-modules/__tests__/indent/menu/decrease-indent-menu.test.ts b/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
 

diff --git a/packages/basic-modules/__tests__/indent/menu/increase-indent-menu.test.ts b/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')
+ })
 })
diff --git a/packages/basic-modules/src/modules/indent/menu/IncreaseIndentMenu.ts b/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),