Merge pull request #505 from outline/jori/toolbar-select

Toolbar select tweaks

app/components/Editor/components/Toolbar/Toolbar.js

@@ -29,6 +29,7 @@ export default class Toolbar extends Component {
   @observable link: ?Node;
   @observable top: string = '';
   @observable left: string = '';
+  @observable mouseDown: boolean = false;
 
   props: {
     editor: Editor,
@@ -39,6 +40,13 @@ export default class Toolbar extends Component {
 
   componentDidMount = () => {
     this.update();
+    window.addEventListener('mousedown', this.handleMouseDown);
+    window.addEventListener('mouseup', this.handleMouseUp);
+  };
+
+  componentWillUnmount = () => {
+    window.removeEventListener('mousedown', this.handleMouseDown);
+    window.removeEventListener('mouseup', this.handleMouseUp);
   };
 
   componentDidUpdate = () => {
@@ -49,6 +57,15 @@ export default class Toolbar extends Component {
     this.link = undefined;
   };
 
+  handleMouseDown = (e: SyntheticMouseEvent) => {
+    this.mouseDown = true;
+  };
+
+  handleMouseUp = (e: SyntheticMouseEvent) => {
+    this.mouseDown = false;
+    this.update();
+  };
+
   showLinkToolbar = (ev: SyntheticEvent) => {
     ev.preventDefault();
     ev.stopPropagation();
@@ -78,6 +95,9 @@ export default class Toolbar extends Component {
     // don't display toolbar for code blocks, code-lines inline code.
     if (value.startBlock.type.match(/code/)) return;
 
+    // don't show until user has released pointing device button
+    if (this.mouseDown) return;
+
     this.active = true;
     this.link = this.link || link;
 
@@ -147,6 +167,7 @@ const Menu = styled.div`
   transform: scale(0.95);
   transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
     transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition-delay: 250ms;
   line-height: 0;
   height: 40px;
   min-width: 260px;