Max BartenevandMattermost Build caaec8cda5 Add a button to quote text selected in a message (#39237)
* Add a button to quote text selected in a message

Selecting text in a post in the center channel, RHS or Threads view shows a
floating "Quote selection" button at the end of the selection. Clicking it
appends the selection as a Markdown blockquote to the message box of the same
channel or thread and leaves the caret on an empty line below it, in both the
plain text and the WYSIWYG editors.

Fixes https://github.com/mattermost/mattermost/issues/39236

* Address review feedback on quoting selected text

- Determine the selection direction from its boundary points so a left to
  right selection that ends on an element containing its start isn't treated
  as right to left.
- Keep a quote queued while the message box is busy rewriting the draft and
  add it once it's done, but still drop it when the message box can't be used.

* Add E2E tests for quoting selected text

Cover quoting a selection into the channel message box and posting it with a
reply, a right to left selection added after an existing draft, quoting from
the RHS into the thread reply box, and typing the reply below the quote in
the WYSIWYG editor. Text is selected by dragging the mouse like a user does.

* Address UX review feedback on quoting selected text

- Keep the Markdown formatting of the quoted text (headings, lists, emphasis,
  code blocks, links, mentions, hashtags) by converting the selected HTML back
  to Markdown, in both the plain text and WYSIWYG editors.
- Place the quote button next to the first selected character instead of the
  caret, which browsers report at the end of the previous line when a
  selection starts at the beginning of a wrapped line.
- Don't offer to quote when the target message box can't be used: archived
  channels, DMs with deactivated users, threads whose root was deleted, or
  without permission to post.
- Make the button reachable with Tab and dismissable with Escape, returning
  the focus where it was, and show it for selections made without the mouse.
- Mix the hover color with the background instead of using transparency.

* Update the button visibility ref in a layout effect

Writing a ref during render isn't allowed, since React can discard a render without rolling the write back.

* Use the shared Turndown converter for quotes

Convert quoted selections with utils/turndown.ts, which already handles the
markup of rendered messages for pasting, instead of a separate converter, so
quoting and copy-pasting a message produce the same Markdown.

- Add a rule for user mentions to the shared converter so that they keep the
  username rather than the display name, for pasting too.
- Drop the data-language attribute on code blocks. When only part of a code
  block is selected, its language label is copied along with the selection
  instead.

* Address dev review feedback on quoting selected text

- Don't offer to quote burn-on-read posts, which can't be copied either, so
  that they aren't kept around after they're deleted.
- Leave the user's selection as is instead of narrowing it to the message
  text, so a selection running into the author name, attachments or reactions
  can still be copied as a whole. Only the message text is quoted.
- Support quoting in channel and thread pop-out windows.

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
2026-10-29 20:10:17 -04:00
2026-10-04 12:35:53 +08:00
2018-05-30 10:23:25 -04:00

Mattermost logo

Mattermost is an open core, self-hosted collaboration platform that offers chat, workflow automation, voice calling, screen sharing, and AI integration. This repo is the primary source for core development on the Mattermost platform; it's written in Go and React, runs as a single Linux binary, and relies on PostgreSQL. A new compiled version is released under an MIT license every month on the 16th.

Deploy Mattermost on-premises, or try it for free in the cloud.

mattermost user interface

Learn more about the following use cases with Mattermost:

Other useful resources:

Table of contents

Install Mattermost

Other install guides:

Native mobile and desktop apps

In addition to the web interface, you can also download Mattermost clients for Android, iOS, Windows PC, macOS, and Linux.

Get Mattermost on Google Play Get Mattermost on the App Store Get Mattermost on Windows PC Get Mattermost on Mac OSX Get Mattermost on Linux

Get security bulletins

Receive notifications of critical security updates. The sophistication of online attackers is perpetually increasing. If you're deploying Mattermost it's highly recommended you subscribe to the Mattermost Security Bulletin mailing list for updates on critical security releases.

Subscribe here

Get involved

Learn more

License

See the LICENSE file for license rights and limitations.

Get the latest news

Contributing

Small Image

Please see CONTRIBUTING.md. Join the Mattermost Contributors server to join community discussions about contributions, development, and more.

S
Description
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
Readme AGPL-3.0, Apache-2.0
2.6 GiB
0 Stars 3 Watchers 0 Forks
Languages
TypeScript 48.7%
Go 41.9%
JavaScript 5.2%
SCSS 2.3%
HTML 1.4%
Other 0.3%