Drag-n-drop re-ordering of tags in post settings menu

refs TryGhost#5976
- adds `onChange` handler to `gh-selectize` component to update the `selection` property when selectize's value is changed (eg, by the drag_drop plugin updating the order)
- adds the `drag_drop` plugin to the list of selectize plugins used by the tags input on the post settings menu

core/client/app/components/gh-selectize.js

@@ -3,6 +3,14 @@ import EmberSelectizeComponent from 'ember-cli-selectize/components/ember-select
 
 export default EmberSelectizeComponent.extend({
 
+    selectizeOptions: Ember.computed(function () {
+        const options = this._super(...arguments);
+
+        options.onChange = Ember.run.bind(this, '_onChange');
+
+        return options;
+    }),
+
     _dontOpenWhenBlank: Ember.on('didInsertElement', function () {
         var openOnFocus = this.get('openOnFocus');
 
@@ -59,6 +67,37 @@ export default EmberSelectizeComponent.extend({
             this.sendAction('add-item', obj);
             this.sendAction('add-value', val);
         });
+    },
+
+    _onChange: function (args) {
+        const selection = Ember.get(this, 'selection'),
+              valuePath = Ember.get(this, '_valuePath');
+
+        if (!args || !selection || !Ember.isArray(selection) || args.length !== selection.length) {
+            return;
+        }
+
+        let hasNoChanges = selection.every(function (obj, idx) {
+            return Ember.get(obj, valuePath) === args[idx];
+        });
+
+        if (hasNoChanges) {
+            return;
+        }
+
+        let reorderedSelection = Ember.A([]);
+
+        args.forEach(function (value) {
+            const obj = selection.find(function (item) {
+                return (Ember.get(item, valuePath) + '') === value;
+            });
+
+            if (obj) {
+                reorderedSelection.addObject(obj);
+            }
+        });
+
+        this.set('selection', reorderedSelection);
     }
 
 });

core/client/app/templates/post-settings-menu.hbs

@@ -45,7 +45,8 @@
                     optionLabelPath="content.name"
                     openOnFocus=false
                     create-item="addTag"
-                    remove-item="removeTag"}}
+                    remove-item="removeTag"
+                    plugins="remove_button, drag_drop"}}
             </div>
 
             {{#unless session.user.isAuthor}}

core/client/tests/unit/components/gh-selectize-test.js

@@ -0,0 +1,39 @@
+/* jshint expr:true */
+import { expect } from 'chai';
+import {
+    describeComponent,
+    it
+} from 'ember-mocha';
+import Ember from 'ember';
+
+const {run} = Ember;
+
+describeComponent(
+    'gh-selectize',
+    'Unit: Component: gh-selectize',
+    {
+        // Specify the other units that are required for this test
+        // needs: ['component:foo', 'helper:bar'],
+        unit: true
+    },
+    function () {
+        it('re-orders selection when selectize order is changed', function () {
+            const component = this.subject();
+
+            run(() => {
+                component.set('content', Ember.A(['item 1', 'item 2', 'item 3']));
+                component.set('selection', Ember.A(['item 2', 'item 3']));
+                component.set('multiple', true);
+            });
+
+            this.render();
+
+            run(() => {
+                component._selectize.setValue(['item 3', 'item 2']);
+            });
+
+            expect(component.get('value'), 'component value').to.deep.equal(['item 3', 'item 2']);
+            expect(component.get('selection'), 'component selection').to.deep.equal(['item 3', 'item 2']);
+        });
+    }
+);