1 files changed, 12 insertions, 17 deletions

diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 07439825f..dc630af74 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -56,7 +56,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     @observable private activeListType: string = "";
     @observable private activeAlignment: string = "left";
 
-    @observable private brushIsEmpty: boolean = true;
     @observable private brushMarks: Set<Mark> = new Set();
     @observable private showBrushDropdown: boolean = false;
 
@@ -600,12 +599,12 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
 
     createBrushButton() {
         const self = this;
-        function onBrushClick(e: React.PointerEvent) {
+        const onBrushClick = (e: React.MouseEvent) => {
             e.preventDefault();
             e.stopPropagation();
             self.TextView.endUndoTypingBatch();
             UndoManager.RunInBatch(() => self.view && self.fillBrush(self.view.state, self.view.dispatch), "rt brush");
-        }
+        };
 
         let label = "Stored marks: ";
         if (this.brushMarks && this.brushMarks.size > 0) {
@@ -622,8 +621,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         //onPointerDown={onBrushClick}
 
         const button = <Tooltip title={<div className="dash-tooltip">style brush</div>} placement="bottom">
-
-            <button className="antimodeMenu-button" style={this.brushMarks?.size > 0 ? { backgroundColor: "121212" } : {}}>
+            <button className="antimodeMenu-button" onClick={onBrushClick} style={this.brushMarks?.size > 0 ? { backgroundColor: "121212" } : {}}>
                 <FontAwesomeIcon icon="paint-roller" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.brushMarks?.size > 0 ? 45 : 0}deg)` }} />
             </button>
         </Tooltip>;
@@ -636,13 +634,12 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
             </div>;
 
         return (
-            <ButtonDropdown view={this.view} key={"brush dropdown"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
+            <ButtonDropdown view={this.view} key={"brush dropdown"} button={button} openDropdownOnButton={false} dropdownContent={dropdownContent} />
         );
     }
 
     @action
     clearBrush() {
-        RichTextMenu.Instance.brushIsEmpty = true;
         RichTextMenu.Instance.brushMarks = new Set();
     }
 
@@ -650,26 +647,22 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     fillBrush(state: EditorState<any>, dispatch: any) {
         if (!this.view) return;
 
-        if (this.brushIsEmpty) {
+        if (!Array.from(this.brushMarks.keys()).length) {
             const selected_marks = this.getMarksInSelection(this.view.state);
             if (selected_marks.size >= 0) {
                 this.brushMarks = selected_marks;
-                this.brushIsEmpty = !this.brushIsEmpty;
             }
         }
         else {
             const { from, to, $from } = this.view.state.selection;
             if (!this.view.state.selection.empty && $from && $from.nodeAfter) {
-                if (this.brushMarks && to - from > 0) {
+                if (to - from > 0) {
                     this.view.dispatch(this.view.state.tr.removeMark(from, to));
                     Array.from(this.brushMarks).filter(m => m.type !== schema.marks.user_mark).forEach((mark: Mark) => {
                         this.setMark(mark, this.view!.state, this.view!.dispatch);
                     });
                 }
             }
-            else {
-                this.brushIsEmpty = !this.brushIsEmpty;
-            }
         }
     }
 
@@ -817,8 +810,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
                 <button className="remove-button" onPointerDown={e => this.deleteLink()}>Remove link</button>
             </div>;
 
-        return <ButtonDropdown view={this.view} key={"link button"} button={button} dropdownContent={dropdownContent}
-            openDropdownOnButton={true} link={true} />;
+        return <ButtonDropdown view={this.view} key={"link button"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} link={true} />;
     }
 
     async getTextLinkTargetTitle() {
@@ -1027,6 +1019,7 @@ interface ButtonDropdownProps {
     openDropdownOnButton?: boolean;
     link?: boolean;
     pdf?: boolean;
+
 }
 
 @observer
@@ -1071,9 +1064,11 @@ export class ButtonDropdown extends React.Component<ButtonDropdownProps> {
         return (
             <div className="button-dropdown-wrapper" ref={node => this.ref = node}>
                 {!this.props.pdf ?
-                    <div className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
+                    <div className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.props.openDropdownOnButton ? this.onDropdownClick : undefined}>
                         {this.props.button}
-                        <div style={{ marginTop: "-8.5" }}><FontAwesomeIcon icon="caret-down" size="sm" /></div>
+                        <div style={{ marginTop: "-8.5", position: "relative" }} onPointerDown={!this.props.openDropdownOnButton ? this.onDropdownClick : undefined}>
+                            <FontAwesomeIcon icon="caret-down" size="sm" />
+                        </div>
                     </div>
                     :
                     <>