Tools for the Trix Text Editor.
npm install trix-toolsTools for the Trix Text Editor.




The Trix Text Editor is a WYSIWYG editor in the browser, allowing for easy text input in your projects. It has a few drawbacks though like not being able to render YouTube embeded videos, Twitter (X) Tweets, image links, or code blocks out of the box. Trix Tools comes with various tools to help render that input content when using Trix in your projects.
``sh`
npm i trix-tools
Trix Tools is modular, allowing you to choose which rendering plugins you want to use for your project. Below you'll find all the available plugins which can be disabled to fit your needs. All plugins are enabled out of the box.
`javascript
import { renderTrixContent } from 'trix-tools';
// Re-render all your original Trix HTML content using all plugins except Twitter
const trixContent = document.getElementById('trix-content');
trixContent.innerHTML = renderTrixContent(trixContent.innerHTML, { twitter: false });
`
#### Code Blocks
Plugin name: codeBlocks
You can paste:
\\\python
foo = "hello world"
\\\
into the Trix editor and Trix Tools will re-render it as:
foo = "hello world"\nWe append the
language-{lang} HTML class so you can use syntax highlighting packages. The language identifier at the start of your code block is optional.#### Images
Plugin name:
imagesYou can paste an image link into the Trix editor and Trix Tools will re-render it as an image HTML tag. The image will auto scale Y and max width 100% of its container.
#### Inline Code
Plugin name:
inlineCodeYou can paste \
mycode\ into the Trix editor and Trix Tools will re-render it as mycode.#### Twitter
Plugin name:
twitterYou can paste a simple link (eg:
https://twitter.com/Justintime_50/status/123) into the Trix editor or a full Tweet blockquote and Trix Tools will re-render it as a well-formed embeded iframe (complete with Twitter script).#### YouTube
Plugin name:
youtubeYou can paste a simple link (eg:
https://www.youtube.com/watch?v=abc123) into the Trix editor or a full YouTube iframe and Trix Tools will re-render it as a well-formed embeded iframe.#### Custom Plugins
Plugin name: whatever you want!
You can register your own plugins and have Trix Tools give the same treatment as our 1st party plugins to your content:
`js
import { renderTrixContent, registerTrixPlugin } from 'trix-tools';// Define your custom plugin
function renderCustomStuff(html) {
// Custom processing...
return html.replace(/foo/g, 'bar');
}
// Register it
registerTrixPlugin('custom', renderCustomStuff);
// Use it
const trixContent = document.getElementById('trix-content');
trixContent.innerHTML = renderTrixContent(trixContent.innerHTML, { custom: true });
`Development
`bash
Lint the project
npm run lintRun tests
npm run testRun test coverage
npm run coverage
``