All threads / @mentions for Users with ActionText in Rails 6 Discussion

Ask A Question

Notifications

You’re not receiving notifications from this thread.

@mentions for Users with ActionText in Rails 6 Discussion

This is a great video.

Is it possible to remove jQuery if you are using Bootstrap 4? I know it's a dependency but maybe if you are not using all aspects of Bootstrap you can remove it.

Anyway, removing jQuery is a good way to remove 250kb (30kb gzipped) from your website's download which is not bad at all.

The next major version of Bootstrap will be without jQuery

Reply

Is it possible to change the default render for other one?

When Trix render I would like to use a different partial. For example _user_trix.html.erb so I can include some special content.

Hi Franklin,

I believe you can define a #to_trix_content_attachment_partial_path on your User model, e.g.

class User < ApplicationRecord
    include ActionText::Attachable
    ...
    def to_trix_content_attachment_partial_path
        'users/user_trix'
    end
end

Hi Adam and Franklin,

I had a similar issue using a Profile model and rendering a _profile_mention.html.erb partial for the mentions.

Adding this to_trix_content_attachment_partial_path method pointing to my _profile_mention.html.erb partial did the trick when editing my rich text.
But when displaying my rich text (@article.content), it still renders the _profile.html.erb partial.
Any idea how I could fix that please?

Reply

Hey Chris,

Awesome episode as usual! Few quick questions:

  1. Since ActionText is storing a global_id reference to records in order to display the updated partial at render time, does that mean it's making a separate DB query to retrieve each of those records? For instance, if I @mention 10 separate users, will it make 10 separate calls? Especially if I'm creating a commenting system that allows @mentions, and there could be 10-20 comments, each with several @mentions, etc...
  2. I notice you used Zurb Tribute for the @mention library; you've done an episode before using AtJs, any benefits to Tribute over AtJs, or just preference?

I really do like the concept of storing a reference to the partial instead of the hard-coded HTML. I'm actually in a situation where I stored the HTML snippets in the text itself and now want to change it, but am struggling with how to do that using the Froala editor. I'll eventually migrate to ActionText in a few months after Rails 6 has been vetted in the wild.

Always appreciate your timely and very applicable videos!

I will be in a similar situation and my solution will either be to cache the mention or store it in redis using the sgid and set it to auto expire in a few hours. Avatar may be out of date for a short duration because of the cache but it is a small price to pay to reduce load on the DB.

Reply

Great episode. How Trix works has become a little bit clearer. Thanks!

Reply

any way to implement @mentions if I am using rails strictly for an API?

Reply

Hi @chris I have a little app that has a venue and user that I would like the user to be able to call something like " Hey @user do you want to go to #venue on saturday?" or the like.

is that possible?

Reply

Is it possible to use ActionText in an Vue-App?

Reply

If you set a data map for the Rails path, can you replace fetch(`/mentions.json?query=${text}`) with this.data.get("url")? I'm having issues with it where I get an undefined error in console.

Reply

I'm building an app that will have this feature, but I also am dealing with multi-tenancy. So how do I pass the account_id ( from multitenancy) in the fetchUsers call, here's what I have and it's not working ( I'm getting an undefined error).
mentions_controller.js

initialize() {
    this.account = this.data.get("account")
  }

fetchUsers(text, callback, account) {
    let account = this.account
    fetch(`/accounts/${account}/mentions.json?query=${text}`)
    .then(response => response.json())
    .then(users => callback(users))
    .catch(error => callback([]))
  }

and in _form.html.erb

<%= f.rich_text_area :problem, placeholder: 'The raw idea, use case, something that motivates us to work on this.', data: { controller: "mentions", target: "mentions.field", mentions_account: current_account.id} %>

I know the account_id is getting to the initialize method, but not the fetchUsers method. Any thoughts?

I'm a bit of a javascript n00b but I found a solution... My updated fetchUsers method...

fetchUsers(text, callback, account) {
    let accountId = document.querySelector("trix-editor").dataset.mentionsAccount
    console.log(`This is from fetchUsers ${accountId}`)
    fetch(`/accounts/${accountId}/mentions.json?query=${text}`)
    .then(response => response.json())
    .then(users => callback(users))
    .catch(error => callback([]))
  }
Reply

Hi all - I'm getting some unexpected behavior here, and I was hoping one of you might know of a way to fix it. The _pasteHtml function in mentions_controller.js is deleting more text than it should before the @mention. Here's what I'm seeing: https://streamable.com/ye7rni.

I'm using code that's identical to the tutorial.

Thanks for any insight.

Hey John, I had the same issue. Maybe try this out when you are setting the selected range?

this.editor.setSelectedRange([position - endPos + startPos, position + 1]);

That did the trick... thank you for sharing!

Maybe obvious to some, but I wanted to know why this is the case. My understanding now is that position comes from Trix and begins counting from the start of the rich text area, while startPos and endPos come from Tribute and begin counting from the start of the current line.

setSelectedRange is a Trix method, so it requires start and end position values relative to the beginning of the rich text area, which is why you need to find the length of the Tribute mention and subtract that from the current Trix position.

Another (verbose) way to write _pasteHtml:

_pasteHtml(html, startPos, endPos) {
  let position = this.editor.getPosition()
  let tributeLength = endPos - startPos
  let trixStartPos = position - tributeLength
  let trixEndPos = position
  this.editor.setSelectedRange([trixStartPos, trixEndPos])
  this.editor.deleteInDirection(“backward”)
}

Benjamin and John, thanks a bunch for sharing this.

Reply

Hey Chris,

This is probably my favorite series as I'm learning to use both actiontext and stimulus, so thanks for the videos

Would it be possible to add another model as an attachment and post stuff on that model from this editor?
Imagine that I have a 'Tasks' model and that I also have an 'New Tasks' button in the trix toolbar, the would potentially give me a task list. Would it then be possible to, when I save the document, to also save a new "task list" in my task model.

This might be a no-brainer but as a designer is not that easy for me to figure it out by myself yet.

Reply
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,665+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.