Reimplement code snippets in UI

[Saladoc]

What happened?

When the repository URL is long enough that it's forced to wrap in the repository details module the result is incoherent with regards to the box size and the line numbers.

Also, if it comes close to having to wrap, the text clashes with the bounds.

Reposilite version

3.x

Relevant log output

No response

[WithoutAName25]

That's an issue of vue-prism-editor: koca/vue-prism-editor#117

[dzikoysk]

This library has several issues and it's not frequently updated lately, so in the end we may just need to switch to another one :<

[dzikoysk]

Also, chaning tabs in card throws exception:

Uncaught (in promise) TypeError: Window.getComputedStyle: Argument 1 is not an object.
    setLineNumbersHeight Editor.ts:144
    handler2 Editor.ts:111
    promise callback*nextTick runtime-core.esm-bundler.js:246
    handler2 Editor.ts:110

Related to:

• https://github.com/koca/vue-prism-editor/issues/131

[dzikoysk]

https://github.com/koca/vue-prism-editor looks kinda abandoned, I think we should migrate to a new library that provides code highlighting / try to color those snippets without any library

[TheTechRobo]

No experience with Vue but how about https://github.com/justcaliturner/simple-code-editor ?

[dzikoysk]

Looks pretty nice, we could give it a try! Would you like to try to submit a PR? Here's the component we need to update:

• https://github.com/dzikoysk/reposilite/blob/main/reposilite-frontend/src/components/card/CodeSnippet.vue

[WithoutAName25]

I have implemented code snippets with simple-code-editor. I had to overwrite some default css (here) and i had to use this workaround. Maybe this library is better than the old one but it is not perfect. I don't know if we should search for another one or use this one.

[dzikoysk]

Nice! I think it's fine 🤔