Japanese input seems to overlap

Do you want to request a feature or report a bug?

Bug report

What’s the current behavior?

Japanese input seems to overlap in this example (https://www.slatejs.org/#/markdown-preview). Please see following gif. I guess this behavior is occurred by decorator.

日本語 is duplicated.

My env

Google chrome 71.0.3578.98 Google 日本語入力 2.24.3250.1

What’s the expected behavior?

Japanese input does not overlap with decorator.

[wuxiandiejia]

I found a solution. When you are composing give the mark a new key to force the mark to re-render.

    // in decorateNode method
      if (typeof token != 'string') {
        const dec = {
          anchor: {
            key: startText.key,
            offset: startOffset,
          },
          focus: {
            key: endText.key,
            offset: endOffset,
          },
          mark: {
            type: token.type,
          },
        }
        if (this.state.isComposing) {
          const nodeKey = token.type + Date.now()
          dec.mark.data = {
            key: nodeKey
          }
        }
        decorations.push(dec)
      }

// set key prop in renderMark method
case 'bold':
        return <strong {...attributes} key={mark.data.get('key')}>{children}</strong>
// other mark also can set key

[wuxiandiejia]

Maybe you can get help on the slate’s slack channel.