build(site): [SITE-07] reproduce and validate Monaco language modes

test/browser/README.md

@@ -1,5 +1,11 @@
 # Browser regression entry
 
+`editor-modes.spec.js` exercises Monaco's actual automatic mode/provider registration
+through a real editor. It switches CSS/JSON/TypeScript/HTML models, checks diagnostic
+arrival/removal and document formatting, verifies all four mode bundle responses,
+and checks model disposal clears markers. It complements direct worker tests;
+neither suite alone proves all editor UI, physical-device or player integration paths.
+
 `editor-languages.spec.js` loads the frozen Monaco 0.30.1 CSS/HTML/JSON workers,
 checks real Worker creation, positive/negative diagnostics, tag completion, document
 symbols and formatting, and disposes models/workers. It uses `createWebWorker` with

test/browser/editor-modes.spec.js

@@ -0,0 +1,72 @@
+import { expect, test } from './fixtures.js'
+
+test('docs Monaco mode registrations update editor diagnostics and formatting across languages', async ({ page }, testInfo) => {
+  const loadedModes = []
+  page.on('response', (response) => {
+    if (/\/language\/(?:css|html|json|typescript)\/\w+Mode\.js$/.test(response.url()))
+      loadedModes.push({ url: response.url(), status: response.status() })
+  })
+  await page.goto('/test/player.html?core=candidate&chapter=published')
+  await page.addScriptTag({ url: '/assets/js/vs/loader.js' })
+  await page.evaluate(async () => {
+    window.require.config({ paths: { vs: '/assets/js/vs' } })
+    await new Promise((resolve, reject) => window.require(['vs/editor/editor.main'], resolve, reject))
+    const host = document.createElement('div')
+    host.style.cssText = 'width:800px;height:400px'
+    document.body.appendChild(host)
+    const editor = window.monaco.editor.create(host, { model: null, minimap: { enabled: false } })
+    window.modeProbe = { editor, host, models: [] }
+  })
+  const evidence = []
+  try {
+    for (const phase of [
+      { language: 'css', invalid: 'a { color: ; }', valid: 'a { color: red; }' },
+      { language: 'json', invalid: '{"value":}', valid: '{"value":1}' },
+      { language: 'typescript', invalid: 'const value: number = "wrong";', valid: 'const value: number = 1;' },
+    ]) {
+      await page.evaluate((phase) => {
+        const api = window.monaco
+        const model = api.editor.createModel(phase.invalid, phase.language, api.Uri.parse(`file:///mode-probe-${phase.language}`))
+        model.updateOptions({ tabSize: 2, insertSpaces: true })
+        window.modeProbe.models.push(model)
+        window.modeProbe.editor.setModel(model)
+      }, phase)
+      await expect.poll(() => page.evaluate(() => window.monaco.editor.getModelMarkers({ resource: window.modeProbe.editor.getModel().uri }).filter(marker => marker.severity === window.monaco.MarkerSeverity.Error).length)).toBeGreaterThan(0)
+      evidence.push(await page.evaluate(() => ({ language: window.modeProbe.editor.getModel().getLanguageId(), markers: window.monaco.editor.getModelMarkers({ resource: window.modeProbe.editor.getModel().uri }) })))
+      await page.evaluate(value => window.modeProbe.editor.getModel().setValue(value), phase.valid)
+      await expect.poll(() => page.evaluate(() => window.monaco.editor.getModelMarkers({ resource: window.modeProbe.editor.getModel().uri }).length)).toBe(0)
+      if (phase.language === 'json') {
+        await expect.poll(() => page.evaluate(() => window.modeProbe.editor.getAction('editor.action.formatDocument').isSupported())).toBe(true)
+        await page.evaluate(() => window.modeProbe.editor.getAction('editor.action.formatDocument').run())
+        const formatted = await page.evaluate(() => window.modeProbe.editor.getValue())
+        expect(formatted).toContain('\n')
+        expect(JSON.parse(formatted)).toEqual({ value: 1 })
+        evidence.push({ language: 'json', formatted })
+      }
+    }
+    await page.evaluate(() => {
+      const api = window.monaco
+      const model = api.editor.createModel('<div><p>hello</p><p>world</p></div>', 'html', api.Uri.parse('file:///mode-probe-html'))
+      model.updateOptions({ tabSize: 2, insertSpaces: true })
+      window.modeProbe.models.push(model)
+      window.modeProbe.editor.setModel(model)
+    })
+    await expect.poll(() => page.evaluate(() => window.modeProbe.editor.getAction('editor.action.formatDocument').isSupported())).toBe(true)
+    await page.evaluate(() => window.modeProbe.editor.getAction('editor.action.formatDocument').run())
+    const formatted = await page.evaluate(() => window.modeProbe.editor.getValue())
+    expect(formatted).toContain('\n')
+    expect(formatted.replace(/\s+/g, '')).toBe('<div><p>hello</p><p>world</p></div>')
+    evidence.push({ language: 'html', formatted })
+    expect(loadedModes.map(item => item.url.split('/').pop()).sort()).toEqual(['cssMode.js', 'htmlMode.js', 'jsonMode.js', 'tsMode.js'])
+    expect(loadedModes.every(item => item.status === 200)).toBe(true)
+    await testInfo.attach('monaco-mode-results', { contentType: 'application/json', body: JSON.stringify({ evidence, loadedModes }, null, 2) })
+  }
+  finally {
+    await page.evaluate(() => {
+      window.modeProbe.editor.dispose()
+      window.modeProbe.models.forEach(model => model.dispose())
+      window.modeProbe.host.remove()
+    })
+  }
+  await expect.poll(() => page.evaluate(() => window.modeProbe.models.flatMap(model => window.monaco.editor.getModelMarkers({ resource: model.uri })).length)).toBe(0)
+})