Action Text Embeds

Hi There!

Apologies if the forum isn’t the correct place for feature requests.

I was thinking that a useful feature for Jumpstart would be an extension to action text that allowed for embeds (instagram, YouTube, etc). Pretty much the functionality Basecamp has on their version of the editor. I’m unsure why action text (or Trix) doesn’t provide this out of the box, but it would certainly be a helpful feature.

Has this been a feature you’ve considered?

Thanks for all your efforts on Jumpstart, it’s proven to be a real speed boost in my most recent project.

Hey Kyle! Definitely is something I'd like to add. I looked into this once before, but it turned out that it was a fair bit more complicated than I expected because ActionText has to sign things server-side and adding the functionality to Trix wasn't super easy either.

I'll look into this again and see what I can do.

Thanks Chris. Much appreciated!

After a couple late nights, this turned out pretty awesome. I've got a couple final tweaks to make and I'll get it uploaded.

Whoa that's a quick turnaround! Excited to give it a try when its ready.

Bam! 

You can embed something by using the Link option in the toolbar and it will try and match the URL to a list of valid formats and embed it.

Jumpstart Pro ActionText Embed

It's powered by ruby-oembed, so you can expand it to any service that supports OEmbed.

Supported out of the box:

All this is based off how Basecamp implemented the feature.

I don't see this commit pushed to Gitlab?  Or the ruby-oembed dependency.

Whoops, done.

Boom.  That was fast.

🎉

Embed Link option in the toolbar is working fine on the main app, but it's not loading inside administrate. I added Trix to administrate and works just fine. It's just missing the Embed Link option. Do I need to import something into administrate to enable it?

Oh yeah, I didn't think about adding it to the admin area. I can do that pretty easy.

This should be fixed. I updated Administrate to include almost all the same JS as the main app. The only thing I left out was the data-confirm modals that use Tailwind. I figured we can leave those with browser dialogs for the admin to keep it cleaner. Don't want to spend too much time fiddling with CSS in the admin area if we can help it. 

This is awesome Chris! Thank you for taking on my feature request and for the blazing fast turnaround on getting it implemented. Looking forward to trying things out this weekend!

Had a chance to test out the new embed logic locally and noticed a few things, specifically for Instagram embeds.

1. The embed preview shows a broken image when the embed is an instagram post with multiple images.

2. When the rich content is rendered on the show page, the caption under the image is not displayed even though it appears this content exists from the OEmbed response.

Any ideas on what could be the issue here?

[Edit] I attempted to attach a few screenshots to demonstrate but they keep turning to broken image links on save. This issue exists on my local setup as well, so seems to be a potential bug from a jumpstart recent commit.

[Edit 2] 36 hours later the broken images now render 🤷‍♂️

Rack has a bug that was recently introduced and fixed that broke ActiveStorage disk storage (which I'm using for this site currently). That's fixed now.

Instagram returns a 500 error for the thumbnail URL they return. Seems like a problem on their end.

Might just disable Instagram if they don't have their stuff working consistently.

Thanks for the follow up Chris.

Instagram embeds is the primary use case for the site I'm working on, so I'll live with what it currently returns and investigate some work arounds.

Sounds good. Let me know what you find. I've got a few other things to work on at the moment but I'd like to return to this at some point. Embeds seem like they're going to require some work for one-off things like Instagram which is unfortunate.

I know that the Instagram stuff definitely needs some custom JS to work with Turbolinks. I'm not sure what's up with the thumbnail URL, but Basecamp's preview is broken for multi-image embeds too because of the Instagram 500 error thumbnail url.

Thanks Chris!

Chris Oliver is there a way to capture embeds programatically?

for example i am able to export images from action text with this code:

image = post.body.embeds.find{|embeds| embeds.image?}

They're just ActionText attachments, so however you loop through those will do the trick. Rails does it for rendering, so look for that code for an example.

👍

Hey! 

I am trying to integrate embedly with this. But when I add the embedly pattern to the Patterns in embed.rb it doesn't do anything.

Maybe I am writing bad the expression?

{"source":"^https:\\/\\/api\\.embedly\\.com\\/1\\/oembed\\/:endpoint?key=11111111111111111&\\/(.*?)","options":""},

the 1111 would be my api key


And this is the docs I could find to use it:

Borja Soler  I'm pretty sure you would want to use Embedly server-side to process URLs, not add a regex match to embed embedly urls (which is what adding a pattern would do). You'd need to swap out the backend.

Thanks Chris Oliver ,  would not be possible to add it as a regex match?

Borja Soler  No, because you use embedly to get the embed code, you're not embedding embedly itself.

How would you go about programmatically adding youtube or Vimeo embeds? Basically, I have a spreadsheet with a bunch of youtube links with some content and I want to write a script that embeds these programmatically. However, I keep getting errors like

"Rich text description embeds attachments is invalid" even though I am able to save the embed when creating like so

ActionText::Embed.from_url('https://vimeo.com/awfasd')


Then  I try to use that embed and attach it. 

Basically, I want to get do the following: 

class Post < ActiveRecord::Base
has_rich_text :description
end

post = Post.new
post.description = 'html with embed url'


I think I'm close but if anyone has any pointers, I would be very happy

William Kennedy  you have to use the embed's SGID. The Javascript has the piece that inserts it as an ActionText attachment. You'll just want to replicate that HTML that is created client side if you're trying to do it server-side.

Ah perfect.

Thanks, Chris Oliver .

So what I ended up doing was this as part of my exploration.

embed = ActionText::Embed.from_url('https://vimeo.com/112091256')
post.description = embed.html
post.save

It seems to work OK but a bit more playing around is needed. I was getting confused because I thought it worked similar to active record associations where the embed belonged to action texts. 

Thanks, Chris

We can assume that one of these Chrises is not real, don't we? :)