fix(code-viewer): get rid of trailing lines

[P0lip]

Fixes https://github.com/stoplightio/platform-internal/pull/3901#issuecomment-671279905

I realllly hope this is the last PR 😆

[lottamus]

I yalced this into platform-internal and it's still doing a weird jump

And also not highlighting all of the lines

For comparison, here's how the indentation looks in production

@P0lip @wmhilton how about we switch to an open source code highlighter like https://github.com/react-syntax-highlighter/react-syntax-highlighter

[P0lip]

@lottamus
the jump from left to right is on purpose.
We adjust the size of sidebar so that all numbers can fit.
Previously, we used to have a pre-defined width, but this is no longer the case.
Right now, the width is adjusted to the number of digits.

And also not highlighting all of the lines

bahhhh, let me see why is this happening. 🙄

[lottamus]

We adjust the size of sidebar so that all numbers can fit.

I think we might be over adjusting in this case. I'm pasting in the platform-internal root package.json which only goes up to 3 digits. Maybe start the adjustment if we're at 5+ digits. Or even larger, I'd rather our default styling handles a majority of the use-cases so most users never see the jumping (unless they're looking at something juuuuuge)

[P0lip]

Speaking of code highlighting issue - I know why it's happening.
It's because we currently listen to window and root scroll events, but in case of Studio we have that fancy custom scrollbar.

I think we might be over adjusting in this case. I'm pasting in the platform-internal root package.json which only goes up to 3 digits. Maybe start the adjustment if we're at 5+ digits. Or even larger, I'd rather our default styling handles a majority of the use-cases so most users never see the jumping (unless they're looking at something juuuuuge)

Yeah, that makes sense. Will do.

[billiegoose]

It actually works quite well this time. At least in my testing in Storybook. I'll try it yalced into Studio next.

[billiegoose]

@P0lip @wmhilton how about we switch to an open source code highlighter like https://github.com/react-syntax-highlighter/react-syntax-highlighter

@lottamus Well, react-syntax-highlighter uses the exact same library (refractor) that we do, so I doubt it would be able to handle these large files. I can throw together a POC to compare though.

[billiegoose]

[billiegoose]

When yalced into Studio it broke the Try It component.

[P0lip]

@wmhilton do yo uhave the latest elements installed?
I fixed that issue in elements. It's not codeviewer's fault. It's TryIt component using safeStringify that returns undefined when you pass undefined.

[billiegoose]

Ahhh. So I gotta upgrade both at once huh? :eyeroll: OOOOOk lemme try that.

[P0lip]

For you reference
stoplightio/elements#514
https://github.com/stoplightio/platform-internal/pull/3906

[billiegoose]

Works perfectly.

[stoplight-bot]

🎉 This PR is included in version 3.0.0-beta.32 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[billiegoose]

@lottamus Well, react-syntax-highlighter uses the exact same library (refractor) that we do, so I doubt it would be able to handle these large files. I can throw together a POC to compare though.

@lottamus Here's you answer:

Firefox:

Chrome:

At the time I post this, my Chrome tab still hasn't recovered. My fans are spinning like crazy. Google Chrome Helper (Renderer) is using 100% CPU.