[kumaradityaraj]

closes - #369

This PR is update to - #516

Summary

• Integrate @openworkflowspec/dual-editor into the Vanilla Web Component example.
• Update the custom element to provide the language-service worker and support JSON/YAML modes.
• Demonstrate both the text and diagram panes in the example page.
• Keep the custom element’s content property synchronized with edits so external content updates reset both panes.
• Add unit and browser coverage for mounting, editing, synchronization, and JSON schema diagnostics.
• Document the Monaco hover workaround for Shadow DOM consumers.
• Keep the example scoped to a single editor instance; multiple-instance support is not included.
  Verification

[changeset-bot]

🦋 Changeset detected

Latest commit: 45a6af9

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	45a6af9
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow-editor/deploys/6af2e43725848e5a7cfd2e84

[Copilot]

🔵 Needs a closer look

Reassigning the original content before the debounce expires fails to reset the editor, allowing a pending edit to overwrite the host’s value; an explicit reset mechanism and regression test are needed.

No open issues 🎉

1 file not reviewed

• pnpm-lock.yaml: Generated file

What changed in this PR

Integrates the Dual Editor into the vanilla Web Component example, replacing the diagram-only integration with text and diagram panes for non-React hosts.

Changes:

• Updates the custom element with JSON/YAML modes, a language-service worker, and content synchronization.
• Adds unit and browser coverage for rendering, editing, external resets, and schema diagnostics.
• Updates dependencies, example usage, and Shadow DOM guidance.

File	Description
pnpm-lock.yaml	Updates workspace dependency links.
examples/​vanilla-web-component/​tests/​dual-editor-element.test.ts	Tests Dual Editor props and content synchronization.
examples/​vanilla-web-component/​tests-e2e/​diagram-editor.spec.ts	Covers both panes, editing, resets, and diagnostics.
examples/​vanilla-web-component/​src/​index.ts	Registers the renamed element and imports dual-editor styles.
examples/​vanilla-web-component/​src/​dual-editor-element.ts	Wraps Dual Editor with worker and language support.
examples/​vanilla-web-component/​README.md	Documents usage and the Shadow DOM hover workaround.
examples/​vanilla-web-component/​playwright.config.ts	Enables clipboard access for browser tests.
examples/​vanilla-web-component/​package.json	Replaces diagram-editor dependencies with dual/text editor packages.
examples/​vanilla-web-component/​index.html	Demonstrates the editable Dual Editor in YAML mode.
.changeset/​dual-editor-vanilla-componet-example.md	Records the example’s minor version change.

_{Review effort: Balanced}

[Copilot]

🔵 Needs a closer look

A pending edit callback can overwrite replacement content when the element is immediately removed or reparented, causing stale text to be restored on reconnect unless callbacks from older reset keys are ignored.

No open issues 🎉

1 file not reviewed

• pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

[Copilot]

🟢 Approval recommended

There are no active review issues blocking the Dual Editor integration.

No open issues 🎉

1 file not reviewed

• pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

[fantonangeli]

LGTM

[lornakelly]

LGTM

[kumaradityaraj]

@handreyrc please review this PR?

[handreyrc]

LGTM!

[fantonangeli]

@lornakelly can you please merge this PR?