sveltia/sveltia-cms

possible bug with combining italics and bold...

Closed this issue · 4 comments

I have some text in the rich text editor where bold is nested inside italic, but the italic is not rendering properly...

It's written like this in the editor:

***Disclaimer**: Once your survey is accepted, you will receive a confirmation and gift card notification. We reserve the right to accept or refuse any and all submissions.*

***Chú ý**:  Sau khi khảo sát của quý vị được chấp nhận, quý vị sẽ nhận được thông báo xác nhận và thẻ quà tặng. Chúng tôi có quyền chấp nhận hoặc từ chối bất kỳ và tất cả các khảo sát nhận được.*

...where italic is wrapped around bold, but in the output on the site the italic is gone and there are visible asterisks:

here it is with the italic part not there but the asterisks that should trigger the <em> tag are visible instead:

Screenshot 2024-10-30 at 1 59 43 PM

and what it is in the dev tools:

Screenshot 2024-10-30 at 1 59 51 PM

no <em> at all, just extra asterisks where they should not be...

I don't know if this is a bug or we are not doing something right...but it is very much messing up content writers a bunch...

Is this an output on your website? Then that’s an issue with the Markdown renderer.

Sveltia CMS itself: The preview looks good — It uses the Marked.js library. But I see the same issue in the editor when I switch between rich text and raw text. It seems to be a bug in Lexical, I can reproduce it in the Playground.

So you could switch to Marked.js.

editor, rich text off:

image

editor, rich text on:

image

preview

image

yeah...thinking it's lexical maybe...

when I first nest it in the rich text editor it looks fine:

Screenshot 2024-10-30 at 2 31 58 PM

and it looks correct in the markdown as well:

Screenshot 2024-10-30 at 2 32 15 PM

but when I save and go back again, it no longer looks correct in the rich text editor:

Screenshot 2024-10-30 at 2 32 32 PM

...as there are visible asterisks where there should not be any...

also, as another issue, the content creator when to use ACTUAL asterisks as well, like this:

Screenshot 2024-10-30 at 2 35 45 PM

which seems to ABSOLUTELY DESTROY Lexicals brain...

...soooooo...I dunnooo...🤷🏼‍♂️

My workaround ATM is to not nest the bold inside the italic, but make the title bold and the sentence italic, which is a compromise, but seems to actually render ok...

Basically italic text should be wrapped with underscores but Lexical uses asterisks by default. You can turn off rich text and manually replace the leading and trailing asterisks with underscores. This should work:

_**Disclaimer**: Once your survey is accepted, you will receive a confirmation and gift card notification. We reserve the right to accept or refuse any and all submissions._

I’ve found a way to force using underscores with Lexical. Will push the change shortly.

Added the workaround to the latest version, but you might still need to manually replace leading and trailing asterisks with underscores as I said earlier.