问题标签 [react-codemirror]

我正在使用 react-codemirror 并希望在 Codemirror 中突出显示文本“ Hello ”，但 match-highlighter 插件没有突出显示相同的内容。下面是相同的代码。

当前输出在下面的屏幕截图中，该单词未突出显示。

使用react-codemirror2时如何使用自定义CodeMirror模式？导入后两者和都未定义，如下所示：CodeMirror.defineSimpleModeCodeMirror.defineMode

上下文：在我的反应项目中，我想使用CodeMirror并定义我自己的输入语言，该语言与某些正则表达式匹配，然后突出显示它们以指示用户已正确输入它们。我还想要行号，没有换行，等宽字体，因此代码编辑器似乎接近我想要实现的目标。

我在我的 react 应用程序中创建了一个 react-codemirror 2 组件，但包的 linting 功能不起作用。我尝试浏览其他堆栈溢出问题，但由于这些问题至少有 2 年的历史，看起来原始库的文件结构，即 codemirror 已更改，并且似乎没有一个解决方案有效。我还在他们的 Github 存储库中打开了一个问题，但没有对此作出回应。希望您能提供帮助，这是我的组件的代码。

我正在尝试覆盖组件中的 onChange 方法，但该方法未在任何 DOM 事件（如 onChange、onClick、onDblClick 等）上运行。以下是正在呈现组件的部分和组件的代码。这是正在使用的包的onChange 文档。任何帮助将不胜感激，感谢您抽出时间:)

组件代码

我正在使用 ReactCodemirror2 包装器将 Javascript 编辑器带到我的 ReactJS 应用程序中。问题是我不知道如何重用定义的变量，我的意思是：

如您所见firstNumber，不会出现在自动完成对话框中。我做了一项研究，发现这anyword-hint.js可能会奏效，期待任何以前的书面文字。我怎样才能告诉编辑器使用anyword-hint？还是有更好的方法来使用预定义变量？

这是我所拥有的：

我正在尝试使用反应包装器库https://www.npmjs.com/package/react-codemirror2使用代码镜像浏览器编辑器实现 css 的自动建议

我已经尝试过 editor.execCommand('autocomplete');onchange 事件，但它会使浏览器崩溃

我的尝试

提前致谢

我开始在 React 项目中使用 CodeMirror 6（也就是暂时的下一个）。

过去，我使用 React CodeMirror 2 作为包装器。即将推出的 CodeMirror 版本是否有类似的功能？

我正在尝试消除对更新 codemirror 的调用。它有点“有效”，但问题是编辑器的值直到 debounce 调用之后才更新（根本）。因此，即使我按下空格键，光标位置也不会更新，直到去抖动调用完成。

debounced call 是一个动作创建者，它流经多个 sagas、reducer 并最终更新在应用程序中产生明显延迟的组件。有没有办法做到这一点，以便用户可以继续打字而不会出现这种延迟？

编辑：

这个问题很好地总结了我的问题：代码镜像从状态中获取值，而去抖动防止状态触发。

代码：

编辑2：

这是我使用本地状态和空闲计时器的实现。不太工作，但几乎：

我正在开发一个标记器，并想从代码中突出显示一个特定的标记。

如何在特定标记下划线或加粗，例如world这种情况下的文本？

或者是否有任何其他代码编辑器库可以突出显示给定开始和结束索引的任何子字符串？

我正在使用 graphiql，我想使用 DOM 编写突变，我们将突变添加到代码镜像的地方

这就是我添加文本时它处理文本的方式

是否可以在 graphiql 工作区中添加来自 DOM 的突变；