react-contenteditable add placeholder to the div, update example with additional prop

Sep 05 '17 22:09 costagolub

Please merge...

Jan 09 '18 15:01 amensouissi

please merge this :)

Jan 29 '18 19:01 gettinToasty

Well, it could be done easily with some CSS - Without this merge.

Just add "placeholder" attribute like this:

<ContentEditable
   ...
   placeholder={"Hello, World!"}
/>

And add this to your CSS:

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaa;
}

Mar 17 '18 09:03 atagulalan

@atagulalan

I agree that it is easy to do it sounds like a basic feature to have in such component.I would vote in favor to have placeholder built in.

Cheers!

Aug 10 '18 06:08 smoleniuch

I do not really like the way the placeholder is implemented in this PR. If the placeholder is Hello World, and someone explicitly types Hello World, then blurs the component, then focuses it again, the text they typed will disappear.

The solution with CSS is shorter, simpler, and does not have this problem.

Aug 10 '18 07:08 lovasoa

please merge this! placeholder is very important

May 21 '19 03:05 enkhchuluun

@enkhchuluun Didn't you read the above ?

May 21 '19 09:05 lovasoa

For Typescript users:

To get past the Typescipt compiler using the solution of @atagulalan , I had to write my own type definition file. I also noticed that the current type definitions of this package are rather loose, so I adjusted them to be a bit more strict.

file: contentEditable.d.ts

declare module "react-contenteditable" {
  export default class ContentEditable<T> extends React.Component<{
    html: string
    // I am currently only using onChange. I didn't update the other event handler definitions,
    // but if you want strict typing, they all follow a similar pattern.
    onChange?: (event: React.ChangeEvent<ContentEditableElement>) => T
    onBlur?: Function
    onKeyUp?: Function
    onKeyDown?: Function
    disabled?: boolean
    tagName?: string
    className?: string
    // Was originally typed as Object.
    style?: React.CSSProperties
    innerRef?: React.RefObject<HTMLElement> | Function
    // Add this so the Typescript compiler will let you add a placeholder prop to
    // the ContentEditable component.
    placeholder?: string
  }> {}

  // Extending value to HTMLElement is enough for my use case.
  // I haven't had a look at the source code in detail, there may be other keys
  // that were appended to the underlying HTMLElement.
  interface ContentEditableElement extends HTMLElement {
    value: string
  }
}

@lovasoa Let me know if you want stricter types, I'd be happy to update them.

Jun 25 '19 07:06 RobertB4

@RobertB4 Thank you for your work. Yes, I would definitely merge a PR implementing stricter types !

Jun 25 '19 08:06 lovasoa

WOW NICE!

Apr 02 '20 04:04 eyea

@atagulalan hii, thank you for your solution! However, I've encountered a problem that if I need to generate

tag or other tags under the contenteditable component( press enter generates p instead of div)， the

tag should be inside the component in the first place, then it conflicts with the pseudo-element :empty in css. I am wondering if there's any solution to this. Thank you.