fix( list-module issue 5821): ol ul list 嵌套 编辑区及 HTML 没有正确展示 bug

packages/list-module/src/module/elem-to-html.ts

@@ -7,6 +7,7 @@ import { Element, Path, Editor } from 'slate'
 import { DomEditor } from '@wangeditor/core'
 import { ListItemElement } from './custom-types'
 import { ELEM_TO_EDITOR } from '../utils/maps'
+import { hasSameOrderWithBrother } from './helpers'
 
 /**
  * 当前 list-item 前面需要拼接几个 <ol> 或 <ul>
@@ -43,8 +44,8 @@ function getStartContainerTagNumber(elem: Element): number {
     return level - prevLevel
   }
   if (prevLevel > level) {
-    // 上一个 level 大于当前 level ，不需要拼接 <ol> 或 <ul>
-    return 0
+    // 此处需要看上一个同级兄弟节点 ordered 是否一致，如果一致则不需要拼接，否则需要拼接
+    return hasSameOrderWithBrother(editor, elem as ListItemElement) ? 0 : 1
   }
   if (prevLevel === level) {
     // 上一个 level 等于当前 level
@@ -92,8 +93,14 @@ function getEndContainerTagNumber(elem: Element): number {
   // 下一个 elem 是 list-item
   const { ordered: nextOrdered = false, level: nextLevel = 0 } = nextElem as ListItemElement
   if (nextLevel < level) {
-    // 下一个 level 小于当前 level ，需要拼接 </ol> 或 </ul>
-    return level - nextLevel
+    // 下一个 level 小于当前 level，此处需要看上一个同级兄弟节点 ordered 是否一致，如果一致则不需要拼接，否则需要拼接
+    if (hasSameOrderWithBrother(editor, nextElem as ListItemElement)) {
+      // ordered 一致，则不需要额外拼接 </ol> 或 </ul>
+      return level - nextLevel
+    } else {
+      // ordered 不一致，则需要额外拼接 </ol> 或 </ul>
+      return level - nextLevel + 1
+    }
   }
   if (nextLevel > level) {
     // 下一个 level 大于当前 level ，不需要拼接 </ol> 或 </ul>

packages/list-module/src/module/helpers.ts

@@ -0,0 +1,60 @@
+/**
+ * @description table menu helpers
+ * @author wangfupeng
+ */
+
+import { Path, Editor } from 'slate'
+import { DomEditor, IDomEditor } from '@wangeditor/core'
+import { ListItemElement } from './custom-types'
+
+/**
+ * 获取上一个同一 level 的 list item
+ * @param editor 编辑器实例
+ * @param elem elem
+ */
+export function getBrotherListNodeByLevel(
+  editor: IDomEditor,
+  elem: ListItemElement,
+  level?: number
+): ListItemElement | null {
+  const { type, ...otherProps } = elem
+  // level 可能是 退格前的值,所以这里需要判断
+  const elemLevel = level !== undefined ? level : otherProps.level || 0
+
+  const path = DomEditor.findPath(editor, elem)
+  let brotherPath = path
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    if (brotherPath.length === 0 || path[path.length - 1] === 0) {
+      return null // 已经是最后一个节点或没有找到有效的前一个 list 节点
+    }
+    brotherPath = Path.previous(brotherPath)
+    const brotherEntry = Editor.node(editor, brotherPath)
+
+    if (!brotherEntry) {
+      return null // 没有找到有效的前一个 list 节点
+    }
+
+    const [brotherElem] = brotherEntry
+    const { level: brotherLevel = 0 } = brotherElem as ListItemElement
+    const brotherType = DomEditor.getNodeType(brotherElem)
+
+    // 验证兄弟节点是否是期望的类型和层级
+    if (brotherType !== type) {
+      return null
+    }
+    if (brotherLevel === elemLevel) {
+      return brotherElem as ListItemElement
+    }
+  }
+}
+
+export function hasSameOrderWithBrother(
+  editor: IDomEditor,
+  elem: ListItemElement,
+  level?: number
+): boolean {
+  const brotherElem = getBrotherListNodeByLevel(editor, elem, level)
+  return brotherElem ? brotherElem.ordered === elem.ordered : false
+}

packages/list-module/src/module/plugin.ts

@@ -3,9 +3,10 @@
  * @author wangfupeng
  */
 
-import { Editor, Transforms, Range } from 'slate'
+import { Editor, Transforms, Range, Path } from 'slate'
 import { IDomEditor, DomEditor } from '@wangeditor/core'
 import { ListItemElement } from './custom-types'
+import { getBrotherListNodeByLevel } from './helpers'
 
 /**
  * 获取选中的 top elems
@@ -44,10 +45,17 @@ function withList<T extends IDomEditor>(editor: T): T {
 
     if (selection.focus.offset === 0) {
       // 选中了当前 list-item 文本的开头，此时按删除键，应该降低 level 或转换为 p 元素
-      const { level = 0 } = listItemElem as ListItemElement
+      const { level = 0, ordered = false } = listItemElem as ListItemElement
       if (level > 0) {
-        // 降低 level
-        Transforms.setNodes(newEditor, { level: level - 1 })
+        // 如果有兄弟节点，则判断 ordered 是否一致，不一致需要切换 ordered
+        const brotherElem = getBrotherListNodeByLevel(
+          editor,
+          listItemElem as ListItemElement,
+          level - 1
+        )
+        if (brotherElem && brotherElem.ordered !== ordered) {
+          Transforms.setNodes(newEditor, { level: level - 1, ordered: !ordered })
+        } else Transforms.setNodes(newEditor, { level: level - 1 })
       } else {
         // 转换为 p 元素
         Transforms.setNodes(newEditor, {