handle unicode and tags better in tables and textareas.

README.md

@@ -561,7 +561,9 @@ parameter must be a string.
 - __getLines()__ - an array containing the content lines.
 - __getScreenLines()__ - an array containing the lines as they are displayed on
   the screen.
-- __textLength(text)__ - get a string's real length, taking into account tags.
+- __strWidth(text)__ - get a string's displayed width, taking into account
+  double-width, surrogate pairs, combining characters, tags, and SGR escape
+  codes.
 
 
 #### Box (from Element)

lib/widget.js

@@ -2434,6 +2434,8 @@ Element.prototype.parseContent = function(noTags) {
       content = content.replace(unicode.chars.combining, '');
       // no surrogate pairs: replace them with question-marks.
       content = content.replace(unicode.chars.surrogate, '?');
+      // XXX Deduplicate code here:
+      // content = helpers.dropUnicode(content);
     }
 
     if (!noTags) {
@@ -2462,14 +2464,6 @@ Element.prototype.parseContent = function(noTags) {
   return false;
 };
 
-Element.prototype.textLength = function(text) {
-  if (!this.parseTags) return text.length;
-  return text
-    .replace(/{(\/?)([\w\-,;!#]*)}/g, '')
-    .replace(/\x1b\[[\d;]*m/g, '')
-    .length;
-};
-
 // Convert `{red-fg}foo{/red-fg}` to `\x1b[31mfoo\x1b[39m`.
 Element.prototype._parseTags = function(text) {
   if (!this.parseTags) return text;
@@ -4630,6 +4624,15 @@ Element.prototype.getScreenLines = function() {
   return this._clines.slice();
 };
 
+Element.prototype.strWidth = function(text) {
+  text = this.parseTags
+    ? helpers.stripTags(text)
+    : text;
+  return this.screen.fullUnicode
+    ? unicode.strWidth(text)
+    : helpers.dropUnicode(text).length;
+};
+
 Element.prototype.screenshot = function(xi, xl, yi, yl) {
   xi = this.lpos.xi + this.ileft + (xi || 0);
   if (xl != null) {
@@ -5946,7 +5949,7 @@ Textarea.prototype._updateCursor = function(get) {
   line = Math.max(0, line);
 
   cy = lpos.yi + this.itop + line;
-  cx = lpos.xi + this.ileft + this._strWidth(last);
+  cx = lpos.xi + this.ileft + this.strWidth(last);
 
   // XXX Not sure, but this may still sometimes
   // cause problems when leaving editor.
@@ -5971,12 +5974,6 @@ Textarea.prototype._updateCursor = function(get) {
   }
 };
 
-Textarea.prototype._strWidth = function(str) {
-  return this.screen.fullUnicode
-    ? unicode.strWidth(str)
-    : str.length;
-};
-
 Textarea.prototype.input =
 Textarea.prototype.setInput =
 Textarea.prototype.readInput = function(callback) {
@@ -7620,7 +7617,7 @@ Table.prototype._calculateMaxes = function() {
 
   this.rows.forEach(function(row) {
     row.forEach(function(cell, i) {
-      var clen = self.textLength(cell);
+      var clen = self.strWidth(cell);
       if (!maxes[i] || maxes[i] < clen) {
         maxes[i] = clen;
       }
@@ -7674,7 +7671,7 @@ Table.prototype.setData = function(rows) {
     var isFooter = i === self.rows.length - 1;
     row.forEach(function(cell, i) {
       var width = self._maxes[i];
-      var clen = self.textLength(cell);
+      var clen = self.strWidth(cell);
 
       if (i !== 0) {
         text += ' ';
@@ -7970,7 +7967,7 @@ ListTable.prototype.setData = function(rows) {
     var text = '';
     row.forEach(function(cell, i) {
       var width = self._maxes[i];
-      var clen = self.textLength(cell);
+      var clen = self.strWidth(cell);
 
       if (i !== 0) {
         text += ' ';
@@ -9164,20 +9161,27 @@ helpers.parseTags = function(text) {
 
 helpers.generateTags = generateTags;
 
-helpers.textLength = function(text) {
-  return Element.prototype.textLength.call({ parseTags: true }, text);
-};
-
 helpers.attrToBinary = function(style, element) {
   return Element.prototype.sattr.call(element || {}, style);
 };
 
-helpers.cleanTags = function(text) {
-  if (!text) return text;
+helpers.stripTags = function(text) {
+  if (!text) return '';
   return text
     .replace(/{(\/?)([\w\-,;!#]*)}/g, '')
-    .replace(/\x1b\[[\d;]*m/g, '')
-    .trim();
+    .replace(/\x1b\[[\d;]*m/g, '');
+};
+
+helpers.cleanTags = function(text) {
+  return helpers.stripTags(text).trim();
+};
+
+helpers.dropUnicode = function(text) {
+  if (!text) return '';
+  return text
+    .replace(unicode.chars.all, '??')
+    .replace(unicode.chars.combining, '')
+    .replace(unicode.chars.surrogate, '?');
 };
 
 helpers.merge = merge;

test/widget-listtable.js

@@ -3,9 +3,13 @@ var blessed = require('../')
 
 screen = blessed.screen({
   dump: __dirname + '/logs/listtable.log',
-  autoPadding: false
+  autoPadding: false,
+  fullUnicode: true
 });
 
+var DU = '杜';
+var JUAN = '鹃';
+
 var table = blessed.listtable({
   parent: screen,
   top: 'center',
@@ -53,6 +57,7 @@ var data = [
 ];
 
 data[1][0] = '{red-fg}' + data[1][0] + '{/red-fg}';
+data[2][0] += ' (' + DU + JUAN + ')';
 
 table.setData(data);
 

test/widget-table.js

@@ -3,9 +3,13 @@ var blessed = require('../')
 
 screen = blessed.screen({
   dump: __dirname + '/logs/table.log',
-  autoPadding: false
+  autoPadding: false,
+  fullUnicode: true
 });
 
+var DU = '杜';
+var JUAN = '鹃';
+
 var table = blessed.table({
   parent: screen,
   top: 'center',
@@ -46,6 +50,7 @@ var data = [
 ];
 
 data[1][0] = '{red-fg}' + data[1][0] + '{/red-fg}';
+data[2][0] += ' (' + DU + JUAN + ')';
 
 table.setData(data);
 

test/widget-textarea.js

@@ -16,7 +16,8 @@ var box = blessed.textarea({
   height: 'half',
   width: 'half',
   top: 'center',
-  left: 'center'
+  left: 'center',
+  tags: true
 });
 
 screen.render();