Docker compose line numbers stop for large files

[paulrobinsontkd]

I am importing some new containers which have quite large docker compose files into compose.yaml section, after a certain amount of lines the line number stops. (see screenshot)

[louislam]

Unfortunately, it is a upstream bug: https://github.com/koca/vue-prism-editor/issues/87

[paulrobinsontkd]

Looks like it also causes an issue with wrapping as the compose.yaml that is saved has the last few lines wrapped and becomes invalid when i try to use it.

Guess we will have to wait for the upstream component to be fixed for this issue to be resolved.

Love the application though, great product :)

[dragonfire1119]

Unfortunately, it is a upstream bug: koca/vue-prism-editor#87

Uncertain whether this issue will ever be resolved, given that the repository has been without maintenance for two years.

[BossMBGaming]

Looks like it also causes an issue with wrapping as the compose.yaml that is saved has the last few lines wrapped and becomes invalid when i try to use it.

Guess we will have to wait for the upstream component to be fixed for this issue to be resolved.

Love the application though, great product :)

The issue is caused by line wrapping. I will do some research and see if I can figure out how to fix it. No promises though I have no experience with vue. But it will be a great way to contribute to dockge (and learn something new). I am in uni so it will be in my spare time so no promises or timeline on if or when I may get a working fix.

[BossMBGaming]

Looks like it also causes an issue with wrapping as the compose.yaml that is saved has the last few lines wrapped and becomes invalid when i try to use it. Guess we will have to wait for the upstream component to be fixed for this issue to be resolved. Love the application though, great product :)

The issue is caused by line wrapping. I will do some research and see if I can figure out how to fix it. No promises though I have no experience with vue. But it will be a great way to contribute to dockge (and learn something new). I am in uni so it will be in my spare time so no promises or timeline on if or when I may get a working fix.

Update: I have finally gotten the code base to work. I was having a lot of issues getting node to cooperate. But the code base is working now with live reload. I need to read through the code and try to figure out how exactly it works. And then I will see if I can figure out a way to fix the line wrapping issue.

@louislam can you advise on the best way to give updates pertaining to the progress I may or may not be making? Should I keep making comments under this issue or would a discussion thread be better?

[louislam]

Yes, you can comment here.

You meant you are fixing vue-prism-editor's bug?

[BossMBGaming]

Yes the line number issue in vue-prism-editor, after I fix it, I don't know how exactly it would be merged. As the main repo seems to be abandoned, but we will cross that bridge after I have fixed the issue (if I can).

[louislam]

Yes the line number issue in vue-prism-editor, after I fix it, I don't know how exactly it would be merged. As the main repo seems to be abandoned, but we will cross that bridge after I have fixed the issue (if I can).

Feel free to fork it into a new npm package, something like @bossmbgaming/vue-prism-editor.

So that Dockge can depend on your package.

[BossMBGaming]

Here to report that I have made some progress, I now get line numbers to be repeated if the line wraps, I don't know if I'll stay with this style as yet but this is the quickest and simplest solution that has worked (and the first and only time the code I have added hasn't caused the page to not render and give me an error about code not related to mine that seems to happen as a result of my code and the page not getting rendered). As I said before I am not familiar with Vue and I have a bit more understanding of both Vue and the codebase at this point.

Main Update: Lines that wrap now have line numbers that repeat.

Now I have to learn about npm and how to upload the new build and then I will provide the link once I have done so. I have primarily used Python, docker, and basic HTML, CSS, and JavaScript. I am fairly new to the node.js ecosystem and have a lot to learn. But I will keep you updated, on when I have done this. But here is the link to my repo if you want to check it out https://github.com/BossMBGaming/vue-prism-editor

I would ideally like to learn Vue properly and refactor this entire project with more up-to-date Vue 3 code structure, semantics, and syntax. In hopes of improving the code performance as my fix was pretty hacky. I also included a function that would update the line numbers whenever the browser window is resized and not only on input.

[BossMBGaming]

Apologies for the lack of updates into my progress, but after further testing I found that the line numbers wouldn't always be accurate. Depending on the length of words and how the wrapping occurred the numbering would be slightly off. And between university and the holiday festivities I didn't have much time or energy/motivation to work on this project.

I will be on a break from university soon and plan to put in some work into this project again. But thus far all my research and experimentation has not been promising. And I have been unable to find a method that works to calculate the line numbers accurately with line wrapping enabled. I have some more ideas that I have yet to implement, and I hope to test them soon.

[andershedberg]

While waiting for a fix I discovered that I can place the cursor at the correct place, make the font very small (not possible to read) with [Ctrl]+[Minus] and then copy the text into the file [Ctrl]+[v] and save/deploy it. (This works for adding my very long API-key to a command-entry)

(Mentioned in the Vue-issue is a workaround by disabling wrapping as well, but that is to advanced for me)

[scottini]

I would add that, with large .env files, it becomes very slow and almost unusable.

Is it plausible to think of a component replacement?

For example, could CodeJar (https://github.com/antonmedv/codejar) work?

[Aetherinox]

Something to add here. If replacing the dependent package is not an option right now; would a possible other solution be allowing the two middle containers to be horizontally resized with a resize bar?

Wouldn't be as bad if I could make the right side codebox wider when I'm in need of reading the code, and then just resize the terminal side wider when I need it.

Only way I've temp fixed it was using stylebot to decrease the font size.

[DerLeole]

It's not directly related to the prism editor upstream bug, but why not switch to another editor if vue-prism-editor is no longer maintained?

After some research https://github.com/logue/vue-codemirror6 seems like a good candidate. The API it provides is similar to the one from prism, it is actively maintained, based upon a big existing code editor project, and customizable.

Other alternatives I found (though the codemirror6 one does seem like the best overall fit):

• https://github.com/justcaliturner/simple-code-editor
• https://github.com/imguolao/monaco-vue