Next.js项目中@monaco-editor/react外部文本拖拽插入功能失效问题

问题原因 #

@monaco-editor/react 封装的 Monaco Editor 默认仅支持编辑器内部内容的拖拽移动，未默认开启外部文本拖拽插入的支持，需要手动添加拖放事件处理逻辑以及相关配置。

修复后代码 #

import Editor from '@monaco-editor/react';
import * as monaco from 'monaco-editor';

export default function MyEditor(props){
  // 编辑器实例挂载后执行初始化逻辑
  const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
    const editorDom = editor.getDomNode();
    if (!editorDom) return;

    // 拦截dragover默认行为，避免浏览器直接打开拖拽内容
    editorDom.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.stopPropagation();
    });

    // 处理drop事件，插入拖拽的外部文本
    editorDom.addEventListener('drop', (e) => {
      e.preventDefault();
      e.stopPropagation();
      
      // 读取拖拽传输的文本内容
      const dragText = e.dataTransfer?.getData('text') || '';
      if (!dragText) return;

      // 将鼠标屏幕坐标转换为编辑器内的行列位置
      const position = editor.getPositionAtCoordinate(e.clientX, e.clientY);
      if (position) {
        // 执行编辑操作插入文本
        editor.executeEdits('drop-text', [
          {
            range: monaco.Range.fromPositions(position),
            text: dragText
          }
        ]);
        // 光标自动移动到插入内容的末尾
        editor.setPosition({
          lineNumber: position.lineNumber,
          column: position.column + dragText.length
        });
      }
    });
  };

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="//some comment"
      onMount={handleEditorDidMount}
      options={{
        // 开启编辑器内置拖放支持，兼容内外内容拖拽行为
        dropIntoEditor: true
      }}
    />
  );
}

关键逻辑说明 #

• onMount 是编辑器实例完全初始化后的回调，只有此时才能拿到可用的编辑器DOM节点和操作API
• 必须拦截dragover事件的默认行为，否则浏览器会将拖拽的文本/文件当成外部资源跳转，无法触发编辑器的插入逻辑
• dropIntoEditor是Monaco原生支持的配置项，开启后可以避免自定义事件和编辑器内置拖放逻辑冲突

内容的提问来源于stack exchange，提问作者Mohammad Reza Hosainy