codemirror/codemirror5

Fork 0

[I Have Solution] On iPadOS with a physical keyboard, certain input methods in the editor using codemirror may shift upward #7068

New issue

Open

opened 2023-10-02 08:54:33 +02:00 by marijnh · 8 comments

marijnh commented

2023-10-02 08:54:33 +02:00

(Migrated from gitlab.com)

On IpadOS, when using physical keyboard, certian input methods may shift upward, like this:

This happens because the cursor is in the lower half of the screen.

If the cursor is in the upper half of the screen, the input method is under the cursor, which doesn't have any problem.

I've checked HTML:

So it seems to be CodeMirror's problem, not the editor's. (Or you can say it's iPadOS's problem 🤣) And I've checked your release, and didn't find update about this problem.

I deleted overflow: hidden; in div, and set div's and textarea's width to 100px(in desktop textarea's width is 1000px, but I don't know why it's 0px in iPadOS. But if I set it to 1000px, there are another problem, but it's not necessary to talk about it right now, because my solution can avoid this problem too) for example, to debug, and found out the reason.

The text in textarea auto wraps, which causes input method on iPadOS to shift upward.

So the solution is to disable auto-wrap.

In my editor I just added a css:

.CodeMirror.cm-s-easymde.CodeMirror-wrap div textarea {
    white-space: nowrap;
}

This doesn't cause more trouble in desktop, so I think you can fix this problem by adding this to CodeMirror.

On IpadOS, when using physical keyboard, certian input methods may shift upward, like this: ![codemirror-ipados-bug-lower](https://github.com/codemirror/codemirror5/assets/76218469/94b16083-2038-4f2f-8a11-d6627df2a825) This happens because the cursor is in the lower half of the screen. If the cursor is in the upper half of the screen, the input method is under the cursor, which doesn't have any problem. ![codemirror-ipados-bug-upper](https://github.com/codemirror/codemirror5/assets/76218469/3ab58fe0-6336-4884-88cf-85d0f1cc780d) I've checked HTML: <img width="832" alt="image" src="https://github.com/codemirror/codemirror5/assets/76218469/75b1e296-d4eb-4350-bded-073f8bb49036"> So it seems to be CodeMirror's problem, not the editor's. (Or you can say it's iPadOS's problem 🤣) And I've checked your release, and didn't find update about this problem. I deleted `overflow: hidden; ` in `div`, and set `div`'s and `textarea`'s `width` to `100px`(in desktop `textarea`'s `width` is `1000px`, but I don't know why it's `0px` in iPadOS. But if I set it to `1000px`, there are another problem, but it's not necessary to talk about it right now, because my solution can avoid this problem too) for example, to debug, and found out the reason. The text in `textarea` auto wraps, which causes input method on iPadOS to shift upward. So the solution is to disable auto-wrap. In my editor I just added a css: ```css .CodeMirror.cm-s-easymde.CodeMirror-wrap div textarea { white-space: nowrap; } ``` This doesn't cause more trouble in desktop, so I think you can fix this problem by adding this to CodeMirror.

marijnh commented

2023-10-02 09:30:11 +02:00

(Migrated from gitlab.com)

It looks like there is already code that either sets a large width or turns of wrapping.

    // The textarea is kept positioned near the cursor to prevent the
    // fact that it'll be scrolled into view on input from scrolling
    // our fake cursor out of view. On webkit, when wrap=off, paste is
    // very slow. So make the area wide instead.
    if (webkit) { te.style.width = "1000px"; }
    else { te.setAttribute("wrap", "off"); }

Yet the textarea in your screenshot seems to have neither. Why?

It looks like there is already code that either sets a large width _or_ turns of wrapping. ```javascript // The textarea is kept positioned near the cursor to prevent the // fact that it'll be scrolled into view on input from scrolling // our fake cursor out of view. On webkit, when wrap=off, paste is // very slow. So make the area wide instead. if (webkit) { te.style.width = "1000px"; } else { te.setAttribute("wrap", "off"); } ``` Yet the textarea in your screenshot seems to have neither. Why?

marijnh commented

2023-10-02 09:54:29 +02:00

(Migrated from gitlab.com)

Oh maybe that's because the editor used old version of codemirror.

Thanks for your instruction.

Oh maybe that's because the editor used old version of codemirror. Thanks for your instruction.

marijnh (Migrated from gitlab.com) closed this issue

2023-10-02 09:54:29 +02:00

marijnh commented

2023-10-02 10:10:37 +02:00

(Migrated from gitlab.com)

Oh maybe that's because the editor used old version of codemirror.

Thanks for your instruction.

Oh no, I've checked the version, the editor used 5.63.1 which has the code you mentioned too.

> Oh maybe that's because the editor used old version of codemirror. > > Thanks for your instruction. Oh no, I've checked the version, the editor used 5.63.1 which has the code you mentioned too.

marijnh (Migrated from gitlab.com) reopened this issue

2023-10-02 10:10:37 +02:00

marijnh commented

2023-10-02 10:16:44 +02:00

(Migrated from gitlab.com)

I don't know if it's because of iPadOS 16. Both Safari and Firefox has this problem.

I can provide the editor and my project if you need.

I don't know if it's because of iPadOS 16. Both Safari and Firefox has this problem. I can provide the editor and my project if you need.

marijnh commented

2023-10-02 13:03:57 +02:00

(Migrated from gitlab.com)

The code I pasted should run for every hidden textarea created by the editor. You'll have to debug how, in your case, it ends up creating a textarea with neither a width nor a wrap attribute.

The code I pasted should run for every hidden textarea created by the editor. You'll have to debug how, in your case, it ends up creating a textarea with neither a width nor a `wrap` attribute.

marijnh commented

2023-10-02 14:12:30 +02:00

(Migrated from gitlab.com)

webkit is true, so the problem is why width is not 1000px.

I'll keep on trying.

`webkit` is `true`, so the problem is why `width` is not `1000px`. I'll keep on trying.

marijnh commented

2023-10-02 14:15:34 +02:00

(Migrated from gitlab.com)

Oh, here, in TextareaInput.js, it set ios device to 0px.

Oh, here, in [TextareaInput.js](https://github.com/codemirror/codemirror5/blob/3bb9e7a38a9b95c66538676100fcced9cfe264ef/src/input/TextareaInput.js#L42C36), it set ios device to `0px`.

marijnh commented

2023-10-02 14:20:47 +02:00

(Migrated from gitlab.com)

And I've tried setting width to 1000px, it works fine too.

So both width: 1000px; and white-space: nowrap; works fine.

And I've tried setting `width` to `1000px`, it works fine too. So both `width: 1000px;` and `white-space: nowrap;` works fine.

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

codemirror/codemirror5#7068

No description provided.

Rows
Columns