add placeholder to the div, update example with additional prop

[costagolub]

No description provided.

[amensouissi]

Please merge...

[gettinToasty]

please merge this :)

[atagulalan]

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;
}

[smoleniuch]

@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!

[lovasoa]

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.

[enkhchuluun]

please merge this! placeholder is very important

[lovasoa]

@enkhchuluun Didn't you read the above ?

[RobertB4]

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.

[lovasoa]

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

[eyea]

WOW NICE!

[ZhangPeng4242]

@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.

[syed3kt]

Pls merge this PR. Am in need of this Placeholder

[rajasurya7]

please merge this! placeholder is very important

[n3oney]

@syed3kt @rajasurya7 just use this solution #64 (comment)

[richardaum]

The suggested solution makes the caret to disappear when the input is empty and focused.

[Pulseline-Tech]

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.

For anyone having trouble with typings or do not want to update them you can just use the aria-placeholder and change the attr(placeholder) to attr(aria-placeholder) in the CSS file