Create the dual-editor package with resizable split-view layout by kumaradityaraj · Pull Request #499 · open-workflow-specification/editor

kumaradityaraj · 2026-10-26T06:29:32Z

closes #368

Description

Adds the @openworkflowspec/dual-editor workspace package, providing a resizable split view for the Text Editor and Diagram Editor.

The divider overlays the pane boundary to avoid a visible gutter. It remains keyboard accessible, supports pointer dragging, and becomes visible on hover, focus, or while dragging.

Edits are synchronized between the editors and reported through onContentChange. The initial split is 50/50, with a 20% minimum pane size.

Also adds package documentation, Storybook coverage, and unit and integration tests. Extends DiagramEditor with an onContentChange callback for in-editor workflow changes and adds a stylesheet export for the Text Editor.

Screen Recording

Screen.Recording.2026-10-27.at.2.19.38.PM.mov

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

changeset-bot · 2026-10-26T06:29:39Z

🦋 Changeset detected

Latest commit: e57ae1d

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 · 2026-10-26T06:29:39Z

✅ Deploy Preview for openworkflow-editor ready!

Name	Link
🔨 Latest commit	`e57ae1d`
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow-editor/deploys/6ae1f056826ece1e36fc1e67
😎 Deploy Preview	https://deploy-preview-499--openworkflow-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

🟡 Changes recommended

Unresolved callback forwarding and stale content state break editor synchronization, and the package lacks the required private flag.

3 open issues

Forward diagram change callback to context provider · New
Mark workspace package as private · New
Keep diagram content synchronized after undo · New

1 file not reviewed

pnpm-lock.yaml: Generated file

What changed in this PR

Adds @openworkflowspec/dual-editor to compose the existing text and diagram editors into a resizable, synchronized workspace for issue #368.

Changes:

Adds a responsive split view with pointer and keyboard resizing.
Introduces diagram content-change notifications and a text-editor stylesheet export.
Adds package documentation, Storybook configuration, and unit and integration tests.

File	Description
`pnpm-lock.yaml`	Registers dual-editor workspace dependencies.
`packages/text-editor/README.md`	Documents stylesheet import.
`packages/text-editor/package.json`	Exports the editor stylesheet.
`packages/open-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx`	Tests external-load callback suppression.
`packages/open-workflow-diagram-editor/src/store/DiagramEditorContextProvider.tsx`	Adds workflow-change notifications.
`packages/open-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx`	Declares the content-change callback prop.
`packages/open-workflow-diagram-editor/README.md`	Documents the callback.
`packages/dual-editor/vitest.config.ts`	Configures tests and editor aliases.
`packages/dual-editor/vite.config.ts`	Configures library and stylesheet builds.
`packages/dual-editor/tsconfig.test.json`	Configures test type checking.
`packages/dual-editor/tsconfig.json`	Configures declaration output.
`packages/dual-editor/tests/setupTests.ts`	Adds shared test setup and cleanup.
`packages/dual-editor/tests/mocks/volar-monaco.ts`	Stubs language-service integration.
`packages/dual-editor/tests/mocks/monaco-side-effect.ts`	Stubs Monaco registration imports.
`packages/dual-editor/tests/mocks/monaco-editor.ts`	Simulates Monaco content changes.
`packages/dual-editor/tests/mocks/json-language.ts`	Stubs JSON language configuration.
`packages/dual-editor/tests/DualEditor.test.tsx`	Tests synchronization and resizing.
`packages/dual-editor/tests/DualEditor.integration.test.tsx`	Tests text-to-diagram integration.
`packages/dual-editor/stories/DualEditor.stories.tsx`	Adds the default editor story.
`packages/dual-editor/src/index.ts`	Exports the component and props.
`packages/dual-editor/src/DualEditor.tsx`	Implements pane synchronization and resizing.
`packages/dual-editor/src/DualEditor.css`	Styles panes and the overlay divider.
`packages/dual-editor/README.md`	Documents usage and props.
`packages/dual-editor/package.json`	Defines package exports, dependencies, and scripts.
`packages/dual-editor/LICENSE`	Adds the Apache 2.0 license.
`packages/dual-editor/.storybook/preview.tsx`	Configures theme controls and accessibility checks.
`packages/dual-editor/.storybook/main.ts`	Configures Storybook stories and addons.
`packages/dual-editor/.oxlintrc.json`	Inherits repository lint rules.
`packages/dual-editor/.oxfmtrc.json`	Inherits repository formatting rules.

_{Review effort: Balanced}

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

🟢 Approval recommended

The remaining feedback is a non-blocking correction to the Storybook sample, with no identified production-code blockers.

No open issues 🎉

1 previously missed issue

In code that hasn't changed since last review

Fix default story structure and use a supported task type

packages/dual-editor/stories/DualEditor.stories.tsx:32

The default story nests do inside document, leaving the workflow without a root task list. Its task body also contains only message, rather than a supported task type, so the only story cannot display the intended hello-world workflow. Move do alongside document and use a valid task body such as set.

3 resolved since last review

1 file not reviewed

pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

fantonangeli

Thanks @kumaradityaraj for this PR. I have some comments here:

please share a video recording for this PR
changeset missing as reported here

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

🟡 Changes recommended

The package remains publishable despite issue #368 explicitly requiring it to stay private.

1 open issue

Keep package private to prevent accidental publication · New

1 file not reviewed

pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

🔵 Needs a closer look

Cross-editor synchronization, undo/redo behavior, and responsive resizing need final human validation in the target environments.

No open issues 🎉

1 resolved since last review

Keep package private to prevent accidental publication

1 file not reviewed

pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

fantonangeli

2 more comments but LGTM

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

🟢 Approval recommended

No active review issues are reported for the synchronized dual-editor addition.

No open issues 🎉

1 file not reviewed

pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

lornakelly · 2026-10-28T10:36:05Z

Thanks @kumaradityaraj Looks good, one small comment, maybe we should add a debounce so it doesntimmedialtley switch to a parsing error?

debounce text > diagramContent

Screen.Recording.2026-10-28.at.10.28.05.mov

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

🟡 Changes recommended

The 3,000 ms debounce breaks synchronization tests and blocks build:prod, while deferred editor updates can leave the panes permanently out of sync after external content changes.

2 open issues

1 file not reviewed

pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

🔵 Needs a closer look

Potential loss of final edits when unmounting cancels a pending change notification requires human assessment of the editor lifecycle and host save behavior.

No open issues 🎉

2 resolved since last review

1 file not reviewed

pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

kumaradityaraj · 2026-10-28T11:55:00Z

@lornakelly It's ready for review

lornakelly · 2026-10-28T12:25:42Z

@lornakelly It's ready for review

Thanks, can you review copilots new comments and make necessary edits or comment on it

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

🔵 Needs a closer look

Human assessment is needed for an unpublished initialization finding that can leave stories using the system default despite a persisted dark toolbar selection.

No open issues 🎉

1 file not reviewed

pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

🟢 Approval recommended

No active review issues remain that require changes.

No open issues 🎉

1 file not reviewed

pnpm-lock.yaml: Generated file

_{Review effort: Balanced}

lornakelly

LGTM

handreyrc

Everything works fine, LGTM!

Thanks for your work.

kumaradityaraj · 2026-10-29T08:45:42Z

@lornakelly This PR is ready to merge.

Added dual editor package

99453a4

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI balanced review requested due to automatic review settings October 26, 2026 06:29

kumaradityaraj changed the title ~~Added dual editor package~~ Create the dual-editor package with resizable split-view layout Oct 26, 2026

Copilot started reviewing on behalf of kumaradityaraj October 26, 2026 06:30

View session

Copilot AI reviewed Oct 26, 2026

View reviewed changes

Comment thread packages/open-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx Resolved

Comment thread packages/dual-editor/package.json Resolved

Comment thread packages/dual-editor/src/DualEditor.tsx Resolved

Fixed ci failure and copilot suggestions

af82ac1

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI balanced review requested due to automatic review settings October 26, 2026 06:41

Copilot started reviewing on behalf of kumaradityaraj October 26, 2026 06:41

View session

Copilot AI reviewed Oct 26, 2026

View reviewed changes

kumaradityaraj requested review from fantonangeli and handreyrc October 26, 2026 06:46

fantonangeli reviewed Oct 26, 2026

View reviewed changes

kumaradityaraj added 8 commits October 27, 2026 12:54

Fixed package.json

7ccb853

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Readme

d3bd53a

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Fixed readme

80b6f11

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

FIxed stories

50ce9a0

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Added welcome page

548e0d9

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Fixed shortcuts

4dc8847

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Added e2e tests

1745ef8

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Changeset added

e5d7963

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI balanced review requested due to automatic review settings October 27, 2026 09:14

Copilot started reviewing on behalf of kumaradityaraj October 27, 2026 09:15

View session

Copilot AI reviewed Oct 27, 2026

View reviewed changes

Comment thread packages/dual-editor/package.json Resolved

dual editor made private

132ca59

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI balanced review requested due to automatic review settings October 27, 2026 09:24

Copilot started reviewing on behalf of kumaradityaraj October 27, 2026 09:24

View session

Copilot AI reviewed Oct 27, 2026

View reviewed changes

Dummy push

a14a8c9

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

fantonangeli suggested changes Oct 27, 2026

View reviewed changes

Comment thread packages/dual-editor/src/DualEditor.tsx Resolved

Comment thread packages/open-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx Resolved

kumaradityaraj requested a review from fantonangeli October 28, 2026 07:53

small fix

7ea7000

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI balanced review requested due to automatic review settings October 28, 2026 07:56

Copilot started reviewing on behalf of kumaradityaraj October 28, 2026 07:57

View session

Copilot AI reviewed Oct 28, 2026

View reviewed changes

fantonangeli approved these changes Oct 28, 2026

View reviewed changes

Added debounce on contentChange

6229986

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI balanced review requested due to automatic review settings October 28, 2026 11:30

Copilot started reviewing on behalf of kumaradityaraj October 28, 2026 11:30

View session

Copilot AI reviewed Oct 28, 2026

View reviewed changes

Comment thread packages/dual-editor/src/DualEditor.tsx Resolved

Comment thread packages/dual-editor/src/DualEditor.tsx Resolved

Copilot suggestion

eb5d0dd

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI balanced review requested due to automatic review settings October 28, 2026 11:45

Copilot started reviewing on behalf of kumaradityaraj October 28, 2026 11:45

View session

Copilot AI reviewed Oct 28, 2026

View reviewed changes

fixed copilot suggestion

4fcaf76

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI balanced review requested due to automatic review settings October 28, 2026 12:42

Copilot started reviewing on behalf of kumaradityaraj October 28, 2026 12:43

View session

Copilot AI reviewed Oct 28, 2026

View reviewed changes

fixed colour mode in stories

e57ae1d

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI balanced review requested due to automatic review settings October 28, 2026 12:53

Copilot started reviewing on behalf of kumaradityaraj October 28, 2026 12:54

View session

Copilot AI reviewed Oct 28, 2026

View reviewed changes

lornakelly approved these changes Oct 28, 2026

View reviewed changes

handreyrc approved these changes Oct 29, 2026

View reviewed changes

lornakelly merged commit 0129aee into open-workflow-specification:main Oct 29, 2026
13 checks passed

Conversation

kumaradityaraj commented Oct 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screen Recording

Uh oh!

changeset-bot Bot commented Oct 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify Bot commented Oct 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for openworkflow-editor ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

fantonangeli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

fantonangeli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

lornakelly commented Oct 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

kumaradityaraj commented Oct 28, 2026

Uh oh!

lornakelly commented Oct 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

kumaradityaraj commented Oct 26, 2026 •

edited

Loading

changeset-bot Bot commented Oct 26, 2026 •

edited

Loading

netlify Bot commented Oct 26, 2026 •

edited

Loading