feat: implement underline functionality to markdown editor

[penglezos]

Summary

This PR addresses the missing underline formatting option in the markdown editor's visual toolbar. While underline functionality was already available via keyboard shortcut (Ctrl+U), there was no visual button for users who prefer mouse interactions or are unaware of the hotkey.

Test plan

• Start the development server: npm run start
• Navigate to a markdown editor widget
• Add "underline" to the toolbar buttons configuration
• Verify the underline button appears in the toolbar with proper icon
• Test functionality:
  • Click underline button to apply formatting
  • Click again to remove formatting
  • Verify Ctrl+U hotkey still works
  • Confirm strikethrough text renders correctly in preview

Preview

underline.mov

Checklist

• I have read the contribution guidelines.

[martinjagodic]

@penglezos, why is it called horizontal-line instead of underline? I think we should call it for what it is to avoid confusion.

[penglezos]

@penglezos, why is it called horizontal-line instead of underline? I think we should call it for what it is to avoid confusion.

Hey Martin, thanks for the feedback!

Just to clarify, the first PR I opened was for underline, which applies inline text decoration. The second commit that I pushed is a separate feature that inserts a divider (currently named horizontal-line).

You're right that the name could be clearer. I think its better to rename it to horizontal-rule to better reflect its semantic meaning. That should avoid any confusion between actual text underlines and dividers.

[martinjagodic]

Ah, I get it now. Horizontal rule is better, yes. @demshy will review this PR then, he is the master of the editor.

[penglezos]

Ah, I get it now. Horizontal rule is better, yes. @demshy will review this PR then, he is the master of the editor.

Done. Renamed horizontal line to horizontal rule for better clarity. Waiting for the code review.

[martinjagodic]

Thanks @penglezos. I noticed you added clickStrikethroughButton in cypress/support/commands.js, but not for buttons introduced in this PR. Is there a reason for that? I would be great if we had minimal testing for all buttons.

[demshy]

I have two considerations about this, now that I have all the icons enabled in the editor:

1. The toolbar is getting a bit crammed and we will probably need to find a solution to group some stuff. Do you think we could move the horizontal rule to the dropdown menu next to the code block and other editor components? This just a suggestion and is up for debate.
   I'm not sure how much the whole toolbar concept will change once we move to Platejs so I don't know how much effort and thought we should put into the current markdown editor though. I'm trying to make it minimal so far, but with the possibilities of numerous new features that could be implemented fairly easily, we won't be able to have everything in the first level of the toolbar. Thoughts @martinjagodic ?
2. Could you adapt the icon sizing (especially the strikethrough from the previous PR) so they match the current ones a bit more? I think the Link icon is max right now and I wouldn't go bigger than that

[martinjagodic]

I agree with moving HR to components.

Let's not invest in a second level, because a new editor is coming up. I propose making all icons a little smaller, so that they still look okay on smaller screens.

[penglezos]

@demshy and @martinjagodic thanks for your feedback! I think we can abandon this PR in favor of the new editor and focus our efforts on contributing to that instead. It doesn’t make much sense to keep refining the current Markdown editor since it’ll be replaced soon. #7162 If you need any help with the new editor, just let me know!

[martinjagodic]

@penglezos, the new editor is not coming to production immediately. And when it does, it will exist alongside the old editor for backward compatibility. So this feature could still be useful for many users.