Yoopta-Editor 中嵌套数字列表的深度控制问题解析

2025-07-04 20:11:26作者：翟萌耘Ralph

问题现象与背景

在富文本编辑器开发中，列表嵌套是一个常见但容易出问题的功能点。Yoopta-Editor 项目中出现的这个特定问题，展示了数字列表与嵌套列表交互时的一个典型边界情况。

当用户在数字列表中创建嵌套列表后，尝试通过连续按 Enter 键返回主列表时，编辑器没有正确保持数字列表的连续性，而是意外地切换到了项目符号列表。这种行为打破了用户对数字列表连续性的预期，需要额外的操作来修正格式。

技术原理分析

这个问题本质上涉及两个关键技术点：

列表深度管理机制：编辑器需要维护每个列表项的嵌套深度信息。当用户按 Tab 或使用缩进功能时，会增加当前项的深度；按 Shift+Tab 或减少缩进时，则减少深度。
列表类型继承逻辑：在减少嵌套深度时，编辑器需要正确处理列表类型的继承关系。当前实现中，当从嵌套列表返回主列表时，没有考虑父级列表的类型信息，导致默认使用了项目符号列表。

解决方案设计

核心思路

解决这个问题的关键在于修改 decreaseBlockDepth 函数的逻辑，使其能够：

识别当前块的父级块类型
根据父级类型决定如何转换当前块
保持数字列表的连续性

具体实现方案

// 修改后的 decreaseBlockDepth 函数逻辑
export function decreaseBlockDepth(editor: YooEditor, options: BlockDepthOptions = {}) {
  const { at = editor.path.current, blockId } = options;
  
  const block = blockId ? editor.children[blockId] : findPluginBlockByPath(editor, { at });
  if (!block) return;
  
  const isBulletedList = block.type === 'bulleted-list';
  const parentBlock = getParentBlock(editor, block.id); // 需要实现获取父块的函数
  
  if(isBulletedList && parentBlock?.type === 'numbered-list') {
    // 当从项目符号列表返回到数字列表时
    const newOrder = parentBlock.meta.order + 1;
    
    editor.applyTransforms([
      {
        type: 'set_block_meta',
        id: block.id,
        properties: { 
          depth: parentBlock.meta.depth,
          order: newOrder
        },
        prevProperties: { 
          depth: block.meta.depth,
          order: block.meta.order
        }
      },
      {
        type: 'set_block_type',
        id: block.id,
        value: 'numbered-list',
        prevValue: 'bulleted-list'
      }
    ]);
  } else {
    // 默认情况：简单减少深度
    const newDepth = Math.max(0, block.meta.depth - 1);
    editor.applyTransforms([{
      type: 'set_block_meta',
      id: block.id,
      properties: { depth: newDepth },
      prevProperties: { depth: block.meta.depth }
    }]);
  }
}