mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-20 06:01:24 +02:00
add editor placeholder styles properties
This commit is contained in:
@@ -10,6 +10,8 @@ The top-level React component that renders the Slate editor itself.
|
|||||||
- [Properties](#properties)
|
- [Properties](#properties)
|
||||||
- [`onChange`](#onchange-function)
|
- [`onChange`](#onchange-function)
|
||||||
- [`placeholder`](#placeholder-text-or-element)
|
- [`placeholder`](#placeholder-text-or-element)
|
||||||
|
- [`placeholderClassName`](#placeholderclassname-string)
|
||||||
|
- [`placeholderStyle`](#placeholderstyle-string)
|
||||||
- [`plugins`](#plugins-array)
|
- [`plugins`](#plugins-array)
|
||||||
- [`state`](#state-state)
|
- [`state`](#state-state)
|
||||||
- [Plugin-like Properties](#plugin-like-properties)
|
- [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.
|
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`
|
#### `plugins: Array`
|
||||||
|
|
||||||
An array of [`Plugins`](../plugins) that define the editor's behavior.
|
An array of [`Plugins`](../plugins) that define the editor's behavior.
|
||||||
|
@@ -19,6 +19,9 @@ class Editor extends React.Component {
|
|||||||
onChange: React.PropTypes.func.isRequired,
|
onChange: React.PropTypes.func.isRequired,
|
||||||
onKeyDown: React.PropTypes.func,
|
onKeyDown: React.PropTypes.func,
|
||||||
onPaste: React.PropTypes.func,
|
onPaste: React.PropTypes.func,
|
||||||
|
placeholder: React.PropTypes.any,
|
||||||
|
placeholderClassName: React.PropTypes.string,
|
||||||
|
placeholderStyle: React.PropTypes.object,
|
||||||
plugins: React.PropTypes.array,
|
plugins: React.PropTypes.array,
|
||||||
renderDecorations: React.PropTypes.func,
|
renderDecorations: React.PropTypes.func,
|
||||||
renderMark: React.PropTypes.func,
|
renderMark: React.PropTypes.func,
|
||||||
|
@@ -22,12 +22,6 @@ class Placeholder extends React.Component {
|
|||||||
style: React.PropTypes.object
|
style: React.PropTypes.object
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
style: {
|
|
||||||
opacity: '0.333'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Should the component update?
|
* Should the component update?
|
||||||
*
|
*
|
||||||
@@ -85,12 +79,21 @@ class Placeholder extends React.Component {
|
|||||||
/**
|
/**
|
||||||
* Render.
|
* 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
|
* @return {Element} element
|
||||||
*/
|
*/
|
||||||
|
|
||||||
render = () => {
|
render = () => {
|
||||||
const { children, className, style } = this.props
|
|
||||||
const isOpen = this.isVisible()
|
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 (
|
return (
|
||||||
<Portal isOpened={isOpen} onOpen={this.onOpen}>
|
<Portal isOpened={isOpen} onOpen={this.onOpen}>
|
||||||
<span className={className} style={style}>{children}</span>
|
<span className={className} style={style}>{children}</span>
|
||||||
|
@@ -9,11 +9,18 @@ import { IS_WINDOWS, IS_MAC } from '../utils/environment'
|
|||||||
* The default plugin.
|
* The default plugin.
|
||||||
*
|
*
|
||||||
* @param {Object} options
|
* @param {Object} options
|
||||||
|
* @property {Element} placeholder
|
||||||
|
* @property {String} placeholderClassName
|
||||||
|
* @property {Object} placeholderStyle
|
||||||
* @return {Object}
|
* @return {Object}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function Plugin(options = {}) {
|
function Plugin(options = {}) {
|
||||||
const { placeholder } = options
|
const {
|
||||||
|
placeholder,
|
||||||
|
placeholderClassName,
|
||||||
|
placeholderStyle
|
||||||
|
} = options
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Define a default block renderer.
|
* Define a default block renderer.
|
||||||
@@ -45,7 +52,13 @@ function Plugin(options = {}) {
|
|||||||
const { node, state } = this.props
|
const { node, state } = this.props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Placeholder parent={state.document} node={node} state={state}>
|
<Placeholder
|
||||||
|
className={placeholderClassName}
|
||||||
|
node={node}
|
||||||
|
parent={state.document}
|
||||||
|
state={state}
|
||||||
|
style={placeholderStyle}
|
||||||
|
>
|
||||||
{placeholder}
|
{placeholder}
|
||||||
</Placeholder>
|
</Placeholder>
|
||||||
)
|
)
|
||||||
|
Reference in New Issue
Block a user