Xterm.js: Implement virtual selection

[Tyriar]

Handling selection manually, rather than relying on native web selection, will fix a bunch of issues that are introduced by the input helper text area, such as #68, #69 as well as:

• Double clicking on the prompt line being flaky due to focus shifting from .xterm to the text area.
• Double clicking on a URL/path to highlight the whole path (ie. don't use / and similar chars as separators)
• Selecting and copying multiple pages of the buffer
• Making the selection's line height exact so there are never any gaps between lines
• Don't drop the selection when there's a content change or viewport scroll https://github.com/sourcelair/xterm.js/issues/468#issuecomment-290909092

[parisk]

Great. Adding this to the milestone for the next release.

[parisk]

Removed this from the milestone as most important reason for this to be there was the right-click copy/paste regression, which is addressed now in #293 without virtual selection.

[shouze]

I have a question: will it be possible then to have an automatic copy of selection into pasteboard? (as it don't seems to work at least on macOS)

[parisk]

@shouze yep this can happen by utilising the hidden text area.

if you are having trouble right now with copying and pasting in xterm.js can you open a new issue please to track what is going wrong there?

[Tyriar]

@parisk I'll probably be able to pick this up in the next couple of months

[Tyriar]

Here's what I believe needs to happen for this:

• [ ] Disable native web selection
• [ ] Create selection model that's aware of the buffer and the way it continually trims itself (may be blocked on Buffer object introduced in https://github.com/sourcelair/xterm.js/pull/609)
• [ ] Attach mouse events to selection model
  
  
  
  • [ ] Simple drag and drop in viewport
  
  
  • [ ] Drag beyond viewport
  
  
• [ ] Visualize selection model on screen
• [ ] Hook up copy and paste
• [ ] Tests, tests, tests

Unknowns

• How do we keep the selection themable by consumers how we do right now via ::selection?

[vincentwoo]

I don't think you'll be able to maintain perfect backwards theming functionality (you'll probably need to theme a css class, like CodeMirror does), but I don't think that should be a blocker. If necessary, you can do a major version point upgrade. It should only be a minute's work to migrate a style.

[Tyriar]

Well the selection will likely be separate from the actual text, I'm thinking of just applying classes like the xterm-color-x ones to the selection as well. It would be a regression in VS Code is the main reason I'm after this, it's great for accessibility to invert the colors.

I don't think it would be worth a major version update to change this, I'm the only one doing it AFAIK.

[parisk]

@Tyriar since selection will have it's own DOM nodes, we can just use something like .xterm-selection for styling and also fall back to ::selection styling.

Last, there is no reason to issue a new major version for this, since we do not have an official, stable theming API yet.

[Tyriar]

@parisk web selection ::selection will be disabled completely as we will manage the selection model. But yes using classes that mirror the regular color classes should work fine.