🚀 Features
- The minimum contrast ratio feature will now change luminance in the opposite direction if the contrast ratio isn't met (#3806, #3808) via @Tyriar. For example a red foreground on a slightly darker red background will try lighten the color and if the
minimumContrastRatio
option isn't met when#FFFFFF
is reached it will try moving it towards#000000
. This can cause somewhat unexpected results by changing explicitly styled whites to blacks for example but it's really good for accessibility. - The library now supports parsing
#rgb
,#rgba
,rgb(r, g, b)
andrgba(r, g, b, a)
color formats (#3815, #3819, #3823) via @ChaseKnowlden, @Tyriar - Opaque
selectionBackground
is now supported in the DOM renderer (#3839) via @Tyriar - The symbol powerline font glyphs now use custom rendering when
ITerminalOptions.customGlyphs
is enabled (#3856, #3862, #3866) via @Tyriar
This has multiple benefits:- A patched powerlines font doesn't need to be installed to render the most common characters
- Ugly lines due to anti-aliasing that can appear no longer do
- The glyphs always use greyscale anti-aliasing (not sub-pixel)
ITerminalOptions.lineHeight
is taken into account when rendering the glyph
📦 API
- The overview ruler is a companion feature to the decorations introduced in 4.18.0 which shows little indicators on the scroll bar (#3676, #3687, #3688, #3689, #3693, #3694, #3695, #3697, #3702, #3711, #3723, #3730, #3733, #3738, #3788, #3791, #3792, #3841) via @meganrogge, @Tyriar. To use it, add the
overviewRulerOptions
property to a decoration'sIDecorationOptions
and it will automatically show up in the overview ruler.The width of the resulting overview ruler is controlled byconst marker = term.addMarker(1); const decoration = term.registerDecoration({ marker, x: 5, overviewRulerOptions: { color: '#FF0000', position: 'left' } }); decoration.onRender(() => { decoration.element.style.backgroundColor = 'red'; });
ITerminalOptions.overviewRulerWidth
. - Decorations can now change a cell's background and foreground colors (#3775, #3782) via @Tyriar. When this is set, the minimum contrast ratio feature will also be in effect.
const decoration = term.registerDecoration({ marker, backgroundColor: '#ff0000', foregroundColor: '#ffffff' });
- Decorations can now specify the layer property to allow rendering above the selection (#3785, #3800) via @Tyriar
const decoration = term.registerDecoration({ marker, layer: 'top' });
- There's a new
selectionForeground
theme color, when set this will use a static color for selections (#3813) via @Tyriarconst term = new Terminal({ theme: { selectionBackground: '#000000', selectionForeground: '#FFFFFF' } });
🐞 Bug fixes
- Fix triple click selection edge case where initial line was getting unselected (#3669) via @silamon
- Fixing edge cases when clearing decorations via
Terminal.clear
(#3671, #3868) via @meganrogge - Handle missing compositionend events for Sogou IME (#3680) via @Eugeny
- Fix a bug when running emacs by preferring ST over BEL (#3704) via @meganrogge
- Fix Alt-N/E/U handling in macOS, handle Alt-Shift-Letter (#3726) via @Eugeny
- Fix caps lock while IMEs are being used preventing lowercase input (#3728) via @serkodev
- Exclude powerline characters from the minimum contrast ratio feature (#3740, #3742) via @meganrogge
- Send ctrl modifier for page up/down sequences (#3761) via @Tyriar
- Send record separator on ctrl+@ (#3763) via @robinfai
- Switching from webgl to dom renderer will now correctly reposition decorations (#3779) via @Tyriar
- Decorations are now rendered in the same frame as the buffer, ensuring they stay in sync (#3796, #3818) via @meganrogge
- Fire
onSelectionChange
whenTerminal.select
is called (#3805) via @Tyriar - Padding is now taken into account when converting mouse coordinates to cell positions (#3826) via @Tyriar
- Exclude box drawing and block glyphs from the minimum contrast ratio as they are typically used to blend with background colors (#3844) via @meganrogge
- Fix a minimum contrast ratio edge case with inverted text in the DOM renderer (#3846) via @meganrogge
- Only send the wheel mouse event when scrolling a line or more (#3869) via @pfitzseb
📝 Documentation and internal improvements
- Replace internal use of
getOption
/setOption
withoptions
(#3667) via @childrentime - Lint code using putout (#3674) via @coderaiser
- Improve the way the scroll bar is hidden when
scrollback
is0
(#3678) via @silamon - Remove unwanted console.log (#3685) via @Tyriar
- Replace deprecated String.prototype.substr (#3713) via @CommanderRoot
- Dependency updates (#3714, #3715) via @dependabot
- Consolidate powerline glyph detection (#3743, #3756) via @meganrogge
- Speed up decoration rendering (#3769) via @Tyriar
- Enable the search highlight all matches feature in the demo by default (#3786) via @Tyriar
- Simplify CSS rules (#3787) via @Tyriar
- Add a warning in the demo's implementation calling out the importance of flow control (#3789) via @Tyriar
- Deflake link provider tests (#3822) via @Tyriar
- Standardize internal handling of colors for simplicity (#3824) via @Tyriar
- Add convenient powerline symbol test button to demo (#3828) via @Tyriar
- Organize demo test buttons (#3852) via @umaxyon
- Re-enable webgl minimum contrast ratio tests (#3863) via @Tyriar
- Fix a typo in serialize addon test (#3865) via @mmis1000
🎉 New real-world use cases
📥 Addons
xterm-addon-search
- Support showing all find matches by leveraging decorations (#3698, #3707, #3708, #3709, #3710, #3736, #3750, #3757, #3767, #3768, #3811, #3835) via @meganrogge, @Tyriar
- Return the number of results when searching (#3716, #3731, #3745, #3752, #3793, #3831, #3874) via @meganrogge
- Allow external styling of the active result decoration via
.xterm-find-active-result-decoration
(#3802) via @Tyriar
xterm-addon-serialize
xterm-addon-web-links
- Expose
urlRegex
in public API (#3719) via @LuckyGeck - Handle wrapped lines properly (#3718) via @LuckyGeck
xterm-addon-webgl
- Simplified and sped up selection rendering by leveraging the decorations feature (#3782, #3860) via @Tyriar
🤝 Compatible addon versions
xterm-addon-attach@0.6.0
xterm-addon-fit@0.5.0
xterm-addon-ligatures@0.5.3
xterm-addon-search@0.9.0
xterm-addon-serialize@0.7.0
xterm-addon-unicode11@0.3.0
xterm-addon-web-links@0.6.0
xterm-addon-webgl@0.12.0
🌐 Website
- Add decorations to the demo (xtermjs/xtermjs.org#170) via @meganrogge
- Fix a typo in hooks guide (xtermjs/xtermjs.org#171) via @fixator10
- Fix handling of
}
,|
and~
in the demo (xtermjs/xtermjs.org#175) via @MOBUMIN