diff --git a/internal_packages/composer/lib/composer-view.jsx b/internal_packages/composer/lib/composer-view.jsx
index c7b84e787..1e4ba1eb2 100644
--- a/internal_packages/composer/lib/composer-view.jsx
+++ b/internal_packages/composer/lib/composer-view.jsx
@@ -254,6 +254,13 @@ export default class ComposerView extends React.Component {
return (
•••
+
+
+
);
}
@@ -264,6 +271,15 @@ export default class ComposerView extends React.Component {
this.setState({showQuotedText: !this.state.showQuotedText});
}
+ _onRemoveQuotedText = (event) => {
+ event.stopPropagation()
+ const {session, draft} = this.props
+ session.changes.add({
+ body: QuotedHTMLTransformer.removeQuotedHTML(draft.body),
+ })
+ this.setState({showQuotedText: false})
+ }
+
_renderFooterRegions() {
return (
diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less
index 999035ca4..799956027 100644
--- a/internal_packages/composer/stylesheets/composer.less
+++ b/internal_packages/composer/stylesheets/composer.less
@@ -295,12 +295,33 @@ body.platform-win32 {
margin: 0 8px;
.quoted-text-control {
- margin: @spacing-standard;
+ position: relative;
// The quoted-text-control has no top margin since the
// div[contentedtiable] has 10px of bottom padding. It's better to
// put the padding on the contenteditable so the bottom looks nice
- // in popout windoes when there's no quoted text control.
- margin-top: 0;
+ // in popout windows when there's no quoted text control.
+ margin: 0 @spacing-standard @spacing-standard 0;
+
+ .remove-quoted-text {
+ display: none;
+ cursor: pointer;
+ position: absolute;
+ z-index: 2;
+ right: -6px;
+ top: -6px;
+ border-radius: 0 0 0 3px;
+ &:active {
+ background: none;
+ -webkit-filter: brightness(95%);
+ }
+ img {
+ height: 24px;
+ }
+ }
+
+ &:hover .remove-quoted-text {
+ display: block;
+ }
}
div[contenteditable] {