codemirror TAB 缩进问题记录

[wxaxiaoyao]

codemirror 默认 TAB 键是支持缩进的, 但在没有选择文本时, 缩进是一个 Tab 键而不是 indexUnit 对应的空格数. 默认也不支持 Shift - Tab 往回缩进, 这个在排版文本是非常麻烦的. 为了解决这两个问题我们需要重新定义这两个快捷键的实现, 具体伪代码如下:

{ // 此对象为 codemirror 配置选项对象, 下面仅对选项的快捷键相关部分做说明
    extraKeys: {
        Tab: (cm) => {
            if (cm.somethingSelected()) {      // 存在文本选择
                cm.indentSelection('add');    // 正向缩进文本
            } else {                    // 无文本选择  
                //cm.indentLine(cm.getCursor().line, "add");  // 整行缩进 不符合预期
                cm.replaceSelection(Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");  // 光标处插入 indentUnit 个空格
            }   
        },  
        "Shift-Tab": (cm) => {              // 反向缩进   
            if (cm.somethingSelected()) {
                cm.indentSelection('subtract');  // 反向缩进
            } else {
                // cm.indentLine(cm.getCursor().line, "subtract");  // 直接缩进整行
                const cursor = cm.getCursor();
                cm.setCursor({line: cursor.line, ch: cursor.ch - 4});  // 光标回退 indexUnit 字符
            }   
            return ;
        },  
    }
}

原文链接 wxaxiaoyao.cn/article/53