feat(text-editor): add onFormSubmission callback by tomdavies73 · Pull Request #7831 · Sage/carbon

tomdavies73 · 2026-03-11T11:40:04Z

Proposed behaviour

Adds a new onFormSubmission callback that is triggered when the parent form is submitted. This callback provides access to the editor's content in multiple formats, including htmlStringWithInlineStyles - HTML content with Lexical class names converted to inline styles.

This is a separate callback from onSave and is designed specifically for form submission workflows. The HTML with inline styles is useful when editor content needs to be used in contexts where stylesheets are not available, such as PDF generation or email templates.

Current behaviour

Currently, there is no onFormSubmission callback, also there is no mechanism for consumers to access inline HTML from the editor with inline css for external consumption.

Checklist

QA

Tested in provided StackBlitz sandbox/Storybook
Add new Playwright test coverage if required
Carbon implementation matches Design System/designs
UI Tests GitHub check reviewed if required

Additional context

Testing instructions

Trigger the onFormSubmission behaviour on the onFormSubmission story within TextEditor, assert the inline styles is correct

Copilot

Pull request overview

This PR updates the TextEditor component API/behaviour by removing the legacy cancel/save toolbar buttons, repurposing onSave to trigger on parent form submission, and adding a second onSave argument containing HTML with inline styles for portability.

Changes:

Removed onCancel support (props, UI, locale keys, docs, and tests) and removed the legacy save button UI.
Added a SavePlugin that listens for parent <form> submit events and calls onSave(formattedValues, htmlWithInlineStyles).
Added generateHTMLWithInlineStyles post-processing + updated Storybook/docs/tests to reflect the new onSave signature and behaviour.

Reviewed changes

Copilot reviewed 28 out of 28 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/locales/pt-pt.ts	Removes legacy TextEditor save/cancel locale keys.
src/locales/locale.ts	Removes legacy TextEditor save/cancel locale keys from the locale interface.
src/locales/fr-fr.ts	Removes legacy TextEditor save/cancel locale keys.
src/locales/fr-ca.ts	Removes legacy TextEditor save/cancel locale keys.
src/locales/es-es.ts	Removes legacy TextEditor save/cancel locale keys.
src/locales/en-gb.ts	Removes legacy TextEditor save/cancel locale keys.
src/locales/de-de.ts	Removes legacy TextEditor save/cancel locale keys.
src/components/text-editor/text-editor.test.tsx	Updates unit tests for new onSave form-submit semantics and removes old cancel/save button tests.
src/components/text-editor/text-editor.stories.tsx	Updates Storybook `OnSave` to submit via a form and display inline-styled HTML output.
src/components/text-editor/text-editor.pw.tsx	Removes Playwright tests tied to legacy save/cancel toolbar buttons.
src/components/text-editor/text-editor.mdx	Updates docs for new onSave behaviour/signature and removes translation keys for legacy buttons.
src/components/text-editor/text-editor.component.tsx	Removes legacy deprecations + toolbar wiring and mounts new `SavePlugin`.
src/components/text-editor/text-editor-test.stories.tsx	Removes onCancel usage in test stories.
src/components/text-editor/components.test-pw.tsx	Removes Playwright fixture components that relied on legacy save/cancel buttons.
src/components/text-editor/internal/utils/interfaces.types.ts	Removes `onCancel`, changes `onSave` signature, removes `SaveButtonProps`.
src/components/text-editor/internal/utils/helpers.ts	Adds `generateHTMLWithInlineStyles` helper and exports it.
src/components/text-editor/internal/utils/helpers.test.ts	Adds tests for `generateHTMLWithInlineStyles`.
src/components/text-editor/internal/ui/Toolbar/toolbar.style.ts	Removes `CommandButtons` styling used by legacy buttons.
src/components/text-editor/internal/ui/Toolbar/toolbar.component.tsx	Removes legacy save/cancel button rendering.
src/components/text-editor/internal/ui/Toolbar/buttons/save.component.tsx	Deletes legacy Save button component.
src/components/text-editor/internal/ui/Toolbar/buttons/index.ts	Removes Save button export.
src/components/text-editor/internal/ui/Toolbar/buttons/buttons.test.tsx	Deletes tests specific to legacy Save button behaviour.
src/components/text-editor/internal/ui/ContentEditor/content-editor.test.tsx	Adds coverage for a blur-related branch.
src/components/text-editor/internal/plugins/index.ts	Exports new `SavePlugin`.
src/components/text-editor/internal/plugins/SavePlugin/save.plugin.tsx	Implements new form-submit listener logic that calls onSave with two args.
src/components/text-editor/internal/plugins/SavePlugin/save.plugin.test.tsx	Adds unit tests for SavePlugin event wiring and callback behaviour.
src/components/text-editor/internal/plugins/SavePlugin/index.ts	Barrel exports for SavePlugin.
skills/carbon-react/components/text-editor.md	Updates generated/skills documentation for new onSave behaviour and signature.

Comments suppressed due to low confidence (1)

src/components/text-editor/text-editor.pw.tsx:510

Playwright coverage for the new onSave behaviour appears to have been removed without replacement. Since onSave now fires on parent form submission (and must ignore internal dialog forms), it would be good to add/update a Playwright test that wraps TextEditor in a form with a submit button and asserts the callback is triggered (and not triggered by the hyperlink dialog save).

test.describe("Functionality tests", () => {
  test.describe("onBlur", () => {
    test("fires when the editor loses focus", async ({ mount, page }) => {
      let currentValue = false;

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-11T17:42:21Z

 import Logger from "../../../../__internal__/utils/logger";

+const fontFamily = "font-family: 'Sage UI', sans-serif;";
+const linkStyles = `color: #007e45ff; cursor: pointer; text-decoration: underline; ${fontFamily}`;


The new inline link color uses 8-digit hex (#007e45ff). Because this HTML output is explicitly intended to be portable for email/external consumers, prefer a more broadly supported representation (e.g. 6-digit hex #007e45 or rgb/rgba), ideally sourced from an existing theme/token rather than a hard-coded literal.

Suggested change

const linkStyles = `color: #007e45ff; cursor: pointer; text-decoration: underline; ${fontFamily}`;

const linkStyles = `color: #007e45; cursor: pointer; text-decoration: underline; ${fontFamily}`;

Copilot · 2026-03-11T17:42:21Z


-If the `onSave` property is not provided, the `Save` button will not be displayed.
+1. **`formattedValues`**: An object containing the serialized editor content:
+   - `htmlString`: A HTML representation of the editor content, as a string.


In this onSave docs section, "A HTML representation" is grammatically incorrect; it should be "An HTML representation" (also helps keep wording consistent for public docs).

Suggested change

- `htmlString`: A HTML representation of the editor content, as a string.

- `htmlString`: An HTML representation of the editor content, as a string.

Copilot · 2026-03-11T17:42:21Z

+To handle the content of the editor when a form containing the editor is submitted, you can set the `onSave` property to a function. The callback function returns two parameters:
+
+1. **`formattedValues`**: An object containing the serialized editor content:
+   - `htmlString`: A HTML representation of the editor content, as a string.


The onSave docs here say "A HTML representation"; this should be "An HTML representation".

Suggested change

- `htmlString`: A HTML representation of the editor content, as a string.

- `htmlString`: An HTML representation of the editor content, as a string.

Copilot · 2026-03-11T17:42:22Z

+ * <TextEditor labelText="..." onSave={(values, html) => console.log(values, html)}>
+ *   <SavePlugin onSave={handleSave} />
+ * </TextEditor>


The JSDoc @example here suggests consumers render as a child of , but SavePlugin is an internal plugin that TextEditor mounts itself. This example is misleading; either remove it or replace it with an example that shows TextEditor inside a parent
and using TextEditor’s onSave prop.

Suggested change

* <TextEditor labelText="..." onSave={(values, html) => console.log(values, html)}>

* <SavePlugin onSave={handleSave} />

* </TextEditor>

* <form onSubmit={handleSubmit}>

* <TextEditor

* labelText="..."

* onSave={(values, html) => {

* console.log(values, html);

* }}

* />

* </form>

nineteen88 · 2026-03-18T02:40:12Z

+
+The callback receives an object containing:
+
+1. **`formattedValues`**: An object containing the serialized editor content:


suggestion: use British English

Suggested change

1. **`formattedValues`**: An object containing the serialized editor content:

1. **`formattedValues`**: An object containing the serialised editor content:

nineteen88 · 2026-03-18T02:52:03Z

+  return form;
+};
+
+describe("FormSubmissionPlugin", () => {


comment(non-blocking): describe and it blocks should be written in continuous prose

nineteen88 · 2026-03-19T00:49:50Z

  });
 });
+
+describe("generateHTMLWithInlineStyles", () => {


comment(non-blocking): describe and it blocks should be written in continuous prose

nineteen88 · 2026-03-19T00:50:41Z

+};
+
+/**
+ * Post-processes HTML serialized from the Lexical editor, converting class-based


suggestion: use British English

Suggested change

* Post-processes HTML serialized from the Lexical editor, converting class-based

* Post-processes HTML serialised from the Lexical editor, converting class-based

nineteen88 · 2026-03-19T00:58:14Z

+
+The callback receives an object containing:
+
+1. **`formattedValues`**: An object containing the serialized editor content:


suggestion: use British English

Suggested change

1. **`formattedValues`**: An object containing the serialized editor content:

1. **`formattedValues`**: An object containing the serialised editor content:

Adds a new onFormSubmission callback that is triggered when the parent form is submitted. This callback provides access to the editor's content in multiple formats, including htmlStringWithInlineStyles - HTML content with Lexical class names converted to inline styles. This is a separate callback from onSave and is designed specifically for form submission workflows. The HTML with inline styles is useful when editor content needs to be used in contexts where stylesheets are not available, such as PDF generation or email templates. fix #7737

carbonci · 2026-03-26T11:16:03Z

🎉 This PR is included in version 158.39.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

tomdavies73 self-assigned this Mar 11, 2026

tomdavies73 added the Work in progress This is a WIP PR so may not be ready for review label Mar 11, 2026

tomdavies73 force-pushed the FE-7597 branch from 94a129e to 3f812ed Compare March 11, 2026 14:36

tomdavies73 requested a review from Copilot March 11, 2026 17:35

Copilot started reviewing on behalf of tomdavies73 March 11, 2026 17:36 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

tomdavies73 force-pushed the FE-7597 branch from 3f812ed to b802c57 Compare March 13, 2026 10:55

tomdavies73 changed the title ~~feat(text-editor): repurpose onSave callback and remove onCancel ballback~~ feat(text-editor): add onFormSubmission callback Mar 13, 2026

tomdavies73 force-pushed the FE-7597 branch from b802c57 to 72b0f1b Compare March 13, 2026 11:23

tomdavies73 added Pending Review Pending QA No UX QA Required and removed Work in progress This is a WIP PR so may not be ready for review labels Mar 13, 2026

tomdavies73 force-pushed the FE-7597 branch 2 times, most recently from a762b63 to f8235e6 Compare March 13, 2026 11:49

nineteen88 reviewed Mar 19, 2026

View reviewed changes

mihai-albu-sage previously approved these changes Mar 20, 2026

View reviewed changes

tomdavies73 dismissed mihai-albu-sage’s stale review via d9fdb3f March 20, 2026 09:36

tomdavies73 force-pushed the FE-7597 branch from f8235e6 to d9fdb3f Compare March 20, 2026 09:36

mihai-albu-sage previously approved these changes Mar 24, 2026

View reviewed changes

nineteen88 previously approved these changes Mar 24, 2026

View reviewed changes

tomdavies73 added Passed Review and removed Pending Review labels Mar 24, 2026

dariusbercea-sage marked this pull request as ready for review March 25, 2026 13:43

dariusbercea-sage requested review from a team as code owners March 25, 2026 13:43

dariusbercea-sage requested a review from a team as a code owner March 25, 2026 13:43

dariusbercea-sage previously approved these changes Mar 26, 2026

View reviewed changes

dariusbercea-sage added Passed QA and removed Pending QA labels Mar 26, 2026

tomdavies73 dismissed stale reviews from mihai-albu-sage, nineteen88, and dariusbercea-sage via a3b6850 March 26, 2026 10:11

tomdavies73 force-pushed the FE-7597 branch from 77e3a9e to a3b6850 Compare March 26, 2026 10:11

Merge branch 'master' into FE-7597

df61fe7

mihai-albu-sage approved these changes Mar 26, 2026

View reviewed changes

dariusbercea-sage approved these changes Mar 26, 2026

View reviewed changes

nineteen88 approved these changes Mar 26, 2026

View reviewed changes

tomdavies73 merged commit 8f7f4e6 into master Mar 26, 2026
28 checks passed

tomdavies73 deleted the FE-7597 branch March 26, 2026 11:13

carbonci added the released label Mar 26, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(text-editor): add onFormSubmission callback#7831

feat(text-editor): add onFormSubmission callback#7831
tomdavies73 merged 2 commits intomasterfrom
FE-7597

tomdavies73 commented Mar 11, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

nineteen88 Mar 18, 2026

Uh oh!

nineteen88 Mar 18, 2026

Uh oh!

nineteen88 Mar 19, 2026

Uh oh!

nineteen88 Mar 19, 2026

Uh oh!

nineteen88 Mar 19, 2026

Uh oh!

Uh oh!

carbonci commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

6 participants

	const linkStyles = `color: #007e45ff; cursor: pointer; text-decoration: underline; ${fontFamily}`;
	const linkStyles = `color: #007e45; cursor: pointer; text-decoration: underline; ${fontFamily}`;

	- `htmlString`: A HTML representation of the editor content, as a string.
	- `htmlString`: An HTML representation of the editor content, as a string.

- * <TextEditor labelText="..." onSave={(values, html) => console.log(values, html)}>
- *   <SavePlugin onSave={handleSave} />
- * </TextEditor>
+ * <form onSubmit={handleSubmit}>
+ *   <TextEditor
+ *     labelText="..."
+ *     onSave={(values, html) => {
+ *       console.log(values, html);
+ *     }}
+ *   />
+ * </form>


		The callback receives an object containing:

		1. `formattedValues`: An object containing the serialized editor content:

	* Post-processes HTML serialized from the Lexical editor, converting class-based
	* Post-processes HTML serialised from the Lexical editor, converting class-based

Conversation

tomdavies73 commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

nineteen88 Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

nineteen88 Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

nineteen88 Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

nineteen88 Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

nineteen88 Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

carbonci commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

6 participants

tomdavies73 commented Mar 11, 2026 •

edited

Loading