Skip to content

RichText renders plain HTML when rendered in the server (RSC) #1580

@earthlingdavey

Description

@earthlingdavey

Description

When using Render from @puckeditor/core/rsc, RichText components inside DropZones display escaped HTML (<p>Hello</p>) instead of rendered markup.

Suspected Cause(?): DropZoneRender in the RSC bundle doesn't call useRichtextProps() to process richtext field data before passing props to components. The Item component does call it, but zone content bypasses this.

Workaround: Use slot fields instead of DropZones. Slots are processed through useRichtextProps correctly:

Environment

  • Puck version: [0.21.1]
  • Browser version: NA
  • Additional environment info: [Deno]

Steps to reproduce

Steps, or see minimal reproduction below.

  1. Create a Section component with a DropZone
  2. Add a RichText component (using type: "richtext" field) inside the zone
  3. Render server-side with Render from @puckeditor/core/rsc
  4. Output shows raw HTML tags instead of rendered content
/** @jsxImportSource react */
// repro.tsx
import { Render } from "@puckeditor/core/rsc";
import { Config, Data } from "@puckeditor/core";
import { renderToString } from "react-dom/server";


const config: Config = {
  components: {
    Section: {
      fields: {},
      render: ({ puck }) => (
        <div>{puck.renderDropZone({ zone: "content" })}</div>
      ),
    },
    RichText: {
      fields: {
        content: { type: "richtext" },
      },
      render: ({ content }) => <div>{content}</div>,
    },
  },
};

const data: Data = {
  root: { props: {} },
  content: [
    { type: "Section", props: { id: "section-1" } }
  ],
  zones: {
    "section-1:content": [
      {
        type: "RichText",
        props: {
          id: "richtext-1",
          content: "<p>Hello world</p>",
        },
      },
    ],
  },
};

const html = renderToString(<Render config={config} data={data} />);
console.log(html);
// Expected: <div><div><p>Hello world</p></div></div>
// Actual:   <div><div>&lt;p&gt;Hello world&lt;/p&gt;</div></div>

What happens

Html is rendered with entities encoded:

<div><div>&lt;p&gt;Hello world&lt;/p&gt;</div></div>

What I expect to happen

HTMLl is rendered without entities encoded:

<div><div><p>Hello world</p></div></div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions