show available characters warning on input

web/app/common/constants.js

@@ -3,7 +3,8 @@ const API_BASE = '/api/v1';
 const NODE_ID = 'remark42';
 const COUNTER_NODE_CLASSNAME = 'remark42__counter';
 const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
-const LAST_COMMENTS_DEFAULT_MAX = 15;
+const DEFAULT_LAST_COMMENTS_MAX = 15;
+const DEFAULT_MAX_COMMENT_SIZE = 1000;
 
 module.exports = {
   BASE_URL,
@@ -11,5 +12,6 @@ module.exports = {
   NODE_ID,
   COUNTER_NODE_CLASSNAME,
   LAST_COMMENTS_NODE_CLASSNAME,
-  LAST_COMMENTS_DEFAULT_MAX,
+  DEFAULT_LAST_COMMENTS_MAX,
+  DEFAULT_MAX_COMMENT_SIZE,
 };

web/app/components/input/__counter/input__counter.scss

@@ -0,0 +1,8 @@
+.input__counter {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #ef0000;
+}

web/app/components/input/__field-wrapper/input__field-wrapper.scss

@@ -0,0 +1,3 @@
+.input__field-wrapper {
+  position: relative;
+}

web/app/components/input/index.js

@@ -9,6 +9,8 @@ require('./__button/_type/_preview/input__button_type_preview.scss');
 require('./__button/_type/_send/input__button_type_send.scss');
 
 require('./__buttons/input__buttons.scss');
+require('./__counter/input__counter.scss');
 require('./__error/input__error.scss');
 require('./__field/input__field.scss');
+require('./__field-wrapper/input__field-wrapper.scss');
 require('./__preview/input__preview.scss');

web/app/components/input/input.jsx

@@ -1,14 +1,21 @@
 import { h, Component } from 'preact';
 
+import { DEFAULT_MAX_COMMENT_SIZE } from 'common/constants';
+
 import api from 'common/api';
+import store from 'common/store';
 
 export default class Input extends Component {
   constructor(props) {
     super(props);
 
+    const config = store.get('config') || {};
+
     this.state = {
       preview: null,
       isErrorShown: false,
+      maxLength: config.max_comment_size || DEFAULT_MAX_COMMENT_SIZE,
+      commentLength: 0,
     };
 
     this.send = this.send.bind(this);
@@ -23,6 +30,10 @@ export default class Input extends Component {
     }
 
     this.fieldNode.value = '';
+
+    store.onUpdate('config', config => {
+      this.setState({ maxLength: config && config.max_comment_size || DEFAULT_MAX_COMMENT_SIZE });
+    });
   }
 
   onKeyDown(e) {
@@ -43,6 +54,7 @@ export default class Input extends Component {
     this.setState({
       preview: null,
       isErrorShown: false,
+      commentLength: this.fieldNode.value.length,
     });
   }
 
@@ -92,20 +104,29 @@ export default class Input extends Component {
       });
   }
 
-  render(props, { isFieldDisabled, isErrorShown, preview }) {
+  render(props, { isFieldDisabled, isErrorShown, preview, maxLength, commentLength }) {
+    const charactersLeft = maxLength - commentLength;
+
     return (
       <form className={b('input', props)} onSubmit={this.send}>
-        <textarea
-          className="input__field"
-          placeholder="Your comment here"
-          onInput={this.onInput}
-          onKeyDown={this.onKeyDown}
-          ref={r => (this.fieldNode = r)}
-          required
-          disabled={isFieldDisabled}
-        >
-          {props.children}
-        </textarea>
+        <div className="input__field-wrapper">
+          <textarea
+            className="input__field"
+            placeholder="Your comment here"
+            maxLength={maxLength}
+            onInput={this.onInput}
+            onKeyDown={this.onKeyDown}
+            ref={r => (this.fieldNode = r)}
+            required
+            disabled={isFieldDisabled}
+          />
+
+          {
+            (charactersLeft < 100) && (
+              <span className="input__counter">{charactersLeft}</span>
+            )
+          }
+        </div>
 
         {
           isErrorShown && <p className="input__error">Something went wrong. Please try again a bit later.</p>

web/app/last-comments.js

@@ -1,6 +1,6 @@
 import { h, render } from 'preact';
 
-import { BASE_URL, LAST_COMMENTS_DEFAULT_MAX, LAST_COMMENTS_NODE_CLASSNAME } from './common/constants'
+import { BASE_URL, DEFAULT_LAST_COMMENTS_MAX, LAST_COMMENTS_NODE_CLASSNAME } from './common/constants'
 
 import api from 'common/api';
 
@@ -38,7 +38,7 @@ function init() {
   (document.head || document.body).appendChild(styles);
 
   [].slice.call(nodes).forEach(node => {
-    const max = node.dataset.max || remark_config.max_last_comments || LAST_COMMENTS_DEFAULT_MAX;
+    const max = node.dataset.max || remark_config.max_last_comments || DEFAULT_LAST_COMMENTS_MAX;
     api.last({ max, siteId: remark_config.site_id })
       .then(comments => {
         try {