Auto-resize commit editor

#1

Is there any way using CSS (or however) to make the commit editor auto-resize to text? I was trying hard, but the there are so many nested and interdependent elements that I gave up.

Yes, I know that I can use the fullscreen editor, but for me the better workflow would be auto-resizing it.

Thanks for any help.

#2

You’d have to set the autoHeight property on the <atom-text-editor> element to “true”, I believe, which I don’t think you can do with CSS. I’m trying to remember if doing that broke something else in the styling :thinking: We should be able to try it out in the dev tools to see.

#3

Property or attribute? I’ve tried both, on the <atom-text-editor> element, using devTools, and neither worked :thinking:

#4

Oh, it looks like you can’t modify that element property after creation. Nuts. Okay, this is something we’d have to do at editor creation, then.

Can you file an issue on atom/github for this?

#5

Created a bare issue here.

Btw, checking codebase, I’ve tried $0.getModel().update({ autoHeight: true }) (where $0 is the <atom-text-editor>) — does that fall under the “you can’t modify that element property after creation”, too, or does that possibly point to a deeper issue?

1 Like
#6

Thanks for the issue :bowing_man:

And yeah, I was playing around with that too. Interestingly autoHeight is accounted for in TextEditor’s update method:

I’m not sure why it isn’t working. Colliding with a fixed height applied from CSS maybe?

#7

Yes, probably… There’s a height: 100px on the editor coming from somewhere and when I remove it, it briefly (until I interact with the editor) autoresizes the editor (if I previously set the autoHeight: true) – but unsetting it via stylesheet (height: auto) collapses it altogether, so not sure what I can do from my end.

Anyway, thanks for help, so far.

#8

I’ve actually been able to make this happen using just CSS:

.github-CommitView-editor atom-text-editor {
    height: auto;
    min-height: 70px;
    contain: none !important;
    & * {
        contain: none !important;
    }
    .scroll-view {
        overflow: auto !important;
        position: relative !important;
    }
    .horizontal-scrollbar {
        // must not be 0px else the editor won't resize on line remove
        height: 1px !important;
    }
    .scrollbar-corner,
    .vertical-scrollbar {
        display: none;
    }
}

There’s a tiny 1px scroll caused by the .horizontal-scrollbar which the editor uses to calculate its height, and which can’t be hidden (only resized down).

Plus there’s an issue of very slow animation when removing a line which isn’t very nice.

Other than that, works fine.

1 Like