Skip to content

MonacoEditor: schema store, YAML and Turtle languages, shadow-root fixes, shared bundle - #60

Merged
raederan merged 13 commits into
monaco-editor-panelfrom
feat/monaco-schema-store-and-languages
Sep 17, 2026
Merged

raederan merged 13 commits into
monaco-editor-panelfrom
feat/monaco-schema-store-and-languages

Conversation

@simontaurus

@simontaurus simontaurus commented Sep 12, 2026 •

Copy link
Copy Markdown
Contributor

Extends the MonacoEditor panel with what the OO-LD schema-playground (https://github.com/OO-LD/oold-playgrounds/tree/master/schema-playground) needed in practice.

  • schema_store (new param): schemas keyed by the URI a buffer's own $schema names. Monaco's JSON service gives an in-document $schema pointer precedence over any fileMatch association, and nothing is ever fetched, so a document that declares $schema - every OO-LD document does - got no validation and no completion from json_schema at all. Registering a local copy under that URI resolves the pointer offline. Relative keys resolve against the in-memory folder the editor models live in, mirroring how the JSON service resolves a relative $schema. Verified with Playwright: with the store, an invalid document shows markers and property completion works; without it, neither.
  • YAML: Monarch highlighting plus the monaco-yaml language service (validation, completion, hover against the same schemas; YAML has no in-document $schema, so fileMatch is its only association).
  • Turtle tokenizer: a Monarch grammar (IRIs, prefixed names, literals with datatype or language tag, @prefix/@base, comments), since monaco ships no Turtle language.
  • schema_request severity and enable_schema_request: how loudly an unresolvable $schema pointer is reported (error/warning/ignore), and an opt-in that lets the pointer and remote $refs fetch live (CORS permitting). Both page-wide, as monaco exposes them.
  • ready flag: set from the browser once the editor exists. Monaco boots long after the page, so a host that wants a boot signal needs this, not the page load event.
  • Bundle via import map: _esm is a per-instance model property, so a page with 24 editors shipped the 6.6 MB bundle 24 times (a 168 MB document). A two-line shim re-exports the module from a pinned CDN URL, fetched and cached once; PANELINI_MONACO_BUNDLE overrides the URL or inlines it for offline use. The pin names the commit that carries the committed js/dist.
  • One JSON-service update per schema batch instead of a reconfiguration per editor.
  • Shadow-root fixes: suggest rows stay readable (shadow retargeting breaks monaco's focus tracking, painting focused-row white on the widget's near-white ground) and are shielded from host layout CSS that Panel distributes into shadow roots (a host .main { padding-top } pushed every label out of its 16px row); hover tooltips and the codicon font render inside the shadow root.
  • Clean console: monaco's speculative fetch of a relative $schema against the models' inmemory:// base is rejected before the native call instead of surfacing as a browser error.
  • self.monaco: the ESM build never assigns the global the AMD loader would, so the API is exposed for outside automation and debugging.

js/dist is rebuilt and committed, matching how this branch ships its bundle.

- schema_store registers schemas under the URI a buffer's own $schema
  names: that in-document pointer takes precedence over any fileMatch
  association, so a document declaring $schema got no validation and no
  completion at all from json_schema
- relative store keys resolve against the in-memory model folder,
  mirroring the JSON service's resolution of a relative $schema
- yaml Monarch highlighting via the basic-languages contribution
- turtle Monarch tokenizer (IRIs, prefixed names, literals with datatype
  or language tag, @prefix/@base), which monaco does not ship
@github-actions

github-actions Bot commented Sep 12, 2026 •

Copy link
Copy Markdown

Release preview

Merging this PR would release 0.12.0 (current: 0.11.0).

Changelog preview (truncated)
## v0.12.0 (2026-09-17)

### Bug Fixes

- **monacoeditor**: Guard optional viewport_size in the OO-LD example test
  ([`1f341c7`](https://github.com/opensemanticworld/panelini/commit/1f341c72861f43844537bbd27e5b7606a7d1e6d8))

- **monacoeditor**: No console error for inmemory:// schema requests
  ([`5a4bccf`](https://github.com/opensemanticworld/panelini/commit/5a4bccf85a052b477879e23e31fc2f4a6300297b))

- **monacoeditor**: Readable suggest rows inside a shadow root
  ([`23a0ee2`](https://github.com/opensemanticworld/panelini/commit/23a0ee2ca842766b28c2392c37d24272ceecf76d))

- **monacoeditor**: Repoint the CDN bundle pin at the current dist
  ([`787ee9b`](https://github.com/opensemanticworld/panelini/commit/787ee9b1d392e8cdbca1f0c16f3824694193c0f1))

- **monacoeditor**: Shield suggest rows from host layout CSS
  ([`6509388`](https://github.com/opensemanticworld/panelini/commit/6509388cda31837f54ecc20371e0a8a18dfc7422))

- **monacoeditor**: Show hover tooltips and icons in the shadow root
  ([`5c407ec`](https://github.com/opensemanticworld/panelini/commit/5c407ecb4869073acdbb1055cae83c25766ca07f))

- **monacoeditor**: Stretch editor width so it is usable
  ([`20eec19`](https://github.com/opensemanticworld/panelini/commit/20eec19da23cef0479792f83e8338abc30f0fbff))

### Build System

- **monacoeditor**: Bundle monaco-editor for the panel
  ([`41e818d`](https://github.com/opensemanticworld/panelini/commit/41e818d1f23a22d9f76ba96d6dc8ac503955770a))

### Chores

- **monacoeditor**: Repoint the CDN bundle pin at the rebuilt dist
  ([`38123ad`](https://github.com/opensemanticworld/panelini/commit/38123add1831d68b935dcb12df7ae408f08262ee))

### Continuous Integration

- Monacoeditor render selector; keep fixers out of generated bundles
  ([`b299390`](https://github.com/opensemanticworld/panelini/commit/b2993906808ab4195c1563618a7755a00abebb8e))

### Documentation

- **examples**: Add minimal monacoeditor schema and data editor example
  ([`45a44de`](https://github.com/opensemanticworld/panelini/commit/45a44de4beb430aa88dd5434b08e573cd3162435))

### Features

- **monacoeditor**: Add MonacoEditor panel
  ([`7273b48`](https://github.com/opensemanticworld/panelini/commit/7273b48da6f98346b24854107f0bcb4d22737c16))

- **monacoeditor**: Add schema_request severity and an OO-LD example
  ([`d09b4d7`](https://github.com/opensemanticworld/panelini/commit/d09b4d720064582a7f66edb02fb83ccf5721dce7))

- **monacoeditor**: Expose the monaco API as self.monaco
  ([`a748bb7`](https://github.com/opensemanticworld/panelini/commit/a748bb7cbbab8798b6abe8e858e013968dbc35d6))

- **monacoeditor**: Ready flag, set once the editor exists in the browser
  ([`4e2f65c`](https://github.com/opensemanticworld/panelini/commit/4e2f65c62ee3d2bed75921346c7c6a52e0212f75))

- **monacoeditor**: Schema_store, yaml highlighting, turtle tokenizer
  ([`98612af`](https://github.com/opensemanticworld/panelini/commit/98612af88d38a62c526c88f3a47856d608cc2dff))

- **monacoeditor**: Yaml language service, schema fetch opt-in
  ([`3c09b37`](https://github.com/opensemanticworld/panelini/commit/3c09b3744758fd29b989b3acea2d1603e111f801))

### Performance Improvements

- **monacoeditor**: Coalesce schema registrations into one service update
  ([`4ba35bb`](https://github.com/opensemanticworld/panelini/commit/4ba35bbb050cae5aa7f3f0a29a17f85417a772fe))

- **monacoeditor**: Load the bundle once via import map, not per instance
  ([`2b763e2`](https://github.com/opensemanticworld/panelini/commit/2b763e2f645f640228434e263759aae4301d7082))

### Testing

- **monacoeditor**: Cover inline bundle branch for full coverage
  ([`19f6dbf`](https://github.com/opensemanticworld/panelini/commit/19f6dbfbb6b8d34dd2b980ea61fe10c11596bdf7))

- **monacoeditor**: Cover MonacoEditor JSON round-trip
  ([`c6f89ec`](https://github.com/opensemanticworld/panelini/commit/c6f89ecf3731ec26589f07bd39d479a92cb2b434))

Preview via python-semantic-release and conventional commits.

@codecov

codecov Bot commented Sep 12, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

- add monaco-yaml: yaml buffers validate and complete against the same
  schemas as json, associated via fileMatch
- register schemas under fragment-free URIs: yaml-language-server reads
  a fragment as a JSON-pointer section into the schema and crashes on
  one that does not exist
- add enable_schema_request: opt-in live fetching, so an external
  $schema pointer or remote $ref resolves over the network (CORS
  permitting) instead of only against schema_store
…date

Both language services treat every diagnostics-options update as a reset
and monaco-yaml restarts its worker each time; a page of editors emits
~4 registrations per editor in a burst, which unbatched costs minutes of
main-thread churn.
…ance

_esm is a per-instance model property, so a page with two dozen editors
shipped the 6.6 MB bundle two dozen times (~160 MB document): tens of
seconds of white page and minutes of settling. The default _esm is now a
two-line shim re-exporting from the committed dist on jsDelivr, pinned
to the commit that built it; PANELINI_MONACO_BUNDLE overrides the URL,
or "inline" restores the embedded module for offline use.
Monaco tracks list focus through document.activeElement, which a shadow
root retargets: a suggest row gets the focused-row foreground (white)
while the matching focus background never applies, leaving white text on
the widget's near-white ground. A stylesheet pins both sides of each
state, so rows read whatever the focus tracking concluded.
With schema fetching enabled monaco may ask for a buffer's relative
$schema in the moment before the debounced store lands; that resolves
against the models' inmemory:// base and Chrome reports the unsupported
scheme as a console error although the store answers right after.
Rejected before the native fetch call; http(s) passes through.
Monaco's suggest rows use the generic class names .main, .left and
.right, and a host's global stylesheets reach into the shadow root. A
host rule like .main { padding-top: 17px } pushed every label out of its
16px row: the list showed colored bars without a single readable
character. The box properties monaco relies on are pinned with
!important inside the suggest-widget scope.
The pin still named the commit before the inmemory: fetch guard landed
in js/dist, so the default CDN mode served a bundle without it.
The ESM build never assigns the global the AMD loader would, so a page
had no handle on the API for automation or debugging.
@simontaurus simontaurus changed the title MonacoEditor: schema_store, YAML highlighting, Turtle tokenizer MonacoEditor: schema store, YAML and Turtle languages, shadow-root fixes, shared bundle Sep 16, 2026
@raederan
raederan self-requested a review September 16, 2026 09:52
simontaurus and others added 2 commits September 16, 2026 12:00
The portfolio gate asserts a selector per app category, and the new
monacoeditor examples had none. The whitespace fixers wanted to rewrite
the minified bundle, where a line inside a template literal may
legitimately end with whitespace and the CDN pin serves the artifact
byte-for-byte.
@raederan
raederan merged commit d439468 into monaco-editor-panel Sep 17, 2026
17 checks passed
@raederan
raederan deleted the feat/monaco-schema-store-and-languages branch September 17, 2026 12:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants