Skip to content

docs(transformHTMLToComponents) - Add some docs#994

Open
gabrielseco wants to merge 3 commits intoadd-example-and-expose-propfrom
add-some-docs
Open

docs(transformHTMLToComponents) - Add some docs#994
gabrielseco wants to merge 3 commits intoadd-example-and-expose-propfrom
add-some-docs

Conversation

@gabrielseco
Copy link
Copy Markdown
Collaborator

@gabrielseco gabrielseco commented May 4, 2026

Note

Medium Risk
Introduces a new transformHtmlToComponents rendering path for HTML descriptions and changes how descriptions are sanitized/rendered across field components, which could affect UI output and (if misused by consumers) HTML/XSS handling. Touches core form rendering and context plumbing, so regressions would surface broadly across flows.

Overview
Adds a new RemoteFlows prop, transformHtmlToComponents, and threads it through FormFieldsContext so form fields and FormDescription can transform sanitized HTML strings into custom React output.

Updates all built-in field wrappers to pass fieldData.transformHtml to custom components, and refactors FieldSetField/FormDescription to stop using dangerouslySetInnerHTML directly for fieldset descriptions when possible.

Expands documentation and the example app to demonstrate HTML-to-component transformation (accordion example using html-react-parser + dompurify), adds corresponding example dependencies, and updates tests/mocks to accommodate the new context hook.

Reviewed by Cursor Bugbot for commit 70f31e1. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

📦 Bundle Size Report

Metric Current Previous Change Status
Total (gzip) 212.14 kB 211.72 kB +417 B (+0.2%) 🔴
Total (raw) 573.63 kB 572.06 kB +1.57 kB (+0.3%) 🔴
CSS (gzip) 20.83 kB 20.69 kB +142 B (+0.7%) 🔴
CSS (raw) 108.49 kB 107.95 kB +538 B (+0.5%) 🔴

Size Limits

  • ✅ Total gzipped: 212.14 kB / 250 kB (84.9%)
  • ✅ Total raw: 573.63 kB / 600 kB (95.6%)
  • ✅ CSS gzipped: 20.83 kB / 25 kB (83.3%)

Largest Files (Top 5)

  1. chunk-BQ5YDUNS.js - 13.99 kB (new)
  2. styles.css - 10.42 kB (+71 B (+0.7%))
  3. index.css - 10.42 kB (+71 B (+0.7%))
  4. index.js - 6.11 kB (+41 B (+0.7%))
  5. chunk-TNQKP2XT.js - 5.89 kB (0 B (0%))
View All Files (313 total)
File Size (gzip) Change
chunk-BQ5YDUNS.js 13.99 kB new
styles.css 10.42 kB +71 B (+0.7%)
index.css 10.42 kB +71 B (+0.7%)
index.js 6.11 kB +41 B (+0.7%)
chunk-TNQKP2XT.js 5.89 kB 0 B (0%)
chunk-BYXMGJU5.js 5.81 kB new
chunk-U5EVHP6F.js 4.63 kB new
chunk-67T5LPKP.js 4.29 kB new
chunk-RDKCWDI2.js 4.06 kB new
chunk-ENXNZM2A.js 3.73 kB new

✅ Bundle size check passed

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

📊 Coverage Report

✅ Coverage increased! 🎉

Metric Current Previous Change Status
Lines 90.01% 89.95% +0.06% 🟢
Statements 89.68% 89.62% +0.06% 🟢
Functions 87.71% 87.69% +0.02% 🟢
Branches 80.00% 80.01% 0%

Detailed Breakdown

Lines Coverage
  • Covered: 3676 / 4084
  • Coverage: 90.01%
  • Change: +0.06% (25 lines)
Statements Coverage
  • Covered: 3737 / 4167
  • Coverage: 89.68%
  • Change: +0.06% (25 statements)
Functions Coverage
  • Covered: 999 / 1139
  • Coverage: 87.71%
  • Change: +0.02% (2 functions)
Branches Coverage
  • Covered: 2268 / 2835
  • Coverage: 80.00%
  • Change: 0% (3 branches)

✅ Coverage check passed

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

Deploy preview for remote-flows ready!

Project:remote-flows
Status: ✅  Deploy successful!
Preview URL:https://remote-flows-4ob6zgonf-remotecom.vercel.app
Latest Commit:70f31e1
Inspect:View deployment

Deployed with vercel-action

Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 9961b5d. Configure here.

/>
<BaseFormDescription className='mb-5 RemoteFlows__FieldSetField__Description'>
{description}
</BaseFormDescription>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FieldSetField description wrapper changed from div to p

High Severity

The FieldSetField description was previously wrapped in a <div>, but BaseFormDescription defaults its element to <p> (via as || 'p'). Since no as prop is passed here, the description HTML will now be nested inside a <p> tag. The HTML spec forbids block-level elements (like <p>, <div>, <details>, <ul>) inside <p>, so the browser auto-closes the <p> and breaks the DOM structure. Other callers like ForcedValueField and CurrencyConversionField correctly pass as='span'. This needs as='div' to preserve the original behavior.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 9961b5d. Configure here.

@gabrielseco gabrielseco changed the base branch from main to add-example-and-expose-prop May 4, 2026 10:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant