在 React 中渲染 JSX 或 Monaco 编辑器区域内的图标

Question

我正在开发一个以帖子形式展示代码片段的平台。在代码片段中，我希望创建者能够添加他上传的代码片段的逐行解释。解释将通过工具提示或模式显示，单击图标时将触发该工具提示或模式，该图标将显示在特定行的右端，如何使用 React 在摩纳哥编辑器中渲染图标？我已阅读文档，但似乎找不到有用的东西 这是我最初的功能代码，没什么特别的。

"use client";
// import { languages } from "@/config/languages";
import { Editor, loader } from "@monaco-editor/react";
import { githubDarkTheme } from "@/config/themes/github-dark";
import { useEffect } from "react";

export default function CodeEditor({
  language,
  theme,
  fontSize,
}: {
  language: string;
  theme: string;
  fontSize: number;
}) {
  useEffect(() => {
    loader.init().then((monaco) => {
      monaco.editor.defineTheme("github-dark", githubDarkTheme as any);
      // monaco.editor.crea
    });
  }, []);
  return (
    <>
      <Editor
        height="30vh"
        theme={theme}
        defaultLanguage={language}
        defaultValue="// start writing code here ..."
        options={{
          fontFamily: "Fira Code, monospace",
          fontLigatures: true,
          fontSize: fontSize,
          padding: { top: 15 },
          // language,
        }}
        onMount={(editor, monaco) => {
          console.log("onMount", editor, monaco);
          // editor.dec
        }}
      />
    </>
  );

搜索了整个文档和互联网，但什么也没找到:(

Answer 1

要在 React 中渲染 Monaco Editor 区域内的图标，可以使用 Monaco Editor 提供的 dom 模块。以下是如何实现此目标的基本示例：

import { useEffect, useRef } from "react";
import { Editor, loader } from "@monaco-editor/react";
import { githubDarkTheme } from "@/config/themes/github-dark";

export default function CodeEditor({
  language,
  theme,
  fontSize,
}: {
  language: string;
  theme: string;
  fontSize: number;
}) {
  const editorRef = useRef<any>(null);

  useEffect(() => {
    loader.init().then((monaco) => {
      monaco.editor.defineTheme("github-dark", githubDarkTheme as any);
    });
  }, []);

  useEffect(() => {
    if (editorRef.current) {
      const editor = editorRef.current!._editor;
      const lineNumber = 1; // Line number where you want to show the icon

      const model = editor.getModel();
      const decoration = {
        range: model!.getFullModelRange(),
        options: {
          isWholeLine: true,
          glyphMarginClassName: "myGlyphMarginClass",
        },
      };

      editor.deltaDecorations([], [decoration]);

      const disposable = editor.onMouseDown((e) => {
        const target = e.target;
        if (target.position?.lineNumber === lineNumber) {
          // Logic to show your tooltip/modal
          console.log("Clicked line:", lineNumber);
        }
      });

      return () => {
        disposable.dispose();
      };
    }
  }, [editorRef]);

  return (
    <>
      <Editor
        height="30vh"
        theme={theme}
        defaultLanguage={language}
        defaultValue="// start writing code here ..."
        options={{
          fontFamily: "Fira Code, monospace",
          fontLigatures: true,
          fontSize: fontSize,
          padding: { top: 15 },
        }}
        onMount={(editor, monaco) => {
          editorRef.current = editor;
        }}
      />
    </>
  );
}

在此示例中，我们使用 deltaDecorations 方法向编辑器中的特定行号添加装饰（字形边距）。然后，我们使用 onMouseDown 事件来检测字形边距上的点击并触发工具提示/模式的显示。

您可以自定义 lineNumber 变量来指定要显示图标的行。另外，请确保添加必要的逻辑以在 onMouseDown 事件处理程序中显示工具提示/模式。