Add setting to display underscores as spaces in tags

client/js/controls/post_readonly_sidebar_control.js

@@ -4,6 +4,7 @@ const api = require('../api.js');
 const events = require('../events.js');
 const views = require('../util/views.js');
 const uri = require('../util/uri.js');
+const misc = require('../util/misc.js');
 
 const template = views.getTemplate('post-readonly-sidebar');
 const scoreTemplate = views.getTemplate('score');
@@ -26,6 +27,7 @@ class PostReadonlySidebarControl extends events.EventTarget {
             canEditPosts: api.hasPrivilege('posts:edit'),
             canViewTags: api.hasPrivilege('tags:view'),
             escapeColons: uri.escapeColons,
+            getPrettyTagName: misc.getPrettyTagName,
         }));
 
         this._installFav();

client/js/models/settings.js

@@ -16,6 +16,7 @@ const defaultSettings = {
     tagSuggestions: true,
     autoplayVideos: false,
     postsPerPage: 42,
+    tagUnderscoresAsSpaces: false,
 };
 
 class Settings extends events.EventTarget {

client/js/util/misc.js

@@ -2,6 +2,9 @@
 
 const markdown = require('./markdown.js');
 const uri = require('./uri.js');
+const settings = require('../models/settings.js');
+
+const tagUnderscoresAsSpaces = settings.get().tagUnderscoresAsSpaces;
 
 function decamelize(str, sep) {
     sep = sep === undefined ? '-' : sep;
@@ -197,6 +200,13 @@ function dataURItoBlob(dataURI) {
     return new Blob([data], {type: mimeString});
 }
 
+function getPrettyTagName(tag) {
+    if (tagUnderscoresAsSpaces) {
+        return tag.replace(/_/g, " ");
+    }
+    return tag;
+}
+
 module.exports = {
     range:                   range,
     formatRelativeTime:      formatRelativeTime,
@@ -214,4 +224,5 @@ module.exports = {
     decamelize:              decamelize,
     escapeSearchTerm:        escapeSearchTerm,
     dataURItoBlob:           dataURItoBlob,
+    getPrettyTagName:        getPrettyTagName,
 };

client/js/util/views.js

@@ -200,7 +200,7 @@ function makePostLink(id, includeHash) {
 
 function makeTagLink(name, includeHash, includeCount, tag) {
     const category = tag ? tag.category : 'unknown';
-    let text = name;
+    let text = misc.getPrettyTagName(name);
     if (includeHash === true) {
         text = '#' + text;
     }

client/js/views/settings_view.js

@@ -37,6 +37,7 @@ class SettingsView extends events.EventTarget {
                 tagSuggestions: this._find('tag-suggestions').checked,
                 autoplayVideos: this._find('autoplay-videos').checked,
                 postsPerPage: this._find('posts-per-page').value,
+                tagUnderscoresAsSpaces: this._find('tag-underscores-as-spaces').checked,
             },
         }));
     }

client/js/views/tag_view.js

@@ -2,6 +2,7 @@
 
 const events = require('../events.js');
 const views = require('../util/views.js');
+const misc = require('../util/misc.js');
 const TagSummaryView = require('./tag_summary_view.js');
 const TagEditView = require('./tag_edit_view.js');
 const TagMergeView = require('./tag_merge_view.js');
@@ -17,6 +18,7 @@ class TagView extends events.EventTarget {
         this._ctx = ctx;
         ctx.tag.addEventListener('change', e => this._evtChange(e));
         ctx.section = ctx.section || 'summary';
+        ctx.getPrettyTagName = misc.getPrettyTagName;
 
         this._hostNode = document.getElementById('content-holder');
         this._install();