CodeMirror 自定义代码折叠层级实现指南

背景介绍

在代码编辑器中，代码折叠是一项提高代码可读性和编辑效率的重要功能。CodeMirror作为一款功能强大的代码编辑器，提供了默认的代码折叠功能，但有时开发者需要更精细地控制折叠层级，而不是简单地全部折叠。

问题描述

CodeMirror默认的foldAll方法会将所有可折叠的代码块全部折叠，这可能导致某些情况下显示过于简洁（如仅显示{}），而开发者可能希望保留某些层级的结构可见。例如，在处理JSON或嵌套对象时，我们可能希望只折叠最外层结构，而保持内层结构展开。

解决方案

要实现自定义层级的代码折叠，我们需要利用CodeMirror的语法树分析能力和折叠效果API。以下是实现步骤：

1. 分析语法树：首先需要遍历文档的语法树，识别出需要折叠的代码块节点。

2. 确定折叠层级：根据语法节点的深度或类型，筛选出特定层级的节点。

3. 应用折叠效果：对选中的节点应用折叠效果，而不是简单地折叠全部内容。

实现代码示例

import { foldEffect } from '@codemirror/language';

function customFoldLevels(view, maxLevel = 1) {
  let effects = [];
  let tree = syntaxTree(view.state);
  
  // 遍历语法树
  tree.iterate({
    enter(node) {
      // 根据节点类型和深度判断是否需要折叠
      if (node.type.is("Block") && getNodeDepth(node) <= maxLevel) {
        effects.push(foldEffect.of({
          from: node.from,
          to: node.to
        }));
      }
    }
  });
  
  if (effects.length) {
    view.dispatch({ effects });
  }
}

// 辅助函数：获取节点深度
function getNodeDepth(node) {
  let depth = 0;
  while (node.parent) {
    depth++;
    node = node.parent;
  }
  return depth;
}

关键点解析

1. 语法树遍历：使用syntaxTree获取当前文档的语法树结构，然后通过iterate方法遍历所有节点。

2. 节点筛选：在遍历过程中，可以根据节点类型(node.type)和深度(getNodeDepth)来筛选需要折叠的特定层级节点。

3. 折叠效果应用：对选中的节点范围(from/to)创建折叠效果，并通过view.dispatch应用这些效果。

进阶应用

1. 基于节点类型的折叠：可以扩展筛选条件，针对特定类型的节点（如函数体、循环体等）实现折叠。

2. 交互式折叠控制：结合编辑器命令，实现快捷键控制不同层级的折叠。

3. 持久化折叠状态：将用户的折叠偏好保存起来，下次打开文档时恢复相同的折叠状态。

注意事项

1. 确保在编辑器扩展中正确配置了语言支持，以便语法树能够正确解析。

2. 对于大型文档，频繁的语法树遍历可能影响性能，可以考虑优化遍历范围或使用缓存。

3. 不同的语言可能需要不同的节点类型判断逻辑，需要根据具体语言规范调整实现。

通过这种自定义折叠层级的实现方式，开发者可以更灵活地控制代码显示结构，提升代码编辑体验。