Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wrong styles applied to my layout after installing gem #316

Closed
dewey opened this issue Oct 4, 2024 · 9 comments
Closed

Wrong styles applied to my layout after installing gem #316

dewey opened this issue Oct 4, 2024 · 9 comments

Comments

@dewey
Copy link

dewey commented Oct 4, 2024 •
edited
Loading

I'm running into the issue that as soon as I add gem 'tinymce-rails' to my Gemfile and restart my server the existing layout is broken. The only changes I've done are installing the gem and adding this to my head:

<head>
  <%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
  <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= tinymce_assets %>
  <script type="text/javascript" src="/assets/tinymce.js"></script>
</head>

If I'm removing the gem, everything works again. Is there any known issues with using it combined with Tailwind? That I can see the same style being applied multiple times seems a bit suspicious.

Thanks!

I can see the styles being injected in the header:
Screenshot 2024-10-04 at 22 42 33 png@2x

MCE styles being loaded:
Screenshot 2024-10-04 at 22 40 03 png@2x

Lots of styles being applied to the body over and over again:

Screenshot 2024-10-04 at 22 39 47 png@2x
@Faq
Copy link

Faq commented Oct 8, 2024

Not much info provided, Gem/Rails version. Any online example?

@spohlenz
Copy link
Owner

spohlenz commented Oct 8, 2024

You shouldn't need both of these lines:

  <%= tinymce_assets %>

  <script type="text/javascript" src="/assets/tinymce.js"></script>

Just including the call to tinymce_assets should automatically include the script tag for you. I expect that will fix the duplicated stylesheets being included, which hopefully in turn should fix the layout breakage.

@samvandamme
Copy link

I am having the same issue since using @rails/propshaft

@dewey
Copy link
Author

dewey commented Oct 11, 2024 •
edited
Loading

Not much info provided, Gem/Rails version. Any online example?

No online example but I can replicate with a new Rails 8.0.0.beta1 app, the v7.3.0 of this gem and by adding <%= tinymce_assets %> to the head in application.html.erb. I also just updated to propshaft (1.1.0), but that didn't change anything.

Here's the full Gemfile.lock.

GIT
  remote: https://github.com/ctran/annotate_models.git
  revision: 5d01c4171990c4fe7b9b0977b05ce14a98209e53
  specs:
    annotate (3.2.0)
      activerecord (>= 3.2, < 8.0)
      rake (>= 10.4, < 14.0)

GIT
  remote: https://github.com/rails/rails.git
  revision: 57fe7e781ee37a50e54b17df24738ce6c26b22db
  branch: main
  specs:
    actioncable (8.0.0.beta1)
      actionpack (= 8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
      zeitwerk (~> 2.6)
    actionmailbox (8.0.0.beta1)
      actionpack (= 8.0.0.beta1)
      activejob (= 8.0.0.beta1)
      activerecord (= 8.0.0.beta1)
      activestorage (= 8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      mail (>= 2.8.0)
    actionmailer (8.0.0.beta1)
      actionpack (= 8.0.0.beta1)
      actionview (= 8.0.0.beta1)
      activejob (= 8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      mail (>= 2.8.0)
      rails-dom-testing (~> 2.2)
    actionpack (8.0.0.beta1)
      actionview (= 8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      nokogiri (>= 1.8.5)
      rack (>= 2.2.4)
      rack-session (>= 1.0.1)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
      useragent (~> 0.16)
    actiontext (8.0.0.beta1)
      actionpack (= 8.0.0.beta1)
      activerecord (= 8.0.0.beta1)
      activestorage (= 8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
    actionview (8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      builder (~> 3.1)
      erubi (~> 1.11)
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
    activejob (8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      globalid (>= 0.3.6)
    activemodel (8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
    activerecord (8.0.0.beta1)
      activemodel (= 8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      timeout (>= 0.4.0)
    activestorage (8.0.0.beta1)
      actionpack (= 8.0.0.beta1)
      activejob (= 8.0.0.beta1)
      activerecord (= 8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      marcel (~> 1.0)
    activesupport (8.0.0.beta1)
      base64
      benchmark (>= 0.3)
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.3.1)
      connection_pool (>= 2.2.5)
      drb
      i18n (>= 1.6, < 2)
      logger (>= 1.4.2)
      minitest (>= 5.1)
      securerandom (>= 0.3)
      tzinfo (~> 2.0, >= 2.0.5)
      uri (>= 0.13.1)
    rails (8.0.0.beta1)
      actioncable (= 8.0.0.beta1)
      actionmailbox (= 8.0.0.beta1)
      actionmailer (= 8.0.0.beta1)
      actionpack (= 8.0.0.beta1)
      actiontext (= 8.0.0.beta1)
      actionview (= 8.0.0.beta1)
      activejob (= 8.0.0.beta1)
      activemodel (= 8.0.0.beta1)
      activerecord (= 8.0.0.beta1)
      activestorage (= 8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      bundler (>= 1.15.0)
      railties (= 8.0.0.beta1)
    railties (8.0.0.beta1)
      actionpack (= 8.0.0.beta1)
      activesupport (= 8.0.0.beta1)
      irb (~> 1.13)
      rackup (>= 1.0.0)
      rake (>= 12.2)
      thor (~> 1.0, >= 1.2.2)
      zeitwerk (~> 2.6)

GEM
  remote: https://rubygems.org/
  specs:
    addressable (2.8.7)
      public_suffix (>= 2.0.2, < 7.0)
    ast (2.4.2)
    base64 (0.2.0)
    bcrypt (3.1.20)
    bcrypt_pbkdf (1.1.1)
    benchmark (0.3.0)
    bigdecimal (3.1.8)
    bindex (0.8.1)
    brakeman (6.2.1)
      racc
    builder (3.3.0)
    capybara (3.40.0)
      addressable
      matrix
      mini_mime (>= 0.1.3)
      nokogiri (~> 1.11)
      rack (>= 1.6.0)
      rack-test (>= 0.6.3)
      regexp_parser (>= 1.5, < 3.0)
      xpath (~> 3.2)
    chartkick (5.1.0)
    concurrent-ruby (1.3.4)
    connection_pool (2.4.1)
    crass (1.0.6)
    cssbundling-rails (1.4.1)
      railties (>= 6.0.0)
    date (3.3.4)
    debug (1.9.2)
      irb (~> 1.10)
      reline (>= 0.3.8)
    dotenv (3.1.4)
    drb (2.2.1)
    ed25519 (1.3.0)
    erubi (1.13.0)
    et-orbi (1.2.11)
      tzinfo
    ethon (0.16.0)
      ffi (>= 1.15.0)
    ffi (1.17.0)
    fugit (1.11.1)
      et-orbi (~> 1, >= 1.2.11)
      raabro (~> 1.4)
    globalid (1.2.1)
      activesupport (>= 6.1)
    groupdate (6.5.1)
      activesupport (>= 7)
    high_voltage (4.0.0)
    i18n (1.14.6)
      concurrent-ruby (~> 1.0)
    inline_svg (1.10.0)
      activesupport (>= 3.0)
      nokogiri (>= 1.6)
    io-console (0.7.2)
    irb (1.14.1)
      rdoc (>= 4.0.0)
      reline (>= 0.4.2)
    jbuilder (2.13.0)
      actionview (>= 5.0.0)
      activesupport (>= 5.0.0)
    jsbundling-rails (1.3.1)
      railties (>= 6.0.0)
    json (2.7.2)
    kamal (2.2.2)
      activesupport (>= 7.0)
      base64 (~> 0.2)
      bcrypt_pbkdf (~> 1.0)
      concurrent-ruby (~> 1.2)
      dotenv (~> 3.1)
      ed25519 (~> 1.2)
      net-ssh (~> 7.0)
      sshkit (>= 1.23.0, < 2.0)
      thor (~> 1.3)
      zeitwerk (~> 2.5)
    language_server-protocol (3.17.0.3)
    logger (1.6.1)
    loofah (2.22.0)
      crass (~> 1.0.2)
      nokogiri (>= 1.12.0)
    mail (2.8.1)
      mini_mime (>= 0.1.1)
      net-imap
      net-pop
      net-smtp
    marcel (1.0.4)
    matrix (0.4.2)
    mini_mime (1.1.5)
    mini_portile2 (2.8.7)
    minitest (5.25.1)
    net-imap (0.4.16)
      date
      net-protocol
    net-pop (0.1.2)
      net-protocol
    net-protocol (0.2.2)
      timeout
    net-scp (4.0.0)
      net-ssh (>= 2.6.5, < 8.0.0)
    net-sftp (4.0.0)
      net-ssh (>= 5.0.0, < 8.0.0)
    net-smtp (0.5.0)
      net-protocol
    net-ssh (7.3.0)
    nio4r (2.7.3)
    nokogiri (1.16.7)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
    ostruct (0.6.0)
    parallel (1.26.3)
    parser (3.3.5.0)
      ast (~> 2.4.1)
      racc
    passwordless (1.7.0)
      bcrypt (>= 3.1.11)
      rails (>= 5.1.4)
    pg (1.5.8)
    propshaft (1.1.0)
      actionpack (>= 7.0.0)
      activesupport (>= 7.0.0)
      rack
      railties (>= 7.0.0)
    psych (5.1.2)
      stringio
    public_suffix (6.0.1)
    puma (6.4.3)
      nio4r (~> 2.0)
    raabro (1.4.0)
    racc (1.8.1)
    rack (3.1.7)
    rack-session (2.0.0)
      rack (>= 3.0.0)
    rack-test (2.1.0)
      rack (>= 1.3)
    rackup (2.1.0)
      rack (>= 3)
      webrick (~> 1.8)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
      nokogiri (>= 1.6)
    rails-html-sanitizer (1.6.0)
      loofah (~> 2.21)
      nokogiri (~> 1.14)
    rainbow (3.1.1)
    rake (13.2.1)
    rdoc (6.7.0)
      psych (>= 4.0.0)
    redis-client (0.22.2)
      connection_pool
    redis-prescription (2.6.0)
    regexp_parser (2.9.2)
    reline (0.5.10)
      io-console (~> 0.5)
    rexml (3.3.8)
    robots (0.10.0)
    rubocop (1.66.1)
      json (~> 2.3)
      language_server-protocol (>= 3.17.0)
      parallel (~> 1.10)
      parser (>= 3.3.0.2)
      rainbow (>= 2.2.2, < 4.0)
      regexp_parser (>= 2.4, < 3.0)
      rubocop-ast (>= 1.32.2, < 2.0)
      ruby-progressbar (~> 1.7)
      unicode-display_width (>= 2.4.0, < 3.0)
    rubocop-ast (1.32.3)
      parser (>= 3.3.1.0)
    rubocop-minitest (0.36.0)
      rubocop (>= 1.61, < 2.0)
      rubocop-ast (>= 1.31.1, < 2.0)
    rubocop-performance (1.22.1)
      rubocop (>= 1.48.1, < 2.0)
      rubocop-ast (>= 1.31.1, < 2.0)
    rubocop-rails (2.26.2)
      activesupport (>= 4.2.0)
      rack (>= 1.1)
      rubocop (>= 1.52.0, < 2.0)
      rubocop-ast (>= 1.31.1, < 2.0)
    rubocop-rails-omakase (1.0.0)
      rubocop
      rubocop-minitest
      rubocop-performance
      rubocop-rails
    ruby-limiter (2.3.0)
    ruby-progressbar (1.13.0)
    rubyzip (2.3.2)
    rufus-scheduler (3.9.2)
      fugit (~> 1.1, >= 1.11.1)
    securerandom (0.3.1)
    selenium-webdriver (4.25.0)
      base64 (~> 0.2)
      logger (~> 1.4)
      rexml (~> 3.2, >= 3.2.5)
      rubyzip (>= 1.2.2, < 3.0)
      websocket (~> 1.0)
    sidekiq (7.3.2)
      concurrent-ruby (< 2)
      connection_pool (>= 2.3.0)
      logger
      rack (>= 2.2.4)
      redis-client (>= 0.22.2)
    sidekiq-scheduler (5.0.6)
      rufus-scheduler (~> 3.2)
      sidekiq (>= 6, < 8)
      tilt (>= 1.4.0, < 3)
    sidekiq-throttled (1.4.0)
      concurrent-ruby (>= 1.2.0)
      redis-prescription (~> 2.2)
      sidekiq (>= 6.5)
    sitemap-parser (0.5.6)
      nokogiri (~> 1.6)
      typhoeus (>= 0.6, < 2.0)
    sitemap_generator (6.3.0)
      builder (~> 3.0)
    spidr (0.6.1)
      nokogiri (~> 1.3)
    sqlite3 (2.1.0)
      mini_portile2 (~> 2.8.0)
    sshkit (1.23.1)
      base64
      net-scp (>= 1.1.2)
      net-sftp (>= 2.1.2)
      net-ssh (>= 2.8.0)
      ostruct
    stimulus-rails (1.3.4)
      railties (>= 6.0.0)
    stringio (3.1.1)
    thor (1.3.2)
    tilt (2.4.0)
    timeout (0.4.1)
    tinymce-rails (7.4.1)
      railties (>= 3.1.1)
    turbo-rails (2.0.10)
      actionpack (>= 6.0.0)
      railties (>= 6.0.0)
    typhoeus (1.4.1)
      ethon (>= 0.9.0)
    tzinfo (2.0.6)
      concurrent-ruby (~> 1.0)
    unicode-display_width (2.6.0)
    uri (0.13.1)
    useragent (0.16.10)
    wayback_archiver (1.4.0)
      concurrent-ruby (~> 1.0)
      robots (~> 0.1)
      spidr (~> 0.6.1)
    web-console (4.2.1)
      actionview (>= 6.0.0)
      activemodel (>= 6.0.0)
      bindex (>= 0.4.0)
      railties (>= 6.0.0)
    webrick (1.8.2)
    websocket (1.2.11)
    websocket-driver (0.7.6)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
    wicked (2.0.0)
      railties (>= 3.0.7)
    xpath (3.2.0)
      nokogiri (~> 1.8)
    zeitwerk (2.7.0)

PLATFORMS
  ruby

DEPENDENCIES
  annotate!
  brakeman
  capybara
  chartkick
  cssbundling-rails
  debug
  groupdate
  high_voltage (~> 4.0.0)
  inline_svg
  jbuilder
  jsbundling-rails
  kamal
  passwordless
  pg (~> 1.1)
  propshaft
  puma (>= 5.0)
  rails!
  robots (< 0.10.1)
  rubocop-rails-omakase
  ruby-limiter
  selenium-webdriver
  sidekiq (~> 7.3)
  sidekiq-scheduler (~> 5.0)
  sidekiq-throttled
  sitemap-parser
  sitemap_generator
  sqlite3 (>= 1.4)
  stimulus-rails
  tinymce-rails
  turbo-rails
  tzinfo-data
  wayback_archiver
  web-console
  wicked

BUNDLED WITH
   2.5.16

@spohlenz
Copy link
Owner

This is definitely one where I'll need a reproduction example repo as I've been unable to replicate it myself.

I've uploaded my own example to https://github.com/spohlenz/TinyMCERails8 which is working. In spohlenz/TinyMCERails8@5ae3f16 you'll find the code added onto a fresh Rails 8.0.0.beta1 application.

@dewey
Copy link
Author

dewey commented Oct 12, 2024 •
edited
Loading

Hey @spohlenz, thanks for taking the time to reply here. I just created a minimal repo based on the following command and was able to reproduce the issue. As soon as the gem is installed the layout shifts.

This is without even using the editor, just by installing the gem and adding the <%= tinymce_assets %> snippet.

rails new tinymce-tailwind-rails8 --main --javascript=esbuild --skip-test --css=tailwind --skip-bootsnap

You can see the "before tinymce" and "after tinymce" commits, and here's how it looks for me.

Before:

Screenshot 2024-10-12 at 10 59 44 png@2x

After:

Screenshot 2024-10-12 at 11 00 40 png@2x

@spohlenz
Copy link
Owner

spohlenz commented Oct 12, 2024 •
edited
Loading

Looking back again at your original example, I see the line which is the culprit:

<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>

I wasn't aware of this feature of Rails, and it definitely seems like an anti-pattern to me, but I can look into it further.

In a new Rails 8 app, like in your example command, the same line is generated but with :app instead of :all which doesn't seem to exhibit the problematic behavior:

<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>

@spohlenz
Copy link
Owner

Further digging: that behavior is coming from https://github.com/rails/propshaft/blob/main/lib/propshaft/helper.rb#L21-L23

There doesn't appear to be any way to exclude railtie/engine assets when using stylesheet_link_tag :all so the only advice I can give is to use :app instead. It appears this is basically the reason that:app was introduced (see rails/propshaft#187 / rails/propshaft#190).

@dewey
Copy link
Author

dewey commented Oct 12, 2024

That's a very nice find, thanks for digging that up! That does indeed fix the issue, guess that's a new Rails 8 thing that needs to be documented, maybe others will stumble upon this discussion.

Thanks again for taking the time to maintain this and for investigating this issue!

@dewey dewey closed this as completed Oct 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@spohlenz @Faq @dewey @samvandamme