Light and dark theme support for the text editor

[kumaradityaraj]

Close #394

Description

Adds theme support to @openworkflowspec/text-editor by introducing a theme prop that resolves to a Monaco Editor theme.

Changes

• Added a theme prop to TextEditor.
• Resolve the provided theme to a valid Monaco Editor theme.
• Apply the resolved theme when creating/configuring Monaco.
• Preserve the existing default behavior when no theme is provided.

Testing

• Verified the editor renders correctly with the configured Monaco theme.
• Verified the default theme behavior remains unchanged when no theme is provided.

Note (BUG)

Storybook has a bug in which the args and Globals are not getting in sync with each other which may lead to the docs reloads in dev mode and less reloads in production. In this pr all the features work perfectly fine in components but in docs it does not work. Link to official storybook bug issue - ISSE1 ISSUE2

[netlify]

✅ Deploy Preview for openworkflow-editor canceled.

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

[Copilot]

🟡 Changes recommended

Unresolved moderate findings affect default behavior, public type exports, Monaco theme scoping, and Storybook synchronization.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds light/dark/system theme support to the text editor and prepares the package for publication.

Changes:

• Resolves color modes and applies Monaco themes.
• Updates Storybook controls, tests, and documentation.
• Adds package metadata and a changeset.

File summaries

File	Summary and review notes
packages/text-editor/tests/text-editor/TextEditor.test.tsx	Tests explicit theme behavior.
packages/text-editor/tests/__mocks__/monaco-editor.ts	Mocks Monaco theme APIs.
packages/text-editor/stories/features/TextEditor.tsx	Passes color mode to the component.
packages/text-editor/src/types/colorMode.ts	Defines color-mode types.
packages/text-editor/src/TextEditor.tsx	Applies Monaco themes. Moderate findings: omitted colorMode changes the existing default behavior (2 votes); ColorMode is not re-exported (2 votes); Monaco’s global theme prevents independent per-instance themes (2 votes).
packages/text-editor/src/hooks/useResolvedColorMode.ts	Resolves system preferences. Nit: add coverage for media-query resolution, notifications, cleanup, and SSR fallback (3 votes).
packages/text-editor/README.md	Documents the new prop. Nit: punctuation is incorrectly included inside code spans (3 votes).
packages/text-editor/package.json	Makes the package publishable.
packages/text-editor/.storybook/preview.tsx	Synchronizes Storybook color-mode state. Moderate finding: initial or navigated stories can fail to honor the selected global theme (2 votes).
.changeset/light-dark-theme-text-editor.md	Records the minor release.

Review details

• Files reviewed: 10/10 changed files
• Comments generated: 6
• Review effort level: Lite

---

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

[Copilot]

🔵 Needs a closer look

System color-mode resolution and media-query updates lack test coverage.

Review details

Suppressed comments (1)

packages/text-editor/src/hooks/useResolvedColorMode.ts:68

• The new default system path and its live prefers-color-scheme updates are not covered by the text-editor tests; the added cases only exercise explicit light/dark values. A regression in the default resolution or the media-query subscription would therefore pass this package's suite. Add text-editor coverage that mocks matchMedia, verifies system light/dark resolution, and dispatches a change event.

  return useSyncExternalStore(
    subscribe,
    () => (normalized === "system" ? getSystemColorMode() : normalized),
    () => (normalized === "system" ? getServerColorMode() : normalized),

• Files reviewed: 10/10 changed files
• Comments generated: 0 new
• Review effort level: Lite

[Copilot]

🟢 Approval recommended

No blocking issues were identified; the remaining test-coverage comment is a minor nit.

Review details

Suppressed comments (1)

packages/text-editor/tests/text-editor/TextEditor.test.tsx:320

• This test does not exercise the server fallback: renderHook runs in the jsdom client, so useSyncExternalStore reads getSnapshot and the window.matchMedia mock rather than invoking getServerSnapshot. Please use an SSR/hydration test (or otherwise render without window) so regressions in getServerColorMode() are actually detected.

    it("uses the server fallback for system mode", () => {
      const { result } = renderHook(() => useResolvedColorMode("system"));

      expect(result.current).toBe("light");

• Files reviewed: 10/10 changed files
• Comments generated: 0 new
• Review effort level: Lite

[lornakelly]

LGTM