fix: component ellipses style not applied correctly

[abemscac]

Close #237
Close #331

Hi @sampullman

I added a "Truncate" row below ComponentFlex in the component menu to control the ellipsis of a text-content component.

Screen.Recording.2024-02-20.at.4.42.35.PM.mp4

One thing I'm not sure is that for nowrap ellipsis (one line ellipsis), it feels weird to only be able to see the first line of the text when ProseMirror editor is active. So currently the nowrap ellipsis will only be applied when the component is not selected (when the ProseMirror is inactive.) But this also means when users click on the "No Wrap" option, all text will still be visible until the component is deselected. I believe there's a better way to make this less confusing. 🤔

[abemscac]

This is the fix for #331

[abemscac]

By the way, I noticed that the gradient picker would overflow the menu after the recent UI changes.

Maybe we can have another issue to address this!

[sampullman]

Oh, I think I have a fix for that stashed locally. I'll include it in my next PR!

[sampullman]

I'm going to move the fix for #331 to a separate branch and merge it first, there are a few things I want to consider about the ellipsis/truncate feature.

It works pretty much as I would expect, but it's a lot of complicated code for a feature which may not be used too often. I think we can still merge it, but may want to address a couple of things first:

• Pressing "right" when the prosemirror cursor is at the end of the truncated text is buggy, it shows overlapped text. This can be solved by not truncating text while editing - I think that makes sense from the UX perspective as well.
• I'm still not sure about deleting all related properties or not when un-selecting truncate. I think we can clear the styles when the "No wrap" button is clicked.
• UI can be clearer, people might not understand "No wrap", and be confused when they can't un-select it

It's not a big rush to solve these problems, and maybe we can consider alternate solutions. For example, a feature that allows filtering/transforming components before render would allow us to provide a "truncate" script that limits content by characters. I'm not sure if that's better or worse from the user perspective, but requires a lot of work 🤔

Another odd thing is that -webkit-box-orient is not recommended in the MDN docs, although it seems to work fine in all major browsers.

[abemscac]

Thanks! I think you're right, the UI is indeed confusing at the moment 😬, sorry about that!
As a temporary workaround I disable the truncation when the component is selected, and allow users to toggle the truncate style when the button is clicked.
I also change the label from "No Wrap / Line Clamp" to "Single Line / Multi Line", hoping to make it easier to understand.

Another odd thing is that -webkit-box-orient is not recommended in the MDN docs, although it seems to work fine in all major browsers.

Yeah, I also saw that warning on the MDN docs, but it's surprising that they didn't offer any information about the alternative.😕
Maybe we should fallback to the filtering/transforming method you mentioned in the end.

[sampullman]

Sounds good, I'll take a look!

My guess is that it was pretty complicated to implement and maintain for browsers, and not many people are using the feature since truncating with JS works well enough most of the time (and sometimes is preferred).