I’m trying to use <Monaco> in my Kotlin/JS project...

# javascript

[Adam S]

I’m trying to use Monaco in my Kotlin/JS project. There’s a function for creating a new editor that’s in a namespace

declare namespace monaco.editor {
	export function create(domElement: HTMLElement, options?: IStandaloneEditorConstructionOptions, override?: IEditorOverrideServices): IStandaloneCodeEditor;
}

I’ve written some Kotlin/JS external code to try and access this function:

@file:JsModule("monaco-editor")
@file:JsNonModule
@file:JsQualifier("monaco.editor")
@file:Suppress("ConvertObjectToDataObject")

import org.w3c.dom.HTMLElement

@JsName("create")
external fun createMonacoEditor(
  domElement: HTMLElement,
  options: IStandaloneEditorConstructionOptions = definedExternally,
  override: IEditorOverrideServices = definedExternally,
): IStandaloneCodeEditor

However, I get an error.

Uncaught TypeError: Cannot read properties of undefined (reading 'editor')

Am I using @JsModule, @JsNonModule, and @JsQualifier correctly?

[Adam S]

here’s code it’s failing on (simplified to remove other imports)

var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;
(function(root, factory) {
    if (true)
        !(__WEBPACK_AMD_DEFINE_ARRAY__ = [exports, __webpack_require__(/*! monaco-editor */
        "../../node_modules/monaco-editor/esm/vs/editor/editor.main.js")],
        __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
        __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
        __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
    else {}
}(this, function(_, $module$monaco_editor_si6jz9) {
    'use strict';
    //region block: imports
    var create = $module$monaco_editor_si6jz9.monaco.editor.create; // ERROR Uncaught TypeError: Cannot read properties of undefined (reading 'editor')
    // ...

[turansky]

cc @Sergei Grishchenko

[Sergei Grishchenko]

Try to use direct path to module from package json instead of just "monaco-editor" (see screenshot), I don't see neither main nor exports block in their package json, so I think webpack can't figure out what file to take. I tried to explore examples in their repo , and I saw that vite or parsel examples use direct link to file. Maybe import * as monaco from 'monaco-editor' works only with their webpack plugin.
Also @file:JsQualifier("monaco.editor") is path inside your module, but in examples whole content of 'monaco-editor' is imported as monaco and monaco.editor.create(... is used to get editor object. So I propose to use @file:JsQualifier("editor") , maybe it will work more correct.

[Piotr Krzemiński]

side-note: it maybe a good idea to create a Kotlin/JS binding library for this editor, it seems very popular. It could go to https://github.com/JetBrains/kotlin-wrappers

[Sergei Grishchenko]

I am working on https://github.com/karakum-team/karakum, it is TS -> KT convertor, (it already was used for React Router types). Right now I am working on another issues with it, but I can assist with generating of Monaco declarations using Karakum, if someone is brave enough 🙂

[Adam S]

thanks for the hints @Sergei Grishchenko, I’ll take a look

[Adam S]

I’m kind of torn between Monaco and CodeMirror. Monaco seems to be more feature-complete and stable, but much larger and more complicated to set up. https://blog.replit.com/code-editors

[Sergei Grishchenko]

Maybe I will generate something for CodeMirror , it is more relevant for JB now (my project is fully open source, but I do it during work time partially, so I respect JB needs)

[Adam S]

changing @file:JsQualifier("monaco.editor") to @file:JsQualifier("editor"), plus hacking around with Webpack, seems to have done the trick (mostly - there’s still something janky with the sizing). Thanks @Sergei Grishchenko!

[Dylan Meadows]

@Adam S would you happen to have a working project that I could reference? I'm trying to do the same thing

[Adam S]

hey @Dylan Meadows, I gave up with Monaco because I ran into some issues with the layout not loading properly, so the editor wasn't correctly sized and completely unusable. The compiled size was very large too. I decided to get CodeMirror working, which required much more assembly, but it was easier to get working. I can share what I started with Monaco, or Code Mirror? It's still WIP so just PM me your GitHub username. (anyone else is welcome to, just give me a ping)

[manoj s]

@Adam S Do you have a reference for kotlin/js codemirror bindings ?