Updated shift post selection to use first shift position

refs https://github.com/TryGhost/Team/issues/2677

- When shift clicking on the first item, it no longer will select from top to that item. It will now just select that item.
- Updates event listeners to use mousedown to prevent text selection glitch

ghost/admin/app/components/multi-list/item.hbs

@@ -1,3 +1,3 @@
-<div role="menuitem" {{on "click" this.onClick capture=true}} data-selected={{this.isSelected}} {{on "contextmenu" this.onContextMenu}} ...attributes>
+<div role="menuitem" {{on "click" this.onClick capture=true}} {{on "mousedown" this.onMouseDown capture=true}} data-selected={{this.isSelected}} {{on "contextmenu" this.onContextMenu}} ...attributes>
     {{yield}}
 </div>

ghost/admin/app/components/multi-list/item.js

@@ -4,13 +4,11 @@ import {inject as service} from '@ember/service';
 
 function clearTextSelection() {
     if (window.getSelection) {
-        if (window.getSelection().empty) { // Chrome
+        if (window.getSelection().empty) {
             window.getSelection().empty();
-        } else if (window.getSelection().removeAllRanges) { // Firefox
+        } else if (window.getSelection().removeAllRanges) {
             window.getSelection().removeAllRanges();
         }
-    } else if (document.selection) { // IE?
-        document.selection.empty();
     }
 }
 
@@ -29,8 +27,11 @@ export default class ItemComponent extends Component {
         return this.selectionList.isSelected(this.id);
     }
 
+    /**
+     * We use the mouse down event because it allows us to cancel any text selection using preventDefault
+     */
     @action
-    onClick(event) {
+    onMouseDown(event) {
         if (!this.selectionList.enabled) {
             return;
         }
@@ -55,6 +56,23 @@ export default class ItemComponent extends Component {
         }
     }
 
+    @action
+    onClick(event) {
+        if (!this.selectionList.enabled) {
+            return;
+        }
+        const shiftKey = event.shiftKey;
+        const ctrlKey = event.ctrlKey || event.metaKey;
+
+        if (!ctrlKey && !shiftKey) {
+            return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        clearTextSelection();
+    }
+
     @action
     onContextMenu(event) {
         if (!this.selectionList.enabled) {
@@ -66,9 +84,9 @@ export default class ItemComponent extends Component {
         if (this.isSelected) {
             this.dropdown.toggleDropdown('context-menu', this, {left: x, top: y, selectionList: this.selectionList});
         } else {
-            const selectionList = this.selectionList.cloneEmpty();
-            selectionList.toggleItem(this.id);
-            this.dropdown.toggleDropdown('context-menu', this, {left: x, top: y, selectionList});
+            this.selectionList.clearSelection();
+            this.selectionList.toggleItem(this.id);
+            this.dropdown.toggleDropdown('context-menu', this, {left: x, top: y, selectionList: this.selectionList});
         }
 
         event.preventDefault();

ghost/admin/app/styles/layouts/content.css

@@ -189,6 +189,7 @@
 
 .gh-posts-list-item-group[data-selected] {
     background: linear-gradient(300deg, var(--whitegrey-l1) 75%, var(--white) 100%) !important;
+    user-select: none;
 }
 
 .gh-posts-list-item-group .gh-posts-list-item:hover .gh-list-data {

ghost/admin/app/utils/selection-list.js

@@ -139,6 +139,12 @@ export default class SelectionList {
         if (this.#frozen) {
             return;
         }
+        if (this.lastSelectedId === null) {
+            // Do a normal toggle
+            this.toggleItem(id);
+            return;
+        }
+
         // Unselect last selected items
         for (const item of this.lastShiftSelectionGroup) {
             if (this.inverted) {
@@ -152,10 +158,6 @@ export default class SelectionList {
         // todo
         let running = false;
 
-        if (this.lastSelectedId === null) {
-            running = true;
-        }
-
         for (const item of this.infinityModel.content) {
             // Exlusing the last selected item
             if (item.id === this.lastSelectedId || item.id === id) {