Trix compatibility issue

[thiagopradi]

Hello,

I’m opening this issue to report a compatibility problem we encountered while migrating from Trix to Lexxy. Our application currently uses Trix, and during testing, we noticed some unusual behavior related to line breaks.

We tested with the following setup:

• Trix version: 2.1.15
• lexxy version: 0.1.8-beta

Here’s an example Trix field body that illustrates the problem:

<div class="trix-content">
  <div>
    Initial text. <em>Italic Text</em>. <strong>Bold text</strong>.<br>
    Testing here.&nbsp;<br><br>
  </div>

  <h1>First header.</h1>

  <ul>
    <li>List one</li>
    <li>List two</li>
    <li>List three</li>
  </ul>

  <div>
    Adding a PDF here:
    <action-text-attachment
      sgid="SGID_PLACEHOLDER_1"
      content-type="application/pdf"
      url="https://example.com/blobs/redirect/ID_PLACEHOLDER_1/acme-store.pdf"
      filename="acme-store.pdf"
      filesize="283424"
      presentation="gallery"
      caption=""
    >
      <figure class="attachment attachment--file attachment--pdf">
        <figcaption class="attachment__caption">
          <span class="attachment__name">acme-store.pdf</span>
          <span class="attachment__size">277 KB</span>
        </figcaption>
      </figure>
    </action-text-attachment>
    Now files:
  </div>

  <div class="attachment-gallery attachment-gallery--2">
    <action-text-attachment
      sgid="SGID_PLACEHOLDER_2"
      content-type="image/png"
      url="https://example.com/blobs/redirect/ID_PLACEHOLDER_2/acme-file-1.png"
      filename="acme-file-1.png"
      filesize="151268"
      width="530"
      height="330"
      previewable="true"
      presentation="gallery"
      caption=""
    >
      <figure class="attachment attachment--preview attachment--png">
        <img src="https://example.com/representations/redirect/ID_PLACEHOLDER_3/acme-file-1.png">

        <figcaption class="attachment__caption">
          <span class="attachment__name">acme-file-1.png</span>
          <span class="attachment__size">148 KB</span>
        </figcaption>
      </figure>
    </action-text-attachment>

    <action-text-attachment
      sgid="SGID_PLACEHOLDER_3"
      content-type="image/png"
      url="https://example.com/blobs/redirect/ID_PLACEHOLDER_4/acme-file-2.png"
      filename="acme-file-2.png"
      filesize="45997"
      width="298"
      height="136"
      previewable="true"
      presentation="gallery"
      caption=""
    >
      <figure class="attachment attachment--preview attachment--png">
        <img src="https://example.com/representations/redirect/ID_PLACEHOLDER_5/acme-file-2.png">

        <figcaption class="attachment__caption">
          <span class="attachment__name">acme-file-2.png</span>
          <span class="attachment__size">44.9 KB</span>
        </figcaption>
      </figure>
    </action-text-attachment>
  </div>
</div>

Image of the body being rendered with Trix:

Image of the same body being render with Lexxy:

The main issue we’ve observed is that when inserting a line break next to the Adding a PDF here text, the cursor unexpectedly jumps to the end of the editor (below the last image).

CleanShot.2025-09-30.at.00.11.05.mp4

I’m happy to provide additional details if helpful. I also understand Lexxy may not aim for full compatibility with Trix at this stage, but I wanted to share this in case it serves as a useful test case.

Best,

Thiago

[romansklenar]

Do you use Tailwind? I had to add this to my CSS files:

/* Revert to default Lexxy styles that Tailwind messes up */
.lexxy-content {
    ul, ol, dl {
        list-style: revert;
        margin: revert;
        padding: revert;
    }
}

[thiagopradi]

@romansklenar - I do use Tailwind. I will check this CSS change - thank you!

[jorgemanrubia]

Nice, thanks for the workaround @romansklenar. @andyra do you think we could place that CSS in the general CSS here, since tailwind is so common?

[andyra]

Sounds like there are a couple issues here:

1. Lists missing bullets
Tailwind has a Typography plugin which is made for user-generated content like this. It basically layers styles back in that the Tailwind reset removed. That might be preferable in some ways, although adding the revert styles that @romansklenar suggested could be fine since it's not too Tailwind-specific—I'm guessing we don't want to be in the game of maintaining styles to work with every CSS toolkit, ya know?

2. Attachments display inline
The default Lexxy CSS styles attachments to be block-level elements, so they should get their own line. The screenshots suggest that there's a CSS override somewhere in the mix making those elements inline. Worth a check!

3. Cursor jumping around
Not a CSS issue, so a bit out of my own personal wheelhouse.

[thiagopradi]

Thanks for all the comments! I think @andyra did a great job summarizing the issues. I originally opened this thread because of issue #3 (cursor jumping around), but I really appreciate the help with the others as well.

1. Lists missing bullets

I’ve applied @romansklenar’s revert styles, and the list bullets are now displaying correctly — thank you!

2. Attachments display inline

It turned out that a CSS rule was setting attachments to inline-block, overriding Lexxy’s default block-level display. I’ve removed that rule.

3. Cursor jumping around

Unfortunately, this issue is still happening for me. I’ve removed all our custom CSS for Trix, but the problem persists. Here’s a video showing the behavior:

CleanShot.2025-10-13.at.11.32.42.mp4

Happy to provide more information if needed.

[richjdsmith]

I think this touches on a bigger issue of Tailwind resets and users needing to decide between relying on Tailwind Prose to render their content, or the Lexxy content.

However, even things such as the formatting .lexxy-editor__content is broken with Tailwind's default CSS resets.

@jorgemanrubia Do you have thoughts on how you see the project approaching this? The Tailwind Typography plugin is fantastic, and I know personally I have mine set up to match the rest of my styling. I think with so many developers using Tailwind this issue of how to make it and Lexxy play well together is going to keep coming up.

[lylo]

@richjdsmith I use Lexxy and Tailwind in the Pagecord admin and I stopped using "prose" for the editor and added a few overrides to the Lexxy styles to make it look more like the Tailwind Typography defaults. This felt like the path of least resistance.

[richjdsmith]

@lylo I came to the same conclusion. Easy enough to implement. For anyone looking to do the same:

/* Restore semantic HTML defaults that Tailwind removes, for rich text editing */
@layer components {
    .lexxy-editor__content {
        ul,
        ol {
            list-style: revert;
            margin: revert;
            padding: revert;
        }        h1, h2, h3, h4, h5, h6 {
            font-size: revert;
            font-weight: revert;
            margin: revert;
        }
        strong {
            font-weight: revert;
        }
        em {
            font-style: revert;
        }
    }
}