React-ace: ワーカーによって削除された手動注釈

作成日 2018年07月02日  ·  5コメント  ·  ソース: securingsincity/react-ace

問題

react-aceコンポーネントをannotationsようにレンダリングしています:

<ReactAce
  mode={'javascript'}
  // ...
  annotations={[{row: 0, column: 0, type: 'error', text: 'Some error.'}]}
/>

手動の注釈が短時間表示され、ワー​​カーが実行されると削除されます。
このgifは、ページの更新を示しています。 各ページの読み込みで注釈が表示されますが、その後削除されます。
annotation

setOptions={{useWorker: false}}でワーカーを無効にしましたが、これにより手動で行われた注釈も無効になります。

ありがとう!

Documentation

最も参考になるコメント

annotations小道具を使用する代わりに、手動でsetAnnotationsます。

const Editor = ({ annotations: customAnnotations = [], value }) => {
  const [annotations, setAnnotations] = useState([]);
  const [editor, setEditor] = useState();

  const nextAnnotations = [
    ...annotations.filter(({ custom }) => !custom),  // annotations by worker
    ...customAnnotations.map((annotation) => ({ ...annotation, custom: true })) // flag for exclusion
  ];

  useEffect(() => {
    if (editor) {
      editor.getSession().setAnnotations(nextAnnotations);
    }
  }, [editor, JSON.stringify(nextAnnotations)]);

  return (
    <ReactAce
      mode="html"
      onLoad={setEditor}
      onValidate={setAnnotations}
      setOptions={{ useWorker: true }}
      value={value}
   />
}

全てのコメント5件

2セットのアノテーションが必要な気がします。 手動で追加された注釈と、モードのパーサーによって生成された注釈。 彼らは現在衝突してお互いを消し合っていると思います...

ええ、それが起こっていることです。 ワーカーのライフサイクルの外に注釈が存在する可能性があるかどうかはわかりません。

私は同じ課題に直面しています。
ワーカーによる注釈を保持しながら、エディターにカスタム注釈を追加できるようにしたい。

カスタムアノテーションを設定した後、ワーカーのアノテーションが私のアノテーションを上書きします。
私はそのように労働者を無効にする提案を見てきました。

setOptions={{useWorker: false}}

ただし、これを行うと、ワーカーの注釈が無効になるため、リンティング/構文の強調表示がすべてなくなります。 (私が望むものではありません)

ワーカーのアノテーションをカスタムアノテーションとマージできるようにしたい。

誰かがこれについて行く方法を提案できますか?

こんにちは、私は同様の状況にあり、カスタムエラーメッセージを追加できません。 解決策はありますか?

annotations小道具を使用する代わりに、手動でsetAnnotationsます。

const Editor = ({ annotations: customAnnotations = [], value }) => {
  const [annotations, setAnnotations] = useState([]);
  const [editor, setEditor] = useState();

  const nextAnnotations = [
    ...annotations.filter(({ custom }) => !custom),  // annotations by worker
    ...customAnnotations.map((annotation) => ({ ...annotation, custom: true })) // flag for exclusion
  ];

  useEffect(() => {
    if (editor) {
      editor.getSession().setAnnotations(nextAnnotations);
    }
  }, [editor, JSON.stringify(nextAnnotations)]);

  return (
    <ReactAce
      mode="html"
      onLoad={setEditor}
      onValidate={setAnnotations}
      setOptions={{ useWorker: true }}
      value={value}
   />
}
このページは役に立ちましたか?
0 / 5 - 0 評価