placeholder does not show

[alidcast]

When I inspect the page, the placeholder is appearing as a tag for the element. But it is not appearing on the page when the mobiledoc is empty.

Based on the documentation, so far I have this:

// template.hbs
{{#mobiledoc-editor
    mobiledoc=mobiledoc
    placeholder=placeholder
    as |editor|}}
    <div class="toolbar">
        {{mobiledoc-markup-button editor=editor for="strong"}}
        {{mobiledoc-section-button editor=editor for="h2"}}
    </div>
{{/mobiledoc-editor}}

// component.js
...
export default Ember.Component.extend({
  mobiledoc: {
    version: '0.3.0',
    atoms: [],
    markups: [],
    cards: [],
    sections: []
  },

  placeholder: 'Write here'

});

Is there something else I need to do to get the placeholder to work?

[bantic]

@alidcastano Can you check what version of Mobiledoc-Kit you are using? npm ls mobiledoc-kit. The placeholder code changed recently and that may affect you.

The placeholder is rendered with css using this rule:

.__mobiledoc-editor.__has-no-content:after {
  content: attr(data-placeholder);
  color: #bbb;
  cursor: text;
  position: absolute;
  top: 0;
}

Can you use your devtools to check the CSS that is applied to the mobiledoc-editor element? You should also confirm that your editor has the __has-no-content class on it.

thanks!

[alidcast]

Ah, didn't know the placeholder was rendered with css. The problem is that I use ember-component-css addon to specify css inside component pod directories. But recently the addon has had problems importing external libraries, and for that reason, wasn't importing the mobiledoc's css.

I temporarily added @import 'node_modules/ember-mobiledoc-editor/node_modules/mobiledoc-kit/dist/css/mobiledoc-kit'; to mains stylesheet. Now everything works.

[bantic]

@alidcastano Great, glad that is working for you!