feat: add mui formik text editor

[tomrndom]

ref: https://app.clickup.com/t/9014802374/86b94xa4t

from https://github.com/fntechgit/sponsor-services/pull/57#discussion_r3474155581

Signed-off-by: Tomás Castillo tcastilloboireau@gmail.com

Summary by CodeRabbit

• New Features
  • Added a Formik-compatible rich text editor input that supports existing form validation and label rendering.
  • Editor behavior now includes sensible defaults, with options that can be customized by callers.
• Bug Fixes
  • Improved editor value handling by normalizing edited HTML so empty/whitespace-only input is saved as a blank value instead of stray HTML.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 92599bba-3f73-4544-9922-f798657f5956

📥 Commits

Reviewing files that changed from the base of the PR and between 05b5e90 and 1c505b7.

📒 Files selected for processing (1)

• src/components/mui/formik-inputs/mui-formik-text-editor.js

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

• src/components/mui/formik-inputs/mui-formik-text-editor.js

---

📝 Walkthrough

Walkthrough

Adds a FormikTextEditor component that binds Formik state to TextEditorV3, normalizes edited HTML before saving, and exposes validation state. Also adds normalizeHtmlString for empty or whitespace-only HTML values.

Changes

FormikTextEditor and HTML Normalization

Layer / File(s)	Summary
HTML normalization utility src/utils/methods.js	Adds normalizeHtmlString to return an empty string for falsy or whitespace-only HTML input, otherwise returning the original value.
FormikTextEditor component implementation src/components/mui/formik-inputs/mui-formik-text-editor.js	Adds FormikTextEditor to connect useField with TextEditorV3, normalize editor output before setValue, merge default and caller options, render an InputLabel from label, and pass meta.touched && meta.error into the editor.

Sequence Diagram(s)

sequenceDiagram
  participant FormikTextEditor
  participant normalizeHtmlString
  participant FormikHelpers
  participant TextEditorV3

  TextEditorV3->>FormikTextEditor: onChange(html)
  FormikTextEditor->>normalizeHtmlString: normalizeHtmlString(html)
  normalizeHtmlString-->>FormikTextEditor: normalized value
  FormikTextEditor->>FormikHelpers: setValue(normalized value)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• smarcet
• santipalenque

A rabbit hops through tidy code,
Trimming blank tags along the road.
Formik hums with editor cheer,
While empty HTML disappears. 🐰

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding a MUI Formik text editor.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/mui-formik-text-editor

---

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.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/mui/formik-inputs/mui-formik-text-editor.js (1)

7-7: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Inconsistent prop naming: licence vs license.

The component accepts licence (British spelling) but passes it through as license to TextEditorV3 (Line 25). This mismatch is easy to miss for consumers and inconsistent with the rest of the codebase's likely American-English convention.

🤖 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 `@src/components/mui/formik-inputs/mui-formik-text-editor.js` at line 7, The
prop name on FormikTextEditor is inconsistent: it currently accepts licence but
forwards it to TextEditorV3 as license, which can confuse consumers. Update the
FormikTextEditor signature and its prop usage so the component consistently uses
license end-to-end, and make sure any references in the TextEditorV3 call and
destructuring match the renamed prop.

🤖 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.

Inline comments:
In `@src/components/mui/formik-inputs/mui-formik-text-editor.js`:
- Around line 7-15: The FormikTextEditor component references label in its
InputLabel render even though it is not defined in scope, causing a
ReferenceError on render. Update the FormikTextEditor props destructuring to
include label (or otherwise source it from props) and make sure the component
uses that value consistently alongside useField, mergedOptions, and the existing
name/options handling.

---

Nitpick comments:
In `@src/components/mui/formik-inputs/mui-formik-text-editor.js`:
- Line 7: The prop name on FormikTextEditor is inconsistent: it currently
accepts licence but forwards it to TextEditorV3 as license, which can confuse
consumers. Update the FormikTextEditor signature and its prop usage so the
component consistently uses license end-to-end, and make sure any references in
the TextEditorV3 call and destructuring match the renamed prop.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ad75c400-ad07-4c20-8150-5f6645e7eb9e

📥 Commits

Reviewing files that changed from the base of the PR and between 8f682d6 and 05b5e90.

📒 Files selected for processing (2)

• src/components/mui/formik-inputs/mui-formik-text-editor.js
• src/utils/methods.js