microsoft / microsoft/vscode

Feature Request: Add support for editor Canvas Padding via a padding.maxEditorCanvasWidth Property

Open
#334,959 0 comments 0 reactions 1 assignee Assigned to @alexdima View on GitHub
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

Wide editor containers are useful for navigation and comparison, but full-width text can be uncomfortable to read.

VS Code and Monaco support **Container padding** which unfortunately also moves the gutter and scrollbar inward.

This feature lets the editor retain its full container width while centering a narrower text viewport between its existing gutter and minimap - or if neither of those are enabled provide a nice bordered editing canvas that is limited to a fixed text width that is imminently readable. This is very useful for non-code/text editing that uses word wrapping by default like Markdown or plain text editing (and specifically Markdown editing!).

This was inspired by this Feature Request in Monaco:

https://github.com/microsoft/monaco-editor/issues/5386

But looks like the implementation belongs in microsoft/vscode because Monaco consumes these shared editor sources.

## Example Rendering

Image

## Proposed API

VS Code setting:

```json
"editor.padding.maxEditorCanvasWidth": 920
```

Monaco editor option:

```js
monaco.editor.create(container, {
wordWrap: 'on',
padding: { top: 16, bottom: 16, maxEditorCanvasWidth: 920 }
});
```

- The value limits the text viewport in CSS pixels, excluding gutters, minimap,
and vertical scrollbar.
- The default is `0` (disabled), preserving the existing layout. Values are
validated as integers from `0` through `10000`.
- Extra horizontal space is divided around the text viewport. On narrow editors,
the cap adds no extra space.
- This does not enable word wrapping. Existing wrapping and horizontal scrolling
settings continue to apply within the text viewport.
- Runtime option updates and resizing recalculate the layout. Each side-by-side
diff pane applies the cap independently.
- Existing top and bottom padding remain independent. Explicit left/right padding
is not part of this proposal.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.