The HTML data attribute is missing

[hyeonjoo]

Description

Any HTML data attribute, including data-testid for Playwright testing, is missing.
For more info about the data attribute, see: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Steps

Add any custom data-* attribute to the Plate component. And it's omitted on the result, which is seen on the rendered HTML element.

Expectation

When the data-* attribute is added to the Plate React element, the <div role="textbox"> element generated by Plate should contain it.

Environment

• slate: 0.94.1
• slate-react: 0.96.0
• browser: Chrome (Version 114.0.5735.198 (Official Build) (arm64))

[zbeyens]

To include a custom data attribute in the rendered HTML element generated by the Plate React component, you can use the editableProps property.

Here is an example of how you can achieve this:

const Editor = () => {
  const editableProps = {
    'data-testid': 'plate-textbox',
    // other editable props...
  };

  return (
    <Plate editableProps={editableProps} />
  );
};

[hyeonjoo]

I see. Thanks for the info. But I'm using TS, so it has type error as it doesn't exist in TEditableProps. Can I know how to escape the type error without library change?

TS2322
Object literal may only specify known properties, and ''data-testid'' does not exist in type 'TEditableProps'.

[zbeyens]

There is indeed a TS issue despite TEditableProps extending React.TextareaHTMLAttributes<HTMLDivElement>.

Not the cleanest solution, but this should work:

const Editor = () => {
  const editableProps = {
    'data-testid': 'plate-textbox',
    // other editable props...
  } as TEditableProps;

  return (
    <Plate editableProps={editableProps} />
  );
};

[hyeonjoo]

Thank you for quick response. But it doesn't work, unfortunately.

[zbeyens]

Just tested in plate-template, it works well:

See env here: https://github.com/udecode/plate/tree/aa6538b4fdc7ce546759165f837de1e4777c76f2/templates/plate-template.

[hyeonjoo]

I tried and it works. Thanks