Trix-embed NPM

Trix Embed

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

Dependencies

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>

Developing

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

Releasing

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