Insert html instead of text

[dmitry-kozachek]

Hi, in At.js there is a possibility to place custom html, so it would be good to have a slot like this:

<div ref="insertItem">
  <slot name="insertItem" :item="selectedItem">
    <span v-text="itemName(selectedItem)"></span>
  </slot>
</div>

and then insertItem() function should look like:

data () {
    return {
      ...
      selectedItem: null
    }
},
...

insertItem () {
      const { range, offset, list, cur } = this.atwho
      const r = range.cloneRange()
      r.setStart(r.endContainer, offset + 1) // 从@后第一位开始
      // hack: 连续两次 可以确保click后 focus回来 range真正生效
      applyRange(r)
      applyRange(r)

      this.selectedItem = list[cur]
      const html = this.$refs.insertItem.innerHTML

      document.execCommand('insertHtml', 0, html + ' ')
    }

Also in this case it would be good to have prop like keepTriggerChar:

...
if(this.keepTriggerChar) {
    offset++;
}
r.setStart(r.endContainer, offset) // 从@后第一位开始
...

[fritx]

Excellent! Will try to have this feature soon. PR is appreciated too. But one thing I'm concerning -- would the custom html node disturb at-triggering?

I was trying to keep vue-at only inserting plain text to avoid any copy/paste/parse issues. If that works without problems, it would be nice.

[fritx]

After trying At.js, it seems that we'd better also make the following change:

1. When inserted-node clicked, don't edit it, clear the node, then open the at-panel.
2. When hitting up/down/left/right, the inserted-node should no be editable but skipped

Otherwise, users will edit across both inserted-nodes and other contents, which could lead to a mess. It that correct?

[dmitry-kozachek]

@fritx Possible solution is to wrap inserted-node in contenteditable="false"

[jasonlfunk]

I would like to see this implemented too. Having it insert only text is nice, but I would like to be able to style the mentions and doing so is impossible without having a little extra markup.

[fritx]

Yeah, if I have time this weekend, would give it a try ;) thanks guys! Any suggestion is welcomed.

[Zanzavar]

Would greatly like to see this implemented as well. @fritx any updates on the progress?

[hfalucas]

I really want to ditch the at.js (and its dependencies) and use this package as our app is all in Vue. This feature is the only thing that is keeping me from switching. Being able to style inserted mentions is a very often use case.

I'm not really a pro at javascript but gonna look into this and see if I can help you with a PR.

Btw awesome package :D