Trix: several buttons not working?

[iiCe89]

Editor doesnt seem to be completing several actions when using a few buttons work but others do nothing at all

Steps to Reproduce

1. clicking several buttons wont work
2. Bullet point, speech marks
3.

Details

• Trix version: latest
• Browser name and version: Chrome latest Version 75.0.3770.100
• Operating system: mac

also whenever you click on editor this error appears for any action on editor

custom-elements-es5-adapter.js:13 Uncaught TypeError: Illegal constructor at new HTMLElement (custom-elements-es5-adapter.js:13) at new n (app.js:22) at text/html (app.js:23) at Object.serializeToContentType (app.js:23) at a.updateInputElement (app.js:28) at a.notifyEditorElement (app.js:28) at a.notifyEditorElement (app.js:28) at a.compositionControllerDidRender (app.js:28) at c.render (app.js:25) at a.render (app.js:28)

[javan]

That error is occurring in your custom-elements-es5-adapter.js polyfill. Where is it from? Not a permanent solution, but try removing it and see if the error goes away.

[iiCe89]

Hey that fixed the error however buttons still not responding at all

[javan]

Can you post an example on https://codepen.io/ (or similar) that reproduces the issue?

[tillcarlos]

I have the same issue. The buttons are enabled, and I can format the text with hot keys. But clicking the buttons has no effect.

No errors in the console (safari/ff/chrome)

[iiCe89]

Hey i fixed issue it was due to conflicts with JS files i just had to do some tweaking etc to get it working very trial and error

[tillcarlos]

@iiCe89 wow... yes, same here. Thanks a lot, your comment made me try it at all :)

I get it to work when I include trix in another pack, but then Vue does not render components and shows NotSupportedError: Operation is not supported in trix.js:1417.

Weird - I'm trying more.

[Bloodyludi]

I was able to work around this issue by nesting the trix editor in a vue component like this:
https://jsbin.com/femumirela/1/edit?html,output

[tillcarlos]

oh cool! I can confirm: copying the HTML into the component works.

Wrapping it into an empty component and showing it via <slot></slot> does not work.

Not sure what's the best way forward for me now. I guess somehow using the form fields and reassembling the trix inside the component... or just leaving the plain HTML copy inside there until a real solution is found.

Anyway - thanks @Bloodyludi

<template>
  <span>
    <input type="hidden" name="story[body]" id="story_body_trix_input_story_7" value="" /><trix-editor id="story_body" input="story_body_trix_input_story_7" class="trix-content" data-direct-upload-url="http://localhost:3000/rails/active_storage/direct_uploads" data-blob-url-template="http://localhost:3000/rails/active_storage/blobs/:signed_id/:filename"></trix-editor>

    <slot></slot>
  </span>
</template>

[stale[bot]]

This issue has been automatically marked as stale after 90 days of inactivity. It will be closed if no further activity occurs.

[marcelkooi]

Also had this issue with Vue + Trix. Ended up changing the layout for the page where I was using trix so that it wasn't loading Vue.

[tjbarber]

This is still a problem. Happening in Rails 6 with Action Text. Do we have any workaround that isn't either 1) Not use Vue or 2) move Trix outside of the Vue app?

[gabrieelgomez]

In my project this error persists me, I have the following:

rails 6.0
ruby 2.6.6

installed with action text

package.json

{
  "name": "appname",
  "private": true,
  "dependencies": {
    "@rails/actiontext": "^6.0.3-2",
    "@rails/webpacker": "5.2.1",
    "@shopify/draggable": "^1.0.0-beta.8",
    "@tailwindcss/ui": "^0.5.0",
    "alpinejs": "^2.5.0",
    "array-to-sentence": "^2.0.0",
    "axios": "^0.18.0",
    "copy-text-to-clipboard": "^2.0.0",
    "cropperjs": "^1.5.6",
    "humps": "^2.0.1",
    "jquery": "^3.4.1",
    "lodash": "^4.17.10",
    "moment": "^2.23.0",
    "postcss-loader": "^3.0.0",
    "tailwindcss": "^1.6.2",
    "trix": "^1.2.0",
    "v-tooltip": "^2.0.3",
    "vee-validate": "^2.1.0-beta.8",
    "vue": "^2.5.16",
    "vue-avatar-editor-improved": "^1.0.4",
    "vue-clipboard2": "^0.3.1",
    "vue-i18n": "^8.3.0",
    "vue-loader": "^15.7.1",
    "vue-moment": "^4.0.0",
    "vue-select": "^2.4.0",
    "vue-slim-tabs": "^0.4.0",
    "vue-template-compiler": "^2.5.16",
    "vue-truncate-filter": "^1.1.7",
    "vue-turbolinks": "^2.0.3",
    "vue-upload-component": "^2.8.16",
    "vue-wysiwyg": "^1.7.2",
    "vuejs-datepicker": "^1.5.2",
    "vuejs-logger": "^1.5.3"
  },
  "devDependencies": {
    "mini-css-extract-plugin": "^0.8.0",
    "webpack-bundle-analyzer": "^3.8.0",
    "webpack-dev-server": "3.11.0"
  },
  "scripts": {
    "webpack:analyze": "yarn webpack:build_json && yarn webpack:analyze_json",
    "webpack:build_json": "RAILS_ENV=${RAILS_ENV:-production} NODE_ENV=${NODE_ENV:-production} bin/webpack --profile --json > tmp/webpack-stats.json",
    "webpack:analyze_json": "webpack-bundle-analyzer tmp/webpack-stats.json public/packs"
  }
}

[luciagirasoles]

I have the same problem with indentations buttons

[ZYSHAQ]

I am having the same issue: Bullet points / Numbered lists and indentation do not work (Laravel 8.x)

[ZYSHAQ]

I am having the same issue: Bullet points / Numbered lists and indentation do not work (Laravel 8.x)

Ok, I found it to be a dependency issue with tailwind-ui.css. Removing tailwind-ui.css fixes the issue!

[SimBig]

Tailwind may be a problem for those who are using it:

seems that tailwind lists have a default of list-style-type: none
https://tailwindcss.com/docs/list-style-type

Is there some kind of way to add a class to every ul element by Trix?
when someone creates a <ul>-tag trix would need to transform it to a <ul class="list-disc">-tag

Putting this into my css file fixed it ul { list-style-type: disc !important;}, but this will then apply to all ul-tags in the project...

[martinstreicher]

The repair above worked for me. I had to do this:

ul { list-style-type: disc !important; }
ol { list-style-type: decimal !important; }

[0aljawi0]

this fix my problem with tailwind css

trix-editor ul { list-style-type: disc !important; margin-left: 1rem !important; }
trix-editor ol { list-style-type: decimal !important; margin-left: 1rem !important; }