IOS Korean IME Bug

[yb-k]

Steps for Reproduction

1. Visit https://quilljs.com/
2. input 하
3. press enter key
4. input ㄴ

Expected behavior:

하 ㄴ

Actual behavior:

하한

Platforms:

test device : iphone 14 ios version : 16.4.1 browser : safari , chrome

Include browser, operating system and respective versions

Version:

1.3.7

issue line is here

https://github.com/quilljs/quill/blob/84437aa48ba5b4272c6b3e26d59e83f04aabc5ca/modules/keyboard.ts#L254

thanks.

[luin]

Hi @yb-k 👋

Thanks for the report! Can you record a screencast for the issue?

[yb-k]

@luin here!

test device : iphone 14 ios version : 16.4.1 browser : chrome 113

[insomenia-gwangjin]

Hello @luin 👋 I also have same issue as above with my iPhone 11 Pro. I want to fix this issue but I don’t know how to fix it. Can you give me some advice to fix this issue?

Thanks in advance!

[luin]

I haven't looked at it so not sure. I guess we can start with commenting out 'Enter' key handlers in keyboard.ts and see if the event.preventDefault() causes the issue.

[heygwangjin]

@luin I am a beginner as an open source contributor.

I've forked and cloned this project on my laptop and I typed "npm install". After doing it I typed "npm run start" to start trying to solve this problem but I can't see any page when I entered localhost:4000 in my Chrome.

Did I do anything wrong? If yes, can you explain me how can I do? 🙏

[luin]

You should be able to access the demo page on http://localhost:9000/standalone/full/. Does it work for you?

[heygwangjin]

Oh It worked thanks luin! And I noticed If I want to check the code I've changed, I have to "npm run start" after "npm run build".

But there is one problem that I want to see the demo page on my iPhone 11 Pro. Is there a way to do it?

[luin]

You can use a simulator or access the internal IP address (ex 192.168.xx.xxx) on your iPhone. Frankly speaking I guess this bug is not straightforward to fix so not sure if I can be more helpful.

[heygwangjin]

Thanks, luin! It worked well. I had entered the wrong IP and it didn't work. 😅 I did some Googling, but I don't think it's a problem I can solve with my current skills. I'm attaching a link to something that Koreans have discussed to solve the problem (https://github.com/rhymix/rhymix/issues/932), in case it helps. I hope it works for quill editor as well. I will try to learn how to solve this problem when I have time.

[Khyosunny]

Hello. Are you still experiencing the same problem? Although it is a react quill library, I expect it to be applicable similarly.

  keyboard: {
    bindings: {
      enter: {
        key: 13,
        handler: (range: any) => {
          const selection = document.getSelection();
          selection?.removeAllRanges();
          editorRef.current?.editor?.setSelection(range.index, 0);
          selection?.addRange(range);
          editorRef.current?.editor?.insertText(range.index, '\n');
        },
      },
    },
  },