How can I set the placeholder value?

[RamiroPastor]

Hi, I want to use this package but I have some basic problems, like the placeholder not working. This is my code:

import React, {useState} from "react";
import MDEditor from "@uiw/react-md-editor";

export function MarkdownArea(props) {

  const t = props.t;
  const identifier   = props.identifier;
  const labelText    = props.labelText;
  const placeholder  = props.placeholder;
  const ancestor     = props.ancestor;
  const register     = props.register;
  const errors       = props.errors;
  const isRequired   = props.isRequired;
  const minLen       = props.minLen;
  const maxLen       = props.maxLen;

  const [value, setValue] = useState("");

  const textareaProps = 
    { placeholder
    , readOnly: true
    }

  return (
    <div className={`coreInput__inputWrapper ${ancestor}__inputWrapper`}>
      <span className={`coreInput__inputLabel ${ancestor}__inputLabel`}>
        {t(labelText)}
      </span>
      <MDEditor
        value={value}
        onChange={setValue}
        height={300}
        textareaProps={textareaProps}
      />
      {errors[identifier] && <p className="coreInput__error">{errors[identifier].message}</p>}
    </div>
  )
}

And I'm using this MarkdownArea component like this:

  <MarkdownArea
        t={t}
        identifier={langCode + "-description"}
        labelText="description"
        placeholder="hola mundo"
        ancestor="ProductCreate"
        register={register}
        errors={errors}
        isRequired={true}
        minLen={config.product.minLen_description}
        maxLen={config.product.maxLen_description}
      />

But the placeholder is not working. Also any insights on how to integrate this textarea with react-hook-form will be appreciated

[jaywcjlove]

This is an editor, not an input, I don’t think placeholder needed @RamiroPastor

[RamiroPastor]

Well, I was using placeholder just to try how textareaProps work, the readOnly property won't work either.

Furthermore, textareas are often used in forms to collect user input

[jaywcjlove]

<MDEditor
  textareaProps={{
    disabled: true
  }}
  //....
/>

@RamiroPastor

[ninthworld]

This is an editor, not an input, I don’t think placeholder needed @RamiroPastor

Placeholders can be used to show the user what will be automatically entered if they leave the editor or input blank.

I was debugging for around 20 minutes before finding this issue. I had to revert to v2.1.8 to get this functionality back. If you don't want to support this feature going forward, removing the placeholder props or putting that information somewhere would be nice.

[jaywcjlove]

@ninthworld @RamiroPastor Upgrade + @uiw/react-md-editor@3.0.3

<MDEditor
  textareaProps={{
          placeholder: 'test ....'
  }}
  //....
/>

[DonHenry4L]

const textareaProps = { placeholder: "Add Something cool" }

<MDEditor height={200} value={value} onChange={setValue} textareaProps={textareaProps} />