add fullscreen to code blocks

[Winner95]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

I added fullscreen functionality for code blocks via panel, shown on hover. There are some updates for highlight code block, which allow division of concerns in code:

• classnames starting with js- for event-listeners - in order to be independent from markup.
• added 'highlight__panel-action', which allow to add several elements (action-icons, e.g. copy) by the same pattern, which will result in proper styling
• added store of window scroll position and preventing scroll on document on fullscreen mode
• added event-listener for escape key on keyboard for switching off the full-screen
• scss is written in BEM, using some utility classes.
• in order to keep size of markdown_parser_spec.rb below 250 lines, divide it into two files.
• added padding for scrolled code on right side

This is how highlight block was before:

This is after:

Related Tickets & Documents

Closes #8990

QA Instructions, Screenshots, Recordings

• add different code blocks to the page
• hover over code blocks to see the fullscreen button
• click on button to enter fullscreen mode
• click on button back / press 'escape' button

Added tests?

• yes
• no, because they aren't needed
• no, because I need help

Added to documentation?

• docs.forem.com
• readme
• no documentation needed

PS: I hope this pull-request will be helpful:)

[citizen428]

Tried it out locally, works well! Thanks for the contribution 😃

[ludwiczakpawel]

Oh, this works great, lovely job!

I have few tiny requests but nothing really major - left comments in the code..
Also, is there a chance to simplify that markup? It feels a bit overkill for one button:

[Winner95]

@ludwiczakpawel thank you for your feedback, updated PR, reduced markup and kept possibility to add any new buttons in action-panel

[ludwiczakpawel]

One issue in the comments, though not a blocker.

But also, I've just realized that old posts do not have an icon in the code blocks:

I guess it's because markup is not generated on the fly but stored somehow? I don't know tbh...

I don't think it matters that much for "older posts" so if there's not an easy way to fix it, I'd at least try to hide it for older posts and make this functionality "available" for new posts only.

[ludwiczakpawel]

There's one last thing we could try to fix... So this style changes a little bit the behavior of how overflow looks like.. On prod, when you have long lines in highlight the code is actually from edge to edge when scrolling.

Because of that additional styling here ^ there's an offset on the left and right side, defined by the padding, so the code is no longer from edge to edge.

I do understand why you have this styling here (so the buttons are sticked to the corner of the code block), although maybe we could try to bring the previous styling back (so code will be edge to edge when scrolling). I think the trick here is to move the padding from the outer .highlight to the inner one. But this may need a bit more testing though.

If you need help with it, I'm happy to jump in.

[Winner95]

@ludwiczakpawel, sure, I will check it!

[Winner95]

I move padding to inner element - .highlight, where overflow is and it worked. Now we also have proper calculation of paddings (screenshot will be attached) for wide scrollable area (before text had no right padding at the end of the line).

[rhymes]

@ludwiczakpawel

I guess it's because markup is not generated on the fly but stored somehow? I don't know tbh...

Yes, on save an article turns the markdown into HTML, that's stored in the DB and in the cache at the first request. Everytime an article is updated the cache is wiped and the HTML version in the DB is overwritten.

If we need to update all old articles we need an update script to resave all existing articles to update their markup. It's a possibility.

[benhalpern]

This looks great to me.

@ludwiczakpawel @rhymes Because it has the if ... action built in, this is resilient to the old posts not immediately being compatible....

We'll handle this scenario as a one-off, but yeah we should seek to create a more general framework around backfilling breaking changes. There's no easy answer, but we're definitely outgrowing the old fragile way quickly.

@Winner95 only thing left to do is make sure all the tests are updated. It looks like the only failing tests are approval tests. See info here: https://docs.forem.com/tests/approvals-tests/

I approve this pending the tests passing.

[nickytonline]

Thanks so much for the PR @Winner95. Any chance you can put some screenshots in the PR description showing the functionality in action. Thanks!

[nickytonline]

Thanks for making the change @Winner95! 🚀

[ludwiczakpawel]

🎉🎉🎉