Trix Embed

Take control over what external links and embedded media is permitted in the Trix editor via copy/paste

Table of Contents

• Dependencies
• Setup
• Features
  • Allow / Block Lists
  • Template Overrides
• Basic Usage
  • Allow Lists
  • Block Lists
• Persistence
• Sponsors
• Developing
• Releasing
• License

Dependencies

• ActionText
• Stimulus
• Trix

Setup

bundle add trix_embed
yarn add trix-embed@$(bundle show trix_embed | ruby -ne 'puts $_.split(/-/).last')

import Trix from 'trix'
import "@rails/actiontext"
import { Application, Controller } from '@hotwired/stimulus'
import TrixEmbed from 'trix-embed'

const application = Application.start()
TrixEmbed.initialize({ application, Controller, Trix })

Features

Allow / Block Lists

Configure allow and/or block lists for external links and embedded media in your Trix editors.

⚠︎ Block lists have precendence!

• allowed link hosts
• blocked link hosts
• allowed media hosts
• blocked media hosts

Note that you can also use wildcards * in any of lists.

Template Overrides

TODO: document...

Basic Usage

Allow Lists

• Allow everything

  <form>
    <input id="content" name="content" type="hidden">
    <trix-editor id="editor" input="content"
      data-controller="trix-embed"
      data-trix-embed-allowed-link-hosts-value='["*"]'
      data-trix-embed-allowed-media-hosts-value='["*"]'>
    </trix-editor>
  </form>

• Allow links to all hosts and allow media (images, videos, etc.) from the following hosts: vimeo.com, voomly.com, youtube.com

  <form>
    <input id="content" name="content" type="hidden">
    <trix-editor id="editor" input="content"
      data-controller="trix-embed"
      data-trix-embed-allowed-link-hosts-value='["*"]'
      data-trix-embed-allowed-media-hosts-value='["vimeo.com", "voomly.com", "youtube.com"]'>
    </trix-editor>
  </form>

Block Lists

• Block everything

  <form>
    <input id="content" name="content" type="hidden">
    <trix-editor id="editor" input="content"
      data-controller="trix-embed"
      data-trix-embed-block-link-hosts-value='["*"]'
      data-trix-embed-block-media-hosts-value='["*"]'>
    </trix-editor>
  </form>

  ...or simply.

  <form>
    <input id="content" name="content" type="hidden">
    <trix-editor id="editor" input="content" data-controller="trix-embed">
    </trix-editor>
  </form>

• Block links to the following hosts: 4chan.org, 8chan.net, thepiratebay.org and block media (images, videos, etc.) from the following hosts: deviantart.com, imgur.com, tumblr.com

  <form>
    <input id="content" name="content" type="hidden">
    <trix-editor id="editor" input="content"
      data-controller="trix-embed"
      data-trix-embed-blocked-link-hosts-value='["4chan.org", "8chan.net", "thepiratebay.org"]'
      data-trix-embed-blocked-media-hosts-value='["deviantart.com", "imgur.com", "tumblr.com"]'>
    </trix-editor>
  </form>

Persistence

You'll need to ensure any embedded attachments are prepared for persistence.

class ContentController < ApplicationController
  def create
    Example.create content: TrixEmbed::Attachment.rewrite_for_storage(params[:content].to_s)
  end
end

Sponsors

Proudly sponsored by

Developing

git clone https://github.com/hopsoft/trix_embed.git
cd trix_embed
bin/dev

Releasing

1. Run yarn and bundle to pick up the latest
2. Bump version number at lib/trix_embed/version.rb. Pre-release versions use .preN
3. Bump version number at package.json (make sure it matches). Pre-release versions use -preN
4. Run yarn build - builds both the Ruby gem and the NPM package
5. Commit and push changes to GitHub
6. Run rake release
7. Run yarn publish --no-git-tag-version --access public --new-version X.X.X (use same version number)
8. Create a new release on GitHub (here) and generate the changelog for the stable release for it

License

The gem is available as open source under the terms of the MIT License.