Add mermaid syntax into monaco-editor in ReactJS

Question

I try to add mermaid syntax into monaco-editor via Monaco-mermaid, It it's return an error:

enter image description here

This is my code:

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;

My monaco-editor version is: 0.34.0, monaco-mermaid: 1.0.8. Please help me !!!

Answer 1

According to the type of the first parameter of the initEditor function in the Monaco-Mermaid package on GitHub at this link, you need to pass Monaco type to this function.

Your corrected code is as follows.

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