在 ReactJS 的 monaco-editor 中添加 mermaid 语法

Question

我尝试通过 Monaco-mermaid 将 mermaid 语法添加到 monaco-editor 中，但它返回一个错误：

这是我的代码：

import React, { useEffect, useRef } from "react";

import * as monaco from 'monaco-editor';

import initEditor from 'monaco-mermaid';

import './style.css';

const Editor = (props) => {

    const { className, handleChangeCode, handleDownload } = props;
    // comment

    const editorRef = useRef(null);

    useEffect(() => {
        const editorContainer = document.getElementById('monaco-mermaid');
        const monacoEditor = monaco.editor.create(editorContainer, {
            language: 'mermaid',
            minimap: {
                enabled: false
            },
            fontWeight: '600',
            fontSize: '14px',
            overviewRulerLanes: 0,
            quickSuggestions: false,
        });
        initEditor(monacoEditor);
    },[])

    return (
        <div id="editor" ref={editorRef} className="editor">
            <div className="editor-top">
                <div className="icon">Code</div>
            </div>
            <div id="monaco-mermaid" style={{height: '600px'}}></div>
            <div className={`editor-bottom`}>
                <div className="png-button" onClick={() => handleDownload('svg')}>
                    Save as SVG
                </div>
                <div className="png-button" onClick={() => handleDownload('png')}>
                    Save as PNG
                </div>
                <div className="png-button" onClick={() => handleDownload('clipboard')}>
                    Copy to clipboard
                </div>
            </div>
        </div>
    );
};

export default Editor;

我的摩纳哥编辑器版本是：0.34.0，摩纳哥美人鱼：1.0.8。请帮助我！！！

Answer 1

根据 GitHub 上此链接的 Monaco-Mermaid 包中 initEditor 函数的第一个参数的类型，您需要将

Monaco

类型传递给该函数。

您更正后的代码如下。

import * as monaco from 'monaco-editor';
initEditor(monaco);