officejs_support_request_ui: post comments as HTML with editor

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_pt_form_view_discussable_html.html

@@ -28,11 +28,15 @@
         <p style="background-color:#0E81C2;color:white;margin:1em 0;padding:0.5em">Comments:</p>
         <ol id="post_list"></ol>
         <h3 class="ui-content-title ui-body-c ui-icon ui-icon-custom ui-icon-random" id="comment-title" name="comment-title">&nbsp;Post a comment</h3>
-        <textarea id="comment" name="comment" placeholder="Enter your comment here..."></textarea>
+        <div data-gadget-url="gadget_editor.html"
+             data-gadget-scope="editor"
+             data-gadget-sandbox="">
+        </div>
+
         <div id="file_upload_div">
           <input value="" name="attachment" id="attachment" type="file" title="Upload">
         </div>
-        <input data-theme="b" data-inline="true" type="submit" data-i18n="[value]Post Comment" value="Post Comment" data-icon="check" />
+        <input data-theme="b" data-inline="true" type="submit" data-i18n="[value]Post Comment" value="Post Comment" data-icon="check" disabled class="ui-disabled"/>
       </form>
     </div>
   </body>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_pt_form_view_discussable_html.xml

@@ -252,8 +252,8 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1506616673.69</float>
-                        <string>UTC</string>
+                        <float>1538885951.97</float>
+                        <string>GMT+9</string>
                       </tuple>
                     </state>
                   </object>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_pt_form_view_discussable_js.js

@@ -67,16 +67,24 @@
         });
     })
     .onStateChange(function () {
+      /** @type {GadgetInstance} */
       var gadget = this;
 
       // render the erp5 form
       return this.getDeclaredGadget("erp5_form")
-        .push(function (erp5_form) {
+        .push(function(erp5_form) {
+        return gadget.getDeclaredGadget("editor")
+          .push(function(editor) {
+          return [editor, erp5_form];
+        })
+      })
+        .push(function (gadgets) {
           var form_options = gadget.state.erp5_form,
             rendered_form = gadget.state.erp5_document._embedded._view,
             rendered_field,
-            key;
-
+            key,
+            editor=gadgets[0],
+            erp5_form=gadgets[1];
           // Remove all empty fields, and mark all others as non editable
           for (key in rendered_form) {
             if (rendered_form.hasOwnProperty(key) && (key[0] !== "_")) {
@@ -94,12 +102,32 @@
           form_options.form_definition = gadget.state.form_definition;
           form_options.view = gadget.state.view;
 
-          return erp5_form.render(form_options);
-        })
+
+          return gadget.jio_getAttachment(
+            'post_module',
+            gadget.hateoas_url + gadget.options.jio_key + "/Base_getEditorFieldPreferredTextEditor",
+            {format: "text"}
+          ).push(function(preferred_editor) {
+            return Promise.all([
+              erp5_form.render(form_options),
+              editor.render({
+                value: "",
+                key: "comment",
+                portal_type: "HTML Post",
+                editable: true,
+                editor: preferred_editor
+              })]).then(function (){
+                // make our submit button editable
+                var element = /** @type {HTMLInputElement} */(gadget.element.querySelector('input[type="submit"]'));
+                element.removeAttribute('disabled');
+                element.classList.remove('ui-disabled');
+              });
+            })
+          })
 
         // render the header
         .push(function () {
-          return RSVP.all([
+          return Promise.all([
             gadget.getUrlFor({command: 'change', options: {editable: true}}),
             gadget.getUrlFor({command: 'change', options: {page: "action"}}),
             gadget.getUrlFor({command: 'history_previous'}),
@@ -131,10 +159,9 @@
           );
         })
         .push(function (post_list) {
-          var i,  // XXX abbreviation
-            queue_list = [];
+          var queue_list = [];
           if (post_list.length) {
-            for (i = 0; i < post_list.length; i += 1) {
+            for (var i = 0; i < post_list.length; i += 1) {
               if (post_list[i][3] !== null && post_list[i][3].indexOf("image_module") !== -1) {
                 queue_list.push(gadget.getImageUrl(post_list[i][3]));
               } else if (post_list[i][3] !== null && post_list[i][3].indexOf("document_module") !== -1) {
@@ -187,9 +214,13 @@
       var gadget = this,
         submitButton = null,
         queue = null,
-        editor = gadget.element.querySelector('#comment');
-
-      if (editor.value === '') {
+         editor = null;
+      return gadget.getDeclaredGadget("editor")
+        .then(function(e) {
+          editor = e;
+          return e.getContent(); })
+        .then(function (content) {
+      if (content.comment === '') {
         return gadget.notifySubmitted({message: "Post content can not be empty!"});
       }
 
@@ -206,7 +237,7 @@
             data = new FormData();
           data.append("follow_up", gadget.options.jio_key);
           data.append("predecessor", '');
-          data.append("data", editor.value);
+          data.append("data", content.comment);
           data.append("file", file_blob);
           // XXX: Hack, call jIO.util.ajax directly to pass the file blob
           // Because the jio_putAttachment will call readBlobAsText, which
@@ -225,12 +256,16 @@
           return gadget.notifySubmitted({message: "Comment added", status: "success"});
         })
         .push(function () {
-          editor.value = '';
-          return gadget.redirect({command: 'reload'});
+          editor.changeState({value: ''})
+          .push(function (){
+            return gadget.redirect({command: 'reload'});
+          })
         });
       queue.then(enableSubmitButton, enableSubmitButton);
       return queue;
     })
+    }
+    )
     .onEvent('submit', function () {
       this.submitPostComment();
     });

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_pt_form_view_discussable_js.xml

@@ -252,8 +252,8 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1507898069.5</float>
-                        <string>UTC</string>
+                        <float>1538886067.22</float>
+                        <string>GMT+9</string>
                       </tuple>
                     </state>
                   </object>