It seems switching to trix has broken instant username autocompletion.

Closing in favor of the <a class="issue-link js-issue-link" data-error-text="Failed to

Instant username autocompletion broken about council HOT 2 CLOSED

jeffreyway commented on May 17, 2024

Instant username autocompletion broken

from council.

Comments (2)

M-Hoogie commented on May 17, 2024

Soooo, I have a solution for the @mentions but am encountering a bug with the atwho-view (the list items)

So if you would use remoteFilter and use callback(['Mark', 'Jeffrey', 'Dean']) the positioning of atwho-view will be correct. But when you use axios or any other ajax call. The positioning will be top: -18px; left: 0

Anyway this is the code I am using in the Wysiswyg component in the mounted event.

let $vm = this;

$('trix-editor').atwho({
  at: "@",
  delay: 750,
  callbacks: {
    remoteFilter: function(query, callback) {
      axios.get(`/api/users?name=${query}`).then(function({data}) {
        callback(data);
      });
     }
   },
})
.on('matched.atwho', function(e, flag, query) {
  $vm.query = query;
})
.on('inserted.atwho', function(el, li, e) {
  // Get editor.
  let editor = el.currentTarget.editor;
  // set selected rang
   let range = editor.getSelectedRange();
   editor.setSelectedRange([range[0] - $vm.query.length, range[1]]);
  // delete typed text and insert the matched item
   editor.deleteInDirection("forward");
   editor.insertString(li[0].innerText);
});