Line number misalign with code

valentinoli commented 3 years ago

I have around 150 lines of code, and the line numbers misalign with the code lines. Do you know how I can fix this? I am using version 1.2.2.

valentinoli commented 3 years ago

My code:

<template>
  <client-only placeholder="Loading...">
    <!-- line numbers don't align correctly -->
    <prism-editor
      v-model="code"
      v-bind="$attrs"
      class="my-editor my-6"
      :highlight="highlighter"
      style="max-height: 300px"
    ></prism-editor>
  </client-only>
</template>

/* required class */
.my-editor {
  /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
  background: #2d2d2d;
  color: #ccc;

  /* you must provide font-family font-size line-height. Example: */
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* optional class for removing the outline */
.prism-editor__textarea:focus {
  outline: none;
}

WithoutAName25 commented 2 years ago

That happens on line wrapping:

1    First very long line that is to long for
2    one line
      Second line

Alex7TCK commented 2 years ago

bump.. i need this fix

paynebc commented 2 years ago

me, too. This is really important

koca commented 2 years ago

Sorry guys but i dont see any issues. Can you provide an example via codesandbox or stackblitz?

koca commented 2 years ago

i will reopen this issue once you have the example link. :)

paynebc commented 2 years ago

Here's an example: https://codesandbox.io/s/condescending-star-5mrvg?file=/src/components/HelloWorld.vue

This is what it results in: Screenshot 2022-02-10 at 10 05 06

dzikoysk commented 2 years ago

feel free to reopen this issue once you have the example link.

@koca Users cannot reopen issues closed by maintainer. The issue is quite common, it happens for long text that cannot fit into fixed width, so it breaks lines on wrapping. I'm not sure if closing this in such way is a good approach as most of people in the end may need to add some tricky workarounds based on #87 :)

Only in this repo:

It's all caused by the fact that vue-prism-editor does not support horizontal scrolling of content, would be great to have it fixed! :) Or at least mentioned in README with a note, that for know it's not supported, so people can save some time for cases that kinda require such feature.

koca commented 2 years ago

Hey @paynebc Thanks for the repro. This is a known issue, I will try to fix it this weekend. Hey @dzikoysk thanks for the feedback, im not sure whats wrong with closing duplicate issues and asking for a repro i think u misunderstand. It wasn't not my intend at all. I didnt have time recently however i will try to fix those issues this weekend im also working on a new editor which will be based on hooks. So people can have more control over the editor. Anyway i will let you guys know once i have the fixes. :)

dzikoysk commented 2 years ago

Oh, it was just a note to feel free to reopen this issue, nothing more 😛 I could separate this from the rest, as I see it could sound unpleasant, and if so, I'm sorry.

Speaking of editor, it's always good to see new libs for Vue3, most of them are ported from 2.x and tends to fail at some point. Even with some reported glitches, in general vue-prism-editor works as expected. I've also noticed some problems related to selecting content on horizontally scrolled prism area, but I guess it was related to workarounds for the given issue, so I'm looking forward the next release :)

koca commented 2 years ago

All good. You are right about the feel free to reopen this issue part i was sleepy and i was just copy pasting haha :) i've updated my comments ^^ Thanks :)

Alex7TCK commented 2 years ago

any news? :( @koca

koca commented 2 years ago

Hey @Alex7TCK i added a prop to toggle word wrap but there is an issue with it. Once i fix the issue i will release a new version. In the meantime you can use the workarounds discussed here https://github.com/koca/vue-prism-editor/issues/87#issuecomment-726228705