Add a line to the code editor that indicates the 80th column#358
Conversation
There was a problem hiding this comment.
This doesn’t do anything, e.g. this <div> does not appear in the DOM. So I ended up appending it in JS; I’m sure there is a better way of doing this.
There was a problem hiding this comment.
It needs to be inside the data-montage-id="code-editor" div, as that's the root element of the component
|
It breaks after doing Cmd+ |
|
Ok, it seems completely misplaced to me at 100%. And even here it seems to clip a character slightly.
|
There was a problem hiding this comment.
I suspect we'll need to actually measure the width of a character and set it explicitly.
There was a problem hiding this comment.
Manually measuring with dev tools looks like 80 characters is 640px wide. 702px seems exactly like what I'd expect at 100%, but suffers the same 110% offset issue as noted by stuk.
Can we put the boundary line inside the code area so we don't need to account for the gutter in our positioning? Otherwise we nee to measure that to account for it's 50px offset.
Relevant: codemirror/codemirror5#541
I'd also be happy with a presentation of the column the cursor is in somewhere, we just don't have anywhere to display that easily right now.
And this thing isn't a real priority, I was hoping it would be quick.
EDIT: 50px gutter + 12px padding + 640px offset = 702px. Would be nice to not have to deal with all the offsets in placing this, might be less prone to breaking when scaling.
EDIT: Nope, no more prone to the scaling issue when it's "inside" well that's unfortunate.
3 participants
https://montage.atlassian.net/browse/FIL-311