[fantonangeli]

Closes #331

Description

Integrate @openworkflowspec/language-service with Monaco in @openworkflowspec/text-editor using @volar/monaco.
The integration should expose the language-service capabilities in Monaco

How to test

Run Storybook or open the preview:

pnpm -F @openworkflowspec/text-editor... build:dev
pnpm -F @openworkflowspec/text-editor start

Open Features / Text-Editor and verify:

1. Completions: In Empty JSON, enter {}, press Ctrl+Space, and verify the document and do suggestions.
2. Hello World: In Empty JSON, use either the Create an Open Workflow CodeLens or the Insert Hello World workflow completion. Both should insert the sample workflow.
3. Syntax diagnostics: Enter {invalid and verify that a syntax error appears.
4. Schema diagnostics: Open Invalid Workflow, verify the warnings, then replace its content with a valid workflow. The warnings should disappear.
5. Read-only: Enable isReadOnly. Editing and the CodeLens should be disabled.
6. Language switching: Switch between JSON and YAML. The CodeLens should appear only for editable, empty JSON documents.
7. YAML: Verify that syntax highlighting still works.

Preview:

https://fantonangeli.github.io/open-workflow-specification-editor/issue-331

issue-331-feat-Integrate-the-language-service-with-Monaco.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: a2616ec

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for openworkflow-editor canceled.

Name	Link
🔨 Latest commit	a2616ec
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow-editor/deploys/6ac4c9c0bcbba50008db69b2

[Copilot]

Copilot review overview

🟡 Changes recommended

Unresolved critical package publication, dependency-boundary, multi-instance model, and global JSON configuration issues block approval.

Review effort: Lite
Findings: 4

Open (4)

• Package marked private, preventing publication of new Monaco integration · New
• Dependency violates repository syncpack package-boundary rule · New
• Global JSON defaults mutation disables host application features · New
• Hard-coded Monaco model URI breaks multiple editor instances · New

What changed in this PR

Integrates the Open Workflow language service with Monaco through Volar, adding workers, completions, diagnostics, and code lenses.

Changes:

• Adds Monaco/Volar worker integration and lifecycle management.
• Adds editor commands, documentation, stories, and samples.
• Expands unit and end-to-end test coverage.

File	Summary
pnpm-workspace.yaml	Adds catalog dependencies.
pnpm-lock.yaml	Locks new dependencies.
packages/​text-editor/​vite.config.ts	Builds editor and worker entries.
packages/​text-editor/​tests/​text-editor/​TextEditor.test.tsx	Tests editor lifecycle and language behavior.
packages/​text-editor/​tests/​text-editor/​TextEditor.story.test.tsx	Updates story assertions.
packages/​text-editor/​tests/​setupTests.ts	Adds test mocks and setup.
packages/​text-editor/​tests/​language-service/​createTextEditorLanguageService.test.ts	Tests language-service setup and disposal.
packages/​text-editor/​tests/​editor-commands/​registerEditorCommands.test.ts	Tests command registration.
packages/​text-editor/​tests/​__mocks__/​volar-monaco.ts	Mocks Volar integration.
packages/​text-editor/​tests/​__mocks__/​monaco-editor.ts	Extends Monaco mocks.
packages/​text-editor/​tests/​__mocks__/​editor-commands.ts	Mocks editor commands.
packages/​text-editor/​tests-e2e/​text-editor.spec.ts	Adds completion, diagnostic, and code-lens tests.
packages/​text-editor/​tests-e2e/​helpers.ts	Adds Monaco test helpers.
packages/​text-editor/​stories/​samples/​invalid-workflow.json	Adds an invalid workflow fixture.
packages/​text-editor/​stories/​samples/​index.ts	Exports the fixture.
packages/​text-editor/​stories/​features/​TextEditor.tsx	Provides worker and test controls.
packages/​text-editor/​stories/​features/​TextEditor.stories.tsx	Adds empty and invalid JSON stories.
packages/​text-editor/​src/​worker/​monaco-editor-worker.d.ts	Declares worker typings.
packages/​text-editor/​src/​worker/​language.worker.ts	Configures the language-service worker.
packages/​text-editor/​src/​TextEditor.tsx	Integrates Monaco models and language services.
packages/​text-editor/​src/​language-service.ts	Registers Volar providers and lifecycle handling.
packages/​text-editor/​src/​editor-commands.ts	Registers workflow insertion commands.
packages/​text-editor/​README.md	Documents language-service usage.
packages/​text-editor/​playwright.config.ts	Enables clipboard permissions.
packages/​text-editor/​package.json	Adds dependencies and worker exports.
packages/​language-service/​tests/​volar/​json/​code-lenses.test.ts	Verifies code-lens command data.
packages/​language-service/​src/​volar/​json/​code-lenses.ts	Adds code-lens command arguments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Copilot review overview

🔵 Needs a closer look

Address the asynchronous provider readiness issue in E2E tests and update the affected documentation examples.

Review effort: Lite
Findings: 1

Open (1)

• Dependency violates repository syncpack package-boundary rule

Resolved since last review (3)

• Hard-coded Monaco model URI breaks multiple editor instances
• Global JSON defaults mutation disables host application features
• Package marked private, preventing publication of new Monaco integration

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Previously missed (1)

In code that hasn't changed since last review

Update Welcome example for required language service worker prop

packages/​text-editor/​README.md:36

The new required createLanguageServiceWorker prop is not reflected in the existing stories/introduction/Welcome.mdx usage example, which still renders <TextEditor content={content} language="yaml" ... /> without it. That example is now not a valid TextEditor usage (and omits how to construct the worker); please update the introductory example alongside this API change.

[fantonangeli]

@fantonangeli Thanks for PR, looks really good, and thanks for the preview link which makes it very easy to test. Still reviewing but noticed you mention in description "YAML: Verify that syntax highlighting still works."

It doesnt seem to highlight syntax issues?

@lornakelly Syntax highlights are the colours in the code. In your screenshot green/aqua are the props, and orange the values.
Syntax issues are underlined through the Diagnostics, like in the screenshot below where I removed a ","

[lornakelly]

@fantonangeli Thanks for PR, looks really good, and thanks for the preview link which makes it very easy to test. Still reviewing but noticed you mention in description "YAML: Verify that syntax highlighting still works."
It doesnt seem to highlight syntax issues?

@lornakelly Syntax highlights are the colours in the code. In your screenshot green/aqua are the props, and orange the values. Syntax issues are underlined through the Diagnostics, like in the screenshot below where I removed a ","

Thats what I mean, in the yaml there isnt, in screenshot I deleted the call value but no squiggle

[fantonangeli]

@lornakelly squiggle is from diagnostic, which will be implemented with the yaml support

[fantonangeli]

@fantonangeli noticed on the docs page errors as well

Thanks for catching this, @lornakelly!

I investigated the issue and tried supporting multiple TextEditor instances on the same Docs page, but ran into two problems related to Monaco's global registries:

1. Model URIs: All editors initially used the same URI (inmemory://openworkflow/workflow.json), causing the Cannot add model because it already exists! error. Assigning a unique URI to each editor resolved this.
2. CodeLens commands: Monaco registers commands globally. My openworkflow.insertHelloWorld command captures the editor's model, so clicking the CodeLens in one editor ends up modifying the last mounted editor instead. See the screencast.

Supporting multiple editors simultaneously would require a refactoring of command registration and potentially language provider management.

I've kept this outside the scope of this PR and customized the Storybook Docs page to render only one TE. All other stories remain available individually.

issue-331-multiple-editors-issues.mp4

[Copilot]

Copilot review overview

🟡 Changes recommended

Unresolved critical read-only editing and moderate YAML language-service issues block approval.

Review effort: Lite
Findings: 1 · 1

Open (2)

• Read-only editors still allow programmatic edits · New
• JSON integration runs for YAML models · New

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Copilot review overview

🔵 Needs a closer look

Read-only completion handling and asynchronous provider readiness must be corrected before approval.

Review effort: Lite
Findings: None

Resolved since last review (2)

• Read-only editors still allow programmatic edits
• JSON integration runs for YAML models

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[lornakelly]

LGTM

[Copilot]

Copilot review overview

🟡 Changes recommended

Story typing currently causes text-editor typecheck failures because the required worker prop is omitted.

Review effort: Lite
Findings: 2

Open (2)

• Story wrapper requires omitted createLanguageServiceWorker prop · New
• Type story wrapper without internally supplied worker prop · New

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Copilot review overview

🟢 Approval recommended

The reviewed changes have no unresolved blocking issues.

Review effort: Lite
Findings: None

Resolved since last review (2)

• Type story wrapper without internally supplied worker prop
• Story wrapper requires omitted createLanguageServiceWorker prop

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[fantonangeli]

@handreyrc @kumaradityaraj @lornakelly Fixed all new Copilot comments and now it's ready for review again.

[kumaradityaraj]

LGTM