diff --git a/docs/reference/components/editor.md b/docs/reference/components/editor.md index c271a17e1..b06058833 100644 --- a/docs/reference/components/editor.md +++ b/docs/reference/components/editor.md @@ -10,6 +10,8 @@ The top-level React component that renders the Slate editor itself. - [Properties](#properties) - [`onChange`](#onchange-function) - [`placeholder`](#placeholder-text-or-element) + - [`placeholderClassName`](#placeholderclassname-string) + - [`placeholderStyle`](#placeholderstyle-string) - [`plugins`](#plugins-array) - [`state`](#state-state) - [Plugin-like Properties](#plugin-like-properties) @@ -42,6 +44,14 @@ A change handler that will be called with the newly-changed editor `state`. You A placeholder string (or React element) that will be rendered as the default block type's placeholder. +#### `placeholderClassName: String` + +An optional class name to apply to the default block type's placeholder. + +#### `placeholderStyle: Object` + +An optional dictionary of styles to apply to the default block type's placeholder. If `placeholder` is a string, and no class name or style dictionary is passed, this property will default to `{ opacity: '0.333' }`. + #### `plugins: Array` An array of [`Plugins`](../plugins) that define the editor's behavior. diff --git a/lib/components/editor.js b/lib/components/editor.js index e604bebfc..0434360de 100644 --- a/lib/components/editor.js +++ b/lib/components/editor.js @@ -19,6 +19,9 @@ class Editor extends React.Component { onChange: React.PropTypes.func.isRequired, onKeyDown: React.PropTypes.func, onPaste: React.PropTypes.func, + placeholder: React.PropTypes.any, + placeholderClassName: React.PropTypes.string, + placeholderStyle: React.PropTypes.object, plugins: React.PropTypes.array, renderDecorations: React.PropTypes.func, renderMark: React.PropTypes.func, diff --git a/lib/components/placeholder.js b/lib/components/placeholder.js index 2d9341745..f66095799 100644 --- a/lib/components/placeholder.js +++ b/lib/components/placeholder.js @@ -22,12 +22,6 @@ class Placeholder extends React.Component { style: React.PropTypes.object }; - static defaultProps = { - style: { - opacity: '0.333' - } - }; - /** * Should the component update? * @@ -85,12 +79,21 @@ class Placeholder extends React.Component { /** * Render. * + * If the placeholder is a string, and no `className` or `style` has been + * passed, give it a default style of lowered opacity. + * * @return {Element} element */ render = () => { - const { children, className, style } = this.props const isOpen = this.isVisible() + const { children, className } = this.props + let { style } = this.props + + if (typeof children === 'string' && style == null && className == null) { + style = { opacity: '0.333'} + } + return ( {children} diff --git a/lib/plugins/core.js b/lib/plugins/core.js index c5327a63b..deebd3159 100644 --- a/lib/plugins/core.js +++ b/lib/plugins/core.js @@ -9,11 +9,18 @@ import { IS_WINDOWS, IS_MAC } from '../utils/environment' * The default plugin. * * @param {Object} options + * @property {Element} placeholder + * @property {String} placeholderClassName + * @property {Object} placeholderStyle * @return {Object} */ function Plugin(options = {}) { - const { placeholder } = options + const { + placeholder, + placeholderClassName, + placeholderStyle + } = options /** * Define a default block renderer. @@ -45,7 +52,13 @@ function Plugin(options = {}) { const { node, state } = this.props return ( - + {placeholder} )