Using ActionText without webpack

Question

I try to implement ActionTest with old way asset pipeline (without Webpack) on rails 6

Almost all is good, except loading of @rails/actiontext

in my application.js I've

//= require trix
//= require @rails/actiontext

The riche editor appear, I can change bold/italic text, but can't add image (not uploaded)

I've an JS error : Uncaught SyntaxError: Cannot use import statement outside a module

on line : import { AttachmentUpload } from "./attachment_upload" from attachment_uplaod.js in actiontext.

Any way to achieve this without webpack?

thanks

Answer 1

I don't know what will be the official way, but I did it this way as I'm waiting for an updated install generator:

Prerequisites

• hotwire-rails

CSS

• Copy the CSS file in your asset pipeline (https://github.com/basecamp/trix/tree/main/dist)

JS Libraries

• In app/assets/javascripts/libraries create these two files
• Updated content may be found on https://www.skypack.dev

// app/assets/javascripts/libraries/actiontext@6.1.4.js
export * from 'https://cdn.skypack.dev/pin/@rails/actiontext@v6.1.4-znF92tREya92yxvegJvq/mode=imports/optimized/@rails/actiontext.js';
export { default } from 'https://cdn.skypack.dev/pin/@rails/actiontext@v6.1.4-znF92tREya92yxvegJvq/mode=imports,min/optimized/@rails/actiontext.js';

// app/assets/javascripts/libraries/trix@1.3.1.js
export * from 'https://cdn.skypack.dev/pin/trix@v1.3.1-EGGvto9zyvcAYsikgQxN/mode=imports/optimized/trix.js';
export { default } from 'https://cdn.skypack.dev/pin/trix@v1.3.1-EGGvto9zyvcAYsikgQxN/mode=imports,min/optimized/trix.js';

Import through Stimulus

• In app/assets/javascripts/controllers create this file

//app/assets/javascripts/controllers/trix_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    import("actiontext").catch(err => null)
    import("trix").catch(err => null)
  }
}

• On pages where trix/action_text should be loaded, add a data-controller="trix" to the relevant div
• And voilà !

https://github.com/rails/rails/issues/41221#issuecomment-871853505

Answer 2

Got Action Text working by copying the actiontext scripts into a custom file, and removing the imports and exports.

And second, you will need to require activestorage in your application.js to make use of DirectUpload.

application.js

//= require trix
//=# require @rails/actiontext
//= require activestorage
//= require actiontext

actiontext.js

// Copied from node_modules/@rails/actiontext/app/javascript/actiontext/attachment_upload.js
class AttachmentUpload {
  constructor(attachment, element) {
    this.attachment = attachment;
    this.element = element;
    // Requires `require activestorage` in application.js
    this.directUpload = new ActiveStorage.DirectUpload(
      attachment.file,
      this.directUploadUrl,
      this
    );
  }

  start() {
    this.directUpload.create(this.directUploadDidComplete.bind(this));
  }

  directUploadWillStoreFileWithXHR(xhr) {
    xhr.upload.addEventListener("progress", event => {
      const progress = (event.loaded / event.total) * 100;
      this.attachment.setUploadProgress(progress);
    });
  }

  directUploadDidComplete(error, attributes) {
    if (error) {
      throw new Error(`Direct upload failed: ${error}`);
    }

    this.attachment.setAttributes({
      sgid: attributes.attachable_sgid,
      url: this.createBlobUrl(attributes.signed_id, attributes.filename)
    });
  }

  createBlobUrl(signedId, filename) {
    return this.blobUrlTemplate
      .replace(":signed_id", signedId)
      .replace(":filename", encodeURIComponent(filename));
  }

  get directUploadUrl() {
    return this.element.dataset.directUploadUrl;
  }

  get blobUrlTemplate() {
    return this.element.dataset.blobUrlTemplate;
  }
}

// Copied from node_modules/@rails/actiontext/app/javascript/actiontext/index.js
addEventListener("trix-attachment-add", event => {
  const { attachment, target } = event;

  if (attachment.file) {
    const upload = new AttachmentUpload(attachment, target);
    upload.start();
  }
});

This still uses ES6 syntax, so if you want to support older browsers and aren't using Babel, you might want to rewrite or transpile this to ES5.