How to customize Trix.js?

Introduction:

Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.

Trix is an open-source project from Basecamp, the creators of Ruby on Rails. Millions of people trust their text to Basecamp, and we built Trix to give them the best possible editing experience. See Trix in action in the all-new Basecamp 3.

Integrating Trix to Angular project:

To integrate the Trix editor to an angular project:

• we need to include the three files present in the dist folder (trix.js, trix-core.js and trix.css) from GitHub(https://github.com/basecamp/trix).
• We need to add “schemas:[CUSTOM_ELEMENTS_SCHEMA]”

Customizing Trix:

There are times when we want to do some customization with default behavior to meet client requirements, Trix is an open-source project written in CoffeeScript which translates into JavaScript.

Problem with customizing Trix:

Below are the key problems I faced while customizing trix

1. Github all source code is written in coffee script , i am very new to CoffeeScript
2. Original Trix Github repo provides only non-minified JS files on Github(https://github.com/basecamp/trix).
3. I have only knowledge of JavaScript.
4. In order to customize trix, I needed non-minified JS files.
5. I tried installing the CoffeeScript compiler using node.js in the Windows system but it didn’t work as compiling all files together required dependency on Blade (another open source project).
6. In order to run Blade there was a dependency on the ‘ruby on rails’ development environment. Also, it required an older version of Ruby.
7. I installed Blade, and Ruby 2.3.4 also but when I compiled the code of Trix, it gave me the following error.‘An error occurred while installing curses (1.0.2), and Bundler cannot continue.
   Make sure that `gem install curses -v ‘1.0.2’` succeeds before bundling.’
8. Later on I found that ruby on windows isn’t very stable. So use of linux is preferred.
9. I am married to Windows, no longer know much depth of Linux shell commands, also didn’t have an Ubuntu OS and an extra machine.

Solution:

Setting up the Ruby environment on Windows machines is a complicated task, as Ruby works more efficiently on Linux machines.In order to get non-minified JS files we had to get help from the RoR expert team externally and we got them to remove the property “js_compressor: uglifier” from the .blade.yml file and build the CoffeeScript project in the Ruby environment,

We did the hard work and a lot of communication to extract the non-minified files that can be included in the project instead of the minified files provided in the dist folder (trix.js, trix-core.js and trix.css) on GitHub. Since files are non-minified anyone with basic knowledge of JavaScript can read and understand the code, which gives us more control over the source code of Trix and allows us to do our own customization in a better way.

Download UnMinified Files Now:https://drive.google.com/file/d/1qA-1BeyLs-NJuSKTsvdGt6xvdTsQ0KnR/view?usp=sharing