How to use the monaco-editor/esm/vs/editor/editor.api.js.editor function in monaco-editor

kind: monaco.languages.CompletionItemKind.Snippet,
			insertText: [
				'if (${1:condition}) {',
				'\t$0',
				'} else {',
				'\t',
				'}'
			].join('\n'),
			insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
			documentation: 'If-Else Statement'
		}];
		return { suggestions: suggestions };
	}
});

const edit = monaco.editor.create(document.getElementById('editor'), {
  value: [
    code,
  ].join('\n'),
  theme: 'myCoolTheme',
  // value: getCode(),
  //language: 'mySpecialLanguage'
  language: 'mermaid'
});
edit.onDidChangeModelContent(function (e) {
      codeStore.set(edit.getValue());
  });

{ token: 'symbol', foreground: syntaxTheme.symbol },
    // We provide an empty string fallback
    { token: '', foreground: syntaxTheme.foreground },
  ],
  colors: {
    'editor.foreground': syntaxTheme.foreground,
    'editor.background': syntaxTheme.editorBackground,
    'editorLineNumber.foreground': syntaxTheme.lineNumbers,
    'editorLineNumber.activeForeground': syntaxTheme.lineNumbers,
    'editorIndentGuide.background': syntaxTheme.editorIndentGuide,
    'editor.selectionBackground': syntaxTheme.selectionBackground,
    'editorWidget.border': syntaxTheme.editorWidgetBorder,
    'editorWidget.background': syntaxTheme.editorWidgetBackground,
  },
});
monaco.editor.setTheme('euiColors');

export { monaco };

[/\[notice.*/, "custom-notice"],
			[/\[info.*/, "custom-info"],
			[/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
		]
	}
});


self.MonacoEnvironment = {
	getWorkerUrl: function (moduleId, label) {
		return './editor.worker.bundle.js';
	}
}

// Define a new theme that contains only rules that match this language
monaco.editor.defineTheme('myCoolTheme', {
	base: 'vs',
	inherit: false,
	rules: [
		{ token: 'custom-info', foreground: '808080' },
		{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
		{ token: 'custom-notice', foreground: 'FFA500' },
		{ token: 'custom-date', foreground: '008800' },
	]
});

// Register a completion item provider for the new language
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
	provideCompletionItems: () => {
		var suggestions = [{
			label: 'simpleText',
			kind: monaco.languages.CompletionItemKind.Text,

const {language, theme, value, editorOptions, modelOptions} = this.props,
          dynamicOptions = this.editorWillMount (),
          finalEditorOptions = editorOptions || dynamicOptions ? _.merge ( {}, UMonaco.editorOptions, editorOptions || {}, dynamicOptions || {}, { model: null } ) : UMonaco.editorOptions;

    this.editor = monaco.editor.create ( this.ref.current!, finalEditorOptions ) as unknown as MonacoEditor; //TSC //UGLY

    this.editor.getFilePath = () => this.props.filePath; //UGlY
    this.editor.getChangeDate = () => this._currentChangeDate; //UGlY

    if ( theme ) {

      monaco.editor.setTheme ( theme );

    }

    const model = monaco.editor.createModel ( value, language );

    if ( model ) {

      const finalModelOptions = modelOptions ? _.merge ( {}, UMonaco.modelOptions, modelOptions || {} ) : UMonaco.modelOptions;

      model.updateOptions ( finalModelOptions );

    }

    this.editor.setModel ( model );

    this.editorUpdateZones ();

    this.editorDidMount ( this.editor );

  }

Object.keys ( Monaco.themes ).forEach ( name => {

      monaco.editor.defineTheme ( name, Monaco.themes[name] );

    });

updateLanguage ( language: string ) {

    if ( !this.editor ) return;

    const model = this.editor.getModel ();

    if ( model ) {

      monaco.editor.setModelLanguage ( model, language );

    }

  }

useEffect(() => {
    if (editorContainer.current) {
      const originalModel = monaco.editor.createModel(original, "json");
      const modifiedModel = monaco.editor.createModel(transformed, "json");
      const diffEditor = monaco.editor.createDiffEditor(
        editorContainer.current
      );
      diffEditor.setModel({
        original: originalModel,
        modified: modifiedModel,
      });
      const modifiedEditor = diffEditor.getModifiedEditor();
      modifiedEditor.getAction("editor.action.formatDocument").run();
    }
  }, [transformed, original]);
  return (

useEffect(() => {
    if (editorContainer.current) {
      const originalModel = monaco.editor.createModel(original, "json");
      const modifiedModel = monaco.editor.createModel(transformed, "json");
      const diffEditor = monaco.editor.createDiffEditor(
        editorContainer.current
      );
      diffEditor.setModel({
        original: originalModel,
        modified: modifiedModel,
      });
      const modifiedEditor = diffEditor.getModifiedEditor();
      modifiedEditor.getAction("editor.action.formatDocument").run();
    }
  }, [transformed, original]);
  return (

base: "vs",
    inherit: true,
    rules: [
        { token: "operator", foreground: "ff0000" },
        { token: "identifier", foreground: "3b8e23" },
        { token: "symbol", foreground: "327a1f" },
        { token: "type.identifier", foreground: "1459a9" },
        { token: "number", foreground: "b1871b" },
        { token: "string", foreground: "c225ca" },
        { token: "comment", foreground: "73c0e2" },
    ]
}

monaco.languages.register(language)
monaco.languages.setLanguageConfiguration(languageName, languageConfiguration)
monaco.editor.defineTheme(languageName, theme)
monaco.languages.setMonarchTokensProvider(languageName, provider)

const functions = ["Shape", "Rank", "Min", "Max", "RankUp", "Transpose", "RandomNormal", "RandomUniform"]

monaco.languages.registerCompletionItemProvider(languageName, {
    provideCompletionItems: () => {
        return [
            ...(functions.map(label => ({
                label,
                kind: monaco.languages.CompletionItemKind.Function,
                documentation: "mu"
            }))),
            {
                label: 'ifelse',
                kind: monaco.languages.CompletionItemKind.Snippet,
                insertText: {

connect() {
    hotkeys("ctrl+enter,cmd+enter", (event, handler) => {
      event.preventDefault()
      this.execute()
    })

    this.editor = monaco.editor.create(this.editorContainerTarget, {
      value: "puts \"Hello from #{RUBY_ENGINE} #{RUBY_VERSION} 👋\"",
      language: 'ruby',
      minimap: {
        enabled: false
      },
      automaticLayout: true,
      fontSize: '16px',
      scrollBeyondLastLine: false,
      hideCursorInOverviewRuler: true,
      renderLineHighlight: 'none',
      renderLineHighlightOnlyWhenFocus: false,
      overviewRulerBorder: false,
    })

    this.editor.addCommand(monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter), () => {
      this.execute()