[react] blank cursor is in the middle of placeholder in markdown page

[joielee09]

Describe the bug

blank cursor is in the middle of the placerholder character in markdown page when using CRA && chrome.

To Reproduce

Steps to reproduce the behavior:

Here's sandbox code. https://codesandbox.io/s/fragrant-voice-xwik9?file=/src/App.js

It works okay in sandbox whereas error in chrome. I did repo twice with CRA with this same App.js , package.json file.

1. get started CRA
2. set json file and App.js as follows
3. switch btw WYSIWYG and markdown page several times
4. get the error like this

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

I'm using latest chrome

• Chrome | 86.0.4240.198 (공식 빌드) (64비트) (cohort: Stable)
• Windows 10 OS Version 2004 (Build 19041.630)

Additional context

Add any other context about the problem here.

[joielee09]

I suppose it has to do with center aligned setting of the page. The save btn and placeholder is automatically center aligned.

[js87zz]

@joielee09 The editor and cursor are operated well in mac chrome on your sandbox. It's the problem for window chrome. As the current environment is difficult to test, leave a comment here if the problem is identified after testing.

[seonim-ryu]

@joielee09 Currently, the Editor you used and the save button are grouped into one container, and it seems that you have affected the Editor by applying an alignment style to the save button. Try adjusting the style of the service code.

[gkseovlf]

I also had the same problem as you. This was a css problem. E.g

.App { text-align: center; }

If a phrase like the one above exists, your problem will arise.