【MonacoEditor】：VSCode 代码编辑器

目录
1. MonacoEditor 是什么？
2. MonacoEditor 入门基础
  2.1. 有基础示例吗？
  2.2. 还有个 Webpack 插件？
  2.3. 需要什么依赖？
  2.4. 怎么初始化？
  2.5. 重新布局？
  2.6. 监听内容变化？取值？
3. 综合示例

https://github.com/Microsoft/monaco-editor-samples/

// @ts-ignore
self.MonacoEnvironment = {
  getWorkerUrl: function (_moduleId: any, label: string) {
    if (label === 'json') {
      return './json.worker.bundle.js';
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return './css.worker.bundle.js';
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return './html.worker.bundle.js';
    }
    if (label === 'typescript' || label === 'javascript') {
      return './ts.worker.bundle.js';
    }
    return './editor.worker.bundle.js';
  }
};

// webpack.config.js
module.exports = {
  mode: 'development',
  entry: {
    app: './src/index.tsx',
    'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
    'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
    'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
    'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
    'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
  },
  ...
}

https://github.com/Microsoft/monaco-editor-webpack-plugin

export function create(domElement: HTMLElement, options?: IStandaloneEditorConstructionOptions, override?: IEditorOverrideServices): IStandaloneCodeEditor;

import React, { useRef, useEffect } from 'react';
import * as monaco from 'monaco-editor';

export const Editor: React.FC = () => {
  const divEl = useRef<HTMLDivElement>(null);
  let editor: monaco.editor.IStandaloneCodeEditor;
  useEffect(() => {
    if (divEl.current) {
      editor = monaco.editor.create(divEl.current, {
        value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
        language: 'typescript'
      });
    }
    return () => {
      editor.dispose();
    };
  }, []);
  return <div className="Editor" ref={divEl}></div>;
};

export interface IEditor {
    /**
     * Instructs the editor to remeasure its container. This method should
     * be called when the container of the editor gets resized.
     *
     * If a dimension is passed in, the passed in value will be used.
     */
    layout(dimension?: IDimension): void;
}

  // autoLayout
  useEffect(() => {
    const layout = () => {
      const editor = editorRef.current;
      if (editor) {
        editor.layout();
      }
    };

    const debounedLayout = _.debounce(layout, 500);

    window.addEventListener("resize", debounedLayout);

    return () => {
      window.removeEventListener("resize", debounedLayout);
    };
  }, []);

export interface ICodeEditor extends IEditor {
    /**
     * An event emitted when the content of the current model has changed.
     * @event
     */
    onDidChangeModelContent(listener: (e: IModelContentChangedEvent) => void): IDisposable;
    onKeyDown(listener: (e: IKeyboardEvent) => void): IDisposable;
}

editor.onDidChangeModelContent((e) => {
    // 内容变更回调
});

editor.onKeyDown((e) => {
    // 按键监听回调
    if (e.ctrlKey && e.keyCode === 49) { // Ctrl+S
          e.preventDefault();
          // 。。。。
     }
});