Merge pull request #4272 from tgxworld/add_details_to_popup_menu

FEATURE: Add details to popup menu options.

app/assets/javascripts/discourse/components/composer-editor.js.es6

@@ -388,6 +388,9 @@ export default Ember.Component.extend({
         left = replyWidth - popupWidth - 40;
       }
 
+      const selected = toolbarEvent.selected;
+      toolbarEvent.selectText(selected.start, selected.end - selected.start);
+
       this.sendAction('showOptions', toolbarEvent,
         { position: "absolute", left, top });
     },

app/assets/javascripts/discourse/components/d-editor.js.es6

@@ -461,7 +461,7 @@ export default Ember.Component.extend({
 
         this.set('value', `${pre}${contents}${post}`);
         if (lines.length === 1 && tlen > 0) {
-          this._selectText(sel.start + hlen, contents.length - hlen - hlen);
+          this._selectText(sel.start + hlen, sel.value.length);
         } else {
           this._selectText(sel.start, contents.length);
         }
@@ -507,6 +507,7 @@ export default Ember.Component.extend({
       const selected = this._getSelected(button.trimLeading);
       const toolbarEvent = {
         selected,
+        selectText: (from, length) => this._selectText(from, length),
         applySurround: (head, tail, exampleKey) => this._applySurround(selected, head, tail, exampleKey),
         applyList: (head, exampleKey) => this._applyList(selected, head, exampleKey),
         addText: text => this._addText(selected, text),

app/assets/javascripts/discourse/controllers/composer.js.es6

@@ -62,19 +62,6 @@ export default Ember.Controller.extend({
   topic: null,
   linkLookup: null,
 
-  init() {
-    this._super();
-
-    addPopupMenuOptionsCallback(function() {
-      return {
-        action: 'toggleWhisper',
-        icon: 'eye-slash',
-        label: 'composer.toggle_whisper',
-        condition: "canWhisper"
-      };
-    });
-  },
-
   showToolbar: Em.computed({
     get(){
       const keyValueStore = this.container.lookup('key-value-store:main');
@@ -116,20 +103,35 @@ export default Ember.Controller.extend({
     return popupMenuOptions ? popupMenuOptions.some(option => option.condition) : false;
   },
 
+  _setupPopupMenuOption(callback) {
+    let option = callback();
+
+    if (option.condition) {
+      option.condition = this.get(option.condition);
+    } else {
+      option.condition = true;
+    }
+
+    return option;
+  },
+
   @computed("model.composeState")
   popupMenuOptions(composeState) {
     if (composeState === 'open') {
-      return _popupMenuOptionsCallbacks.map(callback => {
-        let option = callback();
+      let options = [];
 
-        if (option.condition) {
-          option.condition = this.get(option.condition);
-        } else {
-          option.condition = true;
-        }
+      options.push(this._setupPopupMenuOption(() => {
+        return {
+          action: 'toggleWhisper',
+          icon: 'eye-slash',
+          label: 'composer.toggle_whisper',
+          condition: "canWhisper"
+        };
+      }));
 
-        return option;
-      });
+      return options.concat(_popupMenuOptionsCallbacks.map(callback => {
+        return this._setupPopupMenuOption(callback);
+      }));
     }
   },
 

app/assets/javascripts/discourse/lib/plugin-api.js.es6

@@ -231,7 +231,7 @@ class PluginApi {
    * Example:
    *
    * ```
-   * api.addToolbarPopupMenuOptionsCallback(function() {
+   * api.addToolbarPopupMenuOptionsCallback(() => {
    *  return {
    *    action: 'toggleWhisper',
    *    icon: 'eye-slash',

plugins/discourse-details/assets/javascripts/initializers/apply-details.js.es6

@@ -1,11 +1,35 @@
 import { withPluginApi } from 'discourse/lib/plugin-api';
 
+function initializeDetails(api) {
+  api.decorateCooked($elem => $("details", $elem).details());
+
+  api.addToolbarPopupMenuOptionsCallback(() => {
+    return {
+      action: 'insertDetails',
+      icon: 'caret-right',
+      label: 'details.title'
+    };
+  });
+
+  const ComposerController = api.container.lookup("controller:composer");
+
+  ComposerController.reopen({
+    actions: {
+      insertDetails() {
+        this.get("toolbarEvent").applySurround(
+          "[details=",
+          `]${I18n.t("composer.details_text")}[/details]`,
+          "details_title")
+        ;
+      }
+    }
+  });
+}
+
 export default {
   name: "apply-details",
 
   initialize() {
-    withPluginApi('0.1', api => {
-      api.decorateCooked($elem => $("details", $elem).details());
-    });
+    withPluginApi('0.1', initializeDetails);
   }
 };

plugins/discourse-details/config/locales/client.en.yml

@@ -0,0 +1,8 @@
+en:
+  js:
+    details:
+      title: Insert Details
+    composer:
+      details_title: Summary
+      details_text: "This text will be hidden"
+

plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6

@@ -0,0 +1,96 @@
+import { acceptance } from "helpers/qunit-helpers";
+
+acceptance('composer', { loggedIn: true });
+
+function findTextarea() {
+  return find(".d-editor-input")[0];
+}
+
+test('details button', () => {
+  visit("/");
+
+  andThen(() => {
+    ok(exists('#create-topic'), 'the create button is visible');
+  });
+
+  click('#create-topic');
+  click('button.options');
+  click('.popup-menu .fa-caret-right');
+
+  andThen(() => {
+    equal(
+      find(".d-editor-input").val(),
+      `[details=${I18n.t("composer.details_title")}]${I18n.t("composer.details_text")}[/details]`,
+      'it should contain the right output'
+    );
+  });
+
+  fillIn('.d-editor-input', "This is my title");
+
+  andThen(() => {
+    const textarea = findTextarea();
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+  });
+
+  click('button.options');
+  click('.popup-menu .fa-caret-right');
+
+  andThen(() => {
+    equal(
+      find(".d-editor-input").val(),
+      `[details=This is my title]${I18n.t("composer.details_text")}[/details]`,
+      'it should contain the right output'
+    );
+
+    const textarea = findTextarea();
+    equal(textarea.selectionStart, 9, 'it should start highlighting at the right position');
+    equal(textarea.selectionEnd, 25, 'it should end highlighting at the right position');
+  });
+
+  fillIn('.d-editor-input', "Before some text in between After");
+
+  andThen(() => {
+    const textarea = findTextarea();
+    textarea.selectionStart = 7;
+    textarea.selectionEnd = 28;
+  });
+
+  click('button.options');
+  click('.popup-menu .fa-caret-right');
+
+  andThen(() => {
+    equal(
+      find(".d-editor-input").val(),
+      `Before [details=some text in between]${I18n.t("composer.details_text")}[/details] After`,
+      'it should contain the right output'
+    );
+
+    const textarea = findTextarea();
+    equal(textarea.selectionStart, 16, 'it should start highlighting at the right position');
+    equal(textarea.selectionEnd, 36, 'it should end highlighting at the right position');
+  });
+
+  fillIn('.d-editor-input', "Before\nsome text in between\nAfter");
+
+  andThen(() => {
+    const textarea = findTextarea();
+    textarea.selectionStart = 7;
+    textarea.selectionEnd = 28;
+  });
+
+  click('button.options');
+  click('.popup-menu .fa-caret-right');
+
+  andThen(() => {
+    equal(
+      find(".d-editor-input").val(),
+      `Before\n[details=some text in between]${I18n.t("composer.details_text")}[/details]\nAfter`,
+      'it should contain the right output'
+    );
+
+    const textarea = findTextarea();
+    equal(textarea.selectionStart, 16, 'it should start highlighting at the right position');
+    equal(textarea.selectionEnd, 36, 'it should end highlighting at the right position');
+  });
+});