Trix: a way to build with webpack

[jaeheeship]

I love trix-editor.
So, I decied to build the react-version for trix-editor.
But when I used a webpack for building it, I faced a problem .

It can not find Trix object in bundle.js.

I think that the problem is related to use the Trix variable which is global variable.

Is there a way to build with webpack ?

[khmelevskii]

+1

[pearlc]

+1

[javan]

I'm not very familiar with webpack. Is there no way to include libraries that export a global? This blog post seems to describe how to do it: http://mts.io/2015/04/08/webpack-shims-polyfills/

Alternatively, you could open an issue on webpack and +1 it.

[arendjr]

+1

FWIW, I had the same issue when trying to use trix-core.js in Browserify. But eventually the fix was very simple: just replace this.Trix= with window.Trix= at the very beginning of the file. It's a bit of a hack and it still relies on a global variable, but it works :)

[javan]

Since webpack isn't part of our arsenal, I don't feel qualified to add support for it. I'd to be happy to review a PR that does.

[bbenezech]

// import CSS (with ExtractTextPlugin for instance)
import 'trix/dist/trix.css';

// The dumbest thing possible with webpack, use the script loader.
// Acceptable since the file is already minified and has no reusable dependencies.
// npm i script-loader -S
import 'script!trix/dist/trix.js';

[milazangirolame]

(rails-project)$ yarn add trix
this will add trix to your package.json

{
   "name": rails project",
   "private": true,
   "dependencies": {
      "@rails/actioncable": "^6.0.0",
      "@rails/actiontext": "^6.0.1",
      "@rails/activestorage": "^6.0.0",
      "@rails/ujs": "^6.0.0",
      "@rails/webpacker": "^4.2.0",
      "bootstrap": "^4.4.1",
      "jquery": "^3.4.1",
      "jquery-ui": "^1.12.1",
      "popper.js": "^1.16.0",
      "trix": "^1.2.2",
      "turbolinks": "^5.2.0"
   },
   "version": "0.1.0",
   "devDependencies": {
      "webpack-dev-server": "^3.9.0"
   }
}

then add this to your application.js javascript/packs/application.js

//trix editor
import 'trix/dist/trix.css';
import 'trix/dist/trix.js';

to modify or config global trix config like:

var Trix = require("trix")
require("@rails/actiontext")

Trix.config.blockAttributes.heading1.tagName = "h3";

attributes > reference

USEFUL------
webpack plugin

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var folders = {
    APP: path.resolve(__dirname, '../app'),
    BUILD: path.resolve(__dirname, '../build'),
    BOWER: path.resolve(__dirname, '../bower_components'),
    NPM: path.resolve(__dirname, '../node_modules')
};

webpack.js reference

react webpack boilerplate reference