如何在不实例化 Ace 编辑器实例的情况下使用 Ace 编辑器验证器？

Question

我使用 react-ace 在我的 React 应用程序中创建一个 CSS 文本编辑器。

看起来有点像……

import Ace from 'react-ace'

...
  <Ace 
    mode="css" 
    value={value} 
    onChange={onValueChange} 
    onValidate={onValidate} 
    ...
  />
...

这工作得很好而且花花公子——突出显示 CSS 语法错误和警告。另外，onValidate returns error/warning "annotations" 数据结构。

然而，在应用程序的其他地方，需要运行在此 React Ace 组件中使用相同的验证器，但在此组件的上下文之外。本质上我需要通过error/warning注释系统传递value中的内容，但是不能实例化这个react元素。

我试过以下方法：

import { EditSession } from 'brace'; # "brace" is the "module" compatible version of the ace editor that our "react-ace" uses
import 'brace/mode/css';

export const getCssAnnotations = (value)=> {
  const editSession = new EditSession(value);
  editSession.setMode('ace/mode/css');
  const annotations = editSession.getAnnotations();
  return annotations;
};

但是，这个函数返回的注解总是[]！我认为这是因为我只是访问注释 setter/getter 接口，而不是运行访问注释创建者。但是我无法弄清楚注释实际上是如何正常工作的。

我查看了 Creating a Syntax Highlighter for Ace 上的文档，但不明白 if/why 这里需要网络工作者参与。

谢谢！

Answer 1

这不起作用，因为 editSession 使用 web worker 生成异步注释：

editSession.on('changeAnnotation', () => {
    let annotations = editSession.getAnnotations();
    callback(null, annotations)
});

docs

请注意，目前每个 editSession 都会创建一个新的 worker，因此最好在现有的 editSession 实例上使用 setValue，或者在调用回调

之前先调用 editSession.destroy()

所以完整的解决方案可能如下所示：

const getAnnotationsPromise = (value, mode)=> {
  const editSession = new EditSession(value);
  editSession.setMode(`ace/mode/${mode}`);

  return new Promise((resolve)=> {
    editSession.on('changeAnnotation', () => {
      const annotations = editSession.getAnnotations();
      editSession.removeAllListeners('changeAnnotation');
      editSession.destroy();
      resolve(annotations);
    });
  });
};

如何在不实例化 Ace 编辑器实例的情况下使用 Ace 编辑器验证器？

How to use the Ace editor validator without instantiating an Ace editor instance?

javascript

css

ace-editor

reactjs

react-ace