fix placeholder to not render when composing (#1346)

packages/slate-react/src/components/content.js

@@ -226,6 +226,8 @@ class Content extends React.Component {
    */
 
   onEvent(handler, event) {
+    debug('onEvent', handler)
+
     // COMPAT: Composition events can change the DOM out of under React, so we
     // increment this key to ensure that a full re-render happens. (2017/10/16)
     if (handler == 'onCompositionEnd') {

packages/slate-react/src/plugins/after.js

@@ -24,7 +24,7 @@ import { IS_CHROME, IS_SAFARI } from '../constants/environment'
  * @type {Function}
  */
 
-const debug = Debug('slate:core:after')
+const debug = Debug('slate:after')
 
 /**
  * The after plugin.
@@ -741,6 +741,7 @@ function AfterPlugin() {
 
   function renderPlaceholder(props) {
     const { editor, node } = props
+    if (editor.state.isComposing) return
     if (node.kind != 'block') return
     if (!Text.isTextList(node.nodes)) return
     if (node.text != '') return

packages/slate-react/src/plugins/before.js

@@ -18,7 +18,7 @@ import findNode from '../utils/find-node'
  * @type {Function}
  */
 
-const debug = Debug('slate:core:before')
+const debug = Debug('slate:before')
 
 /**
  * The core before plugin.
@@ -136,6 +136,11 @@ function BeforePlugin() {
     setTimeout(() => {
       if (compositionCount > n) return
       isComposing = false
+
+      // HACK: we need to re-render the editor here so that it will update its
+      // placeholder in case one is currently rendered. This should be handled
+      // differently ideally, in a less invasive way?
+      editor.setState({ isComposing: false })
     })
 
     debug('onCompositionEnd', { event })
@@ -153,6 +158,11 @@ function BeforePlugin() {
     isComposing = true
     compositionCount++
 
+    // HACK: we need to re-render the editor here so that it will update its
+    // placeholder in case one is currently rendered. This should be handled
+    // differently ideally, in a less invasive way?
+    editor.setState({ isComposing: true })
+
     debug('onCompositionStart', { event })
   }