Allow limiting comment length by characters rather than bytes in JS
authorBartosz Dziewoński <matma.rex@gmail.com>
Thu, 8 Feb 2018 21:22:34 +0000 (22:22 +0100)
committerJforrester <jforrester@wikimedia.org>
Fri, 23 Feb 2018 22:12:29 +0000 (22:12 +0000)
commit5c7b0addd5fb37fc53b0971ed22bf84487f95733
tree7873d36e2aacbf3b8840e2a4f65e4bf03d1c6fbb
parent7ade88a8b53608ed4e82dcb834062ef69bcc5f20
Allow limiting comment length by characters rather than bytes in JS

For unfortunate historical reasons, browsers' native maxlength counts
the number of UTF-16 code units rather than Unicode codepoints [1],
which means that codepoints outside the Basic Multilingual Plane
(e.g. many emojis) count as 2 characters each. That could be good
enough, but we want our software to be excellent rather than merely
good enough.

1. Introduce a few new functions, added to the existing modules:
   * mediawiki.String:
     * codePointLength() counts the length of a string in Unicode
       codepoints (characters).
     * trimCodePointLength() trims a string to the desired length in
       Unicode codepoints (characters).
   * jquery.lengthLimit:
     * $.fn.codePointLimit() enforces the specified maximum length in
       codepoints of an input field.
   * mediawiki.widgets.visibleLengthLimit:
     * mw.widgets.visibleCodePointLimit() enforces the maximum length
       in codepoints of an OOUI widget and displays the remaining
       length in an inline label.

2. Add client-side mw.config variables:
   * wgCommentByteLimit for the old byte limit, equal to 255.
   * wgCommentCodePointLimit for the new codepoint limit, equal to 1000.

   Only one of them may be set, depending on which limit should be applied.

3. Make use of both of these new features. For the sake of an example,
   I updated the forms shown on action=edit (using visibleCodePointLimit)
   and on action=protect (using codePointLimit). Many remain to be updated.

[1] https://www.w3.org/TR/html5/sec-forms.html#limiting-user-input-length-the-maxlength-attribute

Bug: T185948
Change-Id: Ia1269fd898dabbcf1582618eab46cef97e10a3b1
includes/EditPage.php
includes/ProtectionForm.php
includes/resourceloader/ResourceLoaderStartUpModule.php
resources/src/jquery/jquery.lengthLimit.js
resources/src/mediawiki.action/mediawiki.action.edit.js
resources/src/mediawiki.legacy/protect.js
resources/src/mediawiki.widgets.visibleLengthLimit/mediawiki.widgets.visibleLengthLimit.js
resources/src/mediawiki/mediawiki.String.js