feat: add theme editor to local-editor by briantstephan · Pull Request #1212 · yext/visual-editor

briantstephan · 2026-05-12T18:00:26Z

This adds the full theme editor within local-editor, allowing developers to customize theme variables and more easily test newly generated built-in templates that use brand styles rather than hardcoded values.

There is now a button to the right of the template selector that toggles between the layout editor and theme editor.

coderabbitai · 2026-05-12T18:03:25Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

Walkthrough

This PR introduces an editor mode selection system (layout vs. theme) in the local editor, refactors theme style tag management to ensure tag creation before modification, adds themeEntityId computation for template metadata, and improves localStorage resilience. The mode selection is driven by a URL query parameter and controls whether the editor displays layout or theme editing capabilities. Theme application now uses a helper to guarantee the style tag exists before updating both the main document and iframe, addressing potential issues with style injection timing. Template metadata generation derives a stable themeEntityId from themeScopeKey, enabling consistent theme entity identification across template types.

Suggested labels

create-dev-release

Suggested reviewers

mkilpatrick
jwartofsky-yext

Possibly related PRs

yext/visual-editor#1143: Extends the local-editor shell and selection flow by adding a selectedMode dimension ("layout" vs "theme") and propagating it through URL sync and local-dev options with themeScopeKey injection.
yext/visual-editor#1024: Also modifies applyTheme.ts theme and CSS-variable application paths, including style tag update behavior.
yext/visual-editor#959: Also modifies applyTheme.ts style block production and update logic for theme-related content.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: add theme editor to local-editor' directly and clearly describes the main change: integrating a full theme editor into the local-editor component.
Description check	✅ Passed	The description is related to the changeset, explaining that the PR adds the full theme editor within local-editor with a toggle button between layout and theme editors.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch local-editor-default-theme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

benlife5

I'm good with this if this is more correct/more extensible, but it might be possible to just put applyTheme(document, relativePrefixToRoot, defaultThemeConfig), in the local-editor getHeadConfig if we only care about the defaults for now

jwartofsky-yext

nitpicks, but otherwise lgtm

…ault-theme

coderabbitai

🧹 Nitpick comments (1)

packages/visual-editor/src/internal/types/templateMetadata.test.ts (1)

39-51: ⚡ Quick win

Consider adding test cases for edge scenarios.

The current test validates the core behavior (same scope key → same ID), but could be more comprehensive. Consider adding tests for:

themeScopeKey: undefined → themeEntityId: undefined
Different scope keys produce different IDs
Empty string handling

🧪 Proposed additional test cases

  });
+
+ it("returns undefined themeEntityId when themeScopeKey is not provided", () => {
+   const metadata = generateTemplateMetadata(undefined, {
+     templateId: "directory",
+   });
+
+   expect(metadata.themeEntityId).toBeUndefined();
+ });
+
+ it("produces different themeEntityId for different scope keys", () => {
+   const metadata1 = generateTemplateMetadata(undefined, {
+     templateId: "directory",
+     themeScopeKey: "scope-a",
+   });
+   const metadata2 = generateTemplateMetadata(undefined, {
+     templateId: "directory",
+     themeScopeKey: "scope-b",
+   });
+
+   expect(metadata1.themeEntityId).toBeDefined();
+   expect(metadata2.themeEntityId).toBeDefined();
+   expect(metadata1.themeEntityId).not.toBe(metadata2.themeEntityId);
+ });
 });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/visual-editor/src/internal/types/templateMetadata.test.ts` around
lines 39 - 51, Add unit tests covering edge cases for generateTemplateMetadata:
(1) verify that when themeScopeKey is undefined the returned themeEntityId is
undefined (use generateTemplateMetadata with templateId like "directory" and no
themeScopeKey), (2) verify different themeScopeKey values produce different
themeEntityId values (call generateTemplateMetadata twice with different
themeScopeKey strings and assert IDs differ), and (3) verify handling of empty
string themeScopeKey (pass themeScopeKey: "" and assert the resulting
themeEntityId behavior—either undefined if intended or a stable ID if
implementation treats "" as a valid scope). Ensure each case asserts on the
themeEntityId property.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/visual-editor/src/internal/types/templateMetadata.test.ts`:
- Around line 39-51: Add unit tests covering edge cases for
generateTemplateMetadata: (1) verify that when themeScopeKey is undefined the
returned themeEntityId is undefined (use generateTemplateMetadata with
templateId like "directory" and no themeScopeKey), (2) verify different
themeScopeKey values produce different themeEntityId values (call
generateTemplateMetadata twice with different themeScopeKey strings and assert
IDs differ), and (3) verify handling of empty string themeScopeKey (pass
themeScopeKey: "" and assert the resulting themeEntityId behavior—either
undefined if intended or a stable ID if implementation treats "" as a valid
scope). Ensure each case asserts on the themeEntityId property.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 3dbc5711-9c52-477e-8076-abd471ed957b

📥 Commits

Reviewing files that changed from the base of the PR and between 5603239 and 0a91458.

📒 Files selected for processing (10)

packages/visual-editor/src/editor/types.ts
packages/visual-editor/src/internal/hooks/useMessageReceivers.test.ts
packages/visual-editor/src/internal/types/templateMetadata.test.ts
packages/visual-editor/src/internal/types/templateMetadata.ts
packages/visual-editor/src/local-editor/LocalEditorControls.tsx
packages/visual-editor/src/local-editor/LocalEditorShell.tsx
packages/visual-editor/src/local-editor/selection.ts
packages/visual-editor/src/local-editor/types.ts
packages/visual-editor/src/utils/applyTheme.test.ts
packages/visual-editor/src/vite-plugin/registry/registryTemplateGenerator.test.ts

🚧 Files skipped from review as they are similar to previous changes (4)

packages/visual-editor/src/vite-plugin/registry/registryTemplateGenerator.test.ts
packages/visual-editor/src/internal/hooks/useMessageReceivers.test.ts
packages/visual-editor/src/editor/types.ts
packages/visual-editor/src/utils/applyTheme.test.ts

auto-screenshot-update: true

…visual-editor into local-editor-default-theme

auto-screenshot-update: true

briantstephan · 2026-05-19T18:44:56Z

I'm good with this if this is more correct/more extensible, but it might be possible to just put applyTheme(document, relativePrefixToRoot, defaultThemeConfig), in the local-editor getHeadConfig if we only care about the defaults for now

Updated so now the whole theme editor is accessible in the local editor.

…visual-editor into local-editor-default-theme

auto-screenshot-update: true

feat: inject default theme variables into local-editor

54e6803

briantstephan requested review from benlife5, jwartofsky-yext and mkilpatrick May 12, 2026 18:00

briantstephan self-assigned this May 12, 2026

benlife5 reviewed May 12, 2026

View reviewed changes

jwartofsky-yext previously approved these changes May 12, 2026

View reviewed changes

briantstephan and others added 2 commits May 14, 2026 10:57

Merge branch '2026-custom-components-templates' into local-editor-def…

5603239

…ault-theme

add full theme editor

0a91458

briantstephan dismissed jwartofsky-yext’s stale review via 0a91458 May 19, 2026 01:32

briantstephan changed the title ~~feat: inject default theme variables into local-editor~~ feat: add theme editor to local-editor May 19, 2026

coderabbitai Bot reviewed May 19, 2026

View reviewed changes

Update component screenshots for visual-editor

577547c

auto-screenshot-update: true

briantstephan marked this pull request as draft May 19, 2026 14:10

briantstephan and others added 3 commits May 19, 2026 14:30

fix history for theme editor

a5ea41d

Merge branch 'local-editor-default-theme' of https://github.com/yext/…

f11e71d

…visual-editor into local-editor-default-theme

Update component screenshots for visual-editor

b79a581

auto-screenshot-update: true

briantstephan added 3 commits May 19, 2026 15:07

remove leftover changes

f4d9d12

Merge branch 'local-editor-default-theme' of https://github.com/yext/…

6f5ef9d

…visual-editor into local-editor-default-theme

rename function

a07532e

briantstephan marked this pull request as ready for review May 19, 2026 19:16

briantstephan requested review from benlife5 and jwartofsky-yext May 19, 2026 19:16

benlife5 reviewed May 19, 2026

View reviewed changes

briantstephan added 2 commits May 20, 2026 12:14

addressed comments

2ed8cf3

fix applyTheme test

dcefade

briantstephan requested a review from benlife5 May 20, 2026 21:31

Update component screenshots for visual-editor

1feabaa

auto-screenshot-update: true

benlife5 approved these changes May 21, 2026

View reviewed changes

mkilpatrick approved these changes May 21, 2026

View reviewed changes

briantstephan merged commit 10ca4e0 into 2026-custom-components-templates May 21, 2026
17 checks passed

briantstephan deleted the local-editor-default-theme branch May 21, 2026 15:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add theme editor to local-editor#1212

feat: add theme editor to local-editor#1212
briantstephan merged 13 commits into
2026-custom-components-templatesfrom
local-editor-default-theme

briantstephan commented May 12, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 12, 2026 •

edited

Loading

Reviews paused

Uh oh!

benlife5 left a comment

Uh oh!

jwartofsky-yext left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

briantstephan commented May 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

briantstephan commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Suggested labels

Suggested reviewers

Possibly related PRs

Uh oh!

benlife5 left a comment

Choose a reason for hiding this comment

Uh oh!

jwartofsky-yext left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

briantstephan commented May 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

briantstephan commented May 12, 2026 •

edited

Loading

coderabbitai Bot commented May 12, 2026 •

edited

Loading