Improve special char and emoji handling in tables

assets/editor/tables.js

@@ -6,22 +6,34 @@ window.EditorTables = (function () {
         return s;
     }
 
+    var segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+
+    // Graphemes rendered two columns wide: emoji-presentation characters, anything
+    // forced to emoji presentation via VS16, and East Asian wide/fullwidth ranges.
+    var WIDE = /\p{Emoji_Presentation}|️|[ᄀ-ᅟ⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/u;
+    var ZERO = /^[\p{Mn}\p{Me}\p{Cf}]+$/u;
+
+    function displayWidth(s) {
+        var w = 0;
+        Array.from(segmenter.segment(s), function (seg) {
+            var g = seg.segment;
+            if (!ZERO.test(g)) w += WIDE.test(g) ? 2 : 1;
+        });
+        return w;
+    }
+
     function padLeft(s, w) {
-        while (s.length < w) s = ' ' + s;
-        return s;
+        return repeat(' ', w - displayWidth(s)) + s;
     }
 
     function padRight(s, w) {
-        while (s.length < w) s += ' ';
-        return s;
+        return s + repeat(' ', w - displayWidth(s));
     }
 
     function padCenter(s, w) {
-        while (s.length < w) {
-            s = s + ' ';
-            if (s.length < w) s = ' ' + s;
-        }
-        return s;
+        var total = w - displayWidth(s);
+        var left = Math.floor(total / 2);
+        return repeat(' ', left) + s + repeat(' ', total - left);
     }
 
     function parseTableRow(line) {
@@ -101,7 +113,8 @@ window.EditorTables = (function () {
             var max = 3;
             for (var r = 0; r < rows.length; r++) {
                 if (r === sepIndex) continue;
-                if (rows[r][c].length > max) max = rows[r][c].length;
+                var len = displayWidth(rows[r][c]);
+                if (len > max) max = len;
             }
             widths.push(max);
         }

assets/page/main.html

@@ -17,6 +17,9 @@
 {{if .SpecialContent}}
 <div class="content">{{.SpecialContent}}</div>
 {{end}}
+{{if not (or .Content .SpecialContent)}}
+<p class="empty">{{if .Entries}}No page{{else}}Empty folder{{end}} — <a href="?edit">[CREATE]</a></p>
+{{end}}
 {{if .Entries}}
 <h2 id="files">Files <button class="btn btn-small" data-companion-reveal hidden title="Open folder in file manager">open</button>{{if .CanEdit}} <button class="btn btn-small" id="view-settings-btn" onclick="openViewSettings()" title="View &amp; sorting" data-view="{{.View}}" data-sort="{{.Sort}}" data-order="{{.Order}}">view</button>{{end}}</h2>
 {{if eq .View "thumbnail"}}
@@ -42,10 +45,6 @@
 </table>
 {{end}}
 {{if .CanEdit}}<script src="/_/page/view-settings.js"></script>{{end}}
-{{else if not .Content}}
-{{if not .SpecialContent}}
-<p class="empty">Empty folder — <a href="?edit">[CREATE]</a></p>
-{{end}}
 {{end}}
 {{if or .Content .SpecialContent}}
 <script src="/_/page/content.js"></script>