Issues with IME input after inserting a mention using embeddedItem in a contenteditable, causing duplicate input events and characters.

[thinh6699]

When typing with an IME keyboard, after selecting an item from the suggestion list and inserting a node into the contenteditable (I use embeddedItem), subsequent input continues to trigger two input events, resulting in duplicate characters.

something like this:

@abc @@ ( I only input 1 @ after being inserted, but it shows 2 because the event input triggers twice)

[fritx]

Yes, that is a known issue. It hasn't been fixed yet due to the lack of user reports and concerns about potentially breaking compatibility with widely used versions.

Now we can look into addressing it moving forward.

[thinh6699]

if (At.methods?.insertHtml) {
  At.methods.insertHtml = function(html: any, r: Range) {
    r.deleteContents()

    // Clean up the leftover trigger text (like "@")
    if (r.startContainer.nodeType === Node.TEXT_NODE) {
      const node = r.startContainer as Text
      if (!node.nodeValue || /^@/.test(node.nodeValue)) {
        node.parentNode?.removeChild(node)
      }
    }

    // Create the mention wrapper
    const newElement = document.createElement('span')
    newElement.setAttribute('data-at-embedded', '')
    newElement.setAttribute('contenteditable', 'false')

    // Add spaces before and after mention (same as original vue-at)
    newElement.appendChild(document.createTextNode(' '))
    newElement.appendChild(this.htmlToElement(html))
    newElement.appendChild(document.createTextNode(' '))

    // Insert mention into the range
    r.insertNode(newElement)

    // Add an empty text node separator after the mention
    // → prevents backspace from deleting multiple mentions at once
    const separator = document.createTextNode('')
    if (newElement.parentNode) {
      newElement.parentNode.insertBefore(separator, newElement.nextSibling)
    }

    // Place caret after the separator
    r.setStartAfter(separator)
    r.collapse(true)

    applyRange(r)
  }
}

if (At.methods?.handleDelete) {
  At.methods.handleDelete = function(e: any) {
    const range = getPrecedingRange()
    if (range) {
      if (this.customsEmbedded && range.endOffset >= 1) {
        let a: any =
          range.endContainer.childNodes[range.endOffset] ||
          range.endContainer.childNodes[range.endOffset - 1]
        if (!a || (a.nodeType === Node.TEXT_NODE && !/^\s?$/.test(a.data))) {
          return
        } else if (a.nodeType === Node.TEXT_NODE) {
          if (a.previousSibling) a = a.previousSibling
        } else {
          if (a.previousElementSibling) a = a.previousElementSibling
        }
        let ch: any[] = [].slice.call(a.childNodes)
        ch = [].reverse.call(ch)
        ch.unshift(a)
        let last
        ;[].some.call(ch, (c: any) => {
          if (c.getAttribute && c.getAttribute('data-at-embedded') != null) {
            last = c
            return true
          }
        })
        if (last) {
          e.preventDefault()
          e.stopPropagation()
          const r = getRange()
          if (r) {
            r.setStartBefore(last)
            r.deleteContents()
            applyRange(r)
            this.handleInput()
          }

          const editable = this.$el.querySelector(
            '[contenteditable="true"]'
          ) as HTMLElement

          if (editable) {
            const emptyDivs = editable.querySelectorAll('div')
            emptyDivs.forEach(div => {
              if (!div.textContent?.trim() && div.children.length === 0) {
                div.innerHTML = '<br>'
              }
            })
            this.handleInput()
          }
        }
        return
      }

      const { atItems, members, suffix, deleteMatch, itemName } = this
      const text = range.toString()
      const { at, index } = getAtAndIndex(text, atItems)

      if (index > -1) {
        const chunk = text.slice(index + at.length)
        const has = members.some((v: any) => {
          const name = itemName(v)
          return deleteMatch(name, chunk, suffix)
        })
        if (has) {
          e.preventDefault()
          e.stopPropagation()
          const r = getRange()
          if (r) {
            r.setStart(r.endContainer, index)
            r.deleteContents()
            applyRange(r)
            this.handleInput()
          }
        }
      }
    }
  }
}

This is the way I'm working around in Vue. I tried to monkey-patch and it worked fine. The handleDelete method also has some issues when trying to delete a mention using embeddedItem.

When I entered the new line in contenteditable, it was wrapped by a div tag. If you insert a mention, then delete it, it'll become <div></div> and the caret cannot show to focus again

It would be great if you could check it soon