feat(RichTextInput): create new component by JulienSaguez · Pull Request #6318 · scaleway/ultraviolet

JulienSaguez · 2026-04-09T08:54:34Z

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 · 2026-04-09T08:54:43Z

🦋 Changeset detected

Latest commit: 63e7331

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 · 2026-04-09T08:59:52Z

Codecov Report

❌ Patch coverage is 83.83838% with 32 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.44%. Comparing base (2b89546) to head (63e7331).
⚠️ Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
...ages/ui/src/compositions/RichTextInput/Toolbar.tsx	68.51%	15 Missing and 2 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	95.83%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6318      +/-   ##
==========================================
+ Coverage   83.30%   92.44%   +9.13%     
==========================================
  Files          44      540     +496     
  Lines         683    10234    +9551     
  Branches      195     3913    +3718     
==========================================
+ Hits          569     9461    +8892     
- Misses        104      706     +602     
- Partials       10       67      +57

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	`95.83% <95.83%> (ø)`
...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	`68.51% <68.51%> (ø)`

... and 489 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 e4ae00d...63e7331. 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 · 2026-04-10T12:01:24Z

+      {...props}
+      error={getError(
+        {
+          label: label ?? ariaLabel ?? name,


Suggested change

label: label ?? ariaLabel ?? name,

label: errorLabel ?? label ?? ariaLabel ?? name,

errorLabel is a new prop of BaseFieldProps that can be used to customize the error message (see #6241)

lisalupi · 2026-04-10T12:22:18Z

+        field.onChange(value)
+        onChange?.(value as PathValue<TFieldValues, Path<TFieldValues>>)
+      }}
+      value={field.value ?? ''}


why add ?? ''

lisalupi · 2026-04-10T12:27:27Z

+      )
+    },
+  ],
+  title: 'Form/Components/Fields/RichTextEditorField',


Suggested change

title: 'Form/Components/Fields/RichTextEditorField',

title: 'Form/Components/Compositions/RichTextEditorField',

lisalupi · 2026-04-10T12:28:11Z

+
+export default {
+  component: RichTextEditor,
+  title: 'UI/Data Entry/RichTextEditor',


Suggested change

title: 'UI/Data Entry/RichTextEditor',

title: 'Compositions/RichTextEditor',

lisalupi · 2026-04-10T12:38:45Z

+            style={{
+              minHeight,
+              ...(maxHeight ? { maxHeight } : {}),
+            }}


why not add this in richTextEditorStyle.docRegion paired with assignInlineVars?

lisalupi · 2026-04-10T12:39:34Z

+  sentiment?: 'danger' | 'success' | 'neutral'
+}) => (
+  <Row gap="1" templateColumns="minmax(0, 1fr) min-content">
+    <div>


i don't understand the role of this div

lisalupi · 2026-04-10T12:44:14Z

+})
+
+export const docRegion = style({
+  lineHeight: 1.5,


Suggested change

lineHeight: 1.5,

lineHeight: theme.typography.body.lineHeight,

lisalupi

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

lisalupi · 2026-04-14T13:58:10Z

+      )
+    },
+  ],
+  title: 'Compositions/RichTextEditorField',


Suggested change

title: 'Compositions/RichTextEditorField',

title: 'Form/Components/Compositions/RichTextEditorField',

lisalupi · 2026-04-14T14:54:07Z

+  const maxHeight =
+    typeof maxRows === 'number'
+      ? `calc(${lineHeightEm}em * ${maxRows} + 2 * ${padding})`
+      : undefined


Suggested change

const maxHeight =

typeof maxRows === 'number'

? `calc(${lineHeightEm}em * ${maxRows} + 2 * ${padding})`

: undefined

const maxHeight =

typeof maxRows === 'number'

? `calc(${lineHeightEm}em * ${maxRows} + 2 * ${padding})`

: 'none'

Just a suggestion

lisalupi · 2026-04-14T14:54:43Z

+              ...assignInlineVars({
+                [docRegionMaxHeightVar]: maxHeight ?? 'none',
+              }),
+              minHeight,


minHeight should be an inlineVar too

jsulpis · 2026-04-15T15:34:45Z

+  const isInOrderedList = isSelectionInNodeType(editorState, orderedList)
+
+  return (
+    <Stack alignItems="center" direction="row" gap={1}>


idéalement il faudrait un role="toolbar" comme dans l'exemple ProseMirror. La navigation clavier est aussi différente (flèches pour naviguer entre les boutons, et quand on clique dessus ça remet le focus dans l'éditeur).

jsulpis · 2026-04-15T15:36:11Z

+            disabled={disabled}
+            size="small"
+            variant={isMarkActive(editorState, strongMark) ? 'filled' : 'ghost'}
+            onMouseDown={event => {


utiliser onClick pour supporter le clavier, et qui est déclenché quand on relâche le clic. C'est plus courant que de faire l'action au MouseDown, avant d'avoir relâché

pourquoi event.preventDefault() ?

il faut un label explicite aux boutons, là c'est le nom de l'icône ("BoldIcon"). Je vois qu'on utilise par endroits des fichiers de traduction en.ts, tu pourrais faire pareil en attendant qu'on trouve une meilleure solution

Utiliser onMouseDown permet runCommand avant le changement de focus

L'event.preventDefault permet d'empecher le comportement par defaut d'un clic sur un bouton qui est de prendre le focus

Je rajoute les labels

jsulpis · 2026-04-16T07:44:43Z

+  return (
+    <Stack gap="0.5">
+      {label ? (
+        <Label htmlFor={id ?? localId} required={required}>


2 issues :

the localId is not used on the editor so the label points to nothing

a label element cannot be linked to a div. You can use an id on the label and aria-labelledby on the editor instead

jsulpis · 2026-04-16T07:46:05Z

+          }),
+          className,
+        )}
+        data-disabled={disabled ? 'true' : undefined}


why do you need this data-disabled attribute ?

Effectivement il n'est pas utile

jsulpis · 2026-04-16T07:50:41Z

+  disabled?: boolean
+  sentiment?: 'danger' | 'success' | 'neutral'
+}) => (
+  <Row gap="1" templateColumns="minmax(0, 1fr) min-content">


the container of the Notice message should have:

an id paired with an aria-describedby attribute on the text editor to link the message to the editor

a role="status" which implicitely add an aria-live="polite" so that screen readers read the status message when it's updated

jsulpis · 2026-04-16T08:39:10Z

+            onBlur={onBlur}
+            onFocus={onFocus}


the blur and focus events don't bubble, did you check that you actually receive them here ? I don't see them in the proseMirror doc

jsulpis · 2026-04-16T08:45:13Z

+      </Form>,
+    )
+
+    await userEvent.click(screen.getByText('Submit'))


always prefer getByRole, idem in the other tests below

Suggested change

await userEvent.click(screen.getByText('Submit'))

await userEvent.click(screen.getByRole('button', { name: 'Submit' }))

jsulpis · 2026-04-16T08:45:54Z

+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledOnce()
+      expect(onSubmit.mock.calls[0]?.[0]?.test).toEqual(
+        expect.stringContaining('This is an example'),


can you check the whole string ?

jsulpis · 2026-04-16T08:47:47Z

+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledOnce()
+      expect(onSubmit.mock.calls[0]?.[0]?.test).toEqual(


check the whole string ?

jsulpis · 2026-04-16T08:54:44Z

+export const Required: StoryFn<
+  ComponentProps<typeof RichTextEditorField>
+> = args => (
+  <Stack gap={1}>


you could add this Stack and gap in the Template story, and bind the Template markup here like the playground so that they look the same

…older

JulienSaguez self-assigned this Apr 9, 2026

JulienSaguez requested review from a team and lisalupi as code owners April 9, 2026 08:54

JulienSaguez marked this pull request as draft April 9, 2026 08:54

scaleway-bot deployed to storybook April 9, 2026 08:57 View deployment

JulienSaguez force-pushed the feat/rich-text-editor branch from d4b5583 to 8b976b0 Compare April 9, 2026 12:54

scaleway-bot deployed to storybook April 9, 2026 12:56 View deployment

JulienSaguez marked this pull request as ready for review April 10, 2026 10:02

JulienSaguez requested review from etienne-scaleway and jsulpis April 10, 2026 10:02

scaleway-bot deployed to storybook April 10, 2026 10:04 View deployment

scaleway-bot deployed to storybook April 10, 2026 12:06 View deployment

lisalupi reviewed Apr 10, 2026

View reviewed changes

JulienSaguez force-pushed the feat/rich-text-editor branch from 82f8b17 to 82b9a91 Compare April 14, 2026 12:30

scaleway-bot deployed to storybook April 14, 2026 12:41 View deployment

scaleway-bot deployed to storybook April 14, 2026 13:56 View deployment

lisalupi requested changes Apr 14, 2026

View reviewed changes

jsulpis requested changes Apr 16, 2026

View reviewed changes

JulienSaguez changed the title ~~feat(RichTextEditor): create new component~~ feat(RichTextInput): create new component Apr 20, 2026

JulienSaguez requested a review from jsulpis April 20, 2026 14:55

JulienSaguez added 8 commits April 20, 2026 17:17

feat(RichTextEditor): create new component

ec5fb7d

fix(RichTextEditor): fix threads and move component in compositions f…

46b1df6

…older

fix(RichTextEditor): fix tests

bf37250

fix(RichTextEditor): fix anothers threads

df1ea11

fix(RichTextEditor): add errorLabel prop

4dd00d2

fix(RichTextEditor): update snapshots

0b5e162

fix(RichTextEditor): fix threads part one

40deec8

fix(RichTextInput): fix threads part two and rename to richtextinput

63e7331

JulienSaguez force-pushed the feat/rich-text-editor branch from 6e9a1dc to 63e7331 Compare April 20, 2026 15:18

scaleway-bot deployed to storybook April 20, 2026 15:20 View deployment

	label: label ?? ariaLabel ?? name,
	label: errorLabel ?? label ?? ariaLabel ?? name,

	title: 'Form/Components/Fields/RichTextEditorField',
	title: 'Form/Components/Compositions/RichTextEditorField',

	title: 'UI/Data Entry/RichTextEditor',
	title: 'Compositions/RichTextEditor',

	lineHeight: 1.5,
	lineHeight: theme.typography.body.lineHeight,

	title: 'Compositions/RichTextEditorField',
	title: 'Form/Components/Compositions/RichTextEditorField',

	await userEvent.click(screen.getByText('Submit'))
	await userEvent.click(screen.getByRole('button', { name: 'Submit' }))

Conversation

JulienSaguez commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Type

Summarize concisely:

What is expected?

The following changes were made:

Relevant logs and/or screenshots

Uh oh!

changeset-bot bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codecov bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lisalupi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

JulienSaguez commented Apr 9, 2026 •

edited

Loading

changeset-bot bot commented Apr 9, 2026 •

edited

Loading

codecov bot commented Apr 9, 2026 •

edited

Loading