Japanese input seems to overlap

[bokuweb]

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]

You can add onCompositionStart and onCompositionEnd props on the Editor component.

If you are composing return others in decorateNode method.

Code like this

  decorateNode = (node, editor, next) => {
    const others = next() || []
    if (node.object != 'block' || this.state.isComposing) return others
   // ...

[bokuweb]

@wuxiandiejia Thanks :) I'll try it !!

[bokuweb]

Hmm, I tried above workaround, but unfortunately it does not solve my problem... Do you have any idea??

[wuxiandiejia]

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

[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

[bokuweb]

@wuxiandiejia Thanks :) I'll try it 👍

[ianstormtaylor]

Hey, thanks for reporting this. I think this is actually a duplicate of #2368, so I'm going to close this in favor of that one. Feel free to comment over there with any other info!