Desktop: IME panel covers letters when editing

[wh201906]

Duplicate of #8078, but I want to describe it in detail so I post it there. When typing the letters with the Microsoft Chinese IME, the IME panel covers the letters I'm typing in. This might happens on Japanese IME and other IMEs, but I don't have the environment to test it.

Environment

Joplin version: 2.9.11, 2.10.18 Platform: Windows 10

Steps to reproduce

1. Type something in the Markdown(CodeMirror) editor, with the Microsoft Chinese IME
2. The IME panel covers the letters I'm typing.

Previews


3. By contrast, the Rich Text editor(TinyMCE) works fine. The panel doesn't move horizontally, but its always under the line I'm editing so I can see all of the letters/characters.

Previews


4. Plus, the demo on the CodeMirror5 website also works fine. The panel overlaps the line I'm editing vertically, but it's always behind the cursor.

Previews


Describe what you expected to happen

The IME panel should not covers the letters. It could be under the line I'm editing or behind the cursor.

Logfile

Not necessary I guess

[wh201906]

I‘m pretty sure this bug is related to the CodeMirror, so I did some tests and found something interesting.

---

1. I can reproduce the similar behavior in the demo on the CodeMirror5 website, by changing the user agent. I get the UA of the Joplin by reading navigator.userAgent in the console. the UA is like

   Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Joplin/2.9.11 Chrome/102.0.5005.167 Electron/19.0.10 Safari/537.36

   I replace the UA of my browser with this one by User-Agent Switcher and Manager. When I try the demo again, it becomes buggy.

   Pics

The IME panel covers all of the letters and doesn't move.

---

2. When going through the code of CodeMirror5, I found that the detection of browsers might be wrong. https://github.com/codemirror/codemirror5/blob/9974ded36bf01746eb2a00926916fef834d3d0d0/src/util/browser.js#L12 It detects if a browser is webkit by testing if the UA contains WebKit/, but the UA of the Joplin also satisfies, which is acturally based on chromium(Electron). If the browser is webkit, the behavior is slightly different https://github.com/codemirror/codemirror5/blob/9974ded36bf01746eb2a00926916fef834d3d0d0/src/input/input.js#L129-L130 I tested the regex in the console of Joplin and checked the properties of the <textarea>, and I'm sure the Joplin app is taken for a webkit browser.
   Pics

(width is 1000px, doesn't have wrap="off")

---

3. I patched the code of CodeMirror on my fork(https://github.com/wh201906/joplin/commit/412723b62558b405b42b0d7b4b495948d0683455, based on dbab786c7b2fc1e0041ba31856e8561efb1852b7), the CodeMirror won't treat Joplin as a webkit browser. (width is NOT 1000px, has wrap="off")

but this bug still exists.

[wh201906]

Here are some different <textarea> in different situations.

Details

CodeMirror5 demo  CodeMirror5 demo, with modified UA  Joplin  Joplin, with patched CodeMirror 

It's strange that the IME panel doesn't follow the bottom-left corner of textarea in the last situation.

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[wh201906]

Please keep this open

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[wh201906]

Please keep this open

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[wh201906]

Please keep this open

[forrep]

This is a bug involving CodeMirror. It is not a fundamental solution, but can be mitigated in the following ways

First, open the "Tools" menu > "Options". Select "Appearance" from the left menu and note "Editor font size".

Next, go to "Show Advanced Settings" and open "Custom stylesheet for Joplin-wide app styles".

Save the following content, where the value specified for font-size should be the same as the "Editor font size" value.

div.CodeMirror textarea {
    font-size: 18px;
}

[wh201906]

@forrep This workaround does work. Thanks! I still want to keep this issue open. Maybe someone will find the underlying reason and resolve it.

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[wh201906]

Please keep this open

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[wh201906]

Please keep this open

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[wh201906]

Please keep this open

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[wh201906]

Please keep this open. This bug seems to be fixed in the new beta editor based on CodeMirror 6, but still exists in the editor with CodeMirror 5.

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[wh201906]

Please keep this open. This bug seems to be fixed in the new beta editor based on CodeMirror 6, but still exists in the editor with CodeMirror 5.

[FEI352]

Joplin 3.0.2 (prod, win32)

Backup: 1.4.0 macOS theme: 1.3.18

这个版本还是有毛病，用了前面老哥的方法，微软输入法的虚线还是被遮住了，不知道换成百度搜狗这些流氓大厂会不会好点。