feat(RichTextInput): create new component

[JulienSaguez]

Summary

Type

• Feature

Summarize concisely:

What is expected?

RichTextInput: create component RichTextInput and RichTextInputField

The following changes were made:

(Describe what you did)

Relevant logs and/or screenshots

Page	Before	After
url	screenshot	screenshot
url	screenshot	screenshot

[changeset-bot]

🦋 Changeset detected

Latest commit: b1b3a8b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@ultraviolet/form	Minor
@ultraviolet/ui	Minor
@ultraviolet/nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

❌ Patch coverage is 76.00000% with 54 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.22%. Comparing base (c168072) to head (b1b3a8b).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...ages/ui/src/compositions/RichTextInput/Toolbar.tsx	49.35%	33 Missing and 6 partials ⚠️
...kages/ui/src/compositions/RichTextInput/helpers.ts	64.70%	6 Missing ⚠️
...es/ui/src/compositions/RichTextInput/editorCore.ts	88.88%	4 Missing and 1 partial ⚠️
...kages/ui/src/compositions/RichTextInput/Notice.tsx	81.81%	2 Missing ⚠️
...ckages/ui/src/compositions/RichTextInput/index.tsx	96.07%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6318      +/-   ##
==========================================
- Coverage   92.58%   92.22%   -0.37%     
==========================================
  Files         533      540       +7     
  Lines       10063    10284     +221     
  Branches     3836     3946     +110     
==========================================
+ Hits         9317     9484     +167     
- Misses        682      729      +47     
- Partials       64       71       +7     

Files with missing lines	Coverage Δ
...form/src/compositions/RichTextInputField/index.tsx	100.00% <100.00%> (ø)
...es/ui/src/compositions/RichTextInput/styles.css.ts	100.00% <100.00%> (ø)
...kages/ui/src/compositions/RichTextInput/Notice.tsx	81.81% <81.81%> (ø)
...ckages/ui/src/compositions/RichTextInput/index.tsx	96.07% <96.07%> (ø)
...es/ui/src/compositions/RichTextInput/editorCore.ts	88.88% <88.88%> (ø)
...kages/ui/src/compositions/RichTextInput/helpers.ts	64.70% <64.70%> (ø)
...ages/ui/src/compositions/RichTextInput/Toolbar.tsx	49.35% <49.35%> (ø)

... and 2 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eab08c2...b1b3a8b. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[lisalupi]

I can copy-paste text that renders as h1, h2, etc., but it is not possible to write headings. Is it ok?

[jsulpis]

it's not the status that should have the aria-describedby attribute, it's the element that is described by the status, so in your case the text editor. You have to :

• add an id attribute on the status element
• add an aria-describedby="status-id" attribute on the editor
  this way you "link" the status to the editor, and screen readers will read the status when focusing the editor.

As suggested, you can use toHaveAccessibleDescription to check this behavior without reading directly the attributes (test the behavior and not the implementation)

Suggested change

	const status = screen.getByRole('status')
	expect(status).toHaveAttribute('aria-describedby', 'id-test-notice')
	expect(status).toHaveTextContent(successMessage)
	const doc = screen.getByLabelText<HTMLDivElement>('Test')
	expect(doc).toHaveAccessibleDescription(successMessage)
	expect(screen.getByText(successMessage)).toHaveRole('status')

use this same syntax for the other tests below

[jsulpis]

is it normal that the error icon is here ? it looks a bit weird to me

[JulienSaguez]

The icon seems to me you're in the right place, we can see together if you can reproduce it.