feat: added global transformations to heading and body

[rkeerthient]

Ticket - https://yext.atlassian.net/browse/OPAQF-70?search_id=da611e34-23ef-4f9c-86d5-e1c882f6d7dc.

• Added Global Text Transformation to HeadingText and BodyText Components.
• Updated DefaultThemeConfig.ts with Text Transform props for hLevel and body

Screen.Recording.2025-12-02.at.3.55.42.PM.mov

[github-actions]

Warning: Component files have been updated but no migrations have been added. See https://github.com/yext/visual-editor/blob/main/packages/visual-editor/src/components/migrations/README.md for more information.

[coderabbitai]

Warning

Rate limit exceeded

@rkeerthient has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 8 minutes and 23 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between e19b6b9 and 5f9447a.

📒 Files selected for processing (1)

• packages/visual-editor/src/components/DefaultThemeConfig.ts (7 hunks)

Walkthrough

Adds a textTransform theme option to DefaultThemeConfig for h1–h6, body, button, and link styles. Removes the transform variant from the Heading component API; Heading now applies text transform at render time via an inline style using a CSS variable. Body forwards a merged style including the CSS-variable-based text transform. The RTF stylesheet (.rtf-theme) gains text-transform rules that reference per-element CSS variables. No other control flow or API surface changes.

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding global text transformations to heading and body components, which aligns with the changeset that adds textTransform fields to multiple theme blocks and updates components accordingly.
Description check	✅ Passed	The description is related to the changeset, referencing the ticket, mentioning global text transformation additions to HeadingText and BodyText components, and noting updates to DefaultThemeConfig.ts.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

packages/visual-editor/src/components/atoms/heading.tsx (2)

54-64: Remove commented code instead of leaving it in place.

Commented-out code should be deleted rather than left in the codebase. Version control preserves the history if you need to reference the old transform variant implementation.

Apply this diff to remove the commented code:

-    // transform: {
-    //   none: "",
-    //   uppercase: "uppercase",
-    //   lowercase: "lowercase",
-    //   capitalize: "capitalize",
-    // },
   },
   defaultVariants: {
     fontSize: "default",
     weight: "default",
-    // transform: "none",
   },

---

82-82: Remove commented code.

These commented-out lines should be deleted for code cleanliness.

Apply this diff:

       level = 1,
       weight,
-      // transform,
       fontSize,

         headingVariants({
           fontSize,
           weight,
-          // transform,
           level,
         }),

Also applies to: 106-106

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fb049bb and 76af900.

📒 Files selected for processing (3)

• packages/visual-editor/src/components/DefaultThemeConfig.ts (7 hunks)
• packages/visual-editor/src/components/atoms/heading.tsx (4 hunks)
• packages/visual-editor/src/components/atoms/maybeRTF.css (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/visual-editor/src/components/DefaultThemeConfig.ts (2)

packages/visual-editor/src/utils/index.ts (1)

• ThemeOptions (36-36)

packages/visual-editor/src/utils/themeConfigOptions.ts (1)

• ThemeOptions (367-383)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: call_unit_test / unit_tests (18.x)
• GitHub Check: call_unit_test / unit_tests (20.x)
• GitHub Check: semgrep/ci

🔇 Additional comments (2)

packages/visual-editor/src/components/atoms/heading.tsx (1)

112-115: Inline style approach is appropriate.

Using an inline style with a CSS variable is a valid approach for applying per-level text transforms. The @ts-expect-error is acceptable here since TypeScript cannot verify that the CSS variable will resolve to a valid textTransform value at runtime.

packages/visual-editor/src/components/DefaultThemeConfig.ts (1)

78-84: Text transform configuration additions look good.

The textTransform configuration has been consistently added across all heading levels (h1-h6) and body text. The implementation follows the existing pattern used for button and link elements, using ThemeOptions.TEXT_TRANSFORM and defaulting to "none".

Also applies to: 111-117, 144-150, 177-183, 210-216, 243-249, 276-282

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/visual-editor/src/components/atoms/heading.tsx (1)

71-99: Avoid losing heading textTransform when a style prop is passed

As with Body, defining style={{ … }} before {...props} means any consumer style will overwrite the entire style object and drop the global heading transform:

<Heading style={{ color: "red" }} /> // loses textTransform var

Destructure and merge style so the CSS variable is the default but still overridable:

 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   (
-    { className, level = 1, weight, fontSize, semanticLevelOverride, ...props },
+    {
+      className,
+      level = 1,
+      weight,
+      fontSize,
+      semanticLevelOverride,
+      style,
+      ...props
+    },
     ref
   ) => {
@@
       <Tag
         className={themeManagerCn(
@@
           className
         )}
-        style={{
-          // @ts-expect-error ts(2322) the css variable here resolves to a valid enum value
-          textTransform: `var(--textTransform-h${level}-textTransform)`,
-        }}
+        style={{
+          // @ts-expect-error ts(2322) the css variable here resolves to a valid enum value
+          textTransform: `var(--textTransform-h${level}-textTransform)`,
+          ...style,
+        }}

This keeps global heading transformations intact while still letting callers override textTransform explicitly if needed.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4704fd5 and 01edf0c.

📒 Files selected for processing (3)

• packages/visual-editor/src/components/atoms/body.tsx (1 hunks)
• packages/visual-editor/src/components/atoms/heading.tsx (3 hunks)
• packages/visual-editor/src/components/atoms/maybeRTF.css (6 hunks)

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

• packages/visual-editor/src/components/atoms/maybeRTF.css

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: call_unit_test / unit_tests (18.x)
• GitHub Check: call_unit_test / unit_tests (20.x)
• GitHub Check: semgrep/ci

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8a567d0 and e19b6b9.

📒 Files selected for processing (1)

• packages/visual-editor/src/components/DefaultThemeConfig.ts (7 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/visual-editor/src/components/DefaultThemeConfig.ts (2)

packages/visual-editor/src/utils/index.ts (1)

• ThemeOptions (32-32)

packages/visual-editor/src/utils/themeConfigOptions.ts (1)

• ThemeOptions (388-405)

🪛 GitHub Actions: main

packages/visual-editor/src/components/DefaultThemeConfig.ts

[error] 82-82: TS2353: Object literal may only specify known properties, and 'textTransform' does not exist in type 'ThemeConfigSection'.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: semgrep/ci