codemirror 内部模式自动缩进问题答案

【问题标题】：codemirror inner mode auto indentation problemscodemirror 内部模式自动缩进问题
【发布时间】：2019-01-15 20:58:40
【问题描述】：

我在让 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
}

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

此代码镜像模式的代码是here on github。它非常基于codemirror's html mixed mode。

我尝试将 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 文档和论坛将其拼凑起来，因此我们将不胜感激！谢谢！

【问题讨论】：

标签： codemirror codemirror-modes react-codemirror

【解决方案1】：

万一以后有人遇到这个问题：事实证明，codemirror 模式通常不会内置合理的默认值，或者至少在您使用 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 传递出子模式的缩进函数。

【讨论】：