codemirror内部模式自动缩进问题

Question

我在获取codemirror以将正确的自动缩进应用于混合模式中的内部模式时遇到了一些问题。

你可以在这里看到该模式的实时版本(以及它是如何不工作的)：https://extremely-alpha.iodide.io/notebooks/216/但简而言之，我们的想法是能够使用matlab风格的块分隔符在以下语言之间切换：

%% js
[1,2,3].forEach(i => {
console.log(i)
})
%% py
for i in range(5):
for j in range(10):
print i+j
%% css
div#foo {
border: 1px solid pink
}

正如您从我的示例链接中看到的，语法高亮显示可以正常工作，但您也会注意到缩进没有按要求工作。

此代码镜像模式的代码在github上。它在很大程度上是基于codemirror的html混合模式。

我尝试将copyState添加到我的代码中，再次遵循html混合模式——

copyState: state => {
let local;
if (state.localState) {
console.log("state.localState copied");
local = CodeMirror.copyState(state.localMode, state.localState);
}
return {
token: state.token,
localMode: state.localMode,
localState: local
};
},

--但这会导致另一种奇怪的缩进行为，并且最终不会起作用。

很长一段时间以来，我一直在思考这个问题，但我还没能通过谷歌、api文档和论坛将其拼凑起来，所以任何帮助都将不胜感激！非常感谢。

Answer 1

以防将来有人遇到这个问题：事实证明，代码镜像模式通常不会内置合理的默认值，或者至少在使用CodeMirror.getMode(...)时，默认情况下不会加载它们。就我而言，我不得不从换

const innerModes = {
js: CodeMirror.getMode({}, { name: "javascript" }),
py: CodeMirror.getMode({}, { name: "python" }),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({}, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};

至：

const innerModes = {
js: CodeMirror.getMode(
{ indentUnit: 2, statementIndent: 2 },
{ name: "javascript" }
),
py: CodeMirror.getMode(
{ indentUnit: 4, hangingIndent: 4 },
{ name: "python" }
),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({ indentUnit: 2 }, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};

这防止了NaNs从子模式的缩进功能中传出。