Placeholder about medium-draft HOT 16 CLOSED

have you included the css for medium-draft ?

from medium-draft.

We could better help if you showed us some code @riccardolorenzon.

from medium-draft.

@brijeshb42 Yes i included the css by using import 'medium-draft/lib/index.css';.
I see the style is applied to the component.

@method-x the code of the render method is pretty straightforward, but maybe is worth to report:

return (
 <Editor
        sideButtons={{}}
        ref='editor'
        editorState={editorState}
        inlineButtons={inlineButtons}
        onChange={this.onChange}
        placeholder='Type your text' />);

Obviously i'm expecting the placeholder 'Type your text' when the text area is empty, but i don't get any text.

from medium-draft.

Just FYI, the value of sideButtons should be an empty array, not an empty object.

Are you getting any message on console?

from medium-draft.

i changed the value of sidebuttons to {[]}.

Still no placeholder displayed, and no message on console as well.

from medium-draft.

Is there a demo you can share?

from medium-draft.

@brijeshb42 a demo not quickly, but i can share my whole React class:

const React = require('react');
import { Editor, createEditorState } from 'medium-draft';
import 'medium-draft/lib/index.css';

const CustomEditor = React.createClass({
  getInitialState: function() {
    return {
      editorState: createEditorState(),
    }
  },

  componentDidMount() {
    this.refs.editor.focus();
  },

  onChange: function(editorState) {
    this.setState({editorState: editorState});
  },

  render: function() {
    const {editorState} = this.state;
    var inlineButtons = [{
      label: 'B',
      style: 'BOLD',
      icon: 'bold',
      description: 'Bold',
    }, {
      label: 'I',
      style: 'ITALIC',
      icon: 'italic',
      description: 'Italic',
    }, {
      label: 'U',
      style: 'UNDERLINE',
      icon: 'underline',
      description: 'Underline',
    }, {
      label: 'S',
      style: 'STRIKETHROUGH',
      icon: 'strikethrough',
      description: 'Strikethrough',
    }, {
      label: '#',
      style: 'hyperlink',
      icon: 'link',
      description: 'Add a link',
    }];

    return (
      <Editor
        sideButtons={[]}
        ref='editor'
        editorState={editorState}
        inlineButtons={inlineButtons}
        onChange={this.onChange}
        placeholder='Type your text' />);
  }
});

module.exports = CustomEditor;

from medium-draft.

The above code is working fine for me. I only had to change the export statement. Are you able to perform other editing operations except the placeholder ?

from medium-draft.

All the other operations are working fine.. Can you see the placeholder then?

from medium-draft.

Yes. The Placeholder was working fine.

Now, all I can think of the error may be something to do with the CSS. z-index or position

from medium-draft.

If i check the HTML i see a #placeholder-23s09 div:

<div class="DraftEditor-root">
      <div class="public-DraftEditorPlaceholder-root">
         <div class="public-DraftEditorPlaceholder-inner" id="placeholder-23s09">Type your text</div>
      </div>
     [...]
</div>

I don't see any particular style of RichEditor from overridden by my CSS though...

from medium-draft.

UPDATE: if i remove position:absolute from the style of the class public-DraftEditorPlaceholder-root i see the placeholder.

from medium-draft.

I think this is a CSS issue, wondering how come it works on your environment.

from medium-draft.

You can use inspect element to check if anything is overriding the default style.
On Nov 1, 2016 6:14 PM, riccardo lorenzon [email protected] wrote:I think this is a CSS issue, wondering how come it works on your environment.

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread.

from medium-draft.

I don't see any overrides for that class.

from medium-draft.

After some investigation i found out that he problem is due to my custom css stylesheet.

from medium-draft.