how to pass configuration options?

[swyxio]

Hi, i think this project is great! just an obvious question to ask before i evaluate whether i can use it - how do you pass configuration options to monaco? it doesnt seem possible from the docs.

[evanplaice]

It's currently undocumented but the editor property on the component holds the reference to the Monaco editor instance.

I can add more attributes to set options during creation if there is something specific you'd like to add. Current hardcoded options are {theme: vs-dark, automaticLayout: true}. The latter makes the editor automatically resize to the bounds of its container (ie the web component dimensions) otherwise resizing it is a major pain.

[swyxio]

options i run with:

options={{
    minimap: {
      enabled: false
    },
	tabSize: 2, // important!!
    fontSize: 16,
    wordWrap: "on",
    lineNumbersMinChars: 3,
    wrappingIndent: "same",
    mouseWheelZoom: true,
    copyWithSyntaxHighlighting: false
  }}

probably worth it to passthru some of these? idk. there are a lot of options.

[evanplaice]

Thanks for the feedback. I'll look into adding these. I have a pretty good pattern in place for mapping attributes so I don't think it'll take much to incorporate most/all of them.

[evanplaice]

The tab-size attribute is included in v1.5.0

[evanplaice]

The font-size attribute is included in v1.6.0

[swyxio]

nice! do you think it makes sense to keep including one by one, or is there a way to simply mirror everything monaco offers? i dont know the impl detail so just want to suggest this so that you're not doing too much manual mapping

[evanplaice]

Yes. I'll add an Advanced Configuration path as an alternative

I'd expect the attributes will work for the 'common' case where users just want to dump a code editor pane onto their website. In that case, having a subset of attributes works perfectly. The downside to this approach is it requires another HTTP request. Not ideal for users who want to embed a ton of <wc-monaco-editor> instances in a single page.

For the 'exceptional' use case where users may want to build a fully featured editor, a JSON file can be fetched to pull in a complete set of config options.

Modifying options during runtime is already covered, since the editor property is exposed via JS.

[evanplaice]

The word-wrap attribute is included in v1.7.0

[evanplaice]

The wrap-indent attribute is included in v1.8.0

[evanplaice]

The lineNumbersMinChars option is the defaulted to 3 in v1.8.1

Note: I like this a lot better as a default. I seriously doubt most users will be posting <1kLOC on a website. Those who do will have the advanced configuration option soon.

[evanplaice]

The mouseWhellZoom option is enabled by default in v1.8.2

Note: Another good option to enable by default

[evanplaice]

I can't seem to get 'copyWithSyntaxHighlighting' to include syntax highlighing, even if I explicitly enable it. The version of Monaco currently in use (18) should have the option available.

I'll check again once I bump Monaco to 20 and default it to false if it is defaulted to true.

[evanplaice]

The no-minimap attribute is included in v1.9.0

[evanplaice]

The Advanced Configuration API is included in v1.10.0

[evanplaice]

That should cover all the bases. Do you have any other suggestions before I close this?

[swyxio]

no. i think you've made very, very good calls here. nicely done!