Explore others mechanisms to handle hiding icons on small device

[SkipDead]

Hi,

First thank you for this amazing tool that is Carta. I really love your simple approach for a markdown Editor. I got easily lost on milkdown and your lib was doing exactly what I needed for my app.

I spotted a strange behavior while I was implementing your lib onto my UI.

Current behavior : As the commit hide icons on small devices goal was to hide the icon on small device (such as small screen or mobile screen), the condition for checking the width of screen to hide or not the icons may have been incorrectly used.

https://github.com/BearToCode/carta/blob/a36b57f0c423c17bbe1500f2a243d1f1376e43d3/packages/carta-md/src/lib/CartaEditor.svelte#L101

the bind:clientWidth will actually give you the width of the div, and not the screen. If it was intentional, the following behavior happens when we voluntary wants the editor to have a smaller width on a wide screen :

Screenshot of the width of the div just before its limit :

Screenshot when the width is below the threshold :

As shown above, in a screen where the editor could easily display the icons, it will hide it because of the current threshold : https://github.com/BearToCode/carta/blob/a36b57f0c423c17bbe1500f2a243d1f1376e43d3/packages/carta-md/src/lib/CartaEditor.svelte#L35-L39

option 1 : If it was intentional to hide the icons depending on the div width and not the width screen : To not disrupt the current implemented behavior, I was thinking of allowing the dev to inject is own function to hideIcons, and having the current behavior as its default one. It will not disrupt current implementations and also enable new ones to changes its behavior I was thinking of maybe allowing an option to enable the dev to put is own condition to hide the icons.

option 2 : If the goal was to currently check the window width : We could also implement the option 1, but we should fix the width source form the div to actually the window width.

I will try during the week to come up with a possible design solution for that.

Thanks again for this amazing lib !

[BearToCode]

Hi! First of all thanks for the kind works, I'm glad you like the editor.

I designed the icons to be hidden when the editor size is below a certain threshold, and it works as expected. However, I must admit this is not actually a great solution, as all the icons just suddenly disappear, maybe when there is also some space to display all of them.

I propose this solution, which is also what is implemented by GitHub: display all icons that fit in the editor. Then, take those that do not fit, if any, and add them inside an additional dialog avaiable next to the icons. This way, all icons are always available, and there is no sudden transition from having all icons and not being any.

When all icons fit it's just like this:

When some icons do not fit it's like this:

Let me know what you think!

[SkipDead]

Hey,

thanks for the fast reply. I have actually seen it last week but didnt have the time to address it because of work.

I agree with your idea yes. Now it is just a matter of how we handle it.

Going with css purely or the svelte way. I do not see a problem handling dimensions and hiding with svelte for a quick solution, but we have to consider what the limitation could be in the future, especially if you plan on making carta more customizable.

I do not have for now the concrete answer as I just started to code with svelte since last october, maybe you do more than me.

In the Github screenshot, the dropdown list name could be a metadata from the icon so we can display it.

[BearToCode]

Probably doing that in Svelte is quite easy. I might do that myself, but I won't be able to work on this for at least a couple of weeks.

[github-actions[bot]]

:tada: This issue has been resolved in version carta-md-v3.6.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[BearToCode]

Ehy, I decided to just implement the menu immediately. I meant to preview it on a different branch but I accidentally pushed it to the master branch, and it got published... Still, see if you like it (try resizing the editor)