From c688ad7c729b7585fa58efa030a8aa86f562d84f Mon Sep 17 00:00:00 2001
From: Hanna Greaves <Hanna.Greaves@microsoft.com>
Date: Tue, 2 Apr 2019 14:23:50 +0100
Subject: [PATCH] Allow custom placeholder styles (#2667)

* Allow custom placeholder styles

* lint fixes

* review feedback

* lint
---
 examples/app.js                               |  2 +
 examples/placeholder/index.js                 | 39 +++++++++++++++++++
 examples/placeholder/value.json               | 16 ++++++++
 package.json                                  |  3 +-
 packages/slate-react-placeholder/src/index.js |  7 ++--
 5 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 examples/placeholder/index.js
 create mode 100644 examples/placeholder/value.json

diff --git a/examples/app.js b/examples/app.js
index 8ccf3782c..357c7c1ea 100644
--- a/examples/app.js
+++ b/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'],
diff --git a/examples/placeholder/index.js b/examples/placeholder/index.js
new file mode 100644
index 000000000..d1f63393b
--- /dev/null
+++ b/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
diff --git a/examples/placeholder/value.json b/examples/placeholder/value.json
new file mode 100644
index 000000000..6b2e29764
--- /dev/null
+++ b/examples/placeholder/value.json
@@ -0,0 +1,16 @@
+{
+  "document": {
+    "nodes": [
+      {
+        "object": "block",
+        "type": "paragraph",
+        "nodes": [
+          {
+            "object": "text",
+            "leaves": []
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/package.json b/package.json
index 94fec8f9c..3b592c9bd 100644
--- a/package.json
+++ b/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",
diff --git a/packages/slate-react-placeholder/src/index.js b/packages/slate-react-placeholder/src/index.js
index 2c95177cb..e2649abd3 100644
--- a/packages/slate-react-placeholder/src/index.js
+++ b/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}