Allow custom placeholder styles (#2667)

* Allow custom placeholder styles

* lint fixes

* review feedback

* lint

examples/app.js

@@ -34,6 +34,7 @@ import InputTester from './input-tester'
 import SyncingOperations from './syncing-operations'
 import Tables from './tables'
 import Mentions from './mentions'
+import Placeholder from './placeholder'
 
 /**
  * Examples.
@@ -58,6 +59,7 @@ const EXAMPLES = [
   ['Markdown Shortcuts', MarkdownShortcuts, '/markdown-shortcuts'],
   ['Mentions', Mentions, '/mentions'],
   ['Paste HTML', PasteHtml, '/paste-html'],
+  ['Placeholders', Placeholder, '/placeholders'],
   ['Plain Text', PlainText, '/plain-text'],
   ['Plugins', Plugins, '/plugins'],
   ['Read-only', ReadOnly, '/read-only'],

examples/placeholder/index.js

@@ -0,0 +1,39 @@
+import { Editor } from 'slate-react'
+import PlaceholderPlugin from 'slate-react-placeholder'
+import { Value } from 'slate'
+import initialValue from './value.json'
+
+import React from 'react'
+
+class Placeholder extends React.Component {
+  value = Value.fromJSON(initialValue)
+  plugins = [
+    {
+      queries: {
+        isEmpty: editor => editor.value.document.text === '',
+      },
+    },
+    PlaceholderPlugin({
+      placeholder:
+        'You can extensively customise your placeholder text using the slate-react-placeholder plugin!',
+      when: 'isEmpty',
+      style: { color: '#ADD8E6', opacity: '1', fontFamily: 'monospace' },
+    }),
+  ]
+
+  /**
+   * Render the editor.
+   *
+   * @return {Component} component
+   */
+
+  render() {
+    return <Editor defaultValue={this.value} plugins={this.plugins} />
+  }
+}
+
+/**
+ * Export.
+ */
+
+export default Placeholder

examples/placeholder/value.json

@@ -0,0 +1,16 @@
+{
+  "document": {
+    "nodes": [
+      {
+        "object": "block",
+        "type": "paragraph",
+        "nodes": [
+          {
+            "object": "text",
+            "leaves": []
+          }
+        ]
+      }
+    ]
+  }
+}

package.json

@@ -86,7 +86,8 @@
     "slate-dev-test-utils": "*",
     "slate-html-serializer": "*",
     "slate-plain-serializer": "*",
-    "slate-react": "*"
+    "slate-react": "*",
+    "slate-react-placeholder": "*"
   },
   "scripts": {
     "benchmark": "cross-env COMPARE=compare node --expose-gc ./tmp/benchmark/index.js",

packages/slate-react-placeholder/src/index.js

@@ -21,7 +21,7 @@ function SlateReactPlaceholder(options = {}) {
     data: { key: instanceId },
   }
 
-  const { placeholder, when } = options
+  const { placeholder, when, style = {} } = options
 
   invariant(
     placeholder,
@@ -72,18 +72,19 @@ function SlateReactPlaceholder(options = {}) {
     const { children, mark } = props
 
     if (mark.type === 'placeholder' && mark.data.get('key') === instanceId) {
-      const style = {
+      const placeHolderStyle = {
         pointerEvents: 'none',
         display: 'inline-block',
         width: '0',
         maxWidth: '100%',
         whiteSpace: 'nowrap',
         opacity: '0.333',
+        ...style,
       }
 
       return (
         <span>
-          <span contentEditable={false} style={style}>
+          <span contentEditable={false} style={placeHolderStyle}>
             {placeholder}
           </span>
           {children}