Append whitespace after `<kbd>`

It behaves exactly like any other inline format (e.g. bold or italic),
but people expect it to behave more like a block element. Meh.

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabInlineCode.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabInlineCode.js
index a60646f477437ecc103a7831356566096880dc42..ad383b8fc3e0974c607035820fd3bf351dcec39e 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabInlineCode.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabInlineCode.js
@@ -6,12 +6,35 @@ $.Redactor.prototype.WoltLabInlineCode = function() {
                        this.opts.activeButtonsStates.kbd = 'tt';
                        
                        require(['EventHandler'], (function (EventHandler) {
-                               EventHandler.add('com.woltlab.wcf.redactor2', 'bbcode_tt_' + this.$element[0].id, (function(data) {
-                                       data.cancel = true;
-                                       
-                                       this.button.toggle({}, 'kbd', 'func', 'inline.format');
-                               }).bind(this));
+                               EventHandler.add('com.woltlab.wcf.redactor2', 'bbcode_tt_' + this.$element[0].id, this.WoltLabInlineCode._toggle.bind(this));
                        }).bind(this));
+               },
+               
+               _toggle: function (data) {
+                       data.cancel = true;
+                       
+                       this.button.toggle({}, 'kbd', 'func', 'inline.format');
+                       
+                       var node = window.getSelection().anchorNode;
+                       if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+                       
+                       if (node.nodeName === 'KBD') {
+                               var nextSibling = node.nextSibling;
+                               while (nextSibling) {
+                                       if (nextSibling.nodeType !== Node.TEXT_NODE || nextSibling.textContent.length) {
+                                               return;
+                                       }
+                                       
+                                       nextSibling = nextSibling.nextSibling;
+                               }
+                               
+                               if (nextSibling) {
+                                       nextSibling.textContent = '\u200B';
+                               }
+                               else {
+                                       node.parentNode.appendChild(document.createTextNode('\u200B'));
+                               }
+                       }
                }
        };
 };