[fantonangeli]

Closes #493

Requires:

• feat #322: Implement volar-service-yaml for YAML language support #522
• Integrate the dual-editor in vanilla-web-component (Updated) #528

Description

Monaco Editor logs editorWorkerService errors when the Text Editor is embedded in a Web Component because the default Monaco worker is not correctly resolved by the consuming application.

Changes

• Add a dedicated Monaco Editor Worker entry point to @openworkflowspec/text-editor.
• Export it as @openworkflowspec/text-editor/editor-worker.
• Update the Vanilla Web Component PoC to configure MonacoEnvironment.getWorker() using the new entry point.
• Remove the direct monaco-editor dependency from the Vanilla Example.

This allows consumers to use the Monaco Editor Worker bundled with the Text Editor, avoiding direct dependencies on Monaco and potential version mismatches on the consumer side.

How to test

1. Build and run the Vanilla Web Component Example:

   pnpm --filter @openworkflowspec/vanilla-web-component-example build:prod
   cd examples/vanilla-web-component
   pnpm exec http-server dist

2. Open the application and check the browser Console.

3. Verify that no editorWorkerService or webWorkerBootstrap.js errors are reported.

4. Verify that YAML Schema diagnostics, completions, and CodeLens still work.

Quarkus Flow validation

The same worker entry point has also been successfully tested in the Quarkus Flow Dev UI using Maven/mvnpm and esbuild.

Preview

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

issue-493-bug-Monaco-Editor-logs-worker-errors-in-Web-Component-integrations-v2.mp4

The preview uses the Vanilla Web Component PoC with the new Monaco Editor Worker configuration.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9213e2b

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.

Built without sensitive environment variables

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

[Copilot]

🟡 Changes recommended

The component replacement leaves outdated tests failing and removes build verification steps, while stale React content props can cause the displayed editor value to diverge from the content getter.

2 open issues

• Migrate tests and restore production test/typecheck steps · New
• Keep the controlled content prop synchronized after editor edits · New

1 file not reviewed

• pnpm-lock.yaml: Generated file

What changed in this PR

This proof of concept exposes the Text Editor’s bundled Monaco worker to address worker-resolution errors in Web Component integrations (#493). It remains marked DO NOT MERGE, pending the Dual Editor integration in #369.

Changes:

• Add a dedicated Monaco editor-worker entry point and export the Text Editor stylesheet.
• Replace the vanilla example’s diagram wrapper with a text-editor wrapper and configure both workers.
• Update the sample, deployment base path, dependencies, and build scripts.

File	Description
pnpm-lock.yaml	Switch the example dependency and refresh transitive resolutions.
packages/​text-editor/​vite.config.ts	Build the dedicated editor-worker entry point.
packages/​text-editor/​src/​worker/​editor.worker.ts	Import Monaco’s editor worker.
packages/​text-editor/​package.json	Export the editor worker and stylesheet.
examples/​vanilla-web-component/​vite.config.ts	Use relative asset paths for deployment.
examples/​vanilla-web-component/​src/​text-editor-element.ts	Add the Text Editor custom-element wrapper.
examples/​vanilla-web-component/​src/​sample-workflow.ts	Replace the YAML sample with a smaller JSON workflow.
examples/​vanilla-web-component/​src/​index.ts	Register the text-editor element and load its styles.
examples/​vanilla-web-component/​src/​diagram-editor-element.ts	Remove the diagram-editor wrapper.
examples/​vanilla-web-component/​package.json	Switch editor dependencies and remove build-time test checks.
examples/​vanilla-web-component/​index.html	Display the Text Editor and configure worker factories.

_{Review effort: Balanced}

[Copilot]

🟢 Approval recommended

No active review issues are reported for the editor-worker exports and vanilla Web Component example changes.

No open issues 🎉

2 resolved since last review

• Keep the controlled content prop synchronized after editor edits
• Migrate tests and restore production test/typecheck steps

1 file not reviewed

• pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

[fantonangeli]

@lornakelly @handreyrc @kumaradityaraj This PR is now ready for review and I have updated the description, the prevew link and the video

[lornakelly]

Looks like this is just formatting but also looks like the changes are actually breaking indentation?

[lornakelly]

Should we add this to the dual-editor readme as well? and maybe remove teh mention of dual editor here since its not part of this package?

[lornakelly]

Wondering why there are changes to lockfile but not to package.json file?