Issues-483, Issues-484, Issues-535: Added validation of comment length on client side

Author: atelomycterus

TopcoderEditorPlugin.php

@@ -83,6 +83,8 @@ private function beforeRender($sender){
         $sender->addJsFile('topcodereditor.mathjax.js', 'plugins/TopcoderEditor', ['defer'=>'defer']);
         $c = Gdn::controller();
 
+        $sender->Form->addHidden('MaxCommentLength', c('Vanilla.Comment.MaxLength', 10000));
+
         // Set formats
         $c->addDefinition('defaultInputFormat', c('Garden.InputFormatter'));
         $c->addDefinition('defaultMobileInputFormat', c('Garden.MobileInputFormatter'));
@@ -115,11 +117,13 @@ private function beforeRender($sender){
         // Get max file uploads, to be used for max drops at once.
         $c->addDefinition('maxFileUploads', ini_get('max_file_uploads'));
 
+        // Max Comment Length
+        $c->addDefinition('maxCommentLength', c('Vanilla.Comment.MaxLength', 10000));
+
         // Set editor definitions
         $c->addDefinition('editorVersion', $this->pluginInfo['Version']);
         $c->addDefinition('editorInputFormat', ucfirst(self::FORMAT_NAME));
         $c->addDefinition('editorPluginAssets', $this->AssetPath);
-
         $additionalDefinitions = [];
         $this->EventArguments['definitions'] = &$additionalDefinitions;
         $this->fireEvent('GetJSDefinitions');

js/easymde.min.js

@@ -19359,26 +19359,27 @@ EasyMDE.prototype.createStatusbar = function (status) {
 
         // Ensure the defaultValue is a function
         if (typeof item.defaultValue === 'function') {
-            item.defaultValue(el);
+            item.defaultValue(el, this.codemirror);
         }
 
 
         // Ensure the onUpdate is a function
         if (typeof item.onUpdate === 'function') {
             // Create a closure around the span of the current action, then execute the onUpdate handler
-            this.codemirror.on('update', (function (el, item) {
+            // FIX: issues with status bar if there are several editors on a page
+            this.codemirror.on('update', (function (el, item, cm) {
                 return function () {
-                    item.onUpdate(el);
+                    item.onUpdate(el,cm);
                 };
-            }(el, item)));
+            }(el, item, this.codemirror)));
         }
         if (typeof item.onActivity === 'function') {
             // Create a closure around the span of the current action, then execute the onActivity handler
-            this.codemirror.on('cursorActivity', (function (el, item) {
+            this.codemirror.on('cursorActivity', (function (el, item, cm) {
                 return function () {
-                    item.onActivity(el);
+                    item.onActivity(el, cm);
                 };
-            }(el, item)));
+            }(el, item, this.codemirror)));
         }
 
 

js/topcodereditor.js

@@ -9,6 +9,7 @@
     /**
      * Determine editor settings
      */
+    var maxCommentLength = (gdn.definition('maxCommentLength'));
     var canUpload = (gdn.definition('canUpload', false)) ? 1 : 0;
     var maxUploadSize = gdn.definition('maxUploadSize');
     var allowedImageExtensions = gdn.definition('allowedImageExtensions');
@@ -525,7 +526,40 @@
                fileTooLarge: 'Uploading #image_name# was failed. The file is too big (#image_size#).\n' +
                  'Maximum file size is #image_max_size#.',
                importError: 'Uploading #image_name# was failed. Something went wrong when uploading the file.',
-             }
+             },
+            status: [{
+                className: 'message',
+                defaultValue: function(el) {
+                  el.innerHTML = '';
+                },
+                onUpdate: function(el) {
+                },
+              }
+              , 'upload-image', {
+              className: 'countOfRemainingChars',
+              defaultValue: function(el, cm) {
+                var countOfRemainingChars = maxCommentLength;
+                var text = cm.getValue();
+                if(text != null && text.length > 0) {
+                  countOfRemainingChars = maxCommentLength - text.length;
+                  if(countOfRemainingChars < 0) {
+                    countOfRemainingChars  = 0;
+                  }
+                }
+                el.innerHTML = countOfRemainingChars +" character remaining";
+              },
+              onUpdate: function(el, cm) {
+                var countOfRemainingChars = maxCommentLength;
+                var text = cm.getValue();
+                if(text != null && text.length > 0) {
+                  countOfRemainingChars = maxCommentLength - text.length;
+                  if(countOfRemainingChars < 0) {
+                    countOfRemainingChars  = 0;
+                  }
+                }
+                el.innerHTML = countOfRemainingChars +" character remaining";
+              },
+            }],
           });
 
           // forceSync = true, need to clear form after async requests
@@ -534,6 +568,24 @@
           });
 
           editor.codemirror.on('change', function (cm, event) {
+            var frm = $(cm.getInputField()).closest('form').first();
+            var editorContainer = $(frm).find('.EasyMDEContainer');
+            var messageContainer = $(frm).find('.editor-statusbar .message');
+
+            var text = cm.getValue();
+            if(text.length > 0 && text.length <= maxCommentLength) {
+              $(editorContainer).removeClass('error');
+              $(messageContainer).text('');
+              $(frm).find(':submit').removeAttr("disabled");
+              $(frm).find('.Buttons a.Button').removeClass('Disabled');
+            } else if(text.length > maxCommentLength) {
+              $(editorContainer).addClass('error');
+              var count = text.length - maxCommentLength;
+              $(messageContainer).text('Comment is '+ count + ' characters too long');
+              $(frm).find(':submit').attr('disabled', 'disabled');
+              $(frm).find('.Buttons a.Button:not(.Cancel)').addClass('Disabled');
+            }
+
             // Key events don't work properly on Android Chrome
             if (!cm.state.completionActive /*Enables keyboard navigation in autocomplete list*/) {
                 if (event.origin == '+input' && event.text && event.text.length > 0 && event.text[0] === '@') {