在 Monaco Editor 中自定义右键菜单并支持多级菜单

在 Monaco Editor 中自定义右键菜单能够提供更灵活的功能选项。以下是如何在 Monaco Editor 中实现自定义右键菜单，并支持多级菜单的步骤及关键代码示例。

1. 初始化 Monaco Editor 实例

首先，需要初始化 Monaco Editor 实例，并设置基本的编辑器配置。

const initEditor = () => {
  if (monacoEditorRef.value) {
    editor = monaco.editor.create(monacoEditorRef.value, {
      value: props.modelValue,
      language: props.language,
      theme: props.theme,
      ...props.options,
    });
    // 其他初始化代码...
  }
};

2. 设置自定义右键菜单

为了自定义右键菜单，我们需要利用 MenuRegistry 和 MenuId 来注册自定义的菜单项。以下是添加自定义菜单和子菜单的关键步骤。

const setupContextMenuFeature = (editor: monaco.editor.IStandaloneCodeEditor) => {
  const originalMenus = new Map<MenuId, LinkedList>();
  
  // 备份默认菜单
  MenuRegistry._menuItems.forEach((list, id) => {
    originalMenus.set(id, list);
  });

  // 添加自定义菜单项
  addActionWithSubmenus(editor, {
    title: 'AI 助手',
    context: 'EditorAIAssistantContext',
    group: 'navigation',
    order: 1,
    actions: [
      { id: 'explain-code', label: '解释代码', run: explainCode },
      { id: 'generate-unit-test', label: '生成单元测试', run: generateUnitTest },
      { id: 'generate-comments', label: '生成注释', run: generateComments },
      { id: 'provide-optimization-suggestions', label: '生成优化建议', run: provideOptimizationSuggestions },
    ],
  });

  // 恢复默认菜单项
  originalMenus.forEach((list, id) => {
    MenuRegistry._menuItems.set(id, list);
  });
};

3. 添加具有子菜单的菜单项

通过 addActionWithSubmenus 函数，可以为右键菜单添加子菜单项。以下是实现子菜单的代码。

const addActionWithSubmenus = (
  editor: monaco.editor.IStandaloneCodeEditor,
  descriptor: {
    title: string;
    context: string;
    group: string;
    order: number;
    actions: { run: () => void; label: string; id: string }[];
  },
) => {
  const submenuId = new MenuId(descriptor.context);
  const submenuList = new LinkedList();
  MenuRegistry._menuItems.set(submenuId, submenuList);

  descriptor.actions.forEach((action, index) => {
    editor.addAction({
      id: action.id,
      label: action.label,
      run: action.run,
      contextMenuOrder: index,
      contextMenuGroupId: descriptor.context,
    });
    const actionId = editor
      .getSupportedActions()
      .find((a) => a.label === action.label && a.id.endsWith(action.id))!.id;

    const contextMenuItems = MenuRegistry._menuItems.get(MenuId.EditorContext) as LinkedList;
    const item = popItem(contextMenuItems, actionId);
    if (item) {
      submenuList.push(item);
    }
  });

  const contextMenuItems = MenuRegistry._menuItems.get(MenuId.EditorContext) as LinkedList;
  contextMenuItems.push({
    group: descriptor.group,
    order: descriptor.order,
    submenu: submenuId,
    title: descriptor.title,
  });
};

4. 从菜单中移除并恢复默认项

在自定义菜单项时，可能需要从默认菜单中移除一些项，以下是处理这部分的代码。

const popItem = (items: LinkedList, id: string): any => {
  let node = items._first;
  while (node) {
    if (node.element?.command?.id === id) {
      items._remove(node);
      return node.element;
    }
    node = node.next;
  }
};

5. 实现菜单项的功能

自定义的菜单项可以绑定特定的功能。以下是一些示例功能的实现代码：

function explainCode() {
  alert('解释代码功能正在开发中...');
}

function generateUnitTest() {
  alert('生成单元测试功能正在开发中...');
}

function generateComments() {
  alert('生成注释功能正在开发中...');
}

function provideOptimizationSuggestions() {
  alert('优化建议功能正在开发中...');
}

总结

通过上述步骤，你可以在 Monaco Editor 中添加自定义的右键菜单，并支持多级菜单。关键点在于使用 MenuRegistry 和 MenuId 来操作菜单项，并通过 LinkedList 管理菜单的层级结构。这使得你可以根据需要扩展编辑器的功能，并提供更丰富的用户交互体验。