这里考虑采用 monaco-editor 设定支持代码编辑 / 对比等功能
React JSON View

Resize

需要监听 resize 事件将编辑器实时变化大小

  1. function resizeHandler() {
  2.   if (monacoInstance) {
  3.     monacoInstance.layout();
  4.   }
  5. }
  6. window.addEventListener('resize', resizeHandler);

折叠

  1. function toggleFold() {
  2.   if (monacoInstance.folded) {
  3.     monacoInstance.getAction('editor.unfoldAll').run();
  4.     monacoInstance.focus();
  5.   } else {
  6.     monacoInstance.getAction('editor.foldAll').run().then(function () {
  7.       monacoInstance.setSelection(new monaco.Range(1, 1, 1, 1));
  8.       monacoInstance.focus();
  9.       monacoInstance.getAction('editor.unfold').run();
  10.     });
  11.   }
  12.   monacoInstance.setScrollTop(0);
  13.   monacoInstance.folded = !monacoInstance.folded;
  14. }