When typing Chinese text does't work after the embed blot

[msidolphin]

Steps for Reproduction

Please check the video

https://user-images.githubusercontent.com/26672484/136727304-e639f9fa-0631-4800-afa8-fd353c30c0e1.mp4

The official website has the same problem

https://user-images.githubusercontent.com/26672484/136726890-10b4702b-ee74-4bf1-a106-82a18164006c.mp4

Expected behavior:

Actual behavior:

Platforms:

MacOS Mojave 10.14.6 Chrome (94.0.4606.81 release)

Include browser, operating system and respective versions

Version: 1.3.7

Run Quill.version to find out

[msidolphin]

create(data) {
  const node = super.create()
  node.setAttribute('contenteditable', 'false')
  node.innerHTML += data.value
  return node
}

This problem was solved when I set contenteditable to false, but it will lead to unable focus

[msidolphin]

https://github.com/quilljs/parchment/blob/master/src/blot/text.ts

#2781

 insertAt(index: number, value: string, def?: any): void {
    if (def == null) {
      // Maybe when composing should not be executed here
      this.text = this.text.slice(0, index) + value + this.text.slice(index);
      this.domNode.data = this.text;
    } else {
      super.insertAt(index, value, def);
    }
  }

[msidolphin]

I override the restore method, it doesn't seem to have any problems

restore(node) {
  const selection = getSelection()
  let range, textNode
  let text = selection.composing ? GUARD_TEXT : node.data.split(GUARD_TEXT).join('')
  if (node === this.leftGuard) {
    if (this.prev instanceof TextBlot) {
      let prevLength = this.prev.length()
      this.prev.insertAt(prevLength, text)
      range = {
        startNode: this.prev.domNode,
        startOffset: prevLength + text.length
      }
    } else {
      textNode = document.createTextNode(text)
      this.parent.insertBefore(Parchment.create(textNode), this)
      range = {
        startNode: textNode,
        startOffset: text.length
      }
    }
  } else if (node === this.rightGuard) {
    if (this.next instanceof TextBlot) {
      this.next.insertAt(0, text)
      range = {
        startNode: this.next.domNode,
        startOffset: text.length
      }
    } else {
      textNode = document.createTextNode(text)
      this.parent.insertBefore(Parchment.create(textNode), this.next)
      range = {
        startNode: textNode,
        startOffset: text.length
      }
    }
  }
  node.data = GUARD_TEXT
  return range
}

[msidolphin]

I found a solution

1. set embed contenteditable to false (this solves the IME problem, but of course it causes a cursor positioning error, which will be solved below)
2. Iterate through each row in the text-change event, and if the last blot is embed, then append a placeholder after it, for exampleimg, otherwise try to remove the placeholder

I hope it can help some people

[msidolphin]

To be precise, it is difficult to focus

create(data) {
  const node = super.create()
  node.setAttribute('contenteditable', 'false')
  node.innerHTML += data.value
  return node
}

This problem was solved when I set contenteditable to false, but it will lead to unable focus

我这儿咋没遇到不能focus呢...

To be precise, it is difficult to focus, of course this could also be due to different environments

[OldDream]

If we moniter selection-change event, we can found the Range.index was wrong if we click inside a embed item, the index is 1 smaller than actual !!!

[loljtdg]

I got the same bug. I transform embed to an img to fix and it did work.

[msidolphin]

I got the same bug. I transform embed to an img to fix and it did work.

There is no problem with the dev branch

[liu594453801]

I got the same bug. I transform embed to an img to fix and it did work.

There is no problem with the dev branch

This is only temporarily fix the problem，if delete img, It still comes up

The official team did not resolve it。

[minzhang2]

I got the same bug. I transform embed to an img to fix and it did work.

There is no problem with the dev branch How did you solve it in the end?

[minzhang2]

How did you solve it in the end?

How did you solve it in the end?

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide :pray: