Overview

There is a rendering/escaping bug with the formattedText component. When a user drags the component onto the canvas, deletes the existing placeholder text, and types new content, the editor wraps the new input in raw HTML tags (e.g., <p></p>) and displays them as plain, visible text.

This escaping issue is not isolated to the Canvas editor preview; the raw HTML tags also bleed through and are displayed to end-users on the actual published page.

Steps to Reproduce

  1. Open the Canvas editor.
  2. Drag and drop a formattedText component onto the canvas.
  3. Highlight and remove all of the default text inside the component.
  4. Enter new text into the component.
  5. Observe the component in the preview.
  6. Publish the page and view the actual published frontend.

Proposed resolution

User interface changes

CommentFileSizeAuthor
#8 Screen Recording 2026-05-14 at 5.47.45 PM.mov11.34 MBmayur-sose
Screenshot 2026-05-05 at 5.40.32 PM.png30.89 KBmayur-sose

Issue fork canvas-3588450

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mayur-sose created an issue. See original summary.

shubham.prakash made their first commit to this issue’s fork.

shubham.prakash opened merge request !1072

bnjmnm closed merge request !1072

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented

Closing MR 1072 - appreciate the attempt @shubham.prakash but I don't want to create the impression that the solution is in that part of the codebase. It is a popular diagnosis destination but rarely where the fix ultimately happens.

If this issue is only occurring with code components then it's likely React doing it's job - it escapes HTML by default. You'd need to use dangerouslySetInnerHTML for this to show up like you'd expect. It's possible there's something in the code component API to be used instead of dangerouslySetInnerHTML, but React escaping an HTML string is a feature, not a bug 🤓

If the above doesn't seem accurate, please provide the component where this is happening.

effulgentsia’s picture

effulgentsia commented
Component: … to be triaged » Theme builder

FormattedText component

I'm assuming this is a Code Component that's on the site. Canvas itself doesn't ship with any default Code Components. What's the JS code for this component? If it's something like:

<div>{text}</div>

then that would cause what this issue is describing, but that's by design per #5. The code instead needs to be:

<FormattedText>{text}</FormattedText>

where FormattedText is imported per https://project.pages.drupalcode.org/canvas/code-components/packages/#fo....

penyaskito’s picture

penyaskito
he/him
Primary language Spanish
Location 🧑🏽‍🌾 Seville 💃 Andalusia, UTC+2 🇪🇺
commented
Category: Bug report » Support request
Status: Active » Postponed (maintainer needs more info)

Per #5, #6, changing status and category.

mayur-sose’s picture

mayur-sose commented
Status: Postponed (maintainer needs more info) » Needs work
StatusFileSize
new Screen Recording 2026-05-14 at 5.47.45 PM.mov11.34 MB

@effulgentsia @bnjmnm @penyaskito

Below is the JS code component for reference:

const Component = ({
  text,
}) => {
  return (
    <div className="text-3xl">
      <formattedText>{text}</formattedText>
    </div>
  );
};

export default Component;
effulgentsia’s picture

effulgentsia commented
Status: Needs work » Postponed (maintainer needs more info)

Thanks @mayur-sose,

That component needs to be fixed to:

  1. Add import { FormattedText } from 'drupal-canvas'; at the top.
  2. Within the code, change formattedText to FormattedText (capitalize the F).

In other words, the new code should be:

import { FormattedText } from 'drupal-canvas';

const Component = ({
  text,
}) => {
  return (
    <div className="text-3xl">
      <FormattedText>{text}</FormattedText>
    </div>
  );
};

export default Component;

Can you try that out and report back if that solves it?

mayur-sose’s picture

mayur-sose commented
Status: Postponed (maintainer needs more info) » Closed (works as designed)

The changes above resolve the issue. Thanks @effulgentsia!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

penyaskito’s picture

penyaskito
he/him
Primary language Spanish
Location 🧑🏽‍🌾 Seville 💃 Andalusia, UTC+2 🇪🇺
commented

This has come quite a few times already (happened to myself too in the past, but I was able to figure out).
Wondering if there's something we can do UX-wise to make things easier, but can't think of anything TBF.