Line numbers don't handle auto-wrapping correctly

[DrMarkEy]

When a very long line is wrapped automatically, the wrapped line gets its own line number, which is then missing at the end of the text. Instead I would expect that the wrapped line has no line number, as in most text editors. The error is reproducable in the example at https://prism-editor.netlify.app/

[mikecbone]

I temporarily fixed this by disabling word wrap:

.prism-editor-wrapper .prism-editor__editor, .prism-editor-wrapper .prism-editor__textarea {
  white-space: pre !important;
}

[koca]

Thanks for the report @DrMarkEy . For now use @mikecbone solution. But im thinking about making linewrap optinal or disabling when using with linenumbers. 🤔
Thanks @mikecbone

[hwlmatt]

I worked around this by instead using PrismJs' line numbers plugin.

If anything, looking at it may help point in the right direction to resolve.

to try that way:

import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

Then add the class line-numbers to PrismEditor:
<PrismEditor class="editor line-numbers"...
or to a preceding element.

Then in method called by :highlight <PrismEditor :highlight=... I had to wrap the return in a code block and add the language-<language> class to it:

...
let type = 'handlebars'
let value = `<code class="language-${type}">${Prism.highlight(code, Prism.languages[type], type)}</code>`
return value
}

And so far so good:

EDIT:

almost forgot, you do need to left pad the textarea of course:

.prism-editor-wrapper .prism-editor__textarea {
    padding-left: 3.8em !important;
  }

[klmunday]

I worked around this by instead using PrismJs' line numbers plugin.

If anything, looking at it may help point in the right direction to resolve.

to try that way:

import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

Then add the class line-numbers to PrismEditor:
<PrismEditor class="editor line-numbers"...
or to a preceding element.

Then in method called by :highlight <PrismEditor :highlight=... I had to wrap the return in a code block and add the language-<language> class to it:

...
let type = 'handlebars'
let value = `<code class="language-${type}">${Prism.highlight(code, Prism.languages[type], type)}</code>`
return value
}

And so far so good:

EDIT:

almost forgot, you do need to left pad the textarea of course:

.prism-editor-wrapper .prism-editor__textarea {
    padding-left: 3.8em !important;
  }

This works for me until I try to type anything which causes the line numbers disappear. I took a look at Vue-Prism-Editor's code and from my understanding it restyles them whenever the code is updated - I can't seem to replicate this behaviour from a parent component, although I'm not too familiar with Vue so perhaps someone else would have more success

[ozanh]

Selam Mesut,

I had this problem as well.
I tried @mikecbone fix then line numbers become OK but for mobile content needs scrolling on X axis so I added following

.prism-editor__editor {
  white-space: pre !important;
}

.prism-editor__container {
  overflow-x: scroll !important;
}

This makes look visually OK but when I try to write something, text appears somewhere else in the document not at the cursor position 😄
Is there a work around or an upcoming patch?

EDIT
I found a work around, this works for me. Setting width to a big number lets cursor points the right position always which was broken by wrapped and unwrapped content.

.prism-editor__textarea {
  width: 999999px !important;
}
.prism-editor__editor {
  white-space: pre !important;
}
.prism-editor__container {
  overflow-x: scroll !important;
}

[koca]

Selam Ozan :)
I'm thinking about adding a prop to control word wrap settings. Thanks for the workaround/tip :)

[phybros]

@koca I'd be super interested in a setting to control word wrapping. Thank you for all your work on this!

[wagslane]

I'd like to bump this - Super important. Lmk if you want help @koca

[koca]

hey @lane-c-wagner :) feel free to send a PR 👍

[Herbata-Sys]

I'd be nice to have this props so again, bump. I need this for my project - word wrapping and working line numbers.

[robertsLando]

News on this?

[nicholasjperry]

News on this?

Wondering the same thing.